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

package/legacy/internals/components/PickersTextField/PickersTextField.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["elements", "className", "color", "disabled", "error", "label", "variant", "fullWidth", "valueStr", "helperText", "valueType", "id", "FormHelperTextProps", "InputLabelProps", "inputProps", "InputProps", "required", "focused", "ownerState"];
+var _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "required", "variant", "InputProps", "inputProps", "inputRef", "sectionsContainerRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -11,7 +10,7 @@ import InputLabel from '@mui/material/InputLabel';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '@mui/material/FormControl';
 import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
-import PickersInput from './PickersInput';
+import { PickersInput } from './PickersInput';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var PickersTextFieldRoot = styled(FormControl, {
@@ -32,7 +31,8 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
 };
 export var PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(props, ref) {
-  var elements = props.elements,
+  var onFocus = props.onFocus,
+    onBlur = props.onBlur,
     className = props.className,
     _props$color = props.color,
     color = _props$color === void 0 ? 'primary' : _props$color,
@@ -40,33 +40,38 @@ export var PickersTextField = /*#__PURE__*/React.forwardRef(function PickersText
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$error = props.error,
     error = _props$error === void 0 ? false : _props$error,
-    label = props.label,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'outlined' : _props$variant,
-    _props$fullWidth = props.fullWidth,
-    fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
-    valueStr = props.valueStr,
+    InputProps = props.InputProps,
+    inputProps = props.inputProps,
+    inputRef = props.inputRef,
+    sectionsContainerRef = props.sectionsContainerRef,
+    elements = props.elements,
+    areAllSectionsEmpty = props.areAllSectionsEmpty,
+    onClick = props.onClick,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onPaste = props.onPaste,
+    onInput = props.onInput,
+    endAdornment = props.endAdornment,
+    startAdornment = props.startAdornment,
+    tabIndex = props.tabIndex,
+    contentEditable = props.contentEditable,
+    focused = props.focused,
+    value = props.value,
+    onChange = props.onChange,
+    fullWidth = props.fullWidth,
+    idProp = props.id,
     helperText = props.helperText,
-    valueType = props.valueType,
-    idOverride = props.id,
     FormHelperTextProps = props.FormHelperTextProps,
+    label = props.label,
     InputLabelProps = props.InputLabelProps,
-    inputProps = props.inputProps,
-    InputProps = props.InputProps,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    focusedProp = props.focused,
-    ownerStateProp = props.ownerState,
     other = _objectWithoutProperties(props, _excluded);
-  var _React$useState = React.useState(focusedProp),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focused = _React$useState2[0],
-    setFocused = _React$useState2[1];
   var rootRef = React.useRef(null);
   var handleRootRef = useForkRef(ref, rootRef);
-  var inputRef = React.useRef(null);
-  var handleInputRef = useForkRef(inputRef, InputProps == null ? void 0 : InputProps.ref);
-  var id = useId(idOverride);
+  var id = useId(idProp);
   var helperTextId = helperText && id ? "".concat(id, "-helper-text") : undefined;
   var inputLabelId = label && id ? "".concat(id, "-label") : undefined;
   var ownerState = _extends({}, props, {
@@ -74,38 +79,23 @@ export var PickersTextField = /*#__PURE__*/React.forwardRef(function PickersText
     disabled: disabled,
     error: error,
     focused: focused,
+    required: required,
     variant: variant
   });
   var classes = useUtilityClasses(ownerState);
-
-  // TODO: delete after behavior implementation
-  var onWrapperClick = function onWrapperClick() {
-    if (!focused) {
-      var _inputRef$current;
-      setFocused(true);
-      var container = rootRef.current;
-
-      // Find the first input element within the container
-      var firstInput = container == null ? void 0 : container.querySelector('.content');
-
-      // Check if the input element exists before focusing it
-      if (firstInput) {
-        firstInput.focus();
-      }
-      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-    }
-  };
-  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, {
+  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
     className: clsx(classes.root, className),
     ref: handleRootRef,
     focused: focused,
+    onFocus: onFocus,
+    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
     color: color,
-    fullWidth: fullWidth,
     required: required,
-    ownerState: ownerState,
+    ownerState: ownerState
+  }, other, {
     children: [/*#__PURE__*/_jsx(InputLabel, _extends({
       htmlFor: id,
       id: inputLabelId
@@ -113,17 +103,27 @@ export var PickersTextField = /*#__PURE__*/React.forwardRef(function PickersText
       children: label
     })), /*#__PURE__*/_jsx(PickersInput, _extends({
       elements: elements,
-      valueStr: valueStr,
-      valueType: valueType,
-      onWrapperClick: onWrapperClick,
+      areAllSectionsEmpty: areAllSectionsEmpty,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onInput: onInput,
+      onPaste: onPaste,
+      endAdornment: endAdornment,
+      startAdornment: startAdornment,
+      tabIndex: tabIndex,
+      contentEditable: contentEditable,
+      value: value,
+      onChange: onChange,
+      id: id,
+      fullWidth: fullWidth,
       inputProps: inputProps,
+      inputRef: inputRef,
+      sectionsContainerRef: sectionsContainerRef,
       label: label
-    }, other, InputProps, {
-      ref: handleInputRef
-    })), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+    }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
       id: helperTextId
     }, FormHelperTextProps, {
       children: helperText
     }))]
-  });
+  }));
 });

package/legacy/internals/components/PickersTextField/pickersTextFieldClasses.js

@@ -6,4 +6,4 @@ export var pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField
 export function getPickersInputUtilityClass(slot) {
   return generateUtilityClass('MuiPickersInput', slot);
 }
-export var pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'content', 'before', 'after', 'adornedStart', 'adornedEnd', 'input']);
+export var pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'adornedStart', 'adornedEnd', 'input', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter']);

package/legacy/internals/constants/dimensions.js

@@ -2,6 +2,6 @@ export var DAY_SIZE = 36;
 export var DAY_MARGIN = 2;
 export var DIALOG_WIDTH = 320;
 export var MAX_CALENDAR_HEIGHT = 280;
-export var VIEW_HEIGHT = 334;
+export var VIEW_HEIGHT = 336;
 export var DIGITAL_CLOCK_VIEW_HEIGHT = 232;
 export var MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/legacy/internals/demo/DemoContainer.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import Stack from '@mui/material/Stack';
+import Stack, { stackClasses } from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { textFieldClasses } from '@mui/material/TextField';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,17 +40,17 @@ var getSupportedSectionFromChildName = function getSupportedSectionFromChildName
 export function DemoItem(props) {
   var label = props.label,
     children = props.children,
-    component = props.component;
+    component = props.component,
+    sxProp = props.sx;
   var spacing;
-  var sx;
+  var sx = sxProp;
   if (component && getChildTypeFromChildName(component) === 'multi-input-range-field') {
     spacing = 1.5;
-    sx = _defineProperty({}, "& .".concat(textFieldClasses.root), {
+    sx = _extends({}, sx, _defineProperty({}, "& .".concat(textFieldClasses.root), {
       flexGrow: 1
-    });
+    }));
   } else {
     spacing = 1;
-    sx = undefined;
   }
   return /*#__PURE__*/_jsxs(Stack, {
     direction: "column",
@@ -63,7 +63,14 @@ export function DemoItem(props) {
     }), children]
   });
 }
-
+DemoItem.displayName = 'DemoItem';
+var isDemoItem = function isDemoItem(child) {
+  if ( /*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
+    // @ts-ignore
+    return child.type.displayName === 'DemoItem';
+  }
+  return false;
+};
 /**
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.
@@ -86,6 +93,8 @@ export function DemoContainer(props) {
   };
   var direction;
   var spacing;
+  var extraSx = {};
+  var demoItemSx = {};
   var sx = _extends({
     overflow: 'auto',
     // Add padding as overflow can hide the outline text field label.
@@ -108,30 +117,47 @@ export function DemoContainer(props) {
     // noop
   } else if (childrenTypes.has('single-input-range-field')) {
     if (!childrenSupportedSections.has('date-time')) {
-      sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+      extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
         minWidth: 300
-      }));
+      });
     } else {
-      sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+      extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
         minWidth: {
           xs: 300,
-          md: 400
+          // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
+          md: childrenTypes.has('multi-input-range-field') ? 460 : 400
         }
-      }));
+      });
     }
   } else if (childrenSupportedSections.has('date-time')) {
-    sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+    extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
       minWidth: 270
-    }));
+    });
+    if (childrenTypes.has('multi-input-range-field')) {
+      // increase width for the multi input date time range fields
+      demoItemSx = _defineProperty({}, "& > .".concat(stackClasses.root, " > .").concat(textFieldClasses.root), {
+        minWidth: 210
+      });
+    }
   } else {
-    sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+    extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
       minWidth: 200
-    }));
+    });
   }
+  var finalSx = _extends({}, sx, extraSx);
   return /*#__PURE__*/_jsx(Stack, {
     direction: direction,
     spacing: spacing,
-    sx: sx,
-    children: children
+    sx: finalSx,
+    children: React.Children.map(children, function (child) {
+      if ( /*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
+        // Inject sx styles to the `DemoItem` if it is a direct child of `DemoContainer`.
+        // @ts-ignore
+        return /*#__PURE__*/React.cloneElement(child, {
+          sx: _extends({}, extraSx, demoItemSx)
+        });
+      }
+      return child;
+    })
   });
 }

package/legacy/internals/hooks/useClockReferenceDate.js

@@ -24,6 +24,5 @@ export var useClockReferenceDate = function useClockReferenceDate(_ref) {
   // We only want to compute the reference date on mount.
   [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   return value != null ? value : referenceDate;
 };

package/legacy/internals/hooks/useField/useField.utils.js

@@ -133,7 +133,6 @@ export var adjustSectionValue = function adjustSectionValue(utils, timezone, sec
       if (delta < 0 || isStart) {
         newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
       }
-
       if (delta > 0 || isEnd) {
         newSectionValueNumber -= newSectionValueNumber % step;
       }
@@ -413,7 +412,6 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
   }) // Sort to put longest word first
   .join('|'), ")"), 'g') // used to get access to lastIndex state
   ;
-
   var currentTokenValue = '';
   var _loop = function _loop(_i) {
     var escapedPartOfCurrentChar = escapedParts.find(function (escapeIndex) {

package/legacy/internals/hooks/useViews.js

@@ -71,7 +71,6 @@ export function useViews(_ref) {
       } // If false the blur is due to view switching
       );
     }
-
     onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
   });
   var handleChangeView = useEventCallback(function (newView) {

package/legacy/locales/plPL.js

@@ -77,5 +77,4 @@ var plPLPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export var plPL = getPickersLocalization(plPLPickers);

package/legacy/locales/svSE.js

@@ -77,5 +77,4 @@ var svSEPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export var svSE = getPickersLocalization(svSEPickers);

package/legacy/locales/urPK.js

@@ -77,5 +77,4 @@ var urPKPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export var urPK = getPickersLocalization(urPKPickers);

package/locales/plPL.js

@@ -57,5 +57,4 @@ const plPLPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export const plPL = getPickersLocalization(plPLPickers);

package/locales/svSE.js

@@ -57,5 +57,4 @@ const svSEPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export const svSE = getPickersLocalization(svSEPickers);

package/locales/urPK.js

@@ -57,5 +57,4 @@ const urPKPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export const urPK = getPickersLocalization(urPKPickers);

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -230,7 +230,6 @@ export class AdapterLuxon {
       if (typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {
         return true; // Luxon defaults to en-US if Intl not found
       }
-
       return Boolean(new Intl.DateTimeFormat(this.locale, {
         hour: 'numeric'
       })?.resolvedOptions()?.hour12);

package/modern/DateCalendar/useCalendarState.js

@@ -61,7 +61,6 @@ export const useCalendarState = params => {
     });
   }, [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,

package/modern/MonthCalendar/MonthCalendar.js

@@ -110,7 +110,6 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     granularity: SECTION_TYPE_GRANULARITY.month
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -36,7 +36,12 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
   },
-  '&:hover': {
+  '@media (pointer: fine)': {
+    '&:hover': {
+      overflowY: 'auto'
+    }
+  },
+  '@media (pointer: none), (pointer: coarse)': {
     overflowY: 'auto'
   },
   '&:not(:first-of-type)': {
@@ -152,7 +157,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
         "aria-selected": isSelected,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        className: classes.item
       }, slotProps?.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -1,6 +1,6 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+  return generateUtilityClass('MuiMultiSectionDigitalClockSection', slot);
 }
-export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);
+export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -38,13 +38,13 @@ const PickersCalendarHeaderRoot = styled('div', {
 })({
   display: 'flex',
   alignItems: 'center',
-  marginTop: 16,
-  marginBottom: 8,
+  marginTop: 12,
+  marginBottom: 4,
   paddingLeft: 24,
   paddingRight: 12,
   // prevent jumping in safari
-  maxHeight: 30,
-  minHeight: 30
+  maxHeight: 40,
+  minHeight: 40
 });
 const PickersCalendarHeaderLabelContainer = styled('div', {
   name: 'MuiPickersCalendarHeader',

package/modern/TimeClock/Clock.js

@@ -276,7 +276,6 @@ export function Clock(inProps) {
       // do nothing
     }
   };
-
   return /*#__PURE__*/_jsxs(ClockRoot, {
     className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsxs(ClockClock, {

package/modern/TimeClock/ClockPointer.js

@@ -85,7 +85,6 @@ export function ClockPointer(inProps) {
     if (type === 'hours' && viewValue > 12) {
       angle -= 360; // round up angle to max 360 degrees
     }
-
     return {
       height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
       transform: `rotateZ(${angle}deg)`

package/modern/YearCalendar/YearCalendar.js

@@ -115,7 +115,6 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     granularity: SECTION_TYPE_GRANULARITY.year
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);

package/modern/index.js

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

package/modern/internals/components/PickersTextField/Outline.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "classes", "className", "label", "notched"];
+const _excluded = ["children", "className", "label"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -69,13 +69,11 @@ const OutlineLegend = styled('legend')(({
 export default function Outline(props) {
   const {
       className,
-      label,
-      notched
+      label
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const withLabel = label != null && label !== '';
   const ownerState = _extends({}, props, {
-    notched,
     withLabel
   });
   return /*#__PURE__*/_jsx(OutlineRoot, _extends({