@mui/x-date-pickers 7.0.0-alpha.1 → 7.0.0-alpha.3

package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts

@@ -11,13 +11,14 @@ interface IGetHoursSectionOptions<TDate> {
     valueOrReferenceDate: TDate;
 }
 export declare const getHourSectionOptions: <TDate>({ now, value, utils, ampm, isDisabled, resolveAriaLabel, timeStep, valueOrReferenceDate, }: IGetHoursSectionOptions<TDate>) => MultiSectionDigitalClockOption<number>[];
-interface IGetTimeSectionOptions {
+interface IGetTimeSectionOptions<TDate> {
     value: number | null;
+    utils: MuiPickersAdapter<TDate>;
     isDisabled: (value: number) => boolean;
     timeStep: number;
     resolveLabel: (value: number) => string;
     hasValue?: boolean;
     resolveAriaLabel: (value: string) => string;
 }
-export declare const getTimeSectionOptions: ({ value, isDisabled, timeStep, resolveLabel, resolveAriaLabel, hasValue, }: IGetTimeSectionOptions) => MultiSectionDigitalClockOption<number>[];
+export declare const getTimeSectionOptions: <TDate>({ value, utils, isDisabled, timeStep, resolveLabel, resolveAriaLabel, hasValue, }: IGetTimeSectionOptions<TDate>) => MultiSectionDigitalClockOption<number>[];
 export {};

package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -44,6 +44,7 @@ export const getHourSectionOptions = ({
 };
 export const getTimeSectionOptions = ({
   value,
+  utils,
   isDisabled,
   timeStep,
   resolveLabel,
@@ -65,7 +66,7 @@ export const getTimeSectionOptions = ({
     const timeValue = timeStep * index;
     return {
       value: timeValue,
-      label: resolveLabel(timeValue),
+      label: utils.formatNumber(resolveLabel(timeValue)),
       isDisabled,
       isSelected,
       isFocused,

package/PickersDay/PickersDay.js

@@ -156,7 +156,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     }
   }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]);
 
-  // For day outside of current month, move focus from mouseDown to mouseUp
+  // For a day outside the current month, move the focus from mouseDown to mouseUp
   // Goal: have the onClick ends before sliding to the new month
   const handleMouseDown = event => {
     onMouseDown(event);

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -26,7 +26,7 @@ export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'o
 }
 export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutProps<TValue> {
     isLandscape: boolean;
-    onChange: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance, shortcut?: PickersShortcutsItemContext) => void;
+    onChange: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
     isValid: (value: TValue) => boolean;
 }
 /**

package/PickersShortcuts/PickersShortcuts.js

@@ -21,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function PickersShortcuts(props) {
   const {
       items,
-      changeImportance,
+      changeImportance = 'accept',
       onChange,
       isValid
     } = props,

package/README.md

@@ -35,7 +35,6 @@ This component has the following peer dependencies that you will need to install
 ```json
 "peerDependencies": {
   "@mui/material": "^5.8.6",
-  "@mui/system": "^5.8.0",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/StaticDatePicker/StaticDatePicker.js

@@ -71,10 +71,6 @@ StaticDatePicker.propTypes = {
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value` and `defaultValue` are empty.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The default value.
    * Used when the component is not controlled.
@@ -110,8 +106,8 @@ StaticDatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
@@ -267,7 +263,7 @@ StaticDatePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -91,10 +91,6 @@ StaticDateTimePicker.propTypes = {
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value` and `defaultValue` are empty.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The default value.
    * Used when the component is not controlled.
@@ -135,8 +131,8 @@ StaticDateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
@@ -262,14 +258,6 @@ StaticDateTimePicker.propTypes = {
    * @default () => <span data-mui-test="loading-progress">...</span>
    */
   renderLoading: PropTypes.func,
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific date.
    *
@@ -331,7 +319,7 @@ StaticDateTimePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/StaticTimePicker/StaticTimePicker.js

@@ -183,14 +183,6 @@ StaticTimePicker.propTypes = {
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
   referenceDate: PropTypes.any,
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
    * @template TDate
@@ -217,7 +209,7 @@ StaticTimePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/TimeClock/Clock.js

@@ -256,7 +256,7 @@ export function Clock(inProps) {
     }
     switch (event.key) {
       case 'Home':
-        // annulate both hours and minutes
+        // reset both hours and minutes
         handleValueChange(0, 'partial');
         event.preventDefault();
         break;

package/TimeClock/TimeClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -81,7 +81,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       disableFuture,
       disablePast,
       minutesStep = 1,
-      shouldDisableClock,
       shouldDisableTime,
       showViewSwitcher,
       onChange,
@@ -162,9 +161,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       if (timeValue % step !== 0) {
         return false;
       }
-      if (shouldDisableClock != null && shouldDisableClock(timeValue, viewType)) {
-        return false;
-      }
       if (shouldDisableTime) {
         switch (viewType) {
           case 'hours':
@@ -214,7 +210,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       default:
         throw new Error('not supported');
     }
-  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
+  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
   const selectedId = useId();
   const viewProps = React.useMemo(() => {
     switch (view) {
@@ -422,14 +418,6 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
    */
   referenceDate: PropTypes.any,
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
    * @template TDate
@@ -457,7 +445,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/TimeField/TimeField.js

@@ -287,14 +287,6 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
    * @template TDate
@@ -341,7 +333,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/TimePicker/TimePicker.js

@@ -233,14 +233,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
    * @template TDate
@@ -288,7 +280,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/YearCalendar/YearCalendar.js

@@ -336,7 +336,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/dateTimeViewRenderers/dateTimeViewRenderers.d.ts

@@ -11,4 +11,4 @@ export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps
     timeViewsCount: number;
     shouldRenderTimeInASingleColumn: boolean;
 }
-export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;
+export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;

package/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -34,7 +34,6 @@ export const renderDesktopDateTimeView = ({
   shouldDisableMonth,
   shouldDisableYear,
   shouldDisableTime,
-  shouldDisableClock,
   reduceAnimations,
   minutesStep,
   ampm,
@@ -42,7 +41,6 @@ export const renderDesktopDateTimeView = ({
   monthsPerRow,
   onYearChange,
   yearsPerRow,
-  defaultCalendarMonth,
   slots,
   slotProps,
   loading,
@@ -82,7 +80,6 @@ export const renderDesktopDateTimeView = ({
     minTime,
     maxTime,
     shouldDisableTime,
-    shouldDisableClock,
     minutesStep,
     ampm,
     slots,
@@ -121,7 +118,6 @@ export const renderDesktopDateTimeView = ({
         monthsPerRow: monthsPerRow,
         onYearChange: onYearChange,
         yearsPerRow: yearsPerRow,
-        defaultCalendarMonth: defaultCalendarMonth,
         slots: slots,
         slotProps: slotProps,
         loading: loading,

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate, TView extends DateOrTimeViewWithMe
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/dateViewRenderers/dateViewRenderers.js

@@ -26,7 +26,6 @@ export const renderDateViewCalendar = ({
   monthsPerRow,
   onYearChange,
   yearsPerRow,
-  defaultCalendarMonth,
   slots,
   slotProps,
   loading,
@@ -65,7 +64,6 @@ export const renderDateViewCalendar = ({
   monthsPerRow: monthsPerRow,
   onYearChange: onYearChange,
   yearsPerRow: yearsPerRow,
-  defaultCalendarMonth: defaultCalendarMonth,
   slots: slots,
   slotProps: slotProps,
   loading: loading,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.1
+ * @mui/x-date-pickers v7.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickersTextField/Outline.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function Outline(props: any): React.JSX.Element;

package/internals/components/PickersTextField/Outline.js

@@ -0,0 +1,99 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "classes", "className", "label", "notched"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const OutlineRoot = styled('fieldset')({
+  textAlign: 'left',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  top: -5,
+  left: 0,
+  margin: 0,
+  padding: '0 8px',
+  pointerEvents: 'none',
+  borderRadius: 'inherit',
+  borderStyle: 'solid',
+  borderWidth: 1,
+  overflow: 'hidden',
+  minWidth: '0%'
+});
+const OutlineLegend = styled('legend')(({
+  ownerState,
+  theme
+}) => _extends({
+  float: 'unset',
+  // Fix conflict with bootstrap
+  width: 'auto',
+  // Fix conflict with bootstrap
+  overflow: 'hidden'
+}, !ownerState.withLabel && {
+  padding: 0,
+  lineHeight: '11px',
+  // sync with `height` in `legend` styles
+  transition: theme.transitions.create('width', {
+    duration: 150,
+    easing: theme.transitions.easing.easeOut
+  })
+}, ownerState.withLabel && _extends({
+  display: 'block',
+  // Fix conflict with normalize.css and sanitize.css
+  padding: 0,
+  height: 11,
+  // sync with `lineHeight` in `legend` styles
+  fontSize: '0.75em',
+  visibility: 'hidden',
+  maxWidth: 0.01,
+  transition: theme.transitions.create('max-width', {
+    duration: 50,
+    easing: theme.transitions.easing.easeOut
+  }),
+  whiteSpace: 'nowrap',
+  '& > span': {
+    paddingLeft: 5,
+    paddingRight: 5,
+    display: 'inline-block',
+    opacity: 0,
+    visibility: 'visible'
+  }
+}, ownerState.notched && {
+  maxWidth: '100%',
+  transition: theme.transitions.create('max-width', {
+    duration: 100,
+    easing: theme.transitions.easing.easeOut,
+    delay: 50
+  })
+})));
+export default function Outline(props) {
+  const {
+      className,
+      label,
+      notched
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const withLabel = label != null && label !== '';
+  const ownerState = _extends({}, props, {
+    notched,
+    withLabel
+  });
+  return /*#__PURE__*/_jsx(OutlineRoot, _extends({
+    "aria-hidden": true,
+    className: className,
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(OutlineLegend, {
+      ownerState: ownerState,
+      children: withLabel ? /*#__PURE__*/_jsx("span", {
+        children: label
+      }) :
+      /*#__PURE__*/
+      // notranslate needed while Google Translate will not fix zero-width space issue
+      _jsx("span", {
+        className: "notranslate",
+        children: "\u200B"
+      })
+    })
+  }));
+}

package/internals/components/PickersTextField/PickersInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PickersInputProps } from './PickersInput.types';
+declare const PickersInput: React.ForwardRefExoticComponent<Omit<PickersInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default PickersInput;