@mui/x-date-pickers 9.0.0-alpha.4 → 9.0.0

package/PickersTextField/PickersInputBase/PickersInputBase.types.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material/styles';
 import { MuiEvent } from '@mui/x-internals/types';
 import { PickersSectionListProps } from "../../PickersSectionList/index.mjs";
 import { PickerTextFieldOwnerState } from "../../models/fields.mjs";
@@ -14,22 +14,71 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
   onKeyDown: React.EventHandler<MuiEvent<React.KeyboardEvent<HTMLDivElement>>>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment?: React.ReactNode;
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment?: React.ReactNode;
   value: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
+  /**
+   * The label content.
+   */
   label?: React.ReactNode;
+  /**
+   * The id of the `input` element.
+   */
   id?: string;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth?: boolean;
   readOnly?: boolean;
+  /**
+   * Name attribute of the `input` element.
+   */
   name?: string;
-  inputProps?: React.HTMLAttributes<HTMLInputElement> & {
-    ref?: React.Ref<HTMLInputElement>;
-  };
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef?: React.Ref<HTMLInputElement>;
 }
-export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInputPropsUsedByField>, PickersInputPropsUsedByField {
+export interface PickersInputBaseSlots {
+  root?: React.ElementType;
+  input?: React.ElementType;
+  htmlInput?: React.ElementType;
+}
+export interface PickersInputBaseRootSlotProps extends React.ComponentPropsWithRef<'div'> {
+  /**
+   * Variant-specific. Forwarded by `PickersFilledInput` / `PickersInput` to render an underline.
+   */
+  disableUnderline?: boolean;
   ownerState?: PickerTextFieldOwnerState;
+}
+export interface PickersInputBaseInputSlotProps extends React.ComponentPropsWithRef<'div'> {
+  /**
+   * Variant-specific. Forwarded by `PickersFilledInput` to hide the label.
+   */
+  hiddenLabel?: boolean;
+  ownerState?: PickerTextFieldOwnerState;
+}
+export interface PickersInputBaseSlotProps {
+  root?: PickersInputBaseRootSlotProps;
+  input?: PickersInputBaseInputSlotProps;
+  htmlInput?: React.ComponentPropsWithRef<'input'>;
+}
+export interface PickersInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof PickersInputPropsUsedByField>, PickersInputPropsUsedByField {
+  ownerState?: PickerTextFieldOwnerState;
+  className?: string;
+  classes?: Record<string, string>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   margin?: 'dense' | 'none' | 'normal';
   renderSuffix?: (state: {
     disabled?: boolean;
@@ -46,17 +95,11 @@ export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInput
    *
    * @default {}
    */
-  slots?: {
-    root?: React.ElementType;
-    input?: React.ElementType;
-  };
+  slots?: PickersInputBaseSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: {
-    root?: any;
-    input?: any;
-  };
+  slotProps?: PickersInputBaseSlotProps;
   'data-multi-input'?: string;
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material/styles';
 import { MuiEvent } from '@mui/x-internals/types';
 import { PickersSectionListProps } from "../../PickersSectionList/index.js";
 import { PickerTextFieldOwnerState } from "../../models/fields.js";
@@ -14,22 +14,71 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
   onKeyDown: React.EventHandler<MuiEvent<React.KeyboardEvent<HTMLDivElement>>>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment?: React.ReactNode;
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment?: React.ReactNode;
   value: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
+  /**
+   * The label content.
+   */
   label?: React.ReactNode;
+  /**
+   * The id of the `input` element.
+   */
   id?: string;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth?: boolean;
   readOnly?: boolean;
+  /**
+   * Name attribute of the `input` element.
+   */
   name?: string;
-  inputProps?: React.HTMLAttributes<HTMLInputElement> & {
-    ref?: React.Ref<HTMLInputElement>;
-  };
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef?: React.Ref<HTMLInputElement>;
 }
-export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInputPropsUsedByField>, PickersInputPropsUsedByField {
+export interface PickersInputBaseSlots {
+  root?: React.ElementType;
+  input?: React.ElementType;
+  htmlInput?: React.ElementType;
+}
+export interface PickersInputBaseRootSlotProps extends React.ComponentPropsWithRef<'div'> {
+  /**
+   * Variant-specific. Forwarded by `PickersFilledInput` / `PickersInput` to render an underline.
+   */
+  disableUnderline?: boolean;
   ownerState?: PickerTextFieldOwnerState;
+}
+export interface PickersInputBaseInputSlotProps extends React.ComponentPropsWithRef<'div'> {
+  /**
+   * Variant-specific. Forwarded by `PickersFilledInput` to hide the label.
+   */
+  hiddenLabel?: boolean;
+  ownerState?: PickerTextFieldOwnerState;
+}
+export interface PickersInputBaseSlotProps {
+  root?: PickersInputBaseRootSlotProps;
+  input?: PickersInputBaseInputSlotProps;
+  htmlInput?: React.ComponentPropsWithRef<'input'>;
+}
+export interface PickersInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof PickersInputPropsUsedByField>, PickersInputPropsUsedByField {
+  ownerState?: PickerTextFieldOwnerState;
+  className?: string;
+  classes?: Record<string, string>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   margin?: 'dense' | 'none' | 'normal';
   renderSuffix?: (state: {
     disabled?: boolean;
@@ -46,17 +95,11 @@ export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInput
    *
    * @default {}
    */
-  slots?: {
-    root?: React.ElementType;
-    input?: React.ElementType;
-  };
+  slots?: PickersInputBaseSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: {
-    root?: any;
-    input?: any;
-  };
+  slotProps?: PickersInputBaseSlotProps;
   'data-multi-input'?: string;
 }

package/PickersTextField/PickersOutlinedInput/Outline.js

@@ -36,7 +36,7 @@ const OutlineRoot = (0, _styles.styled)('fieldset', {
     borderWidth: 1,
     overflow: 'hidden',
     minWidth: '0%',
-    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+    borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
   };
 });
 const OutlineLabel = (0, _styles.styled)('span', {

package/PickersTextField/PickersOutlinedInput/Outline.mjs

@@ -28,7 +28,7 @@ const OutlineRoot = styled('fieldset', {
     borderWidth: 1,
     overflow: 'hidden',
     minWidth: '0%',
-    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+    borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
   };
 });
 const OutlineLabel = styled('span', {

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -20,7 +20,7 @@ var _Outline = _interopRequireDefault(require("./Outline"));
 var _PickersInputBase = require("../PickersInputBase");
 var _PickersInputBase2 = require("../PickersInputBase/PickersInputBase");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["label", "autoFocus", "ownerState", "classes", "notched"];
+const _excluded = ["label", "autoFocus", "ownerState", "classes", "notched", "slots", "slotProps"];
 const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseRoot, {
   name: 'MuiPickersOutlinedInput',
   slot: 'Root'
@@ -37,7 +37,7 @@ const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersI
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       [`&:hover .${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+        borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
       }
     },
     [`&.${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.focused} .${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.notchedOutline}`]: {
@@ -105,16 +105,19 @@ const PickersOutlinedInput = exports.PickersOutlinedInput = /*#__PURE__*/React.f
   const {
       label,
       classes: classesProp,
-      notched
+      notched,
+      slots: inSlots,
+      slotProps: inSlotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const muiFormControl = (0, _FormControl.useFormControl)();
   const classes = useUtilityClasses(classesProp);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({
-    slots: {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({}, other, {
+    slots: (0, _extends2.default)({
       root: PickersOutlinedInputRoot,
       input: PickersOutlinedInputSectionsContainer
-    },
+    }, inSlots),
+    slotProps: inSlotProps,
     renderSuffix: state => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Outline.default, {
       shrink: Boolean(notched || state.adornedStart || state.focused || state.filled),
       notched: Boolean(notched || state.adornedStart || state.focused || state.filled),
@@ -122,8 +125,7 @@ const PickersOutlinedInput = exports.PickersOutlinedInput = /*#__PURE__*/React.f
       label: label != null && label !== '' && muiFormControl?.required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [label, "\u2009", '*']
       }) : label
-    })
-  }, other, {
+    }),
     label: label,
     classes: classes,
     ref: ref
@@ -141,8 +143,8 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: _propTypes.default.bool.isRequired,
+  classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  component: _propTypes.default.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -159,13 +161,31 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
     container: _propTypes.default.object.isRequired,
     content: _propTypes.default.object.isRequired
   })).isRequired,
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment: _propTypes.default.node,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth: _propTypes.default.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: _propTypes.default.string,
-  inputProps: _propTypes.default.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: _refType.default,
+  /**
+   * The label content.
+   */
   label: _propTypes.default.node,
   margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: _propTypes.default.string,
   notched: _propTypes.default.bool,
   onChange: _propTypes.default.func.isRequired,
@@ -195,8 +215,10 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
    * @default {}
    */
   slots: _propTypes.default.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: _propTypes.default.node,
-  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.mjs

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label", "autoFocus", "ownerState", "classes", "notched"];
+const _excluded = ["label", "autoFocus", "ownerState", "classes", "notched", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -30,7 +30,7 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       [`&:hover .${pickersOutlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+        borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
       }
     },
     [`&.${pickersOutlinedInputClasses.focused} .${pickersOutlinedInputClasses.notchedOutline}`]: {
@@ -98,16 +98,19 @@ const PickersOutlinedInput = /*#__PURE__*/React.forwardRef(function PickersOutli
   const {
       label,
       classes: classesProp,
-      notched
+      notched,
+      slots: inSlots,
+      slotProps: inSlotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
   const classes = useUtilityClasses(classesProp);
-  return /*#__PURE__*/_jsx(PickersInputBase, _extends({
-    slots: {
+  return /*#__PURE__*/_jsx(PickersInputBase, _extends({}, other, {
+    slots: _extends({
       root: PickersOutlinedInputRoot,
       input: PickersOutlinedInputSectionsContainer
-    },
+    }, inSlots),
+    slotProps: inSlotProps,
     renderSuffix: state => /*#__PURE__*/_jsx(Outline, {
       shrink: Boolean(notched || state.adornedStart || state.focused || state.filled),
       notched: Boolean(notched || state.adornedStart || state.focused || state.filled),
@@ -115,8 +118,7 @@ const PickersOutlinedInput = /*#__PURE__*/React.forwardRef(function PickersOutli
       label: label != null && label !== '' && muiFormControl?.required ? /*#__PURE__*/_jsxs(React.Fragment, {
         children: [label, "\u2009", '*']
       }) : label
-    })
-  }, other, {
+    }),
     label: label,
     classes: classes,
     ref: ref
@@ -134,8 +136,8 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: PropTypes.bool.isRequired,
+  classes: PropTypes.object,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -152,13 +154,31 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
     container: PropTypes.object.isRequired,
     content: PropTypes.object.isRequired
   })).isRequired,
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment: PropTypes.node,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: PropTypes.string,
-  inputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: refType,
+  /**
+   * The label content.
+   */
   label: PropTypes.node,
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: PropTypes.string,
   notched: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
@@ -188,8 +208,10 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: PropTypes.node,
-  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */