@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.6

package/node/TableRow/TableRow.js

@@ -14,13 +14,13 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _Tablelvl2Context = _interopRequireDefault(require("../Table/Tablelvl2Context"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _tableRowClasses = _interopRequireWildcard(require("./tableRowClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "component", "hover", "selected"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTableRow');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableRowClasses.getTableRowUtilityClass, classes);
 };
-const TableRowRoot = (0, _styled.default)('tr', {
+const TableRowRoot = (0, _zeroStyled.styled)('tr', {
   name: 'MuiTableRow',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -67,7 +67,7 @@ const defaultComponent = 'tr';
  * based on the material table element parent (head, body, etc).
  */
 const TableRow = /*#__PURE__*/React.forwardRef(function TableRow(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTableRow'
   });

package/node/TableSortLabel/TableSortLabel.js

@@ -14,14 +14,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _ArrowDownward = _interopRequireDefault(require("../internal/svg-icons/ArrowDownward"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _tableSortLabelClasses = _interopRequireWildcard(require("./tableSortLabelClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["active", "children", "className", "direction", "hideSortIcon", "IconComponent"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTableSortLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableSortLabelClasses.getTableSortLabelUtilityClass, classes);
 };
-const TableSortLabelRoot = (0, _styled.default)(_ButtonBase.default, {
+const TableSortLabelRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiTableSortLabel',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -68,7 +68,7 @@ const TableSortLabelRoot = (0, _styled.default)(_ButtonBase.default, {
     }
   }
 }));
-const TableSortLabelIcon = (0, _styled.default)('span', {
+const TableSortLabelIcon = (0, _zeroStyled.styled)('span', {
   name: 'MuiTableSortLabel',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -109,7 +109,7 @@ const TableSortLabelIcon = (0, _styled.default)('span', {
  * A button based label for placing inside `TableCell` for column sorting.
  */
 const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTableSortLabel'
   });

package/node/Tabs/Tabs.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -16,8 +16,7 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _scrollLeft = require("../utils/scrollLeft");
@@ -32,6 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTabs');
 const nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
@@ -95,7 +95,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tabsClasses.getTabsUtilityClass, classes);
 };
-const TabsRoot = (0, _styled.default)('div', {
+const TabsRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiTabs',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -109,24 +109,34 @@ const TabsRoot = (0, _styled.default)('div', {
     }, styles.root, ownerState.vertical && styles.vertical];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   overflow: 'hidden',
   minHeight: 48,
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.scrollButtonsHideMobile && {
-  [`& .${_tabsClasses.default.scrollButtons}`]: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none'
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
     }
-  }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollButtonsHideMobile,
+    style: {
+      [`& .${_tabsClasses.default.scrollButtons}`]: {
+        [theme.breakpoints.down('sm')]: {
+          display: 'none'
+        }
+      }
+    }
+  }]
 }));
-const TabsScroller = (0, _styled.default)('div', {
+const TabsScroller = (0, _zeroStyled.styled)('div', {
   name: 'MuiTabs',
   slot: 'Scroller',
   overridesResolver: (props, styles) => {
@@ -135,31 +145,50 @@ const TabsScroller = (0, _styled.default)('div', {
     } = props;
     return [styles.scroller, ownerState.fixed && styles.fixed, ownerState.hideScrollbar && styles.hideScrollbar, ownerState.scrollableX && styles.scrollableX, ownerState.scrollableY && styles.scrollableY];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   position: 'relative',
   display: 'inline-block',
   flex: '1 1 auto',
-  whiteSpace: 'nowrap'
-}, ownerState.fixed && {
-  overflowX: 'hidden',
-  width: '100%'
-}, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on macOS
-  scrollbarWidth: 'none',
-  // Firefox
-  '&::-webkit-scrollbar': {
-    display: 'none' // Safari + Chrome
-  }
-}, ownerState.scrollableX && {
-  overflowX: 'auto',
-  overflowY: 'hidden'
-}, ownerState.scrollableY && {
-  overflowY: 'auto',
-  overflowX: 'hidden'
-}));
-const FlexContainer = (0, _styled.default)('div', {
+  whiteSpace: 'nowrap',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.fixed,
+    style: {
+      overflowX: 'hidden',
+      width: '100%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hideScrollbar,
+    style: {
+      // Hide dimensionless scrollbar on macOS
+      scrollbarWidth: 'none',
+      // Firefox
+      '&::-webkit-scrollbar': {
+        display: 'none' // Safari + Chrome
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollableX,
+    style: {
+      overflowX: 'auto',
+      overflowY: 'hidden'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollableY,
+    style: {
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    }
+  }]
+});
+const FlexContainer = (0, _zeroStyled.styled)('div', {
   name: 'MuiTabs',
   slot: 'FlexContainer',
   overridesResolver: (props, styles) => {
@@ -168,38 +197,62 @@ const FlexContainer = (0, _styled.default)('div', {
     } = props;
     return [styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.centered && {
-  justifyContent: 'center'
-}));
-const TabsIndicator = (0, _styled.default)('span', {
+})({
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.centered,
+    style: {
+      justifyContent: 'center'
+    }
+  }]
+});
+const TabsIndicator = (0, _zeroStyled.styled)('span', {
   name: 'MuiTabs',
   slot: 'Indicator',
   overridesResolver: (props, styles) => styles.indicator
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   position: 'absolute',
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create()
-}, ownerState.indicatorColor === 'primary' && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-}, ownerState.indicatorColor === 'secondary' && {
-  backgroundColor: (theme.vars || theme).palette.secondary.main
-}, ownerState.vertical && {
-  height: '100%',
-  width: 2,
-  right: 0
+  transition: theme.transitions.create(),
+  variants: [{
+    props: {
+      indicatorColor: 'primary'
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main
+    }
+  }, {
+    props: {
+      indicatorColor: 'secondary'
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.secondary.main
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      height: '100%',
+      width: 2,
+      right: 0
+    }
+  }]
 }));
-const TabsScrollbarSize = (0, _styled.default)(_ScrollbarSize.default)({
+const TabsScrollbarSize = (0, _zeroStyled.styled)(_ScrollbarSize.default)({
   overflowX: 'auto',
   overflowY: 'hidden',
   // Hide dimensionless scrollbar on macOS
@@ -212,7 +265,7 @@ const TabsScrollbarSize = (0, _styled.default)(_ScrollbarSize.default)({
 const defaultIndicatorStyle = {};
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTabs'
   });

package/node/TextField/TextField.js

@@ -14,8 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _Input = _interopRequireDefault(require("../Input"));
 var _FilledInput = _interopRequireDefault(require("../FilledInput"));
 var _OutlinedInput = _interopRequireDefault(require("../OutlinedInput"));
@@ -28,6 +27,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTextField');
 const variantComponent = {
   standard: _Input.default,
   filled: _FilledInput.default,
@@ -42,7 +42,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _textFieldClasses.getTextFieldUtilityClass, classes);
 };
-const TextFieldRoot = (0, _styled.default)(_FormControl.default, {
+const TextFieldRoot = (0, _zeroStyled.styled)(_FormControl.default, {
   name: 'MuiTextField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -81,7 +81,7 @@ const TextFieldRoot = (0, _styled.default)(_FormControl.default, {
  * - using the underlying components directly as shown in the demos
  */
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTextField'
   });

package/node/Toolbar/Toolbar.js

@@ -12,13 +12,13 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _toolbarClasses = require("./toolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "component", "disableGutters", "variant"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiToolbar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _toolbarClasses.getToolbarUtilityClass, classes);
 };
-const ToolbarRoot = (0, _styled.default)('div', {
+const ToolbarRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiToolbar',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -64,11 +64,7 @@ const ToolbarRoot = (0, _styled.default)('div', {
     style: {
       minHeight: 48
     }
-  }]
-}), ({
-  theme
-}) => ({
-  variants: [{
+  }, {
     props: {
       variant: 'regular'
     },
@@ -76,7 +72,7 @@ const ToolbarRoot = (0, _styled.default)('div', {
   }]
 }));
 const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiToolbar'
   });