Merge branch 'heads/upstream/master' into pretty-quick

Author: Janpot

apps/zero-runtime-vite-app/src/App.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { styled, generateAtomics, css } from '@mui/zero-runtime';
+import { styled, generateAtomics } from '@mui/zero-runtime';
 import type { Breakpoint } from '@mui/system';
 import { Button, bounceAnim } from 'local-ui-lib';
 import Slider from './Slider/ZeroSlider';
+import { Box } from './Box';
 
 const ShowCaseDiv = styled('div')({
   [`.${Button}`]: {
@@ -60,11 +61,7 @@ export function App({ isRed }: AppProps) {
   const [isHorizontal, setIsHorizontal] = React.useState(true);
 
   return (
-    <div
-      className={css`
-        color: red;
-      `}
-    >
+    <div>
       <ShowCaseDiv>
         <Button>This button&apos;s text color has been overridden.</Button>
       </ShowCaseDiv>
@@ -174,6 +171,7 @@ export function App({ isRed }: AppProps) {
           <span>Hello2</span>
         </div>
       </div>
+      <Box as="div">Hello</Box>
     </div>
   );
 }

apps/zero-runtime-vite-app/src/Box.jsx

@@ -0,0 +1,68 @@
+import { generateAtomics } from '@mui/zero-runtime';
+
+const atomics = generateAtomics(({ theme }) => ({
+  conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
+    acc[breakpoint] = `@media (min-width: ${theme.breakpoints.values[breakpoint]}${
+      theme.breakpoints.unit ?? 'px'
+    })`;
+    return acc;
+  }, {}),
+  defaultCondition: 'xs',
+  properties: {
+    display: [
+      'block',
+      'inline-flex',
+      'contents',
+      'none',
+      'flex',
+      'inline-flex',
+      'grid',
+      'inline-grid',
+    ],
+    flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
+    justifyContent: [
+      'center',
+      'end',
+      'flex-end',
+      'flex-start',
+      'left',
+      'right',
+      'space-around',
+      'space-between',
+      'space-evenly',
+      'start',
+    ],
+    alignItems: [
+      'baseline',
+      'center',
+      'end',
+      'flex-end',
+      'flex-start',
+      'self-end',
+      'self-start',
+      'start',
+      'stretch',
+    ],
+    position: ['relative', 'absolute', 'static', 'sticky', 'fixed'],
+  },
+  shorthands: {
+    direction: ['flexDirection'],
+  },
+}));
+
+// eslint-disable-next-line react/prop-types
+export function Box({ children, as = 'div', className = '', style = undefined, ...rest }) {
+  const Component = as;
+  const atomicsResult = atomics(rest);
+  const componentClass = `${atomicsResult.className} ${className ?? ''}`.trim();
+  const finalStyles = {
+    ...(atomicsResult.style ?? {}),
+    ...style,
+  };
+  return (
+    // eslint-disable-next-line react/jsx-filename-extension
+    <Component className={componentClass} style={finalStyles}>
+      {children}
+    </Component>
+  );
+}

apps/zero-runtime-vite-app/vite.config.ts

@@ -22,4 +22,12 @@ export default defineConfig({
     reactPlugin(),
     splitVendorChunkPlugin(),
   ],
+  resolve: {
+    alias: [
+      {
+        find: /^@mui\/system\/(.*)/,
+        replacement: '@mui/system/esm/$1',
+      },
+    ],
+  },
 });

docs/pages/base-ui/api/use-select.json

@@ -58,8 +58,8 @@
     "open": { "type": { "name": "boolean", "description": "boolean" } },
     "options": {
       "type": {
-        "name": "SelectOptionDefinition<OptionValue>[]",
-        "description": "SelectOptionDefinition<OptionValue>[]"
+        "name": "ReadonlyArray<SelectOptionDefinition<OptionValue>>",
+        "description": "ReadonlyArray<SelectOptionDefinition<OptionValue>>"
       }
     },
     "required": { "type": { "name": "boolean", "description": "boolean" } },

docs/pages/base-ui/api/use-slider.json

@@ -1,12 +1,20 @@
 {
   "parameters": {
     "aria-labelledby": { "type": { "name": "string", "description": "string" } },
-    "defaultValue": { "type": { "name": "number | number[]", "description": "number | number[]" } },
+    "defaultValue": {
+      "type": {
+        "name": "number | ReadonlyArray<number>",
+        "description": "number | ReadonlyArray<number>"
+      }
+    },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "disableSwap": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "isRtl": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "marks": {
-      "type": { "name": "boolean | Mark[]", "description": "boolean | Mark[]" },
+      "type": {
+        "name": "boolean | ReadonlyArray<Mark>",
+        "description": "boolean | ReadonlyArray<Mark>"
+      },
       "default": "false"
     },
     "max": { "type": { "name": "number", "description": "number" }, "default": "100" },
@@ -44,7 +52,12 @@
     "shiftStep": { "type": { "name": "number", "description": "number" }, "default": "10" },
     "step": { "type": { "name": "number | null", "description": "number | null" }, "default": "1" },
     "tabIndex": { "type": { "name": "number", "description": "number" } },
-    "value": { "type": { "name": "number | number[]", "description": "number | number[]" } }
+    "value": {
+      "type": {
+        "name": "number | ReadonlyArray<number>",
+        "description": "number | ReadonlyArray<number>"
+      }
+    }
   },
   "returnValue": {
     "active": { "type": { "name": "number", "description": "number" }, "required": true },

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

@@ -278,7 +278,7 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
         return;
       }
 
-      let tabbable: string[] | HTMLElement[] = [];
+      let tabbable: ReadonlyArray<string> | HTMLElement[] = [];
       if (
         doc.activeElement === sentinelStart.current ||
         doc.activeElement === sentinelEnd.current

packages/mui-base/src/FocusTrap/FocusTrap.types.ts

@@ -10,7 +10,7 @@ export interface FocusTrapProps {
    * For instance, you can provide the "tabbable" npm dependency.
    * @param {HTMLElement} root
    */
-  getTabbable?: (root: HTMLElement) => string[];
+  getTabbable?: (root: HTMLElement) => ReadonlyArray<string>;
   /**
    * This prop extends the `open` prop.
    * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.

packages/mui-base/src/useSelect/useSelect.types.ts

@@ -102,7 +102,7 @@ export interface UseSelectParameters<OptionValue, Multiple extends boolean = fal
    * An alternative way to specify the options.
    * If this parameter is set, options defined as JSX children are ignored.
    */
-  options?: SelectOptionDefinition<OptionValue>[];
+  options?: ReadonlyArray<SelectOptionDefinition<OptionValue>>;
   /**
    * A function to convert the currently selected value to a string.
    * Used to set a value of a hidden input associated with the select,

packages/mui-base/src/useSlider/useSlider.ts

@@ -136,8 +136,8 @@ function focusThumb({
 }
 
 function areValuesEqual(
-  newValue: number | Array<number>,
-  oldValue: number | Array<number>,
+  newValue: number | ReadonlyArray<number>,
+  oldValue: number | ReadonlyArray<number>,
 ): boolean {
   if (typeof newValue === 'number' && typeof oldValue === 'number') {
     return newValue === oldValue;

packages/mui-base/src/useSlider/useSlider.types.ts

@@ -8,7 +8,7 @@ export interface UseSliderParameters {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: number | number[];
+  defaultValue?: number | ReadonlyArray<number>;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -30,7 +30,7 @@ export interface UseSliderParameters {
    * If an array, it should contain objects with `value` and an optional `label` keys.
    * @default false
    */
-  marks?: boolean | Mark[];
+  marks?: boolean | ReadonlyArray<Mark>;
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.
@@ -104,7 +104,7 @@ export interface UseSliderParameters {
    * The value of the slider.
    * For ranged sliders, provide an array with two values.
    */
-  value?: number | number[];
+  value?: number | ReadonlyArray<number>;
 }
 
 export interface Mark {