@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.8

package/styles/experimental_extendTheme.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"],
-  _excluded2 = ["palette"];
 import deepmerge from '@mui/utils/deepmerge';
 import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
 import { createUnarySpacing } from '@mui/system/spacing';
@@ -70,57 +66,68 @@ const silent = fn => {
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   const {
-      colorSchemes: colorSchemesInput = {},
-      cssVarPrefix = 'mui',
-      shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
-      getSelector
-    } = options,
-    input = _objectWithoutPropertiesLoose(options, _excluded);
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui',
+    shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+    getSelector,
+    ...input
+  } = options;
   const getCssVar = createGetCssVar(cssVarPrefix);
-  const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+  const {
+    palette: lightPalette,
+    ...muiTheme
+  } = createThemeWithoutVars({
+    ...input,
+    ...(colorSchemesInput.light && {
       palette: colorSchemesInput.light?.palette
-    })),
-    {
-      palette: lightPalette
-    } = _createThemeWithoutVa,
-    muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+    })
+  });
   const {
     palette: darkPalette
   } = createThemeWithoutVars({
-    palette: _extends({
-      mode: 'dark'
-    }, colorSchemesInput.dark?.palette)
+    palette: {
+      mode: 'dark',
+      ...colorSchemesInput.dark?.palette
+    }
   });
-  let theme = _extends({
-    defaultColorScheme: 'light'
-  }, muiTheme, {
+  let theme = {
+    defaultColorScheme: 'light',
+    ...muiTheme,
     cssVarPrefix,
     getCssVar,
-    colorSchemes: _extends({}, colorSchemesInput, {
-      light: _extends({}, colorSchemesInput.light, {
+    colorSchemes: {
+      ...colorSchemesInput,
+      light: {
+        ...colorSchemesInput.light,
         palette: lightPalette,
-        opacity: _extends({
+        opacity: {
           inputPlaceholder: 0.42,
           inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
-          switchTrack: 0.38
-        }, colorSchemesInput.light?.opacity),
+          switchTrack: 0.38,
+          ...colorSchemesInput.light?.opacity
+        },
         overlays: colorSchemesInput.light?.overlays || []
-      }),
-      dark: _extends({}, colorSchemesInput.dark, {
+      },
+      dark: {
+        ...colorSchemesInput.dark,
         palette: darkPalette,
-        opacity: _extends({
+        opacity: {
           inputPlaceholder: 0.5,
           inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
-          switchTrack: 0.3
-        }, colorSchemesInput.dark?.opacity),
+          switchTrack: 0.3,
+          ...colorSchemesInput.dark?.opacity
+        },
         overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
-      })
-    }),
-    font: _extends({}, prepareTypographyVars(muiTheme.typography), muiTheme.font),
+      }
+    },
+    font: {
+      ...prepareTypographyVars(muiTheme.typography),
+      ...muiTheme.font
+    },
     spacing: getSpacingVal(input.spacing)
-  });
+  };
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
     const setCssVarColor = cssVar => {
@@ -334,7 +341,10 @@ export default function extendTheme(options = {}, ...args) {
   theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
   theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = _extends({}, defaultSxConfig, input?.unstable_sxConfig);
+  theme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...input?.unstable_sxConfig
+  };
   theme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/styles/responsiveFontSizes.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
 export default function responsiveFontSizes(themeInput, options = {}) {
@@ -8,8 +7,12 @@ export default function responsiveFontSizes(themeInput, options = {}) {
     factor = 2,
     variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
   } = options;
-  const theme = _extends({}, themeInput);
-  theme.typography = _extends({}, theme.typography);
+  const theme = {
+    ...themeInput
+  };
+  theme.typography = {
+    ...theme.typography
+  };
   const typography = theme.typography;
 
   // Convert between CSS lengths e.g. em->px or px->rem
@@ -46,14 +49,17 @@ Use unitless line heights instead.` : _formatMuiErrorMessage(6));
         })
       });
     }
-    typography[variant] = _extends({}, style, responsiveProperty({
-      cssProperty: 'fontSize',
-      min: minFontSize,
-      max: maxFontSize,
-      unit: 'rem',
-      breakpoints: breakpointValues,
-      transform
-    }));
+    typography[variant] = {
+      ...style,
+      ...responsiveProperty({
+        cssProperty: 'fontSize',
+        min: minFontSize,
+        max: maxFontSize,
+        unit: 'rem',
+        breakpoints: breakpointValues,
+        transform
+      })
+    };
   });
   return theme;
 }

package/usePagination/usePagination.d.ts

@@ -43,7 +43,7 @@ export interface UsePaginationProps {
    */
   onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page?: number;
   /**

package/usePagination/usePagination.js

@@ -1,26 +1,23 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
 import useControlled from '@mui/utils/useControlled';
 export default function usePagination(props = {}) {
   // keep default values in sync with @default tags in Pagination.propTypes
   const {
-      boundaryCount = 1,
-      componentName = 'usePagination',
-      count = 1,
-      defaultPage = 1,
-      disabled = false,
-      hideNextButton = false,
-      hidePrevButton = false,
-      onChange: handleChange,
-      page: pageProp,
-      showFirstButton = false,
-      showLastButton = false,
-      siblingCount = 1
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    boundaryCount = 1,
+    componentName = 'usePagination',
+    count = 1,
+    defaultPage = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    page: pageProp,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    ...other
+  } = props;
   const [page, setPageState] = useControlled({
     controlled: pageProp,
     default: defaultPage,
@@ -109,7 +106,8 @@ export default function usePagination(props = {}) {
       disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
     };
   });
-  return _extends({
-    items
-  }, other);
+  return {
+    items,
+    ...other
+  };
 }

package/useScrollTrigger/useScrollTrigger.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getTrigger", "target"];
 import * as React from 'react';
 function defaultTrigger(store, options) {
   const {
@@ -25,17 +22,18 @@ function defaultTrigger(store, options) {
 const defaultTarget = typeof window !== 'undefined' ? window : null;
 export default function useScrollTrigger(options = {}) {
   const {
-      getTrigger = defaultTrigger,
-      target = defaultTarget
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    getTrigger = defaultTrigger,
+    target = defaultTarget,
+    ...other
+  } = options;
   const store = React.useRef();
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
     const handleScroll = () => {
-      setTrigger(getTrigger(store, _extends({
-        target
-      }, other)));
+      setTrigger(getTrigger(store, {
+        target,
+        ...other
+      }));
     };
     handleScroll(); // Re-evaluate trigger when dependencies change
     target.addEventListener('scroll', handleScroll, {

package/utils/createSvgIcon.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import SvgIcon from '../SvgIcon';
 
@@ -10,12 +9,12 @@ import SvgIcon from '../SvgIcon';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/_jsx(SvgIcon, _extends({
+    return /*#__PURE__*/_jsx(SvgIcon, {
       "data-testid": `${displayName}Icon`,
-      ref: ref
-    }, props, {
+      ref: ref,
+      ...props,
       children: path
-    }));
+    });
   }
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.

package/utils/useSlot.js

@@ -1,10 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"],
-  _excluded2 = ["component", "slots", "slotProps"],
-  _excluded3 = ["component"];
 import useForkRef from '@mui/utils/useForkRef';
 import { appendOwnerState, resolveComponentProps, mergeSlotProps } from '@mui/base/utils';
 /**
@@ -30,51 +25,57 @@ export default function useSlot(
  */
 name, parameters) {
   const {
-      className,
-      elementType: initialElementType,
-      ownerState,
-      externalForwardedProps,
-      getSlotOwnerState,
-      internalForwardedProps
-    } = parameters,
-    useSlotPropsParams = _objectWithoutPropertiesLoose(parameters, _excluded);
+    className,
+    elementType: initialElementType,
+    ownerState,
+    externalForwardedProps,
+    getSlotOwnerState,
+    internalForwardedProps,
+    ...useSlotPropsParams
+  } = parameters;
   const {
-      component: rootComponent,
-      slots = {
-        [name]: undefined
-      },
-      slotProps = {
-        [name]: undefined
-      }
-    } = externalForwardedProps,
-    other = _objectWithoutPropertiesLoose(externalForwardedProps, _excluded2);
+    component: rootComponent,
+    slots = {
+      [name]: undefined
+    },
+    slotProps = {
+      [name]: undefined
+    },
+    ...other
+  } = externalForwardedProps;
   const elementType = slots[name] || initialElementType;
 
   // `slotProps[name]` can be a callback that receives the component's ownerState.
   // `resolvedComponentsProps` is always a plain object.
   const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
-  const _mergeSlotProps = mergeSlotProps(_extends({
-      className
-    }, useSlotPropsParams, {
-      externalForwardedProps: name === 'root' ? other : undefined,
-      externalSlotProps: resolvedComponentsProps
-    })),
-    {
-      props: {
-        component: slotComponent
-      },
-      internalRef
-    } = _mergeSlotProps,
-    mergedProps = _objectWithoutPropertiesLoose(_mergeSlotProps.props, _excluded3);
+  const {
+    props: {
+      component: slotComponent,
+      ...mergedProps
+    },
+    internalRef
+  } = mergeSlotProps({
+    className,
+    ...useSlotPropsParams,
+    externalForwardedProps: name === 'root' ? other : undefined,
+    externalSlotProps: resolvedComponentsProps
+  });
   const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
   const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
-  const finalOwnerState = _extends({}, ownerState, slotOwnerState);
+  const finalOwnerState = {
+    ...ownerState,
+    ...slotOwnerState
+  };
   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
-  const props = appendOwnerState(elementType, _extends({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
-    as: LeafComponent
-  }, {
+  const props = appendOwnerState(elementType, {
+    ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
+    ...(name !== 'root' && !slots[name] && internalForwardedProps),
+    ...mergedProps,
+    ...(LeafComponent && {
+      as: LeafComponent
+    }),
     ref
-  }), finalOwnerState);
+  }, finalOwnerState);
   Object.keys(slotOwnerState).forEach(propName => {
     delete props[propName];
   });