@mui/material 6.0.0-alpha.8 → 6.0.0-beta.0

package/usePagination/usePagination.js

@@ -55,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']

package/utils/index.d.ts

@@ -14,5 +14,4 @@ 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';
 export { unstable_ClassNameGenerator } from '@mui/base/ClassNameGenerator';

package/utils/index.js

@@ -17,7 +17,6 @@ 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';
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_ClassNameGenerator = {

package/zero-styled/index.d.ts

@@ -1,4 +1,12 @@
-import useThemeProps from '../styles/useThemeProps';
+import * as React from 'react';
+import { Interpolation } from '@mui/system';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
+import { Theme } from '../styles/createTheme';
+import useTheme from '../styles/useTheme';
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
-export declare function createUseThemeProps(name: string): typeof useThemeProps;
+export declare function globalCss(styles: Interpolation<{
+    theme: Theme;
+}>): (props: Record<string, any>) => React.JSX.Element;
+export declare function internal_createExtendSxProp(): typeof extendSxProp;
+export { useTheme };

package/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';
+import GlobalStyles from '../GlobalStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
+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 };

package/modern/useMediaQuery/useMediaQueryTheme.js

@@ -1,8 +0,0 @@
-'use client';
-
-import useMediaQuery from '@mui/system/useMediaQuery';
-
-// TODO v5: to deprecate in v4.x and remove in v5
-export default function useMediaQueryTheme(...args) {
-  return useMediaQuery(...args);
-}

package/modern/useTouchRipple/index.js

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

package/modern/useTouchRipple/useTouchRipple.js

@@ -1,94 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useEventCallback } from '../utils';
-const useTouchRipple = props => {
-  const {
-    disabled,
-    disableFocusRipple,
-    disableRipple,
-    disableTouchRipple,
-    focusVisible,
-    rippleRef
-  } = props;
-  React.useEffect(() => {
-    if (focusVisible && !disableFocusRipple && !disableRipple) {
-      rippleRef.current?.pulsate();
-    }
-  }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
-  function useRippleHandler(rippleAction, skipRippleAction = disableTouchRipple) {
-    return useEventCallback(event => {
-      if (!skipRippleAction && rippleRef.current) {
-        rippleRef.current[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const keydownRef = React.useRef(false);
-  const handleKeyDown = useEventCallback(event => {
-    if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-      keydownRef.current = true;
-      rippleRef.current.stop(event, () => {
-        rippleRef?.current?.start(event);
-      });
-    }
-  });
-  const handleKeyUp = useEventCallback(event => {
-    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-      keydownRef.current = false;
-      rippleRef.current.stop(event, () => {
-        rippleRef?.current?.pulsate(event);
-      });
-    }
-  });
-  const handleBlur = useRippleHandler('stop', false);
-  const handleMouseDown = useRippleHandler('start');
-  const handleContextMenu = useRippleHandler('stop');
-  const handleDragLeave = useRippleHandler('stop');
-  const handleMouseUp = useRippleHandler('stop');
-  const handleMouseLeave = useRippleHandler('stop');
-  const handleTouchStart = useRippleHandler('start');
-  const handleTouchEnd = useRippleHandler('stop');
-  const handleTouchMove = useRippleHandler('stop');
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
-  const getRippleHandlers = React.useMemo(() => {
-    const rippleHandlers = {
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      onMouseLeave: handleMouseLeave,
-      onContextMenu: handleContextMenu,
-      onDragLeave: handleDragLeave,
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-      onTouchMove: handleTouchMove
-    };
-    return (otherEvents = {}) => {
-      const eventNames = Object.keys(rippleHandlers);
-      const wrappedEvents = eventNames.map(eventName => ({
-        name: eventName,
-        handler: ev => {
-          otherEvents[eventName]?.(ev);
-          rippleHandlers[eventName](ev);
-        }
-      }));
-      return wrappedEvents.reduce((acc, current) => {
-        acc[current.name] = current.handler;
-        return acc;
-      }, {});
-    };
-  }, [handleBlur, handleKeyDown, handleKeyUp, handleMouseDown, handleMouseUp, handleMouseLeave, handleContextMenu, handleDragLeave, handleTouchStart, handleTouchEnd, handleTouchMove]);
-  return {
-    enableTouchRipple,
-    getRippleHandlers
-  };
-};
-export default useTouchRipple;

package/modern/utils/scrollLeft.js

@@ -1 +0,0 @@
-export { unstable_detectScrollType as detectScrollType, unstable_getNormalizedScrollLeft as getNormalizedScrollLeft } from '@mui/utils';

package/modern/utils/useIsFocusVisible.js

@@ -1,4 +0,0 @@
-'use client';
-
-import useIsFocusVisible from '@mui/utils/useIsFocusVisible';
-export default useIsFocusVisible;

package/node/useMediaQuery/useMediaQueryTheme.js

@@ -1,13 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useMediaQueryTheme;
-var _useMediaQuery = _interopRequireDefault(require("@mui/system/useMediaQuery"));
-// TODO v5: to deprecate in v4.x and remove in v5
-function useMediaQueryTheme(...args) {
-  return (0, _useMediaQuery.default)(...args);
-}

package/node/useTouchRipple/useTouchRipple.js

@@ -1,105 +0,0 @@
-"use strict";
-'use client';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _utils = require("../utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useTouchRipple = props => {
-  const {
-    disabled,
-    disableFocusRipple,
-    disableRipple,
-    disableTouchRipple,
-    focusVisible,
-    rippleRef
-  } = props;
-  React.useEffect(() => {
-    if (focusVisible && !disableFocusRipple && !disableRipple) {
-      var _rippleRef$current;
-      (_rippleRef$current = rippleRef.current) == null || _rippleRef$current.pulsate();
-    }
-  }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
-  function useRippleHandler(rippleAction, skipRippleAction = disableTouchRipple) {
-    return (0, _utils.useEventCallback)(event => {
-      if (!skipRippleAction && rippleRef.current) {
-        rippleRef.current[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const keydownRef = React.useRef(false);
-  const handleKeyDown = (0, _utils.useEventCallback)(event => {
-    if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-      keydownRef.current = true;
-      rippleRef.current.stop(event, () => {
-        var _rippleRef$current2;
-        rippleRef == null || (_rippleRef$current2 = rippleRef.current) == null || _rippleRef$current2.start(event);
-      });
-    }
-  });
-  const handleKeyUp = (0, _utils.useEventCallback)(event => {
-    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-      keydownRef.current = false;
-      rippleRef.current.stop(event, () => {
-        var _rippleRef$current3;
-        rippleRef == null || (_rippleRef$current3 = rippleRef.current) == null || _rippleRef$current3.pulsate(event);
-      });
-    }
-  });
-  const handleBlur = useRippleHandler('stop', false);
-  const handleMouseDown = useRippleHandler('start');
-  const handleContextMenu = useRippleHandler('stop');
-  const handleDragLeave = useRippleHandler('stop');
-  const handleMouseUp = useRippleHandler('stop');
-  const handleMouseLeave = useRippleHandler('stop');
-  const handleTouchStart = useRippleHandler('start');
-  const handleTouchEnd = useRippleHandler('stop');
-  const handleTouchMove = useRippleHandler('stop');
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
-  const getRippleHandlers = React.useMemo(() => {
-    const rippleHandlers = {
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      onMouseLeave: handleMouseLeave,
-      onContextMenu: handleContextMenu,
-      onDragLeave: handleDragLeave,
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-      onTouchMove: handleTouchMove
-    };
-    return (otherEvents = {}) => {
-      const eventNames = Object.keys(rippleHandlers);
-      const wrappedEvents = eventNames.map(eventName => ({
-        name: eventName,
-        handler: ev => {
-          var _otherEvents$eventNam;
-          (_otherEvents$eventNam = otherEvents[eventName]) == null || _otherEvents$eventNam.call(otherEvents, ev);
-          rippleHandlers[eventName](ev);
-        }
-      }));
-      return wrappedEvents.reduce((acc, current) => {
-        acc[current.name] = current.handler;
-        return acc;
-      }, {});
-    };
-  }, [handleBlur, handleKeyDown, handleKeyUp, handleMouseDown, handleMouseUp, handleMouseLeave, handleContextMenu, handleDragLeave, handleTouchStart, handleTouchEnd, handleTouchMove]);
-  return {
-    enableTouchRipple,
-    getRippleHandlers
-  };
-};
-var _default = exports.default = useTouchRipple;

package/node/utils/scrollLeft.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "detectScrollType", {
-  enumerable: true,
-  get: function () {
-    return _utils.unstable_detectScrollType;
-  }
-});
-Object.defineProperty(exports, "getNormalizedScrollLeft", {
-  enumerable: true,
-  get: function () {
-    return _utils.unstable_getNormalizedScrollLeft;
-  }
-});
-var _utils = require("@mui/utils");

package/node/utils/useIsFocusVisible.js

@@ -1,10 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _useIsFocusVisible = _interopRequireDefault(require("@mui/utils/useIsFocusVisible"));
-var _default = exports.default = _useIsFocusVisible.default;

package/useMediaQuery/useMediaQueryTheme.d.ts

@@ -1,3 +0,0 @@
-import useMediaQuery from '@mui/system/useMediaQuery';
-
-export default useMediaQuery;

package/useMediaQuery/useMediaQueryTheme.js

@@ -1,8 +0,0 @@
-'use client';
-
-import useMediaQuery from '@mui/system/useMediaQuery';
-
-// TODO v5: to deprecate in v4.x and remove in v5
-export default function useMediaQueryTheme(...args) {
-  return useMediaQuery(...args);
-}

package/useTouchRipple/index.d.ts

@@ -1 +0,0 @@
-export { default } from './useTouchRipple';

package/useTouchRipple/index.js

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

package/useTouchRipple/useTouchRipple.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { TouchRippleActions } from '../ButtonBase/TouchRipple';
-interface UseTouchRippleProps {
-    disabled: boolean;
-    disableFocusRipple?: boolean;
-    disableRipple?: boolean;
-    disableTouchRipple?: boolean;
-    focusVisible: boolean;
-    rippleRef: React.RefObject<TouchRippleActions>;
-}
-interface RippleEventHandlers {
-    onBlur: React.FocusEventHandler;
-    onContextMenu: React.MouseEventHandler;
-    onDragLeave: React.DragEventHandler;
-    onKeyDown: React.KeyboardEventHandler;
-    onKeyUp: React.KeyboardEventHandler;
-    onMouseDown: React.MouseEventHandler;
-    onMouseLeave: React.MouseEventHandler;
-    onMouseUp: React.MouseEventHandler;
-    onTouchEnd: React.TouchEventHandler;
-    onTouchMove: React.TouchEventHandler;
-    onTouchStart: React.TouchEventHandler;
-}
-declare const useTouchRipple: (props: UseTouchRippleProps) => {
-    enableTouchRipple: boolean;
-    getRippleHandlers: (otherEvents?: Partial<RippleEventHandlers>) => RippleEventHandlers;
-};
-export default useTouchRipple;

package/useTouchRipple/useTouchRipple.js

@@ -1,94 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useEventCallback } from '../utils';
-const useTouchRipple = props => {
-  const {
-    disabled,
-    disableFocusRipple,
-    disableRipple,
-    disableTouchRipple,
-    focusVisible,
-    rippleRef
-  } = props;
-  React.useEffect(() => {
-    if (focusVisible && !disableFocusRipple && !disableRipple) {
-      rippleRef.current?.pulsate();
-    }
-  }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
-  function useRippleHandler(rippleAction, skipRippleAction = disableTouchRipple) {
-    return useEventCallback(event => {
-      if (!skipRippleAction && rippleRef.current) {
-        rippleRef.current[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const keydownRef = React.useRef(false);
-  const handleKeyDown = useEventCallback(event => {
-    if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-      keydownRef.current = true;
-      rippleRef.current.stop(event, () => {
-        rippleRef?.current?.start(event);
-      });
-    }
-  });
-  const handleKeyUp = useEventCallback(event => {
-    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-      keydownRef.current = false;
-      rippleRef.current.stop(event, () => {
-        rippleRef?.current?.pulsate(event);
-      });
-    }
-  });
-  const handleBlur = useRippleHandler('stop', false);
-  const handleMouseDown = useRippleHandler('start');
-  const handleContextMenu = useRippleHandler('stop');
-  const handleDragLeave = useRippleHandler('stop');
-  const handleMouseUp = useRippleHandler('stop');
-  const handleMouseLeave = useRippleHandler('stop');
-  const handleTouchStart = useRippleHandler('start');
-  const handleTouchEnd = useRippleHandler('stop');
-  const handleTouchMove = useRippleHandler('stop');
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
-  const getRippleHandlers = React.useMemo(() => {
-    const rippleHandlers = {
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      onMouseLeave: handleMouseLeave,
-      onContextMenu: handleContextMenu,
-      onDragLeave: handleDragLeave,
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-      onTouchMove: handleTouchMove
-    };
-    return (otherEvents = {}) => {
-      const eventNames = Object.keys(rippleHandlers);
-      const wrappedEvents = eventNames.map(eventName => ({
-        name: eventName,
-        handler: ev => {
-          otherEvents[eventName]?.(ev);
-          rippleHandlers[eventName](ev);
-        }
-      }));
-      return wrappedEvents.reduce((acc, current) => {
-        acc[current.name] = current.handler;
-        return acc;
-      }, {});
-    };
-  }, [handleBlur, handleKeyDown, handleKeyUp, handleMouseDown, handleMouseUp, handleMouseLeave, handleContextMenu, handleDragLeave, handleTouchStart, handleTouchEnd, handleTouchMove]);
-  return {
-    enableTouchRipple,
-    getRippleHandlers
-  };
-};
-export default useTouchRipple;

package/utils/scrollLeft.js

@@ -1 +0,0 @@
-export { unstable_detectScrollType as detectScrollType, unstable_getNormalizedScrollLeft as getNormalizedScrollLeft } from '@mui/utils';

package/utils/useIsFocusVisible.d.ts

@@ -1,3 +0,0 @@
-import useIsFocusVisible from '@mui/utils/useIsFocusVisible';
-
-export default useIsFocusVisible;

package/utils/useIsFocusVisible.js

@@ -1,4 +0,0 @@
-'use client';
-
-import useIsFocusVisible from '@mui/utils/useIsFocusVisible';
-export default useIsFocusVisible;