@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/modern/MenuItem/MenuItem.js

@@ -1,23 +1,22 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
-import ListContext from '../List/ListContext';
-import ButtonBase from '../ButtonBase';
-import useEnhancedEffect from '../utils/useEnhancedEffect';
-import useForkRef from '../utils/useForkRef';
-import { dividerClasses } from '../Divider';
-import { listItemIconClasses } from '../ListItemIcon';
-import { listItemTextClasses } from '../ListItemText';
-import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import ListContext from "../List/ListContext.js";
+import ButtonBase from "../ButtonBase/index.js";
+import useEnhancedEffect from "../utils/useEnhancedEffect.js";
+import useForkRef from "../utils/useForkRef.js";
+import { dividerClasses } from "../Divider/index.js";
+import { listItemIconClasses } from "../ListItemIcon/index.js";
+import { listItemTextClasses } from "../ListItemText/index.js";
+import menuItemClasses, { getMenuItemUtilityClass } from "./menuItemClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const overridesResolver = (props, styles) => {
   const {
@@ -38,17 +37,20 @@ const useUtilityClasses = ownerState => {
     root: ['root', dense && 'dense', disabled && 'disabled', !disableGutters && 'gutters', divider && 'divider', selected && 'selected']
   };
   const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
 const MenuItemRoot = styled(ButtonBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   name: 'MuiMenuItem',
   slot: 'Root',
   overridesResolver
-})(({
-  theme,
-  ownerState
-}) => _extends({}, theme.typography.body1, {
+})(memoTheme(({
+  theme
+}) => ({
+  ...theme.typography.body1,
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
@@ -58,14 +60,7 @@ const MenuItemRoot = styled(ButtonBase, {
   paddingTop: 6,
   paddingBottom: 6,
   boxSizing: 'border-box',
-  whiteSpace: 'nowrap'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, {
+  whiteSpace: 'nowrap',
   '&:hover': {
     textDecoration: 'none',
     backgroundColor: (theme.vars || theme).palette.action.hover,
@@ -109,38 +104,65 @@ const MenuItemRoot = styled(ButtonBase, {
   },
   [`& .${listItemIconClasses.root}`]: {
     minWidth: 36
-  }
-}, !ownerState.dense && {
-  [theme.breakpoints.up('sm')]: {
-    minHeight: 'auto'
-  }
-}, ownerState.dense && _extends({
-  minHeight: 32,
-  // https://m2.material.io/components/menus#specs > Dense
-  paddingTop: 4,
-  paddingBottom: 4
-}, theme.typography.body2, {
-  [`& .${listItemIconClasses.root} svg`]: {
-    fontSize: '1.25rem'
-  }
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.dense,
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        minHeight: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: {
+      minHeight: 32,
+      // https://m2.material.io/components/menus#specs > Dense
+      paddingTop: 4,
+      paddingBottom: 4,
+      ...theme.typography.body2,
+      [`& .${listItemIconClasses.root} svg`]: {
+        fontSize: '1.25rem'
+      }
+    }
+  }]
 })));
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMenuItem'
   });
   const {
-      autoFocus = false,
-      component = 'li',
-      dense = false,
-      divider = false,
-      disableGutters = false,
-      focusVisibleClassName,
-      role = 'menuitem',
-      tabIndex: tabIndexProp,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    autoFocus = false,
+    component = 'li',
+    dense = false,
+    divider = false,
+    disableGutters = false,
+    focusVisibleClassName,
+    role = 'menuitem',
+    tabIndex: tabIndexProp,
+    className,
+    ...other
+  } = props;
   const context = React.useContext(ListContext);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -156,11 +178,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       }
     }
   }, [autoFocus]);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     dense: childContext.dense,
     divider,
     disableGutters
-  });
+  };
   const classes = useUtilityClasses(props);
   const handleRef = useForkRef(menuItemRef, ref);
   let tabIndex;
@@ -169,17 +192,17 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   }
   return /*#__PURE__*/_jsx(ListContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsx(MenuItemRoot, _extends({
+    children: /*#__PURE__*/_jsx(MenuItemRoot, {
       ref: handleRef,
       role: role,
       tabIndex: tabIndex,
       component: component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-      className: clsx(classes.root, className)
-    }, other, {
+      className: clsx(classes.root, className),
+      ...other,
       ownerState: ownerState,
       classes: classes
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes */ = {

package/modern/MenuItem/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './MenuItem';
-export * from './menuItemClasses';
-export { default as menuItemClasses } from './menuItemClasses';
+export { default } from "./MenuItem.js";
+export * from "./menuItemClasses.js";
+export { default as menuItemClasses } from "./menuItemClasses.js";

package/modern/MenuList/MenuList.js

@@ -1,16 +1,13 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
-import ownerDocument from '../utils/ownerDocument';
-import List from '../List';
-import getScrollbarSize from '../utils/getScrollbarSize';
-import useForkRef from '../utils/useForkRef';
-import useEnhancedEffect from '../utils/useEnhancedEffect';
+import ownerDocument from "../utils/ownerDocument.js";
+import List from "../List/index.js";
+import getScrollbarSize from "../utils/getScrollbarSize.js";
+import useForkRef from "../utils/useForkRef.js";
+import useEnhancedEffect from "../utils/useEnhancedEffect.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
@@ -46,7 +43,7 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   if (textCriteria.repeating) {
     return text[0] === textCriteria.keys[0];
   }
-  return text.indexOf(textCriteria.keys.join('')) === 0;
+  return text.startsWith(textCriteria.keys.join(''));
 }
 function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {
   let wrappedOnce = false;
@@ -81,19 +78,19 @@ function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable,
  */
 const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   const {
-      // private
-      // eslint-disable-next-line react/prop-types
-      actions,
-      autoFocus = false,
-      autoFocusItem = false,
-      children,
-      className,
-      disabledItemsFocusable = false,
-      disableListWrap = false,
-      onKeyDown,
-      variant = 'selectedMenu'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions,
+    autoFocus = false,
+    autoFocusItem = false,
+    children,
+    className,
+    disabledItemsFocusable = false,
+    disableListWrap = false,
+    onKeyDown,
+    variant = 'selectedMenu',
+    ...other
+  } = props;
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],
@@ -226,15 +223,15 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     }
     return child;
   });
-  return /*#__PURE__*/_jsx(List, _extends({
+  return /*#__PURE__*/_jsx(List, {
     role: "menu",
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    tabIndex: autoFocus ? 0 : -1
-  }, other, {
+    tabIndex: autoFocus ? 0 : -1,
+    ...other,
     children: items
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? MenuList.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/MenuList/index.js

@@ -1,3 +1,3 @@
 'use client';
 
-export { default } from './MenuList';
+export { default } from "./MenuList.js";

package/modern/MobileStepper/MobileStepper.js

@@ -1,21 +1,19 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["activeStep", "backButton", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
-import Paper from '../Paper';
-import capitalize from '../utils/capitalize';
-import LinearProgress from '../LinearProgress';
-import { styled, createUseThemeProps } from '../zero-styled';
-import slotShouldForwardProp from '../styles/slotShouldForwardProp';
-import { getMobileStepperUtilityClass } from './mobileStepperClasses';
+import Paper from "../Paper/index.js";
+import capitalize from "../utils/capitalize.js";
+import LinearProgress from "../LinearProgress/index.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
+import { getMobileStepperUtilityClass } from "./mobileStepperClasses.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiMobileStepper');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,7 +37,7 @@ const MobileStepperRoot = styled(Paper, {
     } = props;
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   display: 'flex',
@@ -73,7 +71,7 @@ const MobileStepperRoot = styled(Paper, {
       bottom: 0
     }
   }]
-}));
+})));
 const MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
   slot: 'Dots',
@@ -99,7 +97,7 @@ const MobileStepperDot = styled('div', {
     } = props;
     return [styles.dot, dotActive && styles.dotActive];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   variants: [{
@@ -125,7 +123,7 @@ const MobileStepperDot = styled('div', {
       backgroundColor: (theme.vars || theme).palette.primary.main
     }
   }]
-}));
+})));
 const MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',
   slot: 'Progress',
@@ -141,26 +139,27 @@ const MobileStepperProgress = styled(LinearProgress, {
   }]
 });
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMobileStepper'
   });
   const {
-      activeStep = 0,
-      backButton,
-      className,
-      LinearProgressProps,
-      nextButton,
-      position = 'bottom',
-      steps,
-      variant = 'dots'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    activeStep = 0,
+    backButton,
+    className,
+    LinearProgressProps,
+    nextButton,
+    position = 'bottom',
+    steps,
+    variant = 'dots',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     activeStep,
     position,
     variant
-  });
+  };
   let value;
   if (variant === 'progress') {
     if (steps === 1) {
@@ -170,13 +169,13 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     }
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(MobileStepperRoot, _extends({
+  return /*#__PURE__*/_jsxs(MobileStepperRoot, {
     square: true,
     elevation: 0,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [backButton, variant === 'text' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [activeStep + 1, " / ", steps]
     }), variant === 'dots' && /*#__PURE__*/_jsx(MobileStepperDots, {
@@ -187,13 +186,14 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
         ownerState: ownerState,
         dotActive: index === activeStep
       }, index))
-    }), variant === 'progress' && /*#__PURE__*/_jsx(MobileStepperProgress, _extends({
+    }), variant === 'progress' && /*#__PURE__*/_jsx(MobileStepperProgress, {
       ownerState: ownerState,
       className: classes.progress,
       variant: "determinate",
-      value: value
-    }, LinearProgressProps)), nextButton]
-  }));
+      value: value,
+      ...LinearProgressProps
+    }), nextButton]
+  });
 });
 process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/MobileStepper/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './MobileStepper';
-export { default as mobileStepperClasses } from './mobileStepperClasses';
-export * from './mobileStepperClasses';
+export { default } from "./MobileStepper.js";
+export { default as mobileStepperClasses } from "./mobileStepperClasses.js";
+export * from "./mobileStepperClasses.js";