Merge remote-tracking branch 'upstream/master' into test-utils-from-npm

mui · Jun 11, 2024 · 56e110c · 56e110c
2 parents fa80658 + d40b500
commit 56e110c
Show file tree

Hide file tree

Showing 586 changed files with 1,079 additions and 1,158 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -43,7 +43,7 @@ default-job: &default-job
     REACT_VERSION: << parameters.react-version >>
     TEST_GATE: << parameters.test-gate >>
     AWS_REGION_ARTIFACTS: eu-central-1
-  working_directory: /tmp/material-ui
+  working_directory: /tmp/base-ui
   docker:
     - image: cimg/node:18.20
 

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,11 @@
 const baseline = require('@mui/monorepo/.eslintrc');
 const path = require('path');
 
+const OneLevelImportMessage = [
+  'Prefer one level nested imports to avoid bundling everything in dev mode or breaking CJS/ESM split.',
+  'See https://github.com/mui/material-ui/pull/24147 for the kind of win it can unlock.',
+].join('\n');
+
 module.exports = {
   ...baseline,
   settings: {
@@ -18,6 +23,26 @@ module.exports = {
     ...baseline.rules,
     // TODO move to @mui/monorepo, codebase is moving away from default exports
     'import/prefer-default-export': 'off',
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: [
+              '@mui/*/*/*',
+              '@pigment-css/*/*/*',
+              '@base_ui/react/*/*',
+              '!@base_ui/react/legacy/*',
+              // Allow any import depth with any internal packages
+              '!@mui/internal-*/**',
+              // TODO delete, @mui/docs should be @mui/internal-docs
+              '!@mui/docs/**',
+            ],
+            message: OneLevelImportMessage,
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     ...baseline.overrides,

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
-import { Button } from '@base_ui/react/Button';
-import { Input } from '@base_ui/react/Input';
-import { Popper } from '@base_ui/react/Popper';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
+import { Button } from '@base_ui/react/legacy/Button';
+import { Input } from '@base_ui/react/legacy/Input';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { useTheme } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
 import {
   useAutocomplete,
   UseAutocompleteProps,
-} from '@base_ui/react/useAutocomplete';
-import { Button } from '@base_ui/react/Button';
-import { Input } from '@base_ui/react/Input';
-import { Popper } from '@base_ui/react/Popper';
+} from '@base_ui/react/legacy/useAutocomplete';
+import { Button } from '@base_ui/react/legacy/Button';
+import { Input } from '@base_ui/react/legacy/Input';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { useTheme } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
-import { Button } from '@base_ui/react/Button';
-import { Popper } from '@base_ui/react/Popper';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
+import { Button } from '@base_ui/react/legacy/Button';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import {
   useAutocomplete,
   UseAutocompleteProps,
-} from '@base_ui/react/useAutocomplete';
-import { Button } from '@base_ui/react/Button';
-import { Popper } from '@base_ui/react/Popper';
+} from '@base_ui/react/legacy/useAutocomplete';
+import { Button } from '@base_ui/react/legacy/Button';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
-import { Button } from '@base_ui/react/Button';
-import { Popper } from '@base_ui/react/Popper';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
+import { Button } from '@base_ui/react/legacy/Button';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ClearIcon from '@mui/icons-material/Clear';

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import {
   useAutocomplete,
   UseAutocompleteProps,
-} from '@base_ui/react/useAutocomplete';
-import { Button } from '@base_ui/react/Button';
-import { Popper } from '@base_ui/react/Popper';
+} from '@base_ui/react/legacy/useAutocomplete';
+import { Button } from '@base_ui/react/legacy/Button';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ClearIcon from '@mui/icons-material/Clear';

diff --git a/docs/data/base/components/autocomplete/ControlledStates.js b/docs/data/base/components/autocomplete/ControlledStates.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
 import { styled } from '@mui/system';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];

diff --git a/docs/data/base/components/autocomplete/ControlledStates.tsx b/docs/data/base/components/autocomplete/ControlledStates.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
 import { styled } from '@mui/system';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
 import { styled } from '@mui/system';
 
 export default function UseAutocomplete() {

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
 import { styled } from '@mui/system';
 
 export default function UseAutocomplete() {

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
-import { Popper } from '@base_ui/react/Popper';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { styled } from '@mui/system';
 import useForkRef from '@mui/utils/useForkRef';
 

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import {
   useAutocomplete,
   UseAutocompleteProps,
-} from '@base_ui/react/useAutocomplete';
-import { Popper } from '@base_ui/react/Popper';
+} from '@base_ui/react/legacy/useAutocomplete';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { styled } from '@mui/system';
 import useForkRef from '@mui/utils/useForkRef';
 

diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md
@@ -36,7 +36,7 @@ To learn more about implementing a custom Autocomplete, you can explore the [`us
 ## Hook
 
 ```jsx
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
 ```
 
 The `useAutocomplete` hook requires a list of `options` to be displayed when the textbox receives focus.
@@ -107,8 +107,8 @@ Base UI provides a [Popper](/base-ui/react-popper/) component built around Reac
 To render the listbox in Base UI's Popper, the `ref`s must be merged as follows:
 
 ```jsx
-import { useAutocomplete } from '@base_ui/react/useAutocomplete';
-import { Popper } from '@base_ui/react/Popper';
+import { useAutocomplete } from '@base_ui/react/legacy/useAutocomplete';
+import { Popper } from '@base_ui/react/legacy/Popper';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
 export default function App(props) {

diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count) {

diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count: number) {

diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {

diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {

diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 // Auxiliary demo components
 import { styled, Stack } from '@mui/system';
-import { Button, buttonClasses } from '@base_ui/react/Button';
+import { Button, buttonClasses } from '@base_ui/react/legacy/Button';
 import * as BaseSwitch from '@base_ui/react/Switch';
 import Divider from '@mui/material/Divider';
 // Icons

diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 // Auxiliary demo components
 import { styled, Stack } from '@mui/system';
-import { Button, buttonClasses } from '@base_ui/react/Button';
+import { Button, buttonClasses } from '@base_ui/react/legacy/Button';
 import * as BaseSwitch from '@base_ui/react/Switch';
 import Divider from '@mui/material/Divider';
 // Icons

diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {

diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {

diff --git a/docs/data/base/components/badge/UnstyledBadge/css/index.js b/docs/data/base/components/badge/UnstyledBadge/css/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Badge } from '@base_ui/react/Badge';
+import { Badge } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledBadge() {

diff --git a/docs/data/base/components/badge/UnstyledBadge/css/index.tsx b/docs/data/base/components/badge/UnstyledBadge/css/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Badge } from '@base_ui/react/Badge';
+import { Badge } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledBadge() {

diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.js b/docs/data/base/components/badge/UnstyledBadge/system/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 
 function BadgeContent() {
   return (

diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 
 function BadgeContent() {
   return (

diff --git a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.js b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Badge as BaseBadge } from '@base_ui/react/Badge';
+import { Badge as BaseBadge } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {

diff --git a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { Badge as BaseBadge, BadgeProps } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, BadgeProps } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Badge } from '@base_ui/react/Badge';
+import { Badge } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledBadgeIntroduction() {

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Badge } from '@base_ui/react/Badge';
+import { Badge } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledBadgeIntroduction() {

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 
 const blue = {
   100: '#DAECFF',

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@base_ui/react/legacy/Badge';
 
 const blue = {
   100: '#DAECFF',

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Badge as BaseBadge } from '@base_ui/react/Badge';
+import { Badge as BaseBadge } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { Badge as BaseBadge, BadgeProps } from '@base_ui/react/Badge';
+import { Badge as BaseBadge, BadgeProps } from '@base_ui/react/legacy/Badge';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {

diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md
@@ -26,7 +26,7 @@ The Badge component creates a badge that is applied to its child element.
 ## Component
 
 ```jsx
-import { Badge } from '@base_ui/react/Badge';
+import { Badge } from '@base_ui/react/legacy/Badge';
 ```
 
 The Badge wraps around the UI element that it's attached to.
@@ -80,7 +80,7 @@ The same applies for props specific to custom primitive elements:
 ## Hook
 
 ```jsx
-import { useBadge } from '@base_ui/react/useBadge';
+import { useBadge } from '@base_ui/react/legacy/useBadge';
 ```
 
 The `useBadge` hook lets you apply the functionality of a Badge to a fully custom component.

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Button, buttonClasses } from '@base_ui/react/Button';
+import { Button, buttonClasses } from '@base_ui/react/legacy/Button';
 import { styled } from '@mui/system';
 
 const ButtonRoot = React.forwardRef(function ButtonRoot(props, ref) {

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, ButtonProps, buttonClasses } from '@base_ui/react/Button';
+import { Button, ButtonProps, buttonClasses } from '@base_ui/react/legacy/Button';
 import { styled, Theme } from '@mui/system';
 
 const ButtonRoot = React.forwardRef(function ButtonRoot(