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

package/modern/useLazyRipple/index.js

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

package/modern/useLazyRipple/useLazyRipple.js

@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+/**
+ * Lazy initialization container for the Ripple instance. This improves
+ * performance by delaying mounting the ripple until it's needed.
+ */
+export class LazyRipple {
+  /** React ref to the ripple instance */
+
+  /** If the ripple component should be mounted */
+
+  /** Promise that resolves when the ripple component is mounted */
+
+  /** If the ripple component has been mounted */
+
+  /** React state hook setter */
+
+  static create() {
+    return new LazyRipple();
+  }
+  static use() {
+    /* eslint-disable */
+    const ripple = useLazyRef(LazyRipple.create).current;
+    const [shouldMount, setShouldMount] = React.useState(false);
+    ripple.shouldMount = shouldMount;
+    ripple.setShouldMount = setShouldMount;
+    React.useEffect(ripple.mountEffect, [shouldMount]);
+    /* eslint-enable */
+
+    return ripple;
+  }
+  constructor() {
+    this.ref = {
+      current: null
+    };
+    this.mounted = null;
+    this.didMount = false;
+    this.shouldMount = false;
+    this.setShouldMount = null;
+  }
+  mount() {
+    if (!this.mounted) {
+      this.mounted = createControlledPromise();
+      this.shouldMount = true;
+      this.setShouldMount(this.shouldMount);
+    }
+    return this.mounted;
+  }
+  mountEffect = () => {
+    if (this.shouldMount && !this.didMount) {
+      if (this.ref.current !== null) {
+        this.didMount = true;
+        this.mounted.resolve();
+      }
+    }
+  };
+
+  /* Ripple API */
+
+  start(...args) {
+    this.mount().then(() => this.ref.current?.start(...args));
+  }
+  stop(...args) {
+    this.mount().then(() => this.ref.current?.stop(...args));
+  }
+  pulsate(...args) {
+    this.mount().then(() => this.ref.current?.pulsate(...args));
+  }
+}
+export default function useLazyRipple() {
+  return LazyRipple.use();
+}
+function createControlledPromise() {
+  let resolve;
+  let reject;
+  const p = new Promise((resolveFn, rejectFn) => {
+    resolve = resolveFn;
+    reject = rejectFn;
+  });
+  p.resolve = resolve;
+  p.reject = reject;
+  return p;
+}

package/modern/usePagination/index.js

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

package/modern/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,
@@ -58,7 +55,7 @@ export default function usePagination(props = {}) {
   // Upper boundary when page is low
   boundaryCount + siblingCount * 2 + 2),
   // Less than endPages
-  endPages.length > 0 ? endPages[0] - 2 : count - 1);
+  count - boundaryCount - 1);
 
   // Basic list of items to render
   // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
@@ -106,10 +103,11 @@ export default function usePagination(props = {}) {
       type: item,
       page: buttonPage(item),
       selected: false,
-      disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
+      disabled: disabled || !item.includes('ellipsis') && (item === 'next' || item === 'last' ? page >= count : page <= 1)
     };
   });
-  return _extends({
-    items
-  }, other);
+  return {
+    items,
+    ...other
+  };
 }

package/modern/useScrollTrigger/index.js

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

package/modern/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/modern/utils/PolymorphicComponent.js

@@ -0,0 +1 @@
+export {};

package/modern/utils/areArraysEqual.js

@@ -0,0 +1,4 @@
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+export default areArraysEqual;

package/modern/utils/createSvgIcon.js

@@ -1,8 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import SvgIcon from '../SvgIcon';
+import SvgIcon from "../SvgIcon/index.js";
 
 /**
  * Private module reserved for @mui packages.
@@ -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/modern/utils/index.js

@@ -1,23 +1,23 @@
 'use client';
 
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/base/ClassNameGenerator';
-export { default as capitalize } from './capitalize';
-export { default as createChainedFunction } from './createChainedFunction';
-export { default as createSvgIcon } from './createSvgIcon';
-export { default as debounce } from './debounce';
-export { default as deprecatedPropType } from './deprecatedPropType';
-export { default as isMuiElement } from './isMuiElement';
-export { default as ownerDocument } from './ownerDocument';
-export { default as ownerWindow } from './ownerWindow';
-export { default as requirePropFactory } from './requirePropFactory';
-export { default as setRef } from './setRef';
-export { default as unstable_useEnhancedEffect } from './useEnhancedEffect';
-export { default as unstable_useId } from './useId';
-export { default as unsupportedProp } from './unsupportedProp';
-export { default as useControlled } from './useControlled';
-export { default as useEventCallback } from './useEventCallback';
-export { default as useForkRef } from './useForkRef';
-export { default as useIsFocusVisible } from './useIsFocusVisible';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
+export { default as capitalize } from "./capitalize.js";
+export { default as createChainedFunction } from "./createChainedFunction.js";
+export { default as createSvgIcon } from "./createSvgIcon.js";
+export { default as debounce } from "./debounce.js";
+export { default as deprecatedPropType } from "./deprecatedPropType.js";
+export { default as isMuiElement } from "./isMuiElement.js";
+export { default as unstable_memoTheme } from "./memoTheme.js";
+export { default as ownerDocument } from "./ownerDocument.js";
+export { default as ownerWindow } from "./ownerWindow.js";
+export { default as requirePropFactory } from "./requirePropFactory.js";
+export { default as setRef } from "./setRef.js";
+export { default as unstable_useEnhancedEffect } from "./useEnhancedEffect.js";
+export { default as unstable_useId } from "./useId.js";
+export { default as unsupportedProp } from "./unsupportedProp.js";
+export { default as useControlled } from "./useControlled.js";
+export { default as useEventCallback } from "./useEventCallback.js";
+export { default as useForkRef } from "./useForkRef.js";
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_ClassNameGenerator = {

package/modern/utils/isHostComponent.js

@@ -0,0 +1,7 @@
+/**
+ * Determines if a given element is a DOM element name (i.e. not a React component).
+ */
+function isHostComponent(element) {
+  return typeof element === 'string';
+}
+export default isHostComponent;

package/modern/utils/memoTheme.js

@@ -0,0 +1,24 @@
+// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
+// allocate more objects.
+const arg = {
+  theme: undefined
+};
+
+/**
+ * Memoize style function on theme.
+ * Intended to be used in styled() calls that only need access to the theme.
+ */
+export default function memoTheme(styleFn) {
+  let lastValue;
+  let lastTheme;
+  return props => {
+    let value = lastValue;
+    if (value === undefined || props.theme !== lastTheme) {
+      arg.theme = props.theme;
+      value = styleFn(arg);
+      lastValue = value;
+      lastTheme = props.theme;
+    }
+    return value;
+  };
+}

package/modern/utils/omitEventHandlers.js

@@ -0,0 +1,18 @@
+/**
+ * Removes event handlers from the given object.
+ * A field is considered an event handler if it is a function with a name beginning with `on`.
+ *
+ * @param object Object to remove event handlers from.
+ * @returns Object with event handlers removed.
+ */
+function omitEventHandlers(object) {
+  if (object === undefined) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+export default omitEventHandlers;

package/modern/utils/shouldSpreadAdditionalProps.js

@@ -1,4 +1,4 @@
-import { isHostComponent } from '@mui/base/utils';
+import isHostComponent from "./isHostComponent.js";
 const shouldSpreadAdditionalProps = Slot => {
   return !Slot || !isHostComponent(Slot);
 };

package/modern/utils/useSlot.js

@@ -1,12 +1,9 @@
 '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';
+import appendOwnerState from '@mui/utils/appendOwnerState';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import mergeSlotProps from '@mui/utils/mergeSlotProps';
 /**
  * An internal function to create a Material UI slot.
  *
@@ -30,51 +27,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];
   });

package/modern/version/index.js

@@ -0,0 +1,7 @@
+export const version = "6.0.0";
+export const major = Number("6");
+export const minor = Number("0");
+export const patch = Number("0");
+export const preReleaseLabel = undefined || null;
+export const preReleaseNumber = Number(undefined) || null;
+export default version;

package/modern/zero-styled/index.js

@@ -1,8 +1,27 @@
-import useThemeProps from '../styles/useThemeProps';
+import * as React from 'react';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
+import useTheme from "../styles/useTheme.js";
+import GlobalStyles from "../GlobalStyles/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export { css, keyframes } from '@mui/system';
-export { default as styled } from '../styles/styled';
+export { default as styled } from "../styles/styled.js";
+export function globalCss(styles) {
+  return function GlobalStylesWrapper(props) {
+    return (
+      /*#__PURE__*/
+      // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value.
+      _jsx(GlobalStyles, {
+        styles: typeof styles === 'function' ? theme => styles({
+          theme,
+          ...props
+        }) : styles
+      })
+    );
+  };
+}
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function createUseThemeProps(name) {
-  return useThemeProps;
-}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_createExtendSxProp() {
+  return extendSxProp;
+}
+export { useTheme };