@mui/x-date-pickers 7.20.0 → 7.22.0

package/node/DigitalClock/DigitalClock.js

@@ -239,21 +239,22 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     return !containsValidTime() || !isValidValue();
   }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
+    const result = [];
     const startOfDay = utils.startOfDay(valueOrReferenceDate);
-    return [startOfDay, ...Array.from({
-      length: Math.ceil(24 * 60 / timeStep) - 1
-    }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
+    let nextTimeStepOption = startOfDay;
+    while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
+      result.push(nextTimeStepOption);
+      nextTimeStepOption = utils.addMinutes(nextTimeStepOption, timeStep);
+    }
+    return result;
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
   const handleKeyDown = event => {
     switch (event.key) {
       case 'PageUp':
         {
-          if (!listRef.current) {
-            return;
-          }
           const newIndex = (0, _utils.getFocusedListItemIndex)(listRef.current) - 5;
-          const children = listRef.current?.children;
+          const children = listRef.current.children;
           const newFocusedIndex = Math.max(0, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {
@@ -264,11 +265,8 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
         }
       case 'PageDown':
         {
-          if (!listRef.current) {
-            return;
-          }
           const newIndex = (0, _utils.getFocusedListItemIndex)(listRef.current) + 5;
-          const children = listRef.current?.children;
+          const children = listRef.current.children;
           const newFocusedIndex = Math.min(children.length - 1, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {
@@ -311,7 +309,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
           tabIndex: tabIndex
         }, clockItemProps, {
           children: formattedValue
-        }), formattedValue);
+        }), `${option.valueOf()}-${formattedValue}`);
       })
     })
   }));

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -151,11 +151,8 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
     switch (event.key) {
       case 'PageUp':
         {
-          if (!containerRef.current) {
-            return;
-          }
           const newIndex = (0, _utils.getFocusedListItemIndex)(containerRef.current) - 5;
-          const children = containerRef.current?.children;
+          const children = containerRef.current.children;
           const newFocusedIndex = Math.max(0, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {
@@ -166,11 +163,8 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
         }
       case 'PageDown':
         {
-          if (!containerRef.current) {
-            return;
-          }
           const newIndex = (0, _utils.getFocusedListItemIndex)(containerRef.current) + 5;
-          const children = containerRef.current?.children;
+          const children = containerRef.current.children;
           const newFocusedIndex = Math.min(children.length - 1, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {

package/node/PickersSectionList/PickersSectionList.js

@@ -56,15 +56,6 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _pickersSectionListClasses.getPickersSectionListUtilityClass, classes);
 };
-/**
- * Demos:
- *
- * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
- *
- * API:
- *
- * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
- */
 function PickersSection(props) {
   const {
     slots,
@@ -112,6 +103,36 @@ function PickersSection(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionSeparator, (0, _extends2.default)({}, sectionSeparatorBeforeProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionContent, (0, _extends2.default)({}, sectionContentProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionSeparator, (0, _extends2.default)({}, sectionSeparatorAfterProps))]
   }));
 }
+process.env.NODE_ENV !== "production" ? PickersSection.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object.isRequired,
+  element: _propTypes.default.shape({
+    after: _propTypes.default.object.isRequired,
+    before: _propTypes.default.object.isRequired,
+    container: _propTypes.default.object.isRequired,
+    content: _propTypes.default.object.isRequired
+  }).isRequired,
+  /**
+   * The props used for each component slot.
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   */
+  slots: _propTypes.default.object
+} : void 0;
+/**
+ * Demos:
+ *
+ * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
+ *
+ * API:
+ *
+ * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
+ */
 const PickersSectionList = exports.PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,

package/node/index.js

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

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -66,7 +66,8 @@ const useDesktopPicker = _ref => {
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
-    contextValue
+    contextValue,
+    ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     fieldRef,
@@ -74,11 +75,6 @@ const useDesktopPicker = _ref => {
     additionalViewProps: {},
     wrapperVariant: 'desktop'
   }));
-
-  // TODO v8: Apply this ownerState to all the slots in this hook.
-  const ownerStateV8 = {
-    open
-  };
   const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
   const _useSlotProps = (0, _useSlotProps3.default)({
       elementType: InputAdornment,
@@ -106,7 +102,7 @@ const useDesktopPicker = _ref => {
   const openPickerIconProps = (0, _useSlotProps3.default)({
     elementType: OpenPickerIcon,
     externalSlotProps: innerSlotProps?.openPickerIcon,
-    ownerState: ownerStateV8
+    ownerState
   });
   const Field = slots.field;
   const fieldProps = (0, _useSlotProps3.default)({

package/node/internals/hooks/useField/useField.js

@@ -83,7 +83,7 @@ const useField = params => {
     // eslint-disable-next-line default-case
     switch (true) {
       // Select all
-      case (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a' && !event.shiftKey && !event.altKey:
+      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
         {
           // prevent default to make sure that the next line "select all" while updating
           // the internal state at the same time.

package/node/internals/hooks/usePicker/usePicker.js

@@ -8,6 +8,7 @@ var _warning = require("@mui/x-internals/warning");
 var _usePickerValue = require("./usePickerValue");
 var _usePickerViews = require("./usePickerViews");
 var _usePickerLayoutProps = require("./usePickerLayoutProps");
+var _usePickerOwnerState = require("./usePickerOwnerState");
 const usePicker = ({
   props,
   valueManager,
@@ -45,6 +46,10 @@ const usePicker = ({
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps
   });
+  const pickerOwnerState = (0, _usePickerOwnerState.usePickerOwnerState)({
+    props,
+    pickerValueResponse
+  });
   return {
     // Picker value
     open: pickerValueResponse.open,
@@ -57,7 +62,9 @@ const usePicker = ({
     // Picker layout
     layoutProps: pickerLayoutResponse.layoutProps,
     // Picker context
-    contextValue: pickerValueResponse.contextValue
+    contextValue: pickerValueResponse.contextValue,
+    // Picker owner state
+    ownerState: pickerOwnerState
   };
 };
 exports.usePicker = usePicker;

package/node/internals/hooks/usePicker/usePickerOwnerState.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerOwnerState = usePickerOwnerState;
+var React = _interopRequireWildcard(require("react"));
+function usePickerOwnerState(parameters) {
+  const {
+    props,
+    pickerValueResponse
+  } = parameters;
+  return React.useMemo(() => ({
+    value: pickerValueResponse.viewProps.value,
+    open: pickerValueResponse.open,
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false
+  }), [pickerValueResponse.viewProps.value, pickerValueResponse.open, props.disabled, props.readOnly]);
+}

package/node/internals/utils/utils.js

@@ -51,8 +51,8 @@ const getActiveElement = (root = document) => {
  */
 exports.getActiveElement = getActiveElement;
 const getFocusedListItemIndex = listElement => {
-  const children = listElement.children;
-  return Array.from(children).findIndex(child => child === getActiveElement(document));
+  const children = Array.from(listElement.children);
+  return children.indexOf(getActiveElement(document));
 };
 exports.getFocusedListItemIndex = getFocusedListItemIndex;
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = exports.DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.20.0",
+  "version": "7.22.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -41,7 +41,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.20.0"
+    "@mui/x-internals": "7.21.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",