Merge remote-tracking branch 'upstream/master' into feat/Select

atomiks · Oct 20, 2024 · 261f40b · 261f40b
2 parents 3ed69fc + 342cb97
commit 261f40b
Show file tree

Hide file tree

Showing 363 changed files with 1,884 additions and 2,677 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -6,6 +6,6 @@
   "publishDirectory": {
     "@base_ui/react": "packages/mui-base/build"
   },
-  "sandboxes": ["/examples/base-ui-cra-ts"],
+  "sandboxes": ["/.codesandbox/template"],
   "silent": true
 }
diff --git a/examples/base-ui-cra-ts/README.md → .codesandbox/template/README.md b/examples/base-ui-cra-ts/README.md → .codesandbox/template/README.md
diff --git a/examples/base-ui-cra-ts/package.json → .codesandbox/template/package.json b/examples/base-ui-cra-ts/package.json → .codesandbox/template/package.json
diff --git a/examples/base-ui-cra-ts/public/favicon.ico → .codesandbox/template/public/favicon.ico b/examples/base-ui-cra-ts/public/favicon.ico → .codesandbox/template/public/favicon.ico
diff --git a/examples/base-ui-cra-ts/public/index.html → .codesandbox/template/public/index.html b/examples/base-ui-cra-ts/public/index.html → .codesandbox/template/public/index.html
diff --git a/examples/base-ui-cra-ts/src/App.tsx → .codesandbox/template/src/App.tsx b/examples/base-ui-cra-ts/src/App.tsx → .codesandbox/template/src/App.tsx
diff --git a/examples/base-ui-cra-ts/src/index.css → .codesandbox/template/src/index.css b/examples/base-ui-cra-ts/src/index.css → .codesandbox/template/src/index.css
diff --git a/examples/base-ui-cra-ts/src/index.tsx → .codesandbox/template/src/index.tsx b/examples/base-ui-cra-ts/src/index.tsx → .codesandbox/template/src/index.tsx
diff --git a/...les/base-ui-cra-ts/src/react-app-env.d.ts → .codesandbox/template/src/react-app-env.d.ts b/...les/base-ui-cra-ts/src/react-app-env.d.ts → .codesandbox/template/src/react-app-env.d.ts
diff --git a/examples/base-ui-cra-ts/tsconfig.json → .codesandbox/template/tsconfig.json b/examples/base-ui-cra-ts/tsconfig.json → .codesandbox/template/tsconfig.json
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1,5 +1,4 @@
 * @atomiks @michaldudak
 /docs/data/ @atomiks @colmtuite @michaldudak
-/examples/ @atomiks @colmtuite @michaldudak
 /packages/mui-base/ @atomiks @colmtuite @michaldudak
 /scripts/ @michaldudak
diff --git a/.gitignore b/.gitignore
@@ -17,7 +17,6 @@
 /docs/app/playground/*
 !/docs/app/playground/\[slug\]
 /docs/public/feed/
-/examples/**/.cache
 /test/bundling/fixtures/*/yarn.lock
 /test/bundling/fixtures/*/pnpm-lock.yaml
 # created by test/bundling/scripts/createFixture

diff --git a/babel.config.js b/babel.config.js
@@ -17,8 +17,7 @@ module.exports = function getBabelConfig(api) {
 
   const defaultAlias = {
     '@base_ui/react': resolveAliasPath('./packages/mui-base/src'),
-    docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
-    'docs-base': resolveAliasPath('./docs'),
+    docs: resolveAliasPath('./docs'),
     test: resolveAliasPath('./test'),
     '@mui-internal/api-docs-builder': resolveAliasPath(
       './node_modules/@mui/monorepo/packages/api-docs-builder',

diff --git a/docs/data/api/popover-root.json b/docs/data/api/popover-root.json
@@ -4,10 +4,6 @@
     "closeDelay": { "type": { "name": "number" }, "default": "0" },
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "delay": { "type": { "name": "number" }, "default": "300" },
-    "delayType": {
-      "type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
-      "default": "'rest'"
-    },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" },
     "openOnHover": { "type": { "name": "bool" }, "default": "false" }

diff --git a/docs/data/api/preview-card-root.json b/docs/data/api/preview-card-root.json
@@ -4,10 +4,6 @@
     "closeDelay": { "type": { "name": "number" }, "default": "300" },
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "delay": { "type": { "name": "number" }, "default": "600" },
-    "delayType": {
-      "type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
-      "default": "'rest'"
-    },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" }
   },

diff --git a/docs/data/api/tooltip-root.json b/docs/data/api/tooltip-root.json
@@ -4,10 +4,6 @@
     "closeDelay": { "type": { "name": "number" }, "default": "0" },
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "delay": { "type": { "name": "number" }, "default": "600" },
-    "delayType": {
-      "type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
-      "default": "'rest'"
-    },
     "hoverable": { "type": { "name": "bool" }, "default": "true" },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" },

diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
@@ -51,7 +51,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 
-  &[data-state='open'] {
+  &[data-open] {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
     transition-timing-function: ease-out;
@@ -75,7 +75,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
@@ -51,7 +51,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 
-  &[data-state='open'] {
+  &[data-open] {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
     transition-timing-function: ease-out;
@@ -75,7 +75,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.js b/docs/data/components/alert-dialog/NestedAlertDialogs.js
@@ -72,7 +72,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
     opacity var(--transition-duration) ease-in,
     visibility var(--transition-duration) step-end;
 
-  &[data-state='open'] {
+  &[data-open] {
     @starting-style {
       & {
         transform: translate(-50%, -35%) scale(0.8) translateY(0);
@@ -124,7 +124,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
@@ -72,7 +72,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
     opacity var(--transition-duration) ease-in,
     visibility var(--transition-duration) step-end;
 
-  &[data-state='open'] {
+  &[data-open] {
     @starting-style {
       & {
         transform: translate(-50%, -35%) scale(0.8) translateY(0);
@@ -124,7 +124,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/alert-dialog/alert-dialog.mdx b/docs/data/components/alert-dialog/alert-dialog.mdx
@@ -129,7 +129,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th
 }
 
 /* Represents the final styles once entered */
-.AlertDialogPopup[data-state='open'] {
+.AlertDialogPopup[data-open] {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }
@@ -160,7 +160,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 /* Official Browser API - no Firefox support as of May 2024 */
 @starting-style {
-  .AlertDialogPopup[data-state='open'] {
+  .AlertDialogPopup[data-open] {
     opacity: 0;
     transform: translate(-50%, -35%) scale(0.8);
   }

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -20,7 +20,7 @@ function Label(props) {
     // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
     <label
       className="flex gap-2 mb-2"
-      onMouseDown={(e) => e.preventDefault()}
+      onMouseDown={(event) => event.preventDefault()}
       {...props}
     />
   );

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
@@ -19,7 +19,7 @@ function Label(props: React.ComponentPropsWithoutRef<'label'>) {
     // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
     <label
       className="flex gap-2 mb-2"
-      onMouseDown={(e) => e.preventDefault()}
+      onMouseDown={(event) => event.preventDefault()}
       {...props}
     />
   );

diff --git a/docs/data/components/dialog/DialogWithTransitions.js b/docs/data/components/dialog/DialogWithTransitions.js
@@ -51,7 +51,7 @@ const Popup = styled(BaseDialog.Popup)(
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 
-  &[data-state='open'] {
+  &[data-open] {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
     transition-timing-function: ease-out;
@@ -75,7 +75,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/dialog/DialogWithTransitions.tsx b/docs/data/components/dialog/DialogWithTransitions.tsx
@@ -51,7 +51,7 @@ const Popup = styled(BaseDialog.Popup)(
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 
-  &[data-state='open'] {
+  &[data-open] {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
     transition-timing-function: ease-out;
@@ -75,7 +75,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/dialog/NestedDialogs.js b/docs/data/components/dialog/NestedDialogs.js
@@ -72,7 +72,7 @@ const Popup = styled(BaseDialog.Popup)(
     opacity var(--transition-duration) ease-in,
     visibility var(--transition-duration) step-end;
 
-  &[data-state='open'] {
+  &[data-open] {
     @starting-style {
       & {
         transform: translate(-50%, -35%) scale(0.8) translateY(0);
@@ -140,7 +140,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/dialog/NestedDialogs.tsx b/docs/data/components/dialog/NestedDialogs.tsx
@@ -72,7 +72,7 @@ const Popup = styled(BaseDialog.Popup)(
     opacity var(--transition-duration) ease-in,
     visibility var(--transition-duration) step-end;
 
-  &[data-state='open'] {
+  &[data-open] {
     @starting-style {
       & {
         transform: translate(-50%, -35%) scale(0.8) translateY(0);
@@ -140,7 +140,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
   transition-duration: 250ms;
   transition-timing-function: ease-in;
 
-  &[data-state='open'] {
+  &[data-open] {
     backdrop-filter: blur(6px);
     opacity: 1;
     transition-timing-function: ease-out;

diff --git a/docs/data/components/dialog/dialog.mdx b/docs/data/components/dialog/dialog.mdx
@@ -152,7 +152,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th
 }
 
 /* Represents the final styles once entered */
-.DialogPopup[data-state='open'] {
+.DialogPopup[data-open] {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }
@@ -183,7 +183,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 /* Official Browser API - no Firefox support as of May 2024 */
 @starting-style {
-  .DialogPopup[data-state='open'] {
+  .DialogPopup[data-open] {
     opacity: 0;
     transform: translate(-50%, -35%) scale(0.8);
   }

diff --git a/docs/data/components/field/UnstyledFieldAsync.js b/docs/data/components/field/UnstyledFieldAsync.js
@@ -37,7 +37,7 @@ export default function UnstyledFieldAsync() {
       const error = await checkAvailability(name);
       setLoading(false);
       return error;
-    } catch (e) {
+    } catch {
       setLoading(false);
       return 'Failed to fetch name availability';
     }

diff --git a/docs/data/components/field/UnstyledFieldAsync.tsx b/docs/data/components/field/UnstyledFieldAsync.tsx
@@ -37,7 +37,7 @@ export default function UnstyledFieldAsync() {
       const error = await checkAvailability(name);
       setLoading(false);
       return error;
-    } catch (e) {
+    } catch {
       setLoading(false);
       return 'Failed to fetch name availability';
     }

diff --git a/docs/data/components/menu/CheckboxItems.js b/docs/data/components/menu/CheckboxItems.js
@@ -150,7 +150,7 @@ const Indicator = styled(Menu.CheckboxItemIndicator)(
   border-radius: 2px;
 
 
-  &[data-checkboxitem=checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

diff --git a/docs/data/components/menu/CheckboxItems.tsx b/docs/data/components/menu/CheckboxItems.tsx
@@ -150,7 +150,7 @@ const Indicator = styled(Menu.CheckboxItemIndicator)(
   border-radius: 2px;
 
 
-  &[data-checkboxitem=checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css
@@ -41,7 +41,7 @@
       transform 200ms ease-in;
   }
 
-  &[data-state='open'] {
+  &[data-open] {
     opacity: 1;
     transform: scale(1, 1);
     transition:

diff --git a/docs/data/components/menu/NestedMenu.js b/docs/data/components/menu/NestedMenu.js
@@ -208,7 +208,7 @@ const SubmenuTrigger = styled(Menu.SubmenuTrigger)(
     float: right;
   }
 
-  &[data-state='open'] {
+  &[data-popup-open] {
     background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }

diff --git a/docs/data/components/menu/NestedMenu.tsx b/docs/data/components/menu/NestedMenu.tsx
@@ -208,7 +208,7 @@ const SubmenuTrigger = styled(Menu.SubmenuTrigger)(
     float: right;
   }
 
-  &[data-state='open'] {
+  &[data-popup-open] {
     background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }

diff --git a/docs/data/components/menu/RadioItems.js b/docs/data/components/menu/RadioItems.js
@@ -143,7 +143,7 @@ const Indicator = styled(Menu.RadioItemIndicator)(
   box-sizing: border-box;
   border-radius: 50%;
 
-  &[data-radioitem=checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

diff --git a/docs/data/components/menu/RadioItems.tsx b/docs/data/components/menu/RadioItems.tsx
@@ -143,7 +143,7 @@ const Indicator = styled(Menu.RadioItemIndicator)(
   box-sizing: border-box;
   border-radius: 50%;
 
-  &[data-radioitem=checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

diff --git a/docs/data/components/menu/menu.mdx b/docs/data/components/menu/menu.mdx
@@ -308,7 +308,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th
 }
 
 /* Represents the final styles once entered */
-.MenuPopup[data-state='open'] {
+.MenuPopup[data-open] {
   opacity: 1;
   transform: scale(1);
 }
@@ -337,7 +337,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 /* Official Browser API - no Firefox support as of May 2024 */
 @starting-style {
-  .MenuPopup[data-state='open'] {
+  .MenuPopup[data-open] {
     opacity: 0;
     transform: scale(0.9);
   }

diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js
@@ -58,7 +58,7 @@ export const AnchorButton = styled(Popover.Trigger)`
   }
 
   &:hover,
-  &[data-state='open'] {
+  &[data-popup-open] {
     background: ${blue[800]};
   }
 `;

diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx
@@ -58,7 +58,7 @@ export const AnchorButton = styled(Popover.Trigger)`
   }
 
   &:hover,
-  &[data-state='open'] {
+  &[data-popup-open] {
     background: ${blue[800]};
   }
 `;

diff --git a/docs/data/components/popover/UnstyledPopoverTransition.js b/docs/data/components/popover/UnstyledPopoverTransition.js
@@ -40,7 +40,7 @@ export const PopoverPopup = styled(Popover.Popup)`
   transform: scale(0.9);
   transform-origin: var(--transform-origin);
 
-  &[data-state='open'] {
+  &[data-open] {
     opacity: 1;
     transform: scale(1);
   }
@@ -75,7 +75,7 @@ export const AnchorButton = styled(Popover.Trigger)`
   }
 
   &:hover,
-  &[data-state='open'] {
+  &[data-popup-open] {
     background: ${blue[800]};
   }
 `;