mui · cam-cole · Jun 12, 2023 · Jun 12, 2023 · Jun 12, 2023 · Oct 16, 2023
diff --git a/docs/data/material/components/chips/ColorChips.js b/docs/data/material/components/chips/ColorChips.js
@@ -1,18 +1,46 @@
 import * as React from 'react';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
+import { pink, common } from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    violet: {
+      main: '#8F00FF',
+      contrastText: '#FFFFFF',
+    },
+  },
+});
 
 export default function ColorChips() {
   return (
-    <Stack spacing={1} alignItems="center">
-      <Stack direction="row" spacing={1}>
-        <Chip label="primary" color="primary" />
-        <Chip label="success" color="success" />
-      </Stack>
-      <Stack direction="row" spacing={1}>
-        <Chip label="primary" color="primary" variant="outlined" />
-        <Chip label="success" color="success" variant="outlined" />
+    <ThemeProvider theme={theme}>
+      <Stack spacing={1} alignItems="center">
+        <Stack direction="row" spacing={1}>
+          <Chip label="primary" color="primary" />
+          <Chip label="success" color="success" />
+        </Stack>
+        <Stack direction="row" spacing={1}>
+          <Chip label="primary" color="primary" variant="outlined" />
+          <Chip label="success" color="success" variant="outlined" />
+        </Stack>
+        <Stack direction="row" spacing={1}>
+          <Chip label="violet" color="violet" />
+          <Chip label="violet" color="violet" variant="outlined" />
+        </Stack>
+        <Stack direction="row" spacing={1}>
+          <Chip
+            label="pink"
+            sx={{ backgroundColor: pink[500], color: common.white }}
+          />
+          <Chip
+            label="pink"
+            sx={{ borderColor: pink[500], color: pink[500] }}
+            variant="outlined"
+          />
+        </Stack>
       </Stack>
-    </Stack>
+    </ThemeProvider>
   );
 }
diff --git a/docs/data/material/components/chips/ColorChips.tsx b/docs/data/material/components/chips/ColorChips.tsx
@@ -1,18 +1,46 @@
 import * as React from 'react';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
+import { pink, common } from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    violet: {
+      main: '#8F00FF',
+      contrastText: '#FFFFFF',
+    },
+  },
+});
 
 export default function ColorChips() {
   return (
-    <Stack spacing={1} alignItems="center">
-      <Stack direction="row" spacing={1}>
-        <Chip label="primary" color="primary" />
-        <Chip label="success" color="success" />
-      </Stack>
-      <Stack direction="row" spacing={1}>
-        <Chip label="primary" color="primary" variant="outlined" />
-        <Chip label="success" color="success" variant="outlined" />
+    <ThemeProvider theme={theme}>
+      <Stack spacing={1} alignItems="center">
+        <Stack direction="row" spacing={1}>
+          <Chip label="primary" color="primary" />
+          <Chip label="success" color="success" />
+        </Stack>
+        <Stack direction="row" spacing={1}>
+          <Chip label="primary" color="primary" variant="outlined" />
+          <Chip label="success" color="success" variant="outlined" />
+        </Stack>
+        <Stack direction="row" spacing={1}>
+          <Chip label="violet" color="violet" />
+          <Chip label="violet" color="violet" variant="outlined" />
+        </Stack>
+        <Stack direction="row" spacing={1}>
+          <Chip
+            label="pink"
+            sx={{ backgroundColor: pink[500], color: common.white }}
+          />
+          <Chip
+            label="pink"
+            sx={{ borderColor: pink[500], color: pink[500] }}
+            variant="outlined"
+          />
+        </Stack>
       </Stack>
-    </Stack>
+    </ThemeProvider>
   );
 }
diff --git a/docs/data/material/components/chips/RoundedChips.js b/docs/data/material/components/chips/RoundedChips.js
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function RoundedChips() {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Chip label="Rounded" rounded />
+      <Chip label="Rounded" rounded variant="outlined" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/chips/RoundedChips.tsx b/docs/data/material/components/chips/RoundedChips.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function RoundedChips() {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Chip label="Rounded" rounded />
+      <Chip label="Rounded" rounded variant="outlined" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/chips/RoundedChips.tsx.preview b/docs/data/material/components/chips/RoundedChips.tsx.preview
@@ -0,0 +1,2 @@
+<Chip label="Rounded" rounded />
+<Chip label="Rounded" rounded variant="outlined" />
diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md
@@ -67,7 +67,7 @@ Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon.
 
 ## Color chip
 
-You can use the `color` prop to define a color from theme palette.
+You can use the `color` prop to define a color from theme palette. Addtionally, you can use either the theme extension or the `sx` prop to create chips with other colors.
 
 {{"demo": "ColorChips.js"}}
 
@@ -77,6 +77,12 @@ You can use the `size` prop to define a small Chip.
 
 {{"demo": "SizesChips.js"}}
 
+## Rounded chip
+
+You can use the `rounded` prop to create a rounded Chip.
+
+{{"demo": "RoundedChips.js"}}
+
 ## Multiline chip
 
 By default, Chips displays labels only in a single line.

diff --git a/docs/pages/base-ui/api/popup.json b/docs/pages/base-ui/api/popup.json
@@ -9,27 +9,10 @@
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disablePortal": { "type": { "name": "bool" }, "default": "false" },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
-    "middleware": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;false<br>&#124;&nbsp;{ fn: func, name: string, options?: any }&gt;"
-      }
-    },
-    "offset": {
-      "type": {
-        "name": "union",
-        "description": "func<br>&#124;&nbsp;number<br>&#124;&nbsp;{ alignmentAxis?: number, crossAxis?: number, mainAxis?: number }"
-      },
-      "default": "0"
-    },
+    "middleware": { "type": { "name": "array" } },
+    "offset": { "type": { "name": "any" }, "default": "0" },
     "open": { "type": { "name": "bool" }, "default": "false" },
-    "placement": {
-      "type": {
-        "name": "enum",
-        "description": "'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top'"
-      },
-      "default": "'bottom'"
-    },
+    "placement": { "type": { "name": "any" }, "default": "'bottom'" },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
       "default": "{}"
@@ -39,10 +22,7 @@
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
     },
-    "strategy": {
-      "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },
-      "default": "'absolute'"
-    },
+    "strategy": { "type": { "name": "any" }, "default": "'absolute'" },
     "withTransition": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Popup",

diff --git a/docs/pages/material-ui/api/chip.json b/docs/pages/material-ui/api/chip.json
@@ -17,6 +17,7 @@
     "icon": { "type": { "name": "element" } },
     "label": { "type": { "name": "node" } },
     "onDelete": { "type": { "name": "func" } },
+    "rounded": { "type": { "name": "bool" }, "default": "false" },
     "size": {
       "type": {
         "name": "union",
@@ -88,7 +89,8 @@
       "deleteIconOutlinedColorSecondary",
       "deleteIconFilledColorPrimary",
       "deleteIconFilledColorSecondary",
-      "focusVisible"
+      "focusVisible",
+      "rounded"
     ],
     "globalClasses": { "disabled": "Mui-disabled", "focusVisible": "Mui-focusVisible" },
     "name": "MuiChip"

diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json
@@ -24,6 +24,7 @@
     "onDelete": {
       "description": "Callback fired when the delete icon is clicked. If set, the delete icon will be shown."
     },
+    "rounded": { "description": "If <code>true</code>, allows the chip to be rounded" },
     "size": { "description": "The size of the component." },
     "skipFocusWhenDisabled": {
       "description": "If <code>true</code>, allows the disabled chip to escape focus. If <code>false</code>, allows the disabled chip to receive focus."
@@ -247,6 +248,7 @@
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "keyboard focused"
-    }
+    },
+    "rounded": { "description": "Styles applied to chip if &#39;rounded=true&#39;" }
   }
 }
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -211,6 +211,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
       resizeObserver = new ResizeObserver(
         process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize,
       );
+
       resizeObserver.observe(input);
     }
 

diff --git a/packages/mui-base/src/Unstable_Popup/Popup.tsx b/packages/mui-base/src/Unstable_Popup/Popup.tsx
@@ -204,32 +204,15 @@ Popup.propTypes /* remove-proptypes */ = {
    *
    * @see https://floating-ui.com/docs/computePosition#middleware
    */
-  middleware: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.oneOf([false]),
-      PropTypes.shape({
-        fn: PropTypes.func.isRequired,
-        name: PropTypes.string.isRequired,
-        options: PropTypes.any,
-      }),
-    ]),
-  ),
+  middleware: PropTypes.array,
   /**
    * Distance between a popup and the trigger element.
    * This prop is ignored when custom `middleware` is provided.
    *
    * @default 0
    * @see https://floating-ui.com/docs/offset
    */
-  offset: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.number,
-    PropTypes.shape({
-      alignmentAxis: PropTypes.number,
-      crossAxis: PropTypes.number,
-      mainAxis: PropTypes.number,
-    }),
-  ]),
+  offset: PropTypes.any,
   /**
    * If `true`, the popup is visible.
    *
@@ -242,20 +225,7 @@ Popup.propTypes /* remove-proptypes */ = {
    * @default 'bottom'
    * @see https://floating-ui.com/docs/computePosition#placement
    */
-  placement: PropTypes.oneOf([
-    'bottom-end',
-    'bottom-start',
-    'bottom',
-    'left-end',
-    'left-start',
-    'left',
-    'right-end',
-    'right-start',
-    'right',
-    'top-end',
-    'top-start',
-    'top',
-  ]),
+  placement: PropTypes.any,
   /**
    * The props used for each slot inside the Popup.
    *
@@ -279,7 +249,7 @@ Popup.propTypes /* remove-proptypes */ = {
    * @default 'absolute'
    * @see https://floating-ui.com/docs/computePosition#strategy
    */
-  strategy: PropTypes.oneOf(['absolute', 'fixed']),
+  strategy: PropTypes.any,
   /**
    * If `true`, the popup will not disappear immediately when it needs to be closed
    * but wait until the exit transition has finished.

diff --git a/packages/mui-joy/src/AccordionDetails/AccordionDetails.tsx b/packages/mui-joy/src/AccordionDetails/AccordionDetails.tsx
@@ -104,6 +104,7 @@ const AccordionDetails = React.forwardRef(function AccordionDetails(inProps, ref
       const elements = rootRef.current.querySelectorAll(
         'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
       );
+
       elements.forEach((elm) => {
         if (expanded) {
           const prevTabIndex = elm.getAttribute('data-prev-tabindex');

diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx
@@ -40,6 +40,7 @@ const AlertRoot = styled('div', {
     'padding',
     'borderRadius',
   ]);
+
   return [
     {
       '--Alert-radius': theme.vars.radius.sm,

diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
@@ -64,6 +64,7 @@ export const StyledButtonGroup = styled('div')<{ ownerState: ButtonGroupOwnerSta
         }
       },
     );
+
     const outlinedStyle = theme.variants.outlined?.[ownerState.color!];
     const outlinedDisabledStyle = theme.variants.outlinedDisabled?.[ownerState.color!];
     const outlinedHoverStyle = theme.variants.outlinedHover?.[ownerState.color!];

diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
@@ -39,6 +39,7 @@ export const StyledCardRoot = styled('div')<{ ownerState: CardOwnerState }>(
       'padding',
       'borderRadius',
     ]);
+
     return [
       {
         '--Icon-color':

diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -82,6 +82,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
     inProps.color,
     true,
   );
+
   const color = inProps.color || inheritedColor;
   const disabled = disabledProp ?? chipContext.disabled;
 

diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -134,6 +134,7 @@ const LinearProgressRoot = styled('div', {
       'borderRadius',
       'height',
     ]);
+
     return {
       ...(borderRadius !== undefined && { '--LinearProgress-radius': borderRadius }),
       ...(height !== undefined && { '--LinearProgress-thickness': height }),

diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
@@ -40,6 +40,7 @@ export const StyledList = styled('ul')<{ ownerState: ListOwnerState }>(({ theme,
     'padding',
     'borderRadius',
   ]);
+
   function applySizeVars(size: ListProps['size']) {
     if (size === 'sm') {
       return {

diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx
@@ -68,6 +68,7 @@ const Option = React.forwardRef(function Option(inProps, ref: React.ForwardedRef
     inProps.variant,
     inProps.color,
   );
+
   const optionRef = React.useRef<HTMLLIElement>(null);
   const combinedRef = useForkRef(optionRef, ref);
 

diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx
@@ -45,6 +45,7 @@ export const SheetRoot = styled('div', {
     'backgroundColor',
     'background',
   ]);
+
   const resolvedBg =
     (getPath(theme, `palette.${bgcolor}`) as string) ||
     bgcolor ||

diff --git a/packages/mui-joy/src/Skeleton/Skeleton.tsx b/packages/mui-joy/src/Skeleton/Skeleton.tsx
@@ -261,6 +261,7 @@ const SkeletonRoot = styled('span', {
     ];
   },
 );
+
 /**
  *
  * Demos:
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<Chip label="Rounded" rounded />
		<Chip label="Rounded" rounded variant="outlined" />
-Original file line number
+Diff line change
@@ Expand Up @@
           resizeObserver = new ResizeObserver(
             process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize,
           );
           resizeObserver.observe(input);
         }
@@ Expand Down @@