@mui/x-date-pickers 7.19.0 → 7.21.0

package/modern/internals/utils/utils.js

@@ -32,4 +32,15 @@ export const getActiveElement = (root = document) => {
   }
   return activeEl;
 };
+
+/**
+ * Gets the index of the focused list item in a given ul list element.
+ *
+ * @param {HTMLUListElement} listElement - The list element to search within.
+ * @returns {number} The index of the focused list item, or -1 if none is focused.
+ */
+export const getFocusedListItemIndex = listElement => {
+  const children = Array.from(listElement.children);
+  return children.indexOf(getActiveElement(document));
+};
 export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';

package/node/AdapterDayjs/AdapterDayjs.js

@@ -262,6 +262,8 @@ class AdapterDayjs {
       const timezone = this.getTimezone(value);
       if (timezone !== 'UTC') {
         const fixedValue = value.tz(this.cleanTimezone(timezone), true);
+        // TODO: Simplify the case when we raise the `dayjs` peer dep to 1.11.12 (https://github.com/iamkun/dayjs/releases/tag/v1.11.12)
+        /* istanbul ignore next */
         // @ts-ignore
         if (fixedValue.$offset === (value.$offset ?? 0)) {
           return value;

package/node/DateCalendar/DateCalendar.js

@@ -494,7 +494,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/DatePicker/DatePicker.js

@@ -263,7 +263,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/DateTimePicker/DateTimePicker.js

@@ -301,7 +301,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -94,7 +94,7 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
-    className: (0, _clsx.default)(classes.root, className),
+    className: (0, _clsx.default)(className, classes.root),
     sx: sx,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
       value: "date",

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -284,7 +284,7 @@ DesktopDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -409,7 +409,7 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/DigitalClock/DigitalClock.js

@@ -29,6 +29,7 @@ var _dimensions = require("../internals/constants/dimensions");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
+var _utils = require("../internals/utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
 const useUtilityClasses = ownerState => {
@@ -111,6 +112,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
   const utils = (0, _useUtils.useUtils)();
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
+  const listRef = React.useRef(null);
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDigitalClock'
@@ -243,15 +245,46 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'PageUp':
+        {
+          const newIndex = (0, _utils.getFocusedListItemIndex)(listRef.current) - 5;
+          const children = listRef.current.children;
+          const newFocusedIndex = Math.max(0, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageDown':
+        {
+          const newIndex = (0, _utils.getFocusedListItemIndex)(listRef.current) + 5;
+          const children = listRef.current.children;
+          const newFocusedIndex = Math.min(children.length - 1, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      default:
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DigitalClockRoot, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DigitalClockList, {
+      ref: listRef,
       role: "listbox",
       "aria-label": translations.timePickerToolbarTitle,
       className: classes.list,
+      onKeyDown: handleKeyDown,
       children: timeOptions.map((option, index) => {
         if (skipDisabled && isTimeDisabled(option)) {
           return null;

package/node/MobileDatePicker/MobileDatePicker.js

@@ -281,7 +281,7 @@ MobileDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -329,7 +329,7 @@ MobileDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -17,6 +17,7 @@ var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _multiSectionDigitalClockSectionClasses = require("./multiSectionDigitalClockSectionClasses");
 var _dimensions = require("../internals/constants/dimensions");
+var _utils = require("../internals/utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
 const useUtilityClasses = ownerState => {
@@ -146,12 +147,42 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
     containerRef.current.scrollTop = offsetTop - 4;
   });
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'PageUp':
+        {
+          const newIndex = (0, _utils.getFocusedListItemIndex)(containerRef.current) - 5;
+          const children = containerRef.current.children;
+          const newFocusedIndex = Math.max(0, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageDown':
+        {
+          const newIndex = (0, _utils.getFocusedListItemIndex)(containerRef.current) + 5;
+          const children = containerRef.current.children;
+          const newFocusedIndex = Math.min(children.length - 1, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      default:
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiSectionDigitalClockSectionRoot, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     autoFocusItem: autoFocus && active,
-    role: "listbox"
+    role: "listbox",
+    onKeyDown: handleKeyDown
   }, other, {
     children: items.map((option, index) => {
       const isItemDisabled = option.isDisabled?.(option.value);

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/StaticDatePicker/StaticDatePicker.js

@@ -215,7 +215,7 @@ StaticDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -263,7 +263,7 @@ StaticDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: _propTypes.default.func,
   /**

package/node/TimeClock/Clock.js

@@ -282,6 +282,14 @@ function Clock(inProps) {
         handleValueChange(viewValue - keyboardControlStep, 'partial');
         event.preventDefault();
         break;
+      case 'PageUp':
+        handleValueChange(viewValue + 5, 'partial');
+        event.preventDefault();
+        break;
+      case 'PageDown':
+        handleValueChange(viewValue - 5, 'partial');
+        event.preventDefault();
+        break;
       case 'Enter':
       case ' ':
         handleValueChange(viewValue, 'finish');

package/node/hooks/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "useClearableField", {
     return _useClearableField.useClearableField;
   }
 });
+Object.defineProperty(exports, "useParsedFormat", {
+  enumerable: true,
+  get: function () {
+    return _useParsedFormat.useParsedFormat;
+  }
+});
+Object.defineProperty(exports, "usePickersContext", {
+  enumerable: true,
+  get: function () {
+    return _usePickersContext.usePickersContext;
+  }
+});
 Object.defineProperty(exports, "usePickersTranslations", {
   enumerable: true,
   get: function () {
@@ -23,4 +35,6 @@ Object.defineProperty(exports, "useSplitFieldProps", {
 });
 var _useClearableField = require("./useClearableField");
 var _usePickersTranslations = require("./usePickersTranslations");
-var _useSplitFieldProps = require("./useSplitFieldProps");
+var _useSplitFieldProps = require("./useSplitFieldProps");
+var _useParsedFormat = require("./useParsedFormat");
+var _usePickersContext = require("./usePickersContext");

package/node/hooks/useParsedFormat.js

@@ -0,0 +1,50 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useParsedFormat = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _useUtils = require("../internals/hooks/useUtils");
+var _buildSectionsFromFormat = require("../internals/hooks/useField/buildSectionsFromFormat");
+var _useField = require("../internals/hooks/useField/useField.utils");
+var _usePickersTranslations = require("./usePickersTranslations");
+/**
+ * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
+ * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * @param {object} The parameters needed to build the placeholder.
+ * @param {string} params.format Format of the date to use.
+ * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).
+ * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
+ * @returns
+ */
+const useParsedFormat = parameters => {
+  const {
+    format,
+    formatDensity = 'dense',
+    shouldRespectLeadingZeros = false
+  } = parameters;
+  const utils = (0, _useUtils.useUtils)();
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
+  return React.useMemo(() => {
+    const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
+      utils,
+      format,
+      formatDensity,
+      isRtl,
+      shouldRespectLeadingZeros,
+      localeText: translations,
+      localizedDigits,
+      date: null,
+      // TODO v9: Make sure we still don't reverse in `buildSectionsFromFormat` when using `useParsedFormat`.
+      enableAccessibleFieldDOMStructure: false
+    });
+    return sections.map(section => `${section.startSeparator}${section.placeholder}${section.endSeparator}`).join('');
+  }, [utils, isRtl, translations, localizedDigits, format, formatDensity, shouldRespectLeadingZeros]);
+};
+exports.useParsedFormat = useParsedFormat;

package/node/hooks/usePickersContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickersContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _PickersProvider = require("../internals/components/PickersProvider");
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+const usePickersContext = () => {
+  const value = React.useContext(_PickersProvider.PickersContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickersContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};
+exports.usePickersContext = usePickersContext;

package/node/index.js

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

package/node/internals/components/PickersProvider.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickersContext = void 0;
+exports.PickersProvider = PickersProvider;
+var React = _interopRequireWildcard(require("react"));
+var _LocalizationProvider = require("../../LocalizationProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+const PickersContext = exports.PickersContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+function PickersProvider(props) {
+  const {
+    contextValue,
+    localeText,
+    children
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+      localeText: localeText,
+      children: children
+    })
+  });
+}

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

@@ -16,8 +16,8 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _PickersPopper = require("../../components/PickersPopper");
 var _usePicker = require("../usePicker");
-var _LocalizationProvider = require("../../../LocalizationProvider");
 var _PickersLayout = require("../../../PickersLayout");
+var _PickersProvider = require("../../components/PickersProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "getOpenDialogAriaText"],
   _excluded2 = ["ownerState"],
@@ -65,7 +65,9 @@ const useDesktopPicker = _ref => {
     layoutProps,
     renderCurrentView,
     shouldRestoreFocus,
-    fieldProps: pickerFieldProps
+    fieldProps: pickerFieldProps,
+    contextValue,
+    ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     fieldRef,
@@ -73,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,
@@ -105,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)({
@@ -169,7 +166,8 @@ const useDesktopPicker = _ref => {
     }, innerSlotProps?.popper)
   });
   const handleFieldRef = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_LocalizationProvider.LocalizationProvider, {
+  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersProvider.PickersProvider, {
+    contextValue: contextValue,
     localeText: localeText,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
       slots: slotsForField,

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

@@ -45,12 +45,12 @@ const getEscapedPartsFromFormat = ({
   }
   return escapedParts;
 };
-const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
+const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat) => {
   switch (sectionConfig.type) {
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
+          digitAmount: utils.formatByString(utils.date(undefined, 'default'), sectionFormat).length,
           format: sectionFormat
         });
       }
@@ -106,7 +106,6 @@ const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, secti
 };
 const createSection = ({
   utils,
-  timezone,
   date,
   shouldRespectLeadingZeros,
   localeText,
@@ -119,7 +118,7 @@ const createSection = ({
     throw new Error('MUI X: Should not call `commitToken` with an empty token');
   }
   const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(utils, token);
-  const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, timezone, sectionConfig.contentType, sectionConfig.type, token);
+  const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, sectionConfig.contentType, sectionConfig.type, token);
   const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
   const isValidDate = date != null && utils.isValid(date);
   let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
@@ -141,7 +140,7 @@ const createSection = ({
     format: token,
     maxLength,
     value: sectionValue,
-    placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
+    placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
     hasLeadingZerosInFormat,
     hasLeadingZerosInInput,
     startSeparator,

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/useField/useField.utils.js

@@ -38,9 +38,9 @@ const getDeltaFromKeyCode = keyCode => {
       return 0;
   }
 };
-const getDaysInWeekStr = (utils, timezone, format) => {
+const getDaysInWeekStr = (utils, format) => {
   const elements = [];
-  const now = utils.date(undefined, timezone);
+  const now = utils.date(undefined, 'default');
   const startDate = utils.startOfWeek(now);
   const endDate = utils.endOfWeek(now);
   let current = startDate;
@@ -59,7 +59,7 @@ const getLetterEditingOptions = (utils, timezone, sectionType, format) => {
       }
     case 'weekDay':
       {
-        return getDaysInWeekStr(utils, timezone, format);
+        return getDaysInWeekStr(utils, format);
       }
     case 'meridiem':
       {
@@ -252,17 +252,17 @@ const changeSectionValueFormat = (utils, valueStr, currentFormat, newFormat) =>
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
 exports.changeSectionValueFormat = changeSectionValueFormat;
-const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.date(undefined, timezone), format).length === 4;
-const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType, sectionType, format) => {
+const isFourDigitYearFormat = (utils, format) => utils.formatByString(utils.date(undefined, 'system'), format).length === 4;
+const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
-  const now = utils.date(undefined, timezone);
+  const now = utils.date(undefined, 'default');
   switch (sectionType) {
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
       {
-        if (isFourDigitYearFormat(utils, timezone, format)) {
+        if (isFourDigitYearFormat(utils, format)) {
           const formatted0001 = utils.formatByString(utils.setYear(now, 1), format);
           return formatted0001 === '0001';
         }
@@ -372,7 +372,7 @@ const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       format
     }) => ({
       minimum: 0,
-      maximum: isFourDigitYearFormat(utils, timezone, format) ? 9999 : 99
+      maximum: isFourDigitYearFormat(utils, format) ? 9999 : 99
     }),
     month: () => ({
       minimum: 1,
@@ -391,7 +391,7 @@ const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       contentType
     }) => {
       if (contentType === 'digit') {
-        const daysInWeek = getDaysInWeekStr(utils, timezone, format).map(Number);
+        const daysInWeek = getDaysInWeekStr(utils, format).map(Number);
         return {
           minimum: Math.min(...daysInWeek),
           maximum: Math.max(...daysInWeek)
@@ -459,7 +459,7 @@ const validateSections = (sections, valueType) => {
   }
 };
 exports.validateSections = validateSections;
-const transferDateSectionValue = (utils, timezone, section, dateToTransferFrom, dateToTransferTo) => {
+const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTransferTo) => {
   switch (section.type) {
     case 'year':
       {
@@ -471,7 +471,7 @@ const transferDateSectionValue = (utils, timezone, section, dateToTransferFrom,
       }
     case 'weekDay':
       {
-        const formattedDaysInWeek = getDaysInWeekStr(utils, timezone, section.format);
+        const formattedDaysInWeek = getDaysInWeekStr(utils, section.format);
         const dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
         const dayInWeekOfActiveDate = formattedDaysInWeek.indexOf(dayInWeekStrOfActiveDate);
         const dayInWeekOfNewSectionValue = formattedDaysInWeek.indexOf(section.value);
@@ -523,11 +523,11 @@ const reliableSectionModificationOrder = {
   meridiem: 8,
   empty: 9
 };
-const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
+const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it
 [...sections].sort((a, b) => reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type]).reduce((mergedDate, section) => {
   if (!shouldLimitToEditedSections || section.modified) {
-    return transferDateSectionValue(utils, timezone, section, dateToTransferFrom, mergedDate);
+    return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
   }
   return mergedDate;
 }, referenceDate);