@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/PickersTextField/PickersInput/PickersInput.js

@@ -1,20 +1,22 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { pickersInputClasses, getPickersInputUtilityClass } from "./pickersInputClasses.js";
 import { PickersInputBase } from "../PickersInputBase/index.js";
 import { PickersInputBaseRoot } from "../PickersInputBase/PickersInputBase.js";
+import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersInput',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'disableUnderline'
 })(({
   theme
 }) => {
@@ -31,7 +33,7 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
       props: {
-        color
+        inputColor: color
       },
       style: {
         '&::after': {
@@ -96,18 +98,18 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
     }]
   };
 });
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
-    disableUnderline
+    inputHasUnderline
   } = ownerState;
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: ['root', !inputHasUnderline && 'underline'],
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getPickersInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -119,18 +121,22 @@ const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(inProps
   const {
       label,
       disableUnderline = false,
-      ownerState: ownerStateProp
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const muiFormControl = useFormControl();
-  const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
-    disableUnderline,
-    color: muiFormControl?.color || 'primary'
+  const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
+  const ownerState = _extends({}, pickerTextFieldOwnerState, {
+    inputHasUnderline: !disableUnderline
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/_jsx(PickersInputBase, _extends({
     slots: {
       root: PickersInputRoot
+    },
+    slotProps: {
+      root: {
+        disableUnderline
+      }
     }
   }, other, {
     label: label,

package/PickersTextField/PickersInput/pickersInputClasses.d.ts

@@ -6,11 +6,12 @@ export interface PickersInputClasses extends PickersInputBaseClasses {
 export type PickersInputClassKey = keyof PickersInputClasses;
 export declare function getPickersInputUtilityClass(slot: string): string;
 export declare const pickersInputClasses: {
-    disabled: string;
+    underline: string;
     input: string;
+    root: string;
+    disabled: string;
     readOnly: string;
     error: string;
-    root: string;
     focused: string;
     adornedStart: string;
     adornedEnd: string;

package/PickersTextField/PickersInput/pickersInputClasses.js

@@ -5,4 +5,4 @@ import { pickersInputBaseClasses } from "../PickersInputBase/index.js";
 export function getPickersInputUtilityClass(slot) {
   return generateUtilityClass('MuiPickersFilledInput', slot);
 }
-export const pickersInputClasses = _extends({}, pickersInputBaseClasses, generateUtilityClasses('MuiPickersInput', ['root', 'input']));
+export const pickersInputClasses = _extends({}, pickersInputBaseClasses, generateUtilityClasses('MuiPickersInput', ['root', 'underline', 'input']));

package/PickersTextField/PickersInputBase/PickersInputBase.d.ts

@@ -1,15 +1,12 @@
 import * as React from 'react';
-import { FormControlState } from '@mui/material/FormControl';
 import { PickersInputBaseProps } from './PickersInputBase.types';
+import { PickerTextFieldOwnerState } from '../PickersTextField.types';
 export declare const PickersInputBaseRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    ownerState: OwnerStateType;
+    ownerState: PickerTextFieldOwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PickersInputBaseSectionsContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    ownerState: OwnerStateType;
+    ownerState: PickerTextFieldOwnerState;
 }, {}, {}>;
-interface OwnerStateType extends FormControlState, Omit<PickersInputBaseProps, keyof FormControlState> {
-    isRtl: boolean;
-}
 /**
  * @ignore - internal component.
  */

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -11,9 +11,9 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
 import useSlotProps from '@mui/utils/useSlotProps';
 import visuallyHidden from '@mui/utils/visuallyHidden';
-import { useRtl } from '@mui/system/RtlProvider';
 import { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from "./pickersInputBaseClasses.js";
 import { Unstable_PickersSectionList as PickersSectionList, Unstable_PickersSectionListRoot as PickersSectionListRoot, Unstable_PickersSectionListSection as PickersSectionListSection, Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator, Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent } from "../../PickersSectionList/index.js";
+import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const round = value => Math.round(value * 1e5) / 1e5;
 export const PickersInputBaseRoot = styled('div', {
@@ -35,7 +35,7 @@ export const PickersInputBaseRoot = styled('div', {
   letterSpacing: `${round(0.15 / 16)}em`,
   variants: [{
     props: {
-      fullWidth: true
+      isInputInFullWidth: true
     },
     style: {
       width: '100%'
@@ -64,36 +64,35 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
   width: '182px',
   variants: [{
     props: {
-      isRtl: true
+      fieldDirection: 'rtl'
     },
     style: {
       textAlign: 'right /*! @noflip */'
     }
   }, {
     props: {
-      size: 'small'
+      inputSize: 'small'
     },
     style: {
       paddingTop: 1
     }
   }, {
     props: {
-      adornedStart: false,
-      focused: false,
-      filled: false
+      hasStartAdornment: false,
+      isFieldFocused: false,
+      isFieldValueEmpty: true
     },
     style: {
       color: 'currentColor',
       opacity: 0
     }
   }, {
-    // Can't use the object notation because label can be null or undefined
-    props: ({
-      adornedStart,
-      focused,
-      filled,
-      label
-    }) => !adornedStart && !focused && !filled && label == null,
+    props: {
+      hasStartAdornment: false,
+      isFieldFocused: false,
+      isFieldValueEmpty: true,
+      inputHasLabel: false
+    },
     style: theme.vars ? {
       opacity: theme.vars.opacity.inputPlaceholder
     } : {
@@ -113,7 +112,8 @@ const PickersInputBaseSection = styled(PickersSectionListSection, {
   letterSpacing: 'inherit',
   lineHeight: '1.4375em',
   // 23px
-  display: 'flex'
+  display: 'inline-block',
+  whiteSpace: 'nowrap'
 }));
 const PickersInputBaseSectionContent = styled(PickersSectionListSectionContent, {
   name: 'MuiPickersInputBase',
@@ -142,21 +142,20 @@ const PickersInputBaseInput = styled('input', {
   slot: 'Input',
   overridesResolver: (props, styles) => styles.hiddenInput
 })(_extends({}, visuallyHidden));
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    focused,
-    disabled,
-    error,
-    classes,
-    fullWidth,
-    readOnly,
-    color,
-    size,
-    endAdornment,
-    startAdornment
+    isFieldFocused,
+    isFieldDisabled,
+    isFieldReadOnly,
+    hasFieldError,
+    inputSize,
+    isInputInFullWidth,
+    inputColor,
+    hasStartAdornment,
+    hasEndAdornment
   } = ownerState;
   const slots = {
-    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', readOnly && 'readOnly', error && 'error', fullWidth && 'fullWidth', `color${capitalize(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
+    root: ['root', isFieldFocused && !isFieldDisabled && 'focused', isFieldDisabled && 'disabled', isFieldReadOnly && 'readOnly', hasFieldError && 'error', isInputInFullWidth && 'fullWidth', `color${capitalize(inputColor)}`, inputSize === 'small' && 'inputSizeSmall', hasStartAdornment && 'adornedStart', hasEndAdornment && 'adornedEnd'],
     notchedOutline: ['notchedOutline'],
     input: ['input'],
     sectionsContainer: ['sectionsContainer'],
@@ -166,6 +165,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPickersInputBaseUtilityClass, classes);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -196,21 +196,27 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       inputRef,
       sectionListRef,
       onFocus,
-      onBlur
+      onBlur,
+      classes: classesProp,
+      ownerState: ownerStateProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerStateContext = usePickerTextFieldOwnerState();
   const rootRef = React.useRef(null);
   const handleRootRef = useForkRef(ref, rootRef);
   const handleInputRef = useForkRef(inputProps?.ref, inputRef);
-  const isRtl = useRtl();
   const muiFormControl = useFormControl();
   if (!muiFormControl) {
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
+  const ownerState = ownerStateProp ?? ownerStateContext;
   const handleInputFocus = event => {
     muiFormControl.onFocus?.(event);
     onFocus?.(event);
   };
+  const handleHiddenInputFocus = event => {
+    handleInputFocus(event);
+  };
   const handleInputBlur = event => {
     muiFormControl.onBlur?.(event);
     onBlur?.(event);
@@ -230,10 +236,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       muiFormControl.onFilled();
     }
   }, [muiFormControl, areAllSectionsEmpty]);
-  const ownerState = _extends({}, props, muiFormControl, {
-    isRtl
-  });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   const InputRoot = slots?.root || PickersInputBaseRoot;
   const inputRootProps = useSlotProps({
     elementType: InputRoot,
@@ -266,16 +269,16 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
         sectionSeparator: PickersInputBaseSectionSeparator
       },
       slotProps: {
-        root: {
+        root: _extends({}, slotProps?.input, {
           ownerState
-        },
+        }),
         sectionContent: {
           className: pickersInputBaseClasses.sectionContent
         },
         sectionSeparator: ({
-          position
+          separatorPosition
         }) => ({
-          className: position === 'before' ? pickersInputBaseClasses.sectionBefore : pickersInputBaseClasses.sectionAfter
+          className: separatorPosition === 'before' ? pickersInputBaseClasses.sectionBefore : pickersInputBaseClasses.sectionAfter
         })
       }
     }), endAdornment, renderSuffix ? renderSuffix(_extends({}, muiFormControl)) : null, /*#__PURE__*/_jsx(PickersInputBaseInput, _extends({
@@ -289,6 +292,10 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       readOnly: readOnly,
       required: muiFormControl.required,
       disabled: muiFormControl.disabled
+      // Hidden input element cannot be focused, trigger the root focus instead
+      // This allows to maintain the ability to do `inputRef.current.focus()` to focus the field
+      ,
+      onFocus: handleHiddenInputFocus
     }, inputProps, {
       ref: handleInputRef
     }))]

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

@@ -54,5 +54,6 @@ export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInput
      */
     slotProps?: {
         root?: any;
+        input?: any;
     };
 }

package/PickersTextField/PickersOutlinedInput/Outline.d.ts

@@ -3,7 +3,6 @@ interface OutlineProps extends React.HTMLAttributes<HTMLFieldSetElement> {
     notched: boolean;
     shrink: boolean;
     label: React.ReactNode;
-    ownerState: any;
 }
 /**
  * @ignore - internal component.

package/PickersTextField/PickersOutlinedInput/Outline.js

@@ -3,6 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["children", "className", "label", "notched", "shrink"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const OutlineRoot = styled('fieldset', {
   name: 'MuiPickersOutlinedInput',
@@ -36,7 +38,9 @@ const OutlineLabel = styled('span')(({
   fontFamily: theme.typography.fontFamily,
   fontSize: 'inherit'
 }));
-const OutlineLegend = styled('legend')(({
+const OutlineLegend = styled('legend', {
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'notched'
+})(({
   theme
 }) => ({
   float: 'unset',
@@ -47,7 +51,7 @@ const OutlineLegend = styled('legend')(({
   // Fix Horizontal scroll when label too long
   variants: [{
     props: {
-      withLabel: false
+      inputHasLabel: false
     },
     style: {
       padding: 0,
@@ -60,7 +64,7 @@ const OutlineLegend = styled('legend')(({
     }
   }, {
     props: {
-      withLabel: true
+      inputHasLabel: true
     },
     style: {
       display: 'block',
@@ -86,7 +90,7 @@ const OutlineLegend = styled('legend')(({
     }
   }, {
     props: {
-      withLabel: true,
+      inputHasLabel: true,
       notched: true
     },
     style: {
@@ -106,13 +110,11 @@ const OutlineLegend = styled('legend')(({
 export default function Outline(props) {
   const {
       className,
-      label
+      label,
+      notched
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const withLabel = label != null && label !== '';
-  const ownerState = _extends({}, props, {
-    withLabel
-  });
+  const ownerState = usePickerTextFieldOwnerState();
   return /*#__PURE__*/_jsx(OutlineRoot, _extends({
     "aria-hidden": true,
     className: className
@@ -120,7 +122,8 @@ export default function Outline(props) {
     ownerState: ownerState,
     children: /*#__PURE__*/_jsx(OutlineLegend, {
       ownerState: ownerState,
-      children: withLabel ? /*#__PURE__*/_jsx(OutlineLabel, {
+      notched: notched,
+      children: label ? /*#__PURE__*/_jsx(OutlineLabel, {
         children: label
       }) :
       /*#__PURE__*/

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label", "autoFocus", "ownerState", "notched"];
+const _excluded = ["label", "autoFocus", "ownerState", "classes", "notched"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -51,7 +51,7 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key]?.main ?? false).map(color => ({
       props: {
-        color
+        inputColor: color
       },
       style: {
         [`&.${pickersOutlinedInputClasses.focused}:not(.${pickersOutlinedInputClasses.error}) .${pickersOutlinedInputClasses.notchedOutline}`]: {
@@ -70,17 +70,14 @@ const PickersOutlinedInputSectionsContainer = styled(PickersInputBaseSectionsCon
   padding: '16.5px 0',
   variants: [{
     props: {
-      size: 'small'
+      inputSize: 'small'
     },
     style: {
       padding: '8.5px 0'
     }
   }]
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     notchedOutline: ['notchedOutline'],
@@ -89,6 +86,7 @@ const useUtilityClasses = ownerState => {
   const composedClasses = composeClasses(slots, getPickersOutlinedInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -99,15 +97,12 @@ const PickersOutlinedInput = /*#__PURE__*/React.forwardRef(function PickersOutli
   });
   const {
       label,
-      ownerState: ownerStateProp,
+      classes: classesProp,
       notched
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
-  const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
-    color: muiFormControl?.color || 'primary'
-  });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersInputBase, _extends({
     slots: {
       root: PickersOutlinedInputRoot,
@@ -119,8 +114,7 @@ const PickersOutlinedInput = /*#__PURE__*/React.forwardRef(function PickersOutli
       className: classes.notchedOutline,
       label: label != null && label !== '' && muiFormControl?.required ? /*#__PURE__*/_jsxs(React.Fragment, {
         children: [label, "\u2009", '*']
-      }) : label,
-      ownerState: ownerState
+      }) : label
     })
   }, other, {
     label: label,