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

package/TextareaAutosize/TextareaAutosize.js

@@ -0,0 +1,222 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getStyleValue(value) {
+  return parseInt(value, 10) || 0;
+}
+const styles = {
+  shadow: {
+    // Visibility needed to hide the extra text area on iPads
+    visibility: 'hidden',
+    // Remove from the content flow
+    position: 'absolute',
+    // Ignore the scrollbar width
+    overflow: 'hidden',
+    height: 0,
+    top: 0,
+    left: 0,
+    // Create a new layer, increase the isolation of the computed values
+    transform: 'translateZ(0)'
+  }
+};
+function isEmpty(obj) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
+ *
+ * API:
+ *
+ * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
+ */
+const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
+  const {
+    onChange,
+    maxRows,
+    minRows = 1,
+    style,
+    value,
+    ...other
+  } = props;
+  const {
+    current: isControlled
+  } = React.useRef(value != null);
+  const inputRef = React.useRef(null);
+  const handleRef = useForkRef(forwardedRef, inputRef);
+  const heightRef = React.useRef(null);
+  const shadowRef = React.useRef(null);
+  const calculateTextareaStyles = React.useCallback(() => {
+    const input = inputRef.current;
+    const containerWindow = ownerWindow(input);
+    const computedStyle = containerWindow.getComputedStyle(input);
+
+    // If input's width is shrunk and it's not visible, don't sync height.
+    if (computedStyle.width === '0px') {
+      return {
+        outerHeightStyle: 0,
+        overflowing: false
+      };
+    }
+    const inputShallow = shadowRef.current;
+    inputShallow.style.width = computedStyle.width;
+    inputShallow.value = input.value || props.placeholder || 'x';
+    if (inputShallow.value.slice(-1) === '\n') {
+      // Certain fonts which overflow the line height will cause the textarea
+      // to report a different scrollHeight depending on whether the last line
+      // is empty. Make it non-empty to avoid this issue.
+      inputShallow.value += ' ';
+    }
+    const boxSizing = computedStyle.boxSizing;
+    const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
+    const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
+
+    // The height of the inner content
+    const innerHeight = inputShallow.scrollHeight;
+
+    // Measure height of a textarea with a single row
+    inputShallow.value = 'x';
+    const singleRowHeight = inputShallow.scrollHeight;
+
+    // The height of the outer content
+    let outerHeight = innerHeight;
+    if (minRows) {
+      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+    }
+    if (maxRows) {
+      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+    }
+    outerHeight = Math.max(outerHeight, singleRowHeight);
+
+    // Take the box sizing into account for applying this value as a style.
+    const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
+    const overflowing = Math.abs(outerHeight - innerHeight) <= 1;
+    return {
+      outerHeightStyle,
+      overflowing
+    };
+  }, [maxRows, minRows, props.placeholder]);
+  const syncHeight = React.useCallback(() => {
+    const textareaStyles = calculateTextareaStyles();
+    if (isEmpty(textareaStyles)) {
+      return;
+    }
+    const outerHeightStyle = textareaStyles.outerHeightStyle;
+    const input = inputRef.current;
+    if (heightRef.current !== outerHeightStyle) {
+      heightRef.current = outerHeightStyle;
+      input.style.height = `${outerHeightStyle}px`;
+    }
+    input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
+  }, [calculateTextareaStyles]);
+  useEnhancedEffect(() => {
+    const handleResize = () => {
+      syncHeight();
+    };
+    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
+    // in test.
+    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
+    // Also see https://github.com/mui/mui-x/issues/8733
+    let rAF;
+    const rAFHandleResize = () => {
+      cancelAnimationFrame(rAF);
+      rAF = requestAnimationFrame(() => {
+        handleResize();
+      });
+    };
+    const debounceHandleResize = debounce(handleResize);
+    const input = inputRef.current;
+    const containerWindow = ownerWindow(input);
+    containerWindow.addEventListener('resize', debounceHandleResize);
+    let resizeObserver;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
+      resizeObserver.observe(input);
+    }
+    return () => {
+      debounceHandleResize.clear();
+      cancelAnimationFrame(rAF);
+      containerWindow.removeEventListener('resize', debounceHandleResize);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [calculateTextareaStyles, syncHeight]);
+  useEnhancedEffect(() => {
+    syncHeight();
+  });
+  const handleChange = event => {
+    if (!isControlled) {
+      syncHeight();
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("textarea", {
+      value: value,
+      onChange: handleChange,
+      ref: handleRef
+      // Apply the rows prop to get a "correct" first SSR paint
+      ,
+      rows: minRows,
+      style: style,
+      ...other
+    }), /*#__PURE__*/_jsx("textarea", {
+      "aria-hidden": true,
+      className: props.className,
+      readOnly: true,
+      ref: shadowRef,
+      tabIndex: -1,
+      style: {
+        ...styles.shadow,
+        ...style,
+        paddingTop: 0,
+        paddingBottom: 0
+      }
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" ? TextareaAutosize.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Maximum number of rows to display.
+   */
+  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Minimum number of rows to display.
+   * @default 1
+   */
+  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  placeholder: PropTypes.string,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * @ignore
+   */
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string])
+} : void 0;
+export default TextareaAutosize;

package/TextareaAutosize/TextareaAutosize.types.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface TextareaAutosizeProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'> {
+    ref?: React.Ref<HTMLTextAreaElement>;
+    /**
+     * Maximum number of rows to display.
+     */
+    maxRows?: string | number;
+    /**
+     * Minimum number of rows to display.
+     * @default 1
+     */
+    minRows?: string | number;
+}

package/TextareaAutosize/TextareaAutosize.types.js

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

package/TextareaAutosize/index.d.ts

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

package/TextareaAutosize/index.js

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

package/ToggleButton/ToggleButton.js

@@ -1,25 +1,22 @@
 'use client';
 
 // @inheritedComponent ButtonBase
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value"],
-  _excluded2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import ButtonBase from '../ButtonBase';
-import capitalize from '../utils/capitalize';
-import { createUseThemeProps, styled } from '../zero-styled';
-import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
-import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
-import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext';
-import isValueSelected from '../ToggleButtonGroup/isValueSelected';
+import ButtonBase from "../ButtonBase/index.js";
+import capitalize from "../utils/capitalize.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import toggleButtonClasses, { getToggleButtonUtilityClass } from "./toggleButtonClasses.js";
+import ToggleButtonGroupContext from "../ToggleButtonGroup/ToggleButtonGroupContext.js";
+import ToggleButtonGroupButtonContext from "../ToggleButtonGroup/ToggleButtonGroupButtonContext.js";
+import isValueSelected from "../ToggleButtonGroup/isValueSelected.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiToggleButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -43,9 +40,10 @@ const ToggleButtonRoot = styled(ButtonBase, {
     } = props;
     return [styles.root, styles[`size${capitalize(ownerState.size)}`]];
   }
-})(({
+})(memoTheme(({
   theme
-}) => _extends({}, theme.typography.button, {
+}) => ({
+  ...theme.typography.button,
   borderRadius: (theme.vars || theme).shape.borderRadius,
   padding: 11,
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
@@ -79,7 +77,7 @@ const ToggleButtonRoot = styled(ButtonBase, {
         }
       }
     }
-  }, ...Object.keys((theme.vars || theme).palette).filter(key => theme.vars ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel : theme.palette[key].main).map(color => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -120,43 +118,44 @@ const ToggleButtonRoot = styled(ButtonBase, {
       fontSize: theme.typography.pxToRem(15)
     }
   }]
-}));
+})));
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
-  const _React$useContext = React.useContext(ToggleButtonGroupContext),
-    {
-      value: contextValue
-    } = _React$useContext,
-    contextProps = _objectWithoutPropertiesLoose(_React$useContext, _excluded);
+  const {
+    value: contextValue,
+    ...contextProps
+  } = React.useContext(ToggleButtonGroupContext);
   const toggleButtonGroupButtonContextPositionClassName = React.useContext(ToggleButtonGroupButtonContext);
-  const resolvedProps = resolveProps(_extends({}, contextProps, {
+  const resolvedProps = resolveProps({
+    ...contextProps,
     selected: isValueSelected(inProps.value, contextValue)
-  }), inProps);
-  const props = useThemeProps({
+  }, inProps);
+  const props = useDefaultProps({
     props: resolvedProps,
     name: 'MuiToggleButton'
   });
   const {
-      children,
-      className,
-      color = 'standard',
-      disabled = false,
-      disableFocusRipple = false,
-      fullWidth = false,
-      onChange,
-      onClick,
-      selected,
-      size = 'medium',
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'standard',
+    disabled = false,
+    disableFocusRipple = false,
+    fullWidth = false,
+    onChange,
+    onClick,
+    selected,
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disabled,
     disableFocusRipple,
     fullWidth,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const handleChange = event => {
     if (onClick) {
@@ -170,7 +169,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     }
   };
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/_jsx(ToggleButtonRoot, _extends({
+  return /*#__PURE__*/_jsx(ToggleButtonRoot, {
     className: clsx(contextProps.className, classes.root, className, positionClassName),
     disabled: disabled,
     focusRipple: !disableFocusRipple,
@@ -179,10 +178,10 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     onChange: onChange,
     value: value,
     ownerState: ownerState,
-    "aria-pressed": selected
-  }, other, {
+    "aria-pressed": selected,
+    ...other,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ToggleButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ToggleButton/index.js

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

package/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -86,4 +86,4 @@ export interface ToggleButtonGroupProps
  *
  * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
  */
-export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

package/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,22 +1,20 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
-import { styled, createUseThemeProps } from '../zero-styled';
-import capitalize from '../utils/capitalize';
-import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from './toggleButtonGroupClasses';
-import ToggleButtonGroupContext from './ToggleButtonGroupContext';
-import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext';
-import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import capitalize from "../utils/capitalize.js";
+import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from "./toggleButtonGroupClasses.js";
+import ToggleButtonGroupContext from "./ToggleButtonGroupContext.js";
+import ToggleButtonGroupButtonContext from "./ToggleButtonGroupButtonContext.js";
+import toggleButtonClasses from "../ToggleButton/toggleButtonClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiToggleButtonGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -52,7 +50,7 @@ const ToggleButtonGroupRoot = styled('div', {
       [`& .${toggleButtonGroupClasses.middleButton}`]: styles.middleButton
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   display: 'inline-flex',
@@ -116,31 +114,32 @@ const ToggleButtonGroupRoot = styled('div', {
       }
     }
   }]
-}));
+})));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiToggleButtonGroup'
   });
   const {
-      children,
-      className,
-      color = 'standard',
-      disabled = false,
-      exclusive = false,
-      fullWidth = false,
-      onChange,
-      orientation = 'horizontal',
-      size = 'medium',
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'standard',
+    disabled = false,
+    exclusive = false,
+    fullWidth = false,
+    onChange,
+    orientation = 'horizontal',
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disabled,
     fullWidth,
     orientation,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback((event, buttonValue) => {
     if (!onChange) {
@@ -187,12 +186,12 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     }
     return classes.middleButton;
   };
-  return /*#__PURE__*/_jsx(ToggleButtonGroupRoot, _extends({
+  return /*#__PURE__*/_jsx(ToggleButtonGroupRoot, {
     role: "group",
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
       value: context,
       children: validChildren.map((child, index) => {
@@ -207,7 +206,7 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
         }, index);
       })
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ToggleButtonGroup/index.js

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

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -1,6 +1,8 @@
 export interface ToggleButtonGroupClasses {
     /** Styles applied to the root element. */
     root: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
     /** Styles applied to the root element if `orientation="horizontal"`. */
     horizontal: string;
     /** Styles applied to the root element if `orientation="vertical"`. */
@@ -10,11 +12,11 @@ export interface ToggleButtonGroupClasses {
     /** Styles applied to the children. */
     grouped: string;
     /** Styles applied to the children if `orientation="horizontal"`.
-     *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     groupedHorizontal: string;
     /** Styles applied to the children if `orientation="vertical"`.
-     * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     groupedVertical: string;
     /** Styles applied to the root element if `fullWidth={true}`. */

package/Toolbar/Toolbar.js

@@ -1,15 +1,13 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component", "disableGutters", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
-import { getToolbarUtilityClass } from './toolbarClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import { getToolbarUtilityClass } from "./toolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -31,7 +29,7 @@ const ToolbarRoot = styled('div', {
     } = props;
     return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   position: 'relative',
@@ -56,41 +54,39 @@ const ToolbarRoot = styled('div', {
     style: {
       minHeight: 48
     }
-  }]
-}), ({
-  theme
-}) => ({
-  variants: [{
+  }, {
     props: {
       variant: 'regular'
     },
     style: theme.mixins.toolbar
   }]
-}));
+})));
 const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiToolbar'
   });
   const {
-      className,
-      component = 'div',
-      disableGutters = false,
-      variant = 'regular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    disableGutters = false,
+    variant = 'regular',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     disableGutters,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ToolbarRoot, _extends({
+  return /*#__PURE__*/_jsx(ToolbarRoot, {
     as: component,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Toolbar/index.js

@@ -1,3 +1,3 @@
-export { default } from './Toolbar';
-export { default as toolbarClasses } from './toolbarClasses';
-export * from './toolbarClasses';
+export { default } from "./Toolbar.js";
+export { default as toolbarClasses } from "./toolbarClasses.js";
+export * from "./toolbarClasses.js";