@mui/material 6.0.0-alpha.9 → 6.0.0-beta.1

package/Modal/useModal.js

@@ -0,0 +1,195 @@
+'use client';
+
+import * as React from 'react';
+import { unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_createChainedFunction as createChainedFunction } from '@mui/utils';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
+import { ModalManager, ariaHidden } from './ModalManager';
+function getContainer(container) {
+  return typeof container === 'function' ? container() : container;
+}
+function getHasTransition(children) {
+  return children ? children.props.hasOwnProperty('in') : false;
+}
+
+// A modal manager used to track and manage the state of open Modals.
+// Modals don't open on the server so this won't conflict with concurrent requests.
+const defaultManager = new ModalManager();
+/**
+ *
+ * Demos:
+ *
+ * - [Modal](https://next.mui.com/base-ui/react-modal/#hook)
+ *
+ * API:
+ *
+ * - [useModal API](https://next.mui.com/base-ui/react-modal/hooks-api/#use-modal)
+ */
+function useModal(parameters) {
+  const {
+    container,
+    disableEscapeKeyDown = false,
+    disableScrollLock = false,
+    // @ts-ignore internal logic - Base UI supports the manager as a prop too
+    manager = defaultManager,
+    closeAfterTransition = false,
+    onTransitionEnter,
+    onTransitionExited,
+    children,
+    onClose,
+    open,
+    rootRef
+  } = parameters;
+
+  // @ts-ignore internal logic
+  const modal = React.useRef({});
+  const mountNodeRef = React.useRef(null);
+  const modalRef = React.useRef(null);
+  const handleRef = useForkRef(modalRef, rootRef);
+  const [exited, setExited] = React.useState(!open);
+  const hasTransition = getHasTransition(children);
+  let ariaHiddenProp = true;
+  if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
+    ariaHiddenProp = false;
+  }
+  const getDoc = () => ownerDocument(mountNodeRef.current);
+  const getModal = () => {
+    modal.current.modalRef = modalRef.current;
+    modal.current.mount = mountNodeRef.current;
+    return modal.current;
+  };
+  const handleMounted = () => {
+    manager.mount(getModal(), {
+      disableScrollLock
+    });
+
+    // Fix a bug on Chrome where the scroll isn't initially 0.
+    if (modalRef.current) {
+      modalRef.current.scrollTop = 0;
+    }
+  };
+  const handleOpen = useEventCallback(() => {
+    const resolvedContainer = getContainer(container) || getDoc().body;
+    manager.add(getModal(), resolvedContainer);
+
+    // The element was already mounted.
+    if (modalRef.current) {
+      handleMounted();
+    }
+  });
+  const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
+  const handlePortalRef = useEventCallback(node => {
+    mountNodeRef.current = node;
+    if (!node) {
+      return;
+    }
+    if (open && isTopModal()) {
+      handleMounted();
+    } else if (modalRef.current) {
+      ariaHidden(modalRef.current, ariaHiddenProp);
+    }
+  });
+  const handleClose = React.useCallback(() => {
+    manager.remove(getModal(), ariaHiddenProp);
+  }, [ariaHiddenProp, manager]);
+  React.useEffect(() => {
+    return () => {
+      handleClose();
+    };
+  }, [handleClose]);
+  React.useEffect(() => {
+    if (open) {
+      handleOpen();
+    } else if (!hasTransition || !closeAfterTransition) {
+      handleClose();
+    }
+  }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
+  const createHandleKeyDown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+
+    // The handler doesn't take event.defaultPrevented into account:
+    //
+    // event.preventDefault() is meant to stop default behaviors like
+    // clicking a checkbox to check it, hitting a button to submit a form,
+    // and hitting left arrow to move the cursor in a text input etc.
+    // Only special HTML elements have these default behaviors.
+    if (event.key !== 'Escape' || event.which === 229 ||
+    // Wait until IME is settled.
+    !isTopModal()) {
+      return;
+    }
+    if (!disableEscapeKeyDown) {
+      // Swallow the event, in case someone is listening for the escape key on the body.
+      event.stopPropagation();
+      if (onClose) {
+        onClose(event, 'escapeKeyDown');
+      }
+    }
+  };
+  const createHandleBackdropClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (onClose) {
+      onClose(event, 'backdropClick');
+    }
+  };
+  const getRootProps = (otherHandlers = {}) => {
+    const propsEventHandlers = extractEventHandlers(parameters);
+
+    // The custom event handlers shouldn't be spread on the root element
+    delete propsEventHandlers.onTransitionEnter;
+    delete propsEventHandlers.onTransitionExited;
+    const externalEventHandlers = {
+      ...propsEventHandlers,
+      ...otherHandlers
+    };
+    return {
+      role: 'presentation',
+      ...externalEventHandlers,
+      onKeyDown: createHandleKeyDown(externalEventHandlers),
+      ref: handleRef
+    };
+  };
+  const getBackdropProps = (otherHandlers = {}) => {
+    const externalEventHandlers = otherHandlers;
+    return {
+      'aria-hidden': true,
+      ...externalEventHandlers,
+      onClick: createHandleBackdropClick(externalEventHandlers),
+      open
+    };
+  };
+  const getTransitionProps = () => {
+    const handleEnter = () => {
+      setExited(false);
+      if (onTransitionEnter) {
+        onTransitionEnter();
+      }
+    };
+    const handleExited = () => {
+      setExited(true);
+      if (onTransitionExited) {
+        onTransitionExited();
+      }
+      if (closeAfterTransition) {
+        handleClose();
+      }
+    };
+    return {
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
+      onExited: createChainedFunction(handleExited, children?.props.onExited)
+    };
+  };
+  return {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    rootRef: handleRef,
+    portalRef: handlePortalRef,
+    isTopModal,
+    exited,
+    hasTransition
+  };
+}
+export default useModal;

package/Modal/useModal.types.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+import { PortalProps } from '../Portal';
+import { EventHandlers } from '../utils/types';
+export interface UseModalRootSlotOwnProps {
+    role: React.AriaRole;
+    onKeyDown: React.KeyboardEventHandler;
+    ref: React.RefCallback<Element> | null;
+}
+export interface UseModalBackdropSlotOwnProps {
+    'aria-hidden': React.AriaAttributes['aria-hidden'];
+    onClick: React.MouseEventHandler;
+    open?: boolean;
+}
+export type UseModalBackdropSlotProps<TOther = {}> = TOther & UseModalBackdropSlotOwnProps;
+export type UseModalRootSlotProps<TOther = {}> = TOther & UseModalRootSlotOwnProps;
+export type UseModalParameters = {
+    'aria-hidden'?: React.AriaAttributes['aria-hidden'];
+    /**
+     * A single child content element.
+     */
+    children: React.ReactElement<any> | undefined | null;
+    /**
+     * When set to true the Modal waits until a nested Transition is completed before closing.
+     * @default false
+     */
+    closeAfterTransition?: boolean;
+    /**
+     * An HTML element or function that returns one.
+     * The `container` will have the portal children appended to it.
+     *
+     * You can also provide a callback, which is called in a React layout effect.
+     * This lets you set the container from a ref, and also makes server-side rendering possible.
+     *
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
+     */
+    container?: PortalProps['container'];
+    /**
+     * If `true`, hitting escape will not fire the `onClose` callback.
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Disable the scroll lock behavior.
+     * @default false
+     */
+    disableScrollLock?: boolean;
+    /**
+     * Callback fired when the component requests to be closed.
+     * The `reason` parameter can optionally be used to control the response to `onClose`.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+     */
+    onClose?: {
+        bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
+    }['bivarianceHack'];
+    onKeyDown?: React.KeyboardEventHandler;
+    /**
+     * A function called when a transition enters.
+     */
+    onTransitionEnter?: () => void;
+    /**
+     * A function called when a transition has exited.
+     */
+    onTransitionExited?: () => void;
+    /**
+     * If `true`, the component is shown.
+     */
+    open: boolean;
+    rootRef: React.Ref<Element>;
+};
+export interface UseModalReturnValue {
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalRootSlotProps<TOther>;
+    /**
+     * Resolver for the backdrop slot's props.
+     * @param externalProps props for the backdrop slot
+     * @returns props that should be spread on the backdrop slot
+     */
+    getBackdropProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalBackdropSlotProps<TOther>;
+    /**
+     * Resolver for the transition related props.
+     * @param externalProps props for the transition element
+     * @returns props that should be spread on the transition element
+     */
+    getTransitionProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => {
+        onEnter: () => void;
+        onExited: () => void;
+    };
+    /**
+     * A ref to the component's root DOM element.
+     */
+    rootRef: React.RefCallback<Element> | null;
+    /**
+     * A ref to the component's portal DOM element.
+     */
+    portalRef: React.RefCallback<Element> | null;
+    /**
+     * If `true`, the modal is the top most one.
+     */
+    isTopModal: () => boolean;
+    /**
+     * If `true`, the exiting transition finished (to be used for unmounting the component).
+     */
+    exited: boolean;
+    /**
+     * If `true`, the component's child is transition component.
+     */
+    hasTransition: boolean;
+}

package/Modal/useModal.types.js

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

package/NativeSelect/NativeSelect.d.ts

@@ -57,12 +57,12 @@ export interface NativeSelectProps
  *
  * Demos:
  *
- * - [Select](https://mui.com/material-ui/react-select/)
+ * - [Select](https://next.mui.com/material-ui/react-select/)
  *
  * API:
  *
- * - [NativeSelect API](https://mui.com/material-ui/api/native-select/)
- * - inherits [Input API](https://mui.com/material-ui/api/input/)
+ * - [NativeSelect API](https://next.mui.com/material-ui/api/native-select/)
+ * - inherits [Input API](https://next.mui.com/material-ui/api/input/)
  */
 declare const NativeSelect: ((props: NativeSelectProps) => React.JSX.Element) & { muiName: string };
 

package/NativeSelect/NativeSelectInput.js

@@ -42,10 +42,6 @@ export const StyledSelectSelect = styled('select')(({
     // Reset Chrome style
     borderRadius: 0
   },
-  // Remove IE11 arrow
-  '&::-ms-expand': {
-    display: 'none'
-  },
   [`&.${nativeSelectClasses.disabled}`]: {
     cursor: 'default'
   },

package/NoSsr/NoSsr.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { NoSsrProps } from './NoSsr.types';
+/**
+ * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+ *
+ * This component can be useful in a variety of situations:
+ *
+ * *   Escape hatch for broken dependencies not supporting SSR.
+ * *   Improve the time-to-first paint on the client by only rendering above the fold.
+ * *   Reduce the rendering time on the server.
+ * *   Under too heavy server load, you can turn on service degradation.
+ *
+ * Demos:
+ *
+ * - [No SSR](https://next.mui.com/material-ui/react-no-ssr/)
+ *
+ * API:
+ *
+ * - [NoSsr API](https://next.mui.com/material-ui/api/no-ssr/)
+ */
+declare function NoSsr(props: NoSsrProps): React.JSX.Element;
+declare namespace NoSsr {
+    var propTypes: any;
+}
+export default NoSsr;

package/NoSsr/NoSsr.js

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+ *
+ * This component can be useful in a variety of situations:
+ *
+ * *   Escape hatch for broken dependencies not supporting SSR.
+ * *   Improve the time-to-first paint on the client by only rendering above the fold.
+ * *   Reduce the rendering time on the server.
+ * *   Under too heavy server load, you can turn on service degradation.
+ *
+ * Demos:
+ *
+ * - [No SSR](https://next.mui.com/material-ui/react-no-ssr/)
+ *
+ * API:
+ *
+ * - [NoSsr API](https://next.mui.com/material-ui/api/no-ssr/)
+ */
+function NoSsr(props) {
+  const {
+    children,
+    defer = false,
+    fallback = null
+  } = props;
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(() => {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+
+  // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: mountedState ? children : fallback
+  });
+}
+process.env.NODE_ENV !== "production" ? NoSsr.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * You can wrap a node.
+   */
+  children: PropTypes.node,
+  /**
+   * If `true`, the component will not only prevent server-side rendering.
+   * It will also defer the rendering of the children into a different screen frame.
+   * @default false
+   */
+  defer: PropTypes.bool,
+  /**
+   * The fallback content to display.
+   * @default null
+   */
+  fallback: PropTypes.node
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
+}
+export default NoSsr;

package/NoSsr/NoSsr.types.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface NoSsrProps {
+    /**
+     * You can wrap a node.
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, the component will not only prevent server-side rendering.
+     * It will also defer the rendering of the children into a different screen frame.
+     * @default false
+     */
+    defer?: boolean;
+    /**
+     * The fallback content to display.
+     * @default null
+     */
+    fallback?: React.ReactNode;
+}

package/NoSsr/NoSsr.types.js

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

package/NoSsr/index.d.ts

@@ -1,2 +1,3 @@
-export { NoSsr as default } from '@mui/base/NoSsr';
-export * from '@mui/base/NoSsr';
+export { default } from './NoSsr';
+export * from './NoSsr';
+export * from './NoSsr.types';

package/NoSsr/index.js

@@ -1 +1 @@
-export { NoSsr as default } from '@mui/base/NoSsr';
+export { default } from './NoSsr';

package/OutlinedInput/OutlinedInput.d.ts

@@ -28,12 +28,12 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
  *
  * Demos:
  *
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
- * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
+ * - [OutlinedInput API](https://next.mui.com/material-ui/api/outlined-input/)
+ * - inherits [InputBase API](https://next.mui.com/material-ui/api/input-base/)
  */
 declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
   muiName: string;

package/OutlinedInput/OutlinedInput.js

@@ -8,11 +8,11 @@ import NotchedOutline from './NotchedOutline';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiOutlinedInput');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -177,7 +177,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _React$Fragment;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
   });
@@ -268,8 +268,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/Pagination/Pagination.d.ts

@@ -80,10 +80,10 @@ export interface PaginationProps
  *
  * Demos:
  *
- * - [Pagination](https://mui.com/material-ui/react-pagination/)
+ * - [Pagination](https://next.mui.com/material-ui/react-pagination/)
  *
  * API:
  *
- * - [Pagination API](https://mui.com/material-ui/api/pagination/)
+ * - [Pagination API](https://next.mui.com/material-ui/api/pagination/)
  */
 export default function Pagination(props: PaginationProps): React.JSX.Element;

package/Pagination/Pagination.js

@@ -8,9 +8,9 @@ import integerPropType from '@mui/utils/integerPropType';
 import { getPaginationUtilityClass } from './paginationClasses';
 import usePagination from '../usePagination';
 import PaginationItem from '../PaginationItem';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiPagination');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -51,7 +51,7 @@ function defaultGetAriaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPagination'
   });

package/PaginationItem/PaginationItem.d.ts

@@ -118,11 +118,11 @@ export interface PaginationItemTypeMap<
  *
  * Demos:
  *
- * - [Pagination](https://mui.com/material-ui/react-pagination/)
+ * - [Pagination](https://next.mui.com/material-ui/react-pagination/)
  *
  * API:
  *
- * - [PaginationItem API](https://mui.com/material-ui/api/pagination-item/)
+ * - [PaginationItem API](https://next.mui.com/material-ui/api/pagination-item/)
  */
 declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
 

package/PaginationItem/PaginationItem.js

@@ -14,9 +14,9 @@ import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
 import useSlot from '../utils/useSlot';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiPaginationItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -266,7 +266,7 @@ const PaginationItemPageIcon = styled('div', {
   }]
 }));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPaginationItem'
   });

package/Paper/Paper.d.ts

@@ -50,12 +50,12 @@ export interface PaperTypeMap<
  *
  * Demos:
  *
- * - [Card](https://mui.com/material-ui/react-card/)
- * - [Paper](https://mui.com/material-ui/react-paper/)
+ * - [Card](https://next.mui.com/material-ui/react-card/)
+ * - [Paper](https://next.mui.com/material-ui/react-paper/)
  *
  * API:
  *
- * - [Paper API](https://mui.com/material-ui/api/paper/)
+ * - [Paper API](https://next.mui.com/material-ui/api/paper/)
  */
 declare const Paper: OverridableComponent<PaperTypeMap>;
 

package/Paper/Paper.js

@@ -7,12 +7,11 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import getOverlayAlpha from '../styles/getOverlayAlpha';
-import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiPaper');
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -65,7 +64,7 @@ const PaperRoot = styled('div', {
   }]
 }));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPaper'
   });