@mui/x-date-pickers 8.0.0-beta.3 → 8.1.0

package/PickersTextField/PickersInputBase/PickersInputBase.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PickersInputBaseProps } from "./PickersInputBase.types.js";
-import { PickerTextFieldOwnerState } from "../PickersTextField.types.js";
+import { PickerTextFieldOwnerState } from "../../models/fields.js";
 export declare const PickersInputBaseRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
   ownerState: PickerTextFieldOwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -26,8 +26,7 @@ const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "
 const round = value => Math.round(value * 1e5) / 1e5;
 const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersInputBase',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
@@ -52,8 +51,7 @@ const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)(
 }));
 const PickersInputBaseSectionsContainer = exports.PickersInputBaseSectionsContainer = (0, _styles.styled)(_PickersSectionList.Unstable_PickersSectionListRoot, {
   name: 'MuiPickersInputBase',
-  slot: 'SectionsContainer',
-  overridesResolver: (props, styles) => styles.sectionsContainer
+  slot: 'SectionsContainer'
 })(({
   theme
 }) => ({
@@ -110,8 +108,7 @@ const PickersInputBaseSectionsContainer = exports.PickersInputBaseSectionsContai
 }));
 const PickersInputBaseSection = (0, _styles.styled)(_PickersSectionList.Unstable_PickersSectionListSection, {
   name: 'MuiPickersInputBase',
-  slot: 'Section',
-  overridesResolver: (props, styles) => styles.section
+  slot: 'Section'
 })(({
   theme
 }) => ({
@@ -126,7 +123,7 @@ const PickersInputBaseSection = (0, _styles.styled)(_PickersSectionList.Unstable
 const PickersInputBaseSectionContent = (0, _styles.styled)(_PickersSectionList.Unstable_PickersSectionListSectionContent, {
   name: 'MuiPickersInputBase',
   slot: 'SectionContent',
-  overridesResolver: (props, styles) => styles.content
+  overridesResolver: (props, styles) => styles.content // FIXME: Inconsistent naming with slot
 })(({
   theme
 }) => ({
@@ -139,8 +136,7 @@ const PickersInputBaseSectionContent = (0, _styles.styled)(_PickersSectionList.U
 }));
 const PickersInputBaseSectionSeparator = (0, _styles.styled)(_PickersSectionList.Unstable_PickersSectionListSectionSeparator, {
   name: 'MuiPickersInputBase',
-  slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
+  slot: 'Separator'
 })(() => ({
   whiteSpace: 'pre',
   letterSpacing: 'inherit'
@@ -148,8 +144,35 @@ const PickersInputBaseSectionSeparator = (0, _styles.styled)(_PickersSectionList
 const PickersInputBaseInput = (0, _styles.styled)('input', {
   name: 'MuiPickersInputBase',
   slot: 'Input',
-  overridesResolver: (props, styles) => styles.hiddenInput
+  overridesResolver: (props, styles) => styles.hiddenInput // FIXME: Inconsistent naming with slot
 })((0, _extends2.default)({}, _visuallyHidden.default));
+const PickersInputBaseActiveBar = (0, _styles.styled)('div', {
+  name: 'MuiPickersInputBase',
+  slot: 'ActiveBar'
+})(({
+  theme,
+  ownerState
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  height: 2,
+  bottom: 2,
+  borderTopLeftRadius: 2,
+  borderTopRightRadius: 2,
+  transition: theme.transitions.create(['width', 'left'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  backgroundColor: (theme.vars || theme).palette.primary.main,
+  '[data-active-range-position="start"] &, [data-active-range-position="end"] &': {
+    display: 'block'
+  },
+  '[data-active-range-position="start"] &': {
+    left: ownerState.sectionOffsets[0]
+  },
+  '[data-active-range-position="end"] &': {
+    left: ownerState.sectionOffsets[1]
+  }
+}));
 const useUtilityClasses = (classes, ownerState) => {
   const {
     isFieldFocused,
@@ -169,10 +192,39 @@ const useUtilityClasses = (classes, ownerState) => {
     sectionsContainer: ['sectionsContainer'],
     sectionContent: ['sectionContent'],
     sectionBefore: ['sectionBefore'],
-    sectionAfter: ['sectionAfter']
+    sectionAfter: ['sectionAfter'],
+    activeBar: ['activeBar']
   };
   return (0, _composeClasses.default)(slots, _pickersInputBaseClasses.getPickersInputBaseUtilityClass, classes);
 };
+function resolveSectionElementWidth(sectionElement, rootRef, index, dateRangePosition) {
+  if (sectionElement.content.id) {
+    const activeSectionElements = rootRef.current?.querySelectorAll(`[data-sectionindex="${index}"] [data-range-position="${dateRangePosition}"]`);
+    if (activeSectionElements) {
+      return Array.from(activeSectionElements).reduce((currentActiveBarWidth, element) => {
+        return currentActiveBarWidth + element.offsetWidth;
+      }, 0);
+    }
+  }
+  return 0;
+}
+function resolveSectionWidthAndOffsets(elements, rootRef) {
+  let activeBarWidth = 0;
+  const activeRangePosition = rootRef.current?.getAttribute('data-active-range-position');
+  if (activeRangePosition === 'end') {
+    for (let i = elements.length - 1; i >= elements.length / 2; i -= 1) {
+      activeBarWidth += resolveSectionElementWidth(elements[i], rootRef, i, 'end');
+    }
+  } else {
+    for (let i = 0; i < elements.length / 2; i += 1) {
+      activeBarWidth += resolveSectionElementWidth(elements[i], rootRef, i, 'start');
+    }
+  }
+  return {
+    activeBarWidth,
+    sectionOffsets: [rootRef.current?.querySelector(`[data-sectionindex="0"]`)?.offsetLeft || 0, rootRef.current?.querySelector(`[data-sectionindex="${elements.length / 2}"]`)?.offsetLeft || 0]
+  };
+}
 
 /**
  * @ignore - internal component.
@@ -211,6 +263,8 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerStateContext = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
   const rootRef = React.useRef(null);
+  const activeBarRef = React.useRef(null);
+  const sectionOffsetsRef = React.useRef([]);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
   const handleInputRef = (0, _useForkRef.default)(inputProps?.ref, inputRef);
   const muiFormControl = (0, _FormControl.useFormControl)();
@@ -225,6 +279,24 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
   const handleHiddenInputFocus = event => {
     handleInputFocus(event);
   };
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    if (event.key === 'Enter' && !event.defaultMuiPrevented) {
+      // Do nothing if it's a multi input field
+      if (rootRef.current?.dataset.multiInput) {
+        return;
+      }
+      const closestForm = rootRef.current?.closest('form');
+      const submitTrigger = closestForm?.querySelector('[type="submit"]');
+      if (!closestForm || !submitTrigger) {
+        // do nothing if there is no form or no submit button (trigger)
+        return;
+      }
+      event.preventDefault();
+      // native input trigger submit with the `submitter` field set
+      closestForm.requestSubmit(submitTrigger);
+    }
+  };
   const handleInputBlur = event => {
     muiFormControl.onBlur?.(event);
     onBlur?.(event);
@@ -258,6 +330,20 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     ownerState
   });
   const InputSectionsContainer = slots?.input || PickersInputBaseSectionsContainer;
+  const isSingleInputRange = elements.some(element => element.content['data-range-position'] !== undefined);
+  React.useEffect(() => {
+    if (!isSingleInputRange || !ownerState.isPickerOpen) {
+      return;
+    }
+    const {
+      activeBarWidth,
+      sectionOffsets
+    } = resolveSectionWidthAndOffsets(elements, rootRef);
+    sectionOffsetsRef.current = [sectionOffsets[0], sectionOffsets[1]];
+    if (activeBarRef.current) {
+      activeBarRef.current.style.width = `${activeBarWidth}px`;
+    }
+  }, [elements, isSingleInputRange, ownerState.isPickerOpen]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputRoot, (0, _extends2.default)({}, inputRootProps, {
     children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersSectionList.Unstable_PickersSectionList, {
       sectionListRef: sectionListRef,
@@ -269,7 +355,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
-      onKeyDown: onKeyDown,
+      onKeyDown: handleKeyDown,
       slots: {
         root: InputSectionsContainer,
         section: PickersInputBaseSection,
@@ -306,7 +392,13 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       onFocus: handleHiddenInputFocus
     }, inputProps, {
       ref: handleInputRef
-    }))]
+    })), isSingleInputRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputBaseActiveBar, {
+      className: classes.activeBar,
+      ref: activeBarRef,
+      ownerState: {
+        sectionOffsets: sectionOffsetsRef.current
+      }
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
@@ -327,6 +419,7 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
    * Useful when all the sections are selected.
    */
   contentEditable: _propTypes.default.bool.isRequired,
+  'data-multi-input': _propTypes.default.string,
   /**
    * The elements to render.
    * Each element contains the prop to edit a section of the value.
@@ -350,7 +443,7 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
   onInput: _propTypes.default.func.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
   onPaste: _propTypes.default.func.isRequired,
-  ownerState: _propTypes.default.any,
+  ownerState: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
   readOnly: _propTypes.default.bool,
   renderSuffix: _propTypes.default.func,
   sectionListRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({

package/PickersTextField/PickersInputBase/PickersInputBase.types.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { BoxProps } from '@mui/material/Box';
+import { MuiEvent } from '@mui/x-internals/types';
 import { PickersSectionListProps } from "../../PickersSectionList/index.js";
+import { PickerTextFieldOwnerState } from "../../models/fields.js";
 export interface PickersInputPropsUsedByField extends Pick<PickersSectionListProps, 'elements' | 'sectionListRef' | 'contentEditable' | 'tabIndex'> {
   /**
    * Is `true` if the current values equals the empty value.
@@ -9,7 +11,7 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
    */
   areAllSectionsEmpty: boolean;
   onClick: React.MouseEventHandler<HTMLDivElement>;
-  onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown: React.EventHandler<MuiEvent<React.KeyboardEvent<HTMLDivElement>>>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
   endAdornment?: React.ReactNode;
@@ -27,7 +29,7 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
   inputRef?: React.Ref<HTMLInputElement>;
 }
 export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInputPropsUsedByField>, PickersInputPropsUsedByField {
-  ownerState?: any;
+  ownerState?: PickerTextFieldOwnerState;
   margin?: 'dense' | 'none' | 'normal';
   renderSuffix?: (state: {
     disabled?: boolean;
@@ -56,4 +58,5 @@ export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInput
     root?: any;
     input?: any;
   };
+  'data-multi-input'?: string;
 }

package/PickersTextField/PickersInputBase/pickersInputBaseClasses.d.ts

@@ -17,14 +17,16 @@ export interface PickersInputBaseClasses {
   sectionsContainer: string;
   /** Styles applied to the content of a section. */
   sectionContent: string;
-  /** Styles applied to the separator before a section */
+  /** Styles applied to the separator before a section. */
   sectionBefore: string;
-  /** Styles applied to the separator after a section */
+  /** Styles applied to the separator after a section. */
   sectionAfter: string;
-  /** Styles applied to the root if there is a startAdornment present */
+  /** Styles applied to the root if there is a startAdornment present. */
   adornedStart: string;
-  /** Styles applied to the root if there is an endAdornment present */
+  /** Styles applied to the root if there is an endAdornment present. */
   adornedEnd: string;
+  /** Styles applied to the active section bar. */
+  activeBar: string;
 }
 export type PickersInputBaseClassKey = keyof PickersInputBaseClasses;
 export declare function getPickersInputBaseUtilityClass(slot: string): string;

package/PickersTextField/PickersInputBase/pickersInputBaseClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getPickersInputBaseUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPickersInputBase', slot);
 }
-const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input']);
+const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'activeBar']);

package/PickersTextField/PickersOutlinedInput/Outline.js

@@ -16,8 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "label", "notched", "shrink"];
 const OutlineRoot = (0, _styles.styled)('fieldset', {
   name: 'MuiPickersOutlinedInput',
-  slot: 'NotchedOutline',
-  overridesResolver: (props, styles) => styles.notchedOutline
+  slot: 'NotchedOutline'
 })(({
   theme
 }) => {

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -22,8 +22,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "autoFocus", "ownerState", "classes", "notched"];
 const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseRoot, {
   name: 'MuiPickersOutlinedInput',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => {
@@ -72,8 +71,7 @@ const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersI
 });
 const PickersOutlinedInputSectionsContainer = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseSectionsContainer, {
   name: 'MuiPickersOutlinedInput',
-  slot: 'SectionsContainer',
-  overridesResolver: (props, styles) => styles.sectionsContainer
+  slot: 'SectionsContainer'
 })({
   padding: '16.5px 0',
   variants: [{
@@ -148,6 +146,7 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
    * Useful when all the sections are selected.
    */
   contentEditable: _propTypes.default.bool.isRequired,
+  'data-multi-input': _propTypes.default.string,
   /**
    * The elements to render.
    * Each element contains the prop to edit a section of the value.
@@ -172,7 +171,7 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
   onInput: _propTypes.default.func.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
   onPaste: _propTypes.default.func.isRequired,
-  ownerState: _propTypes.default.any,
+  ownerState: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
   readOnly: _propTypes.default.bool,
   renderSuffix: _propTypes.default.func,
   sectionListRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({

package/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts

@@ -19,4 +19,5 @@ export declare const pickersOutlinedInputClasses: {
   sectionContent: string;
   sectionBefore: string;
   sectionAfter: string;
+  activeBar: string;
 };

package/PickersTextField/PickersTextField.js

@@ -27,7 +27,7 @@ var _PickersInput = require("./PickersInput");
 var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
 var _usePickerTextFieldOwnerState = require("./usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
 const VARIANT_COMPONENT = {
   standard: _PickersInput.PickersInput,
   filled: _PickersFilledInput.PickersFilledInput,
@@ -35,8 +35,7 @@ const VARIANT_COMPONENT = {
 };
 const PickersTextFieldRoot = (0, _styles.styled)(_FormControl.default, {
   name: 'MuiPickersTextField',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 const useUtilityClasses = (classes, ownerState) => {
   const {
@@ -92,7 +91,9 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       FormHelperTextProps,
       // Props used by InputLabel
       label,
-      InputLabelProps
+      InputLabelProps,
+      // @ts-ignore
+      'data-active-range-position': dataActiveRangePosition
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootRef = React.useRef(null);
@@ -163,7 +164,8 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
         role: "group",
         "aria-labelledby": inputLabelId,
         "aria-describedby": helperTextId,
-        "aria-live": helperTextId ? 'polite' : undefined
+        "aria-live": helperTextId ? 'polite' : undefined,
+        "data-active-range-position": dataActiveRangePosition
       }, InputProps)), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
         id: helperTextId
       }, FormHelperTextProps, {

package/PickersTextField/PickersTextField.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormControlOwnProps, FormControlProps } from '@mui/material/FormControl';
+import { FormControlProps } from '@mui/material/FormControl';
 import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { InputLabelProps } from '@mui/material/InputLabel';
 import { TextFieldVariants } from '@mui/material/TextField';
@@ -7,7 +7,6 @@ import { PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBas
 import type { PickersInputProps } from './PickersInput';
 import type { PickersOutlinedInputProps } from './PickersOutlinedInput';
 import type { PickersFilledInputProps } from './PickersFilledInput';
-import { FieldOwnerState } from "../models/index.js";
 interface PickersTextFieldPropsUsedByField {
   onFocus: React.FocusEventHandler<HTMLDivElement>;
   onBlur: React.FocusEventHandler<HTMLDivElement>;
@@ -65,42 +64,4 @@ export interface PickersFilledTextFieldProps extends PickersBaseTextFieldProps {
   InputProps?: Partial<PickersFilledInputProps>;
 }
 export type PickersTextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = Variant extends 'filled' ? PickersFilledTextFieldProps : Variant extends 'standard' ? PickersStandardTextFieldProps : PickersOutlinedTextFieldProps;
-export interface PickerTextFieldOwnerState extends FieldOwnerState {
-  /**
-   * `true` if the value of the field is currently empty.
-   */
-  isFieldValueEmpty: boolean;
-  /**
-   * `true` if the field is focused, `false` otherwise.
-   */
-  isFieldFocused: boolean;
-  /**
-   * `true` if the field has an error, `false` otherwise.
-   */
-  hasFieldError: boolean;
-  /**
-   * The size of the input.
-   */
-  inputSize: Exclude<FormControlOwnProps['size'], undefined>;
-  /**
-   * The color of the input.
-   */
-  inputColor: Exclude<FormControlOwnProps['color'], undefined>;
-  /**
-   * `true` if the input takes up the full width of its container.
-   */
-  isInputInFullWidth: boolean;
-  /**
-   * `true` if the input has a start adornment, `false` otherwise.
-   */
-  hasStartAdornment: boolean;
-  /**
-   * `true` if the input has an end adornment, `false` otherwise.
-   */
-  hasEndAdornment: boolean;
-  /**
-   * `true` if the input has a label, `false` otherwise.
-   */
-  inputHasLabel: boolean;
-}
 export {};

package/PickersTextField/usePickerTextFieldOwnerState.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { PickerTextFieldOwnerState } from "./PickersTextField.types.js";
+import { PickerTextFieldOwnerState } from "../models/fields.js";
 export declare const PickerTextFieldOwnerStateContext: React.Context<PickerTextFieldOwnerState | null>;
 export declare const usePickerTextFieldOwnerState: () => PickerTextFieldOwnerState;

package/TimeClock/Clock.js

@@ -36,8 +36,7 @@ const useUtilityClasses = (classes, ownerState) => {
 };
 const ClockRoot = (0, _styles.styled)('div', {
   name: 'MuiClock',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => ({
@@ -48,8 +47,7 @@ const ClockRoot = (0, _styles.styled)('div', {
 }));
 const ClockClock = (0, _styles.styled)('div', {
   name: 'MuiClock',
-  slot: 'Clock',
-  overridesResolver: (_, styles) => styles.clock
+  slot: 'Clock'
 })({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
@@ -61,8 +59,7 @@ const ClockClock = (0, _styles.styled)('div', {
 });
 const ClockWrapper = (0, _styles.styled)('div', {
   name: 'MuiClock',
-  slot: 'Wrapper',
-  overridesResolver: (_, styles) => styles.wrapper
+  slot: 'Wrapper'
 })({
   '&:focus': {
     outline: 'none'
@@ -70,8 +67,7 @@ const ClockWrapper = (0, _styles.styled)('div', {
 });
 const ClockSquareMask = (0, _styles.styled)('div', {
   name: 'MuiClock',
-  slot: 'SquareMask',
-  overridesResolver: (_, styles) => styles.squareMask
+  slot: 'SquareMask'
 })({
   width: '100%',
   height: '100%',
@@ -98,8 +94,7 @@ const ClockSquareMask = (0, _styles.styled)('div', {
 });
 const ClockPin = (0, _styles.styled)('div', {
   name: 'MuiClock',
-  slot: 'Pin',
-  overridesResolver: (_, styles) => styles.pin
+  slot: 'Pin'
 })(({
   theme
 }) => ({
@@ -133,8 +128,7 @@ const meridiemButtonCommonStyles = (theme, clockMeridiemMode) => ({
 });
 const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
   name: 'MuiClock',
-  slot: 'AmButton',
-  overridesResolver: (_, styles) => styles.amButton
+  slot: 'AmButton'
 })(({
   theme
 }) => (0, _extends2.default)({}, meridiemButtonCommonStyles(theme, 'am'), {
@@ -144,8 +138,7 @@ const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
 }));
 const ClockPmButton = (0, _styles.styled)(_IconButton.default, {
   name: 'MuiClock',
-  slot: 'PmButton',
-  overridesResolver: (_, styles) => styles.pmButton
+  slot: 'PmButton'
 })(({
   theme
 }) => (0, _extends2.default)({}, meridiemButtonCommonStyles(theme, 'pm'), {
@@ -155,8 +148,7 @@ const ClockPmButton = (0, _styles.styled)(_IconButton.default, {
 }));
 const ClockMeridiemText = (0, _styles.styled)(_Typography.default, {
   name: 'MuiClock',
-  slot: 'meridiemText',
-  overridesResolver: (_, styles) => styles.meridiemText
+  slot: 'MeridiemText'
 })({
   overflow: 'hidden',
   whiteSpace: 'nowrap',

package/TimeClock/ClockPointer.js

@@ -27,8 +27,7 @@ const useUtilityClasses = classes => {
 };
 const ClockPointerRoot = (0, _styles.styled)('div', {
   name: 'MuiClockPointer',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => ({
@@ -49,8 +48,7 @@ const ClockPointerRoot = (0, _styles.styled)('div', {
 }));
 const ClockPointerThumb = (0, _styles.styled)('div', {
   name: 'MuiClockPointer',
-  slot: 'Thumb',
-  overridesResolver: (_, styles) => styles.thumb
+  slot: 'Thumb'
 })(({
   theme
 }) => ({

package/TimeClock/TimeClock.js

@@ -39,8 +39,7 @@ const useUtilityClasses = classes => {
 };
 const TimeClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerViewRoot, {
   name: 'MuiTimeClock',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   display: 'flex',
   flexDirection: 'column',
@@ -48,8 +47,7 @@ const TimeClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerViewRoot, {
 });
 const TimeClockArrowSwitcher = (0, _styles.styled)(_PickersArrowSwitcher.PickersArrowSwitcher, {
   name: 'MuiTimeClock',
-  slot: 'ArrowSwitcher',
-  overridesResolver: (props, styles) => styles.arrowSwitcher
+  slot: 'ArrowSwitcher'
 })({
   position: 'absolute',
   right: 12,

package/TimePicker/TimePicker.js

@@ -109,7 +109,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/TimePicker/TimePickerToolbar.js

@@ -43,13 +43,11 @@ const useUtilityClasses = (classes, ownerState) => {
 };
 const TimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar, {
   name: 'MuiTimePickerToolbar',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 const TimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.PickersToolbarText, {
   name: 'MuiTimePickerToolbar',
-  slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
+  slot: 'Separator'
 })({
   outline: 0,
   margin: '0 4px 0 2px',

package/esm/DateCalendar/DateCalendar.js

@@ -53,8 +53,7 @@ function useDateCalendarDefaultizedProps(props, name) {
 }
 const DateCalendarRoot = styled(PickerViewRoot, {
   name: 'MuiDateCalendar',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   display: 'flex',
   flexDirection: 'column',
@@ -62,8 +61,7 @@ const DateCalendarRoot = styled(PickerViewRoot, {
 });
 const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   name: 'MuiDateCalendar',
-  slot: 'ViewTransitionContainer',
-  overridesResolver: (props, styles) => styles.viewTransitionContainer
+  slot: 'ViewTransitionContainer'
 })({});
 /**
  * Demos: