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

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://mui.com/material-ui/react-no-ssr/)
+ *
+ * API:
+ *
+ * - [NoSsr API](https://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://mui.com/material-ui/react-no-ssr/)
+ *
+ * API:
+ *
+ * - [NoSsr API](https://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.js";

package/OutlinedInput/NotchedOutline.js

@@ -1,12 +1,11 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _span;
-const _excluded = ["children", "classes", "className", "label", "notched"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
   shouldForwardProp: rootShouldForwardProp
@@ -28,51 +27,67 @@ const NotchedOutlineRoot = styled('fieldset', {
 });
 const NotchedOutlineLegend = styled('legend', {
   shouldForwardProp: rootShouldForwardProp
-})(({
-  ownerState,
+})(memoTheme(({
   theme
-}) => _extends({
+}) => ({
   float: 'unset',
   // Fix conflict with bootstrap
   width: 'auto',
   // Fix conflict with bootstrap
-  overflow: 'hidden'
-}, !ownerState.withLabel && {
-  padding: 0,
-  lineHeight: '11px',
-  // sync with `height` in `legend` styles
-  transition: theme.transitions.create('width', {
-    duration: 150,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.withLabel && _extends({
-  display: 'block',
-  // Fix conflict with normalize.css and sanitize.css
-  padding: 0,
-  height: 11,
-  // sync with `lineHeight` in `legend` styles
-  fontSize: '0.75em',
-  visibility: 'hidden',
-  maxWidth: 0.01,
-  transition: theme.transitions.create('max-width', {
-    duration: 50,
-    easing: theme.transitions.easing.easeOut
-  }),
-  whiteSpace: 'nowrap',
-  '& > span': {
-    paddingLeft: 5,
-    paddingRight: 5,
-    display: 'inline-block',
-    opacity: 0,
-    visibility: 'visible'
-  }
-}, ownerState.notched && {
-  maxWidth: '100%',
-  transition: theme.transitions.create('max-width', {
-    duration: 100,
-    easing: theme.transitions.easing.easeOut,
-    delay: 50
-  })
+  overflow: 'hidden',
+  // Fix Horizontal scroll when label too long
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.withLabel,
+    style: {
+      padding: 0,
+      lineHeight: '11px',
+      // sync with `height` in `legend` styles
+      transition: theme.transitions.create('width', {
+        duration: 150,
+        easing: theme.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel,
+    style: {
+      display: 'block',
+      // Fix conflict with normalize.css and sanitize.css
+      padding: 0,
+      height: 11,
+      // sync with `lineHeight` in `legend` styles
+      fontSize: '0.75em',
+      visibility: 'hidden',
+      maxWidth: 0.01,
+      transition: theme.transitions.create('max-width', {
+        duration: 50,
+        easing: theme.transitions.easing.easeOut
+      }),
+      whiteSpace: 'nowrap',
+      '& > span': {
+        paddingLeft: 5,
+        paddingRight: 5,
+        display: 'inline-block',
+        opacity: 0,
+        visibility: 'visible'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel && ownerState.notched,
+    style: {
+      maxWidth: '100%',
+      transition: theme.transitions.create('max-width', {
+        duration: 100,
+        easing: theme.transitions.easing.easeOut,
+        delay: 50
+      })
+    }
+  }]
 })));
 
 /**
@@ -80,21 +95,24 @@ const NotchedOutlineLegend = styled('legend', {
  */
 export default function NotchedOutline(props) {
   const {
-      className,
-      label,
-      notched
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    classes,
+    className,
+    label,
+    notched,
+    ...other
+  } = props;
   const withLabel = label != null && label !== '';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     notched,
     withLabel
-  });
-  return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
+  };
+  return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
     "aria-hidden": true,
     className: className,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
       ownerState: ownerState,
       children: withLabel ? /*#__PURE__*/_jsx("span", {
@@ -105,9 +123,9 @@ export default function NotchedOutline(props) {
         children: "\u200B"
       }))
     })
-  }));
+  });
 }
-process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
+process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-proptypes */ = {
   /**
    * The content of the component.
    */

package/OutlinedInput/OutlinedInput.d.ts

@@ -35,6 +35,8 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
  * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-declare const OutlinedInput: ((props: OutlinedInputProps) => JSX.Element) & { muiName: string };
+declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
+  muiName: string;
+};
 
 export default OutlinedInput;

package/OutlinedInput/OutlinedInput.js

@@ -1,19 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
-import NotchedOutline from './NotchedOutline';
-import useFormControl from '../FormControl/useFormControl';
-import formControlState from '../FormControl/formControlState';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
-import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
-import useThemeProps from '../styles/useThemeProps';
+import NotchedOutline from "./NotchedOutline.js";
+import useFormControl from "../FormControl/useFormControl.js";
+import formControlState from "../FormControl/formControlState.js";
+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 outlinedInputClasses, { getOutlinedInputUtilityClass } from "./outlinedInputClasses.js";
+import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -25,115 +24,175 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const OutlinedInputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   name: 'MuiOutlinedInput',
   slot: 'Root',
   overridesResolver: inputBaseRootOverridesResolver
-})(({
-  theme,
-  ownerState
+})(memoTheme(({
+  theme
 }) => {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
-  return _extends({
+  return {
     position: 'relative',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary
     },
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
-      }
-    },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2
     },
-    [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.error.main
-    },
-    [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.action.disabled
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 14
-  }, ownerState.endAdornment && {
-    paddingRight: 14
-  }, ownerState.multiline && _extends({
-    padding: '16.5px 14px'
-  }, ownerState.size === 'small' && {
-    padding: '8.5px 14px'
-  }));
-});
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette[color].main
+        }
+      }
+    })), {
+      props: {},
+      // to overide the above style
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+          }
+        },
+        [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.error.main
+        },
+        [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        padding: '16.5px 14px'
+      }
+    }, {
+      props: ({
+        ownerState,
+        size
+      }) => ownerState.multiline && size === 'small',
+      style: {
+        padding: '8.5px 14px'
+      }
+    }]
+  };
+}));
 const NotchedOutlineRoot = styled(NotchedOutline, {
   name: 'MuiOutlinedInput',
   slot: 'NotchedOutline',
   overridesResolver: (props, styles) => styles.notchedOutline
-})(({
+})(memoTheme(({
   theme
 }) => {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return {
     borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
   };
-});
+}));
 const OutlinedInputInput = styled(InputBaseInput, {
   name: 'MuiOutlinedInput',
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver
-})(({
-  theme,
-  ownerState
-}) => _extends({
-  padding: '16.5px 14px'
-}, !theme.vars && {
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-    WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-    caretColor: theme.palette.mode === 'light' ? null : '#fff',
-    borderRadius: 'inherit'
-  }
-}, theme.vars && {
-  '&:-webkit-autofill': {
-    borderRadius: 'inherit'
-  },
-  [theme.getColorSchemeSelector('dark')]: {
+})(memoTheme(({
+  theme
+}) => ({
+  padding: '16.5px 14px',
+  ...(!theme.vars && {
     '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #266798 inset',
-      WebkitTextFillColor: '#fff',
-      caretColor: '#fff'
+      WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+      caretColor: theme.palette.mode === 'light' ? null : '#fff',
+      borderRadius: 'inherit'
     }
-  }
-}, ownerState.size === 'small' && {
-  padding: '8.5px 14px'
-}, ownerState.multiline && {
-  padding: 0
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
-}));
+  }),
+  ...(theme.vars && {
+    '&:-webkit-autofill': {
+      borderRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
+  }),
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '8.5px 14px'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }]
+})));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _React$Fragment;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
   });
   const {
-      components = {},
-      fullWidth = false,
-      inputComponent = 'input',
-      label,
-      multiline = false,
-      notched,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    components = {},
+    fullWidth = false,
+    inputComponent = 'input',
+    label,
+    multiline = false,
+    notched,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
   const classes = useUtilityClasses(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -141,7 +200,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     muiFormControl,
     states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     disabled: fcs.disabled,
     error: fcs.error,
@@ -152,10 +212,10 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline,
     size: fcs.size,
     type
-  });
+  };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -172,12 +232,13 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
-    classes: _extends({}, classes, {
+    type: type,
+    ...other,
+    classes: {
+      ...classes,
       notchedOutline: null
-    })
-  }));
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -208,8 +269,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 {}
    */
@@ -345,5 +405,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-OutlinedInput.muiName = 'Input';
+if (OutlinedInput) {
+  OutlinedInput.muiName = 'Input';
+}
 export default OutlinedInput;

package/OutlinedInput/index.js

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