Merge branch 'master' into feat/ScrollArea

Signed-off-by: atomiks <[email protected]>

.browserslistrc

@@ -43,16 +43,16 @@ samsung 22
 # snapshot of `npx browserslist "maintained node versions"`
 # On update check all #stable-snapshot markers
 [node]
-node 18.0
+node 14.0
 
 # same as `node`
 [coverage]
-node 18.0
+node 14.0
 
 # same as `node`
 [development]
-node 18.0
+node 14.0
 
 # same as `node`
 [test]
-node 18.0
+node 14.0

.circleci/config.yml

@@ -288,7 +288,7 @@ jobs:
     <<: *default-job
     resource_class: 'medium+'
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:
@@ -317,7 +317,7 @@ jobs:
   test_profile:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:
@@ -343,7 +343,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:
@@ -358,7 +358,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:

.gitignore

@@ -14,7 +14,8 @@
 /coverage
 /docs/.env.local
 /docs/export
-/docs/pages/playground/
+/docs/app/playground/*
+!/docs/app/playground/\[slug\]
 /docs/public/feed/
 /examples/**/.cache
 /test/bundling/fixtures/*/yarn.lock

CHANGELOG.md

@@ -1,5 +1,83 @@
 # Versions
 
+## v1.0.0-alpha.3
+
+_Oct 7, 2024_
+
+A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ⭐ We added several new components: CheckboxGroup, RadioGroup, Form, Separator
+- ⭐ Menu has new parts: CheckboxItem, RadioItem, and Group
+
+### `@base_ui/[email protected]`
+
+- [AlertDialog] Move types to namespaces (#591) @michaldudak
+- [Checkbox] Modernize implementation (#594) @atomiks
+- [CheckboxGroup] Implement components and hooks (#458) @atomiks
+- [Collapsible] Add Collapsible components and hooks (#481) @mj12albert
+- [Dialog] Move types to namespaces (#697) @michaldudak
+- [Dialog][Collapsible] Fix style prop merging (#641) @michaldudak
+- [Form] Create new `Form` component (#589) @atomiks
+- [Menu] CheckboxItem component (#533) @michaldudak
+- [Menu] Do not select an item when space is pressed during typeahead (#542) @michaldudak
+- [Menu] Fix custom anchor positioning (#609) @michaldudak
+- [Menu] Group and Separator components (#535) @michaldudak
+- [Menu] Increase test timeout (#592) @michaldudak
+- [Menu] RadioItem component (#534) @michaldudak
+- [Menu] Remove the unused prop (#647) @michaldudak
+- [Menu] Remove wrong default value from docs (#549) @sai6855
+- [Menu][Popover][PreviewCard][Tooltip] Add default value as `clippingAncestors` to collisionBoundary prop (#580) @sai6855
+- [NumberField] Modernize implementation (#590) @atomiks
+- [Popover] Modernize implementation (#607) @atomiks
+- [PreviewCard] Modernize implementation (#626) @atomiks
+- [RadioGroup] Create new `RadioGroup` component (#487) @atomiks
+- [Slider] Fix Home / End regression (#526) @sai6855
+- [Tooltip] Modernize implementation (#606) @atomiks
+- [useButton] Modernize implementation (#643) @michaldudak
+- [useScrollLock] Avoid scrollbar layout shift issues (#604) @atomiks
+
+### Docs
+
+- [docs] Fix 301 redirections in docs @oliviertassinari
+- [docs] Make the readme specific to @base_ui/react (#633) @michaldudak
+- [docs] Copy vale-action.yml from main repo @oliviertassinari
+- [docs] Fix 301 to chromium (#636) @oliviertassinari
+- [docs] Avoid dead links in demos (#610) @oliviertassinari
+- [docs] Fix rel attribute on edit GitHub links (#614) @oliviertassinari
+- [docs] Fix pnpm docs:link-check script (#552) @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix outdated link to support page @oliviertassinari
+- [docs] Clarify contribution guide references @oliviertassinari
+
+### Core
+
+- [code-infra] Remove custom playwright installation steps (#646) @Janpot
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix package.json repository rule @oliviertassinari
+- [core] MUI X repository moved to a new location @oliviertassinari
+- [core] React 19 compatibility (#605) @michaldudak
+- [core] Reference `ownerDocument` (#660) @atomiks
+- [core] Remove 'use client' from index files (#331) @michaldudak
+- [core] Remove /.yarn (#596) @oliviertassinari
+- [core] Remove Material UI dependency (#585) @michaldudak
+- [core] Remove the legacy components from the repo (#584) @michaldudak
+- [core] Rename positionStrategy to positionMethod (#704) @michaldudak
+- [docs-infra] Fix double // (#613) @oliviertassinari
+- [docs-infra] Strengthen CSP (#595) @oliviertassinari
+- [infra] Adds reusable workflow for closing message on issues (#598) @michelengelen
+- [infra] Adds reusable workflow for issue cleanup (#597) @michelengelen
+- [infra] Fix line break in Stack Overflow message @oliviertassinari
+- [test] Fix tests on Safari (#546) @michaldudak
+- [test] Fix the test_types_next CI job (#703) @michaldudak
+- [test] Improve visual screenshot canva (#708)
+- [test] Point Istanbul to correct URL (#657) @sai6855
+- [test] Run Browserstack tests on master only (#578) @michaldudak
+- [test] Use `waitFor` instead of fixed timeout in tests (#632) @michaldudak
+- [website] Improve utm_source strategy @oliviertassinari
+- [website] Modernize the Base UI website (#538) @michaldudak
+
+All contributors of this release in alphabetical order: @atomiks, @Janpot, @michaldudak, @michelengelen, @mj12albert, @oliviertassinari, @sai6855
+
 ## v1.0.0-alpha.2
 
 _Aug 19, 2024_

docs/app/DocsProviders.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { DemoVariantSelectorProvider } from 'docs-base/src/components/demo/DemoVariantSelectorProvider';
 import { PackageManagerSnippetProvider } from 'docs-base/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
 

docs/app/experiments/collapsible-accordion.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const TRANSITION_DURATION = '350ms';
 

docs/app/experiments/collapsible-framer.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { motion } from 'framer-motion';
 
 export default function CollapsibleFramer() {

docs/app/experiments/collapsible-hidden-until-found.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 

docs/app/experiments/collapsible.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 

docs/app/experiments/dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 // eslint-disable-next-line no-restricted-imports
 import { useTransitionStatus } from '@base_ui/react/utils/useTransitionStatus';
 import { animated as springAnimated, useSpring, useSpringRef } from '@react-spring/web';

docs/app/experiments/menu-anchor-el.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const [anchorEl, setAnchor] = React.useState<HTMLDivElement | null>(null);

docs/app/experiments/menu-anchor-ref.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const anchor = React.useRef<HTMLDivElement>(null);

docs/app/experiments/progress.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 const VAL1 = 33;
 

docs/app/experiments/slider-change-committed-lag.tsx

@@ -2,7 +2,7 @@
 // https://github.com/mui/material-ui/issues/41739
 // to cross check whether this issue would still occur in the new API
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {

docs/app/experiments/slider-marks.tsx

@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 const STOPS = [
   {
@@ -33,7 +32,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = useSliderContext();
+  const { direction, values } = Slider.useSliderContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (

docs/app/experiments/slider-template.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {

docs/app/experiments/slider-tooltip.tsx

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Slider } from '@base_ui/react/Slider';
+import { Tooltip } from '@base_ui/react/Tooltip';
 
 function useIsDarkMode() {
   const theme = useTheme();

docs/app/experiments/slider.tsx

@@ -1,8 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function App() {
   const [val1, setVal1] = React.useState(50);
@@ -233,7 +232,7 @@ function Label(props: any) {
   const defaultId = React.useId();
   const labelId = idProp ?? defaultId;
 
-  const { subitems } = useSliderContext();
+  const { subitems } = Slider.useSliderContext();
 
   const htmlFor = Array.from(subitems.values())
     .reduce((acc, item) => {

docs/app/experiments/tabs.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   const [v, sv] = React.useState<string | number | null>(0);

docs/app/experiments/tooltip.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled, keyframes } from '@mui/system';
 import { motion, AnimatePresence } from 'framer-motion';
 

docs/app/not-found.tsx

@@ -1,5 +1,18 @@
 import * as React from 'react';
 
+import { AppBar } from 'docs-base/src/components/AppBar';
+import { Navigation } from 'docs-base/src/components/Navigation';
+import routes from 'docs-base/data/pages';
+import classes from './(content)/styles.module.css';
+
 export default function NotFound() {
-  return <h1>Page not found</h1>;
+  return (
+    <React.Fragment>
+      <AppBar />
+      <Navigation routes={routes} />
+      <main className={classes.content}>
+        <h1>Page not found</h1>
+      </main>
+    </React.Fragment>
+  );
 }

docs/app/playground/[slug]/page.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { type Dirent } from 'node:fs';
+import { basename, extname } from 'node:path';
+import { readdir } from 'node:fs/promises';
+
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+const DUMMY_SLUG = '_';
+
+export default async function Page(props: Props) {
+  const {
+    params: { slug },
+  } = props;
+
+  if (slug === DUMMY_SLUG) {
+    notFound();
+  }
+
+  try {
+    const Playground = (await import(`../${slug}.tsx`)).default;
+    return <Playground />;
+  } catch (error) {
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  const routes = (await readdir('app/playground', { withFileTypes: true }))
+    .filter(
+      (entry: Dirent) => entry.name.endsWith('.tsx') && entry.name !== 'page.tsx' && entry.isFile(),
+    )
+    .map((entry: Dirent) => ({ slug: basename(entry.name, extname(entry.name)) }));
+
+  if (routes.length === 0) {
+    return [{ slug: DUMMY_SLUG }];
+  }
+
+  return routes;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params;
+
+  return {
+    title: `${slug} - Playground`,
+  };
+}

docs/data/api/alert-dialog-backdrop.json

@@ -6,7 +6,7 @@
   },
   "name": "AlertDialogBackdrop",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,