Merge remote-tracking branch 'upstream/master' into pnpm

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  aws-cli: circleci/aws-cli@4.0
+  aws-cli: circleci/aws-cli@4.1
   aws-s3: circleci/[email protected]
 
 parameters:
@@ -684,9 +684,9 @@ jobs:
                 value: << pipeline.git.branch >>
           steps:
             - aws-cli/setup:
-                aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: AWS_REGION_ARTIFACTS
-                aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS
+                region: $AWS_REGION_ARTIFACTS
+                aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS
             # Upload distributables to S3
             - aws-s3/copy:
                 from: mui-material.tgz
@@ -713,9 +713,9 @@ jobs:
                 value: << pipeline.git.branch >>
           steps:
             - aws-cli/setup:
-                aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: AWS_REGION_ARTIFACTS
-                aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS
+                region: $AWS_REGION_ARTIFACTS
+                aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS
             # persist size snapshot on S3
             - aws-s3/copy:
                 arguments: --content-type application/json

docs/data/base/pages.ts

@@ -88,7 +88,7 @@ const pages: readonly MuiPage[] = [
           { pathname: '/base-ui/react-modal', title: 'Modal' },
           { pathname: '/base-ui/react-no-ssr', title: 'No-SSR' },
           { pathname: '/base-ui/react-popper', title: 'Popper' },
-          { pathname: '/base-ui/react-popup', title: 'Popup' },
+          { pathname: '/base-ui/react-popup', title: 'Popup', unstable: true },
           { pathname: '/base-ui/react-portal', title: 'Portal' },
           { pathname: '/base-ui/react-textarea-autosize', title: 'Textarea Autosize' },
         ],

docs/data/joy/components/button/ButtonUsage.js

@@ -36,7 +36,9 @@ export default function ButtonUsage() {
       ]}
       renderDemo={(props) => (
         <Box sx={{ display: 'flex', gap: 2 }}>
-          <Button {...props}>Hello world</Button>
+          <Button startDecorator={<FavoriteBorder />} {...props}>
+            Hello world
+          </Button>
           <IconButton {...props}>
             <FavoriteBorder />
           </IconButton>

docs/data/joy/components/button/IconButtonVariables.js

@@ -15,7 +15,7 @@ export default function IconButtonVariables() {
       data={[
         {
           var: '--IconButton-size',
-          defaultValue: '40px',
+          defaultValue: '36px',
         },
       ]}
       renderDemo={(sx) => (

docs/data/joy/main-features/automatic-adjustment/InputVariables.js

@@ -8,7 +8,7 @@ import FormLabel from '@mui/joy/FormLabel';
 
 export default function InputVariables() {
   const [radius, setRadius] = React.useState(16);
-  const [childHeight, setChildHeight] = React.useState(32);
+  const [childHeight, setChildHeight] = React.useState(28);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
       <Input
@@ -36,7 +36,7 @@ export default function InputVariables() {
           />
         </FormControl>
         <FormControl>
-          <FormLabel>--Input-childHeight</FormLabel>
+          <FormLabel>--Input-decoratorChildHeight</FormLabel>
           <Input
             size="sm"
             type="number"

docs/data/joy/main-features/color-inversion/color-inversion.md

@@ -14,10 +14,10 @@ On the **left**, the Button's variant is `solid`, which is the highest emphasis
 This conforms to the visual appearance on the screen.
 
 On the **right**, the problem arises when the container's variant becomes `solid`.
-The Button is no longer the highest emphasis element because the it has the same background as the container.
+The Button is no longer the highest emphasis element because it has the same background as the container.
 Also, the text and the icon button don't contrast enough with the parent's background.
 
-The color inversion is implemented to solves this issue, keeping the global variants meaningful when multiple layers of global variants are composed together.
+The color inversion is implemented to solve this issue, keeping the global variants meaningful when multiple layers of global variants are composed together.
 
 ## Overview
 
@@ -54,8 +54,7 @@ Color inversion has no effect on children that have an **explicit** `color` prop
 
 ## Usage
 
-To enable color inversion, use the `invertedColors` prop on one of the two components that support it: [Sheet](/joy-ui/react-sheet/) or [Card](/joy-ui/react-card/).
-Note that this prop only works when these components have the `solid` or `soft` global variant applied.
+To enable color inversion, use the `invertedColors` prop. Note that this prop only works when the components have the `solid` or `soft` global variant applied.
 
 ```js
 <Card variant="solid" invertedColors>…</Card>

package.json

@@ -108,8 +108,8 @@
     "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.21",
     "@types/yargs": "^17.0.24",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-macros": "^3.1.0",
@@ -129,7 +129,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-webpack": "^0.13.7",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-filenames": "^1.3.2",

packages/eslint-plugin-material-ui/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@types/eslint": "^8.44.2",
-    "@typescript-eslint/parser": "^6.4.1",
+    "@typescript-eslint/parser": "^6.6.0",
     "eslint": "^8.47.0"
   },
   "scripts": {

packages/mui-base/src/FocusTrap/FocusTrap.tsx

@@ -212,76 +212,90 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
-  React.useEffect(() => {
-    // We might render an empty child.
-    if (!open || !rootRef.current) {
-      return;
-    }
-
-    const doc = ownerDocument(rootRef.current);
-
-    const contain = (nativeEvent: FocusEvent | null) => {
-      const { current: rootElement } = rootRef;
+  const contain = React.useCallback(
+    (nativeEvent: FocusEvent | null) => {
+      const rootElement = rootRef.current;
+      const doc = ownerDocument(rootRef.current);
 
       // Cleanup functions are executed lazily in React 17.
       // Contain can be called between the component being unmounted and its cleanup function being run.
       if (rootElement === null) {
         return;
       }
 
-      if (
-        !doc.hasFocus() ||
-        disableEnforceFocus ||
-        !isEnabled() ||
-        ignoreNextEnforceFocus.current
-      ) {
+      if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
         ignoreNextEnforceFocus.current = false;
         return;
       }
 
-      if (!rootElement.contains(doc.activeElement)) {
-        // if the focus event is not coming from inside the children's react tree, reset the refs
-        if (
-          (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target) ||
-          doc.activeElement !== reactFocusEventTarget.current
-        ) {
-          reactFocusEventTarget.current = null;
-        } else if (reactFocusEventTarget.current !== null) {
-          return;
-        }
+      // The focus is already inside
+      if (rootElement.contains(doc.activeElement)) {
+        return;
+      }
 
-        if (!activated.current) {
-          return;
-        }
+      // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
+      if (
+        disableEnforceFocus &&
+        doc.activeElement !== sentinelStart.current &&
+        doc.activeElement !== sentinelEnd.current
+      ) {
+        return;
+      }
 
-        let tabbable: string[] | HTMLElement[] = [];
-        if (
-          doc.activeElement === sentinelStart.current ||
-          doc.activeElement === sentinelEnd.current
-        ) {
-          tabbable = getTabbable(rootRef.current as HTMLElement);
-        }
+      // if the focus event is not coming from inside the children's react tree, reset the refs
+      if (
+        (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target) ||
+        doc.activeElement !== reactFocusEventTarget.current
+      ) {
+        reactFocusEventTarget.current = null;
+      } else if (reactFocusEventTarget.current !== null) {
+        return;
+      }
 
-        if (tabbable.length > 0) {
-          const isShiftTab = Boolean(
-            lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab',
-          );
+      if (!activated.current) {
+        return;
+      }
 
-          const focusNext = tabbable[0];
-          const focusPrevious = tabbable[tabbable.length - 1];
+      let tabbable: string[] | HTMLElement[] = [];
+      if (
+        doc.activeElement === sentinelStart.current ||
+        doc.activeElement === sentinelEnd.current
+      ) {
+        tabbable = getTabbable(rootRef.current as HTMLElement);
+      }
 
-          if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
-            if (isShiftTab) {
-              focusPrevious.focus();
-            } else {
-              focusNext.focus();
-            }
+      // one of the sentinel nodes was focused, so move the focus
+      // to the first/last tabbable element inside the focus trap
+      if (tabbable.length > 0) {
+        const isShiftTab = Boolean(
+          lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab',
+        );
+
+        const focusNext = tabbable[0];
+        const focusPrevious = tabbable[tabbable.length - 1];
+
+        if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
+          if (isShiftTab) {
+            focusPrevious.focus();
+          } else {
+            focusNext.focus();
           }
-        } else {
-          rootElement.focus();
         }
+        // no tabbable elements in the trap focus or the focus was outside of the focus trap
+      } else {
+        rootElement.focus();
       }
-    };
+    },
+    [disableEnforceFocus, isEnabled, getTabbable],
+  );
+
+  React.useEffect(() => {
+    // We might render an empty child.
+    if (!open || !rootRef.current) {
+      return;
+    }
+
+    const doc = ownerDocument(rootRef.current);
 
     const loopFocus = (nativeEvent: KeyboardEvent) => {
       lastKeydown.current = nativeEvent;
@@ -323,7 +337,15 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
       doc.removeEventListener('focusin', contain);
       doc.removeEventListener('keydown', loopFocus, true);
     };
-  }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
+  }, [
+    disableAutoFocus,
+    disableEnforceFocus,
+    disableRestoreFocus,
+    isEnabled,
+    open,
+    getTabbable,
+    contain,
+  ]);
 
   const onFocus = (event: FocusEvent) => {
     if (nodeToRestore.current === null) {

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -23,7 +23,7 @@ import { VariantColorProvider, getChildVariantAndColor } from '../styles/variant
 // slot components
 import { StyledIconButton } from '../IconButton/IconButton';
 // default render components
-import Chip, { chipClasses } from '../Chip';
+import Chip from '../Chip';
 import ChipDelete from '../ChipDelete';
 import {
   StyledInputRoot,
@@ -106,7 +106,12 @@ const AutocompleteRoot = styled(StyledInputRoot as unknown as 'div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: OwnerState }>(({ ownerState }) => ({
-  '--Autocomplete-wrapperGap': '3px',
+  ...(ownerState.size === 'sm' && {
+    '--Autocomplete-wrapperGap': '3px',
+  }),
+  ...(ownerState.size === 'md' && {
+    '--Autocomplete-wrapperGap': '3px',
+  }),
   ...(ownerState.size === 'lg' && {
     '--Autocomplete-wrapperGap': '4px',
   }),
@@ -136,24 +141,15 @@ const AutocompleteWrapper = styled('div', {
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
+  gap: 'var(--Autocomplete-wrapperGap)',
   [`&.${autocompleteClasses.multiple}`]: {
-    paddingBlockEnd: 'min(var(--_Input-paddingBlock), var(--Autocomplete-wrapperGap))',
-    // TODO: use [CSS :has](https://caniuse.com/?search=%3Ahas) later
-    ...(ownerState.startDecorator &&
-      Array.isArray(ownerState.value) &&
-      (ownerState.value as Array<unknown>).length > 0 && {
-        marginBlockStart: 'min(var(--_Input-paddingBlock) - var(--Autocomplete-wrapperGap), 0px)',
-        marginInlineStart: 'calc(-1 * var(--Autocomplete-wrapperGap))',
-        [`& .${autocompleteClasses.input}`]: {
-          marginInlineStart: 'max(var(--Autocomplete-wrapperGap), var(--Input-gap))',
-        },
-      }),
-  },
-  [`& .${chipClasses.root}`]: {
-    // TODO: use flexbox `gap` later.
-    minWidth: 0,
-    marginInlineStart: 'var(--Autocomplete-wrapperGap)',
-    marginBlockStart: 'var(--Autocomplete-wrapperGap)',
+    paddingBlock: 'var(--Autocomplete-wrapperGap)',
+    ...(!ownerState.startDecorator && {
+      paddingInlineStart: 'var(--Autocomplete-wrapperGap)',
+    }),
+    ...(!ownerState.endDecorator && {
+      paddingInlineEnd: 'var(--Autocomplete-wrapperGap)',
+    }),
   },
 }));
 
@@ -165,10 +161,7 @@ const AutocompleteInput = styled(StyledInputHtml as unknown as 'input', {
   minWidth: 30,
   minHeight: 'var(--Chip-minHeight)',
   ...(ownerState.multiple && {
-    marginBlockStart: 'var(--Autocomplete-wrapperGap)',
-    ...(!ownerState.startDecorator && {
-      marginInlineStart: 'var(--Input-paddingInline)',
-    }),
+    marginInlineStart: 'calc(var(--Autocomplete-wrapperGap) * 2.5)',
   }),
 }));
 

packages/mui-joy/src/Button/Button.tsx

@@ -113,10 +113,10 @@ export const getButtonStyles = ({
       }),
       ...(ownerState.size === 'md' && {
         '--Icon-fontSize': theme.vars.fontSize.xl,
-        '--CircularProgress-size': '24px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
-        '--CircularProgress-thickness': '3px',
+        '--CircularProgress-size': '20px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
+        '--CircularProgress-thickness': '2px',
         '--Button-gap': '0.5rem',
-        minHeight: 'var(--Button-minHeight, 2.5rem)', // use min-height instead of height to make the button resilient to its content
+        minHeight: 'var(--Button-minHeight, 2.25rem)', // use min-height instead of height to make the button resilient to its content
         fontSize: theme.vars.fontSize.sm,
         paddingBlock: '0.25rem', // the padding-block act as a minimum spacing between content and root element
         paddingInline: '1rem',
@@ -126,7 +126,7 @@ export const getButtonStyles = ({
         '--CircularProgress-size': '28px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
         '--CircularProgress-thickness': '4px',
         '--Button-gap': '0.75rem',
-        minHeight: 'var(--Button-minHeight, 3rem)',
+        minHeight: 'var(--Button-minHeight, 2.75rem)',
         fontSize: theme.vars.fontSize.md,
         paddingBlock: '0.375rem',
         paddingInline: '1.5rem',