@mui/x-date-pickers 7.18.0 → 7.20.0

package/modern/locales/hrHR.js

@@ -0,0 +1,90 @@
+import { getPickersLocalization } from "./utils/getPickersLocalization.js";
+// maps TimeView to its translation
+const timeViews = {
+  hours: 'sati',
+  minutes: 'minute',
+  seconds: 'sekunde',
+  meridiem: 'meridiem'
+};
+const hrHRPickers = {
+  // Calendar navigation
+  previousMonth: 'Prethodni mjesec',
+  nextMonth: 'Naredni mjesec',
+  // View navigation
+  openPreviousView: 'Otvori prethodni prikaz',
+  openNextView: 'Otvori naredni prikaz',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'Otvoren je godišnji prikaz, promijeni na kalendarski prikaz' : 'Otvoren je kalendarski prikaz, promijeni na godišnji prikaz',
+  // DateRange labels
+  start: 'Početak',
+  end: 'Kraj',
+  startDate: 'Početni datum',
+  startTime: 'Početno vrijeme',
+  endDate: 'Krajnji datum',
+  endTime: 'Krajnje vrijeme',
+  // Action bar
+  cancelButtonLabel: 'Otkaži',
+  clearButtonLabel: 'Izbriši',
+  okButtonLabel: 'U redu',
+  todayButtonLabel: 'Danas',
+  // Toolbar titles
+  datePickerToolbarTitle: 'Odaberi datum',
+  dateTimePickerToolbarTitle: 'Odaberi datum i vrijeme',
+  timePickerToolbarTitle: 'Odaberi vrijeme',
+  dateRangePickerToolbarTitle: 'Odaberi vremenski okvir',
+  // Clock labels
+  clockLabelText: (view, time, utils, formattedTime) => `Odaberi ${timeViews[view] ?? view}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Vrijeme nije odabrano' : `Odabrano vrijeme je ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => {
+    let suffix = 'sati';
+    if (Number(hours) === 1) {
+      suffix = 'sat';
+    } else if (Number(hours) < 5) {
+      suffix = 'sata';
+    }
+    return `${hours} ${suffix}`;
+  },
+  minutesClockNumberText: minutes => `${minutes} ${Number(minutes) > 1 && Number(minutes) < 5 ? 'minute' : 'minuta'}`,
+  secondsClockNumberText: seconds => {
+    let suffix = 'sekundi';
+    if (Number(seconds) === 1) {
+      suffix = 'sekunda';
+    } else if (Number(seconds) < 5) {
+      suffix = 'sekunde';
+    }
+    return `${seconds} ${suffix}`;
+  },
+  // Digital clock labels
+  selectViewText: view => `Odaberi ${timeViews[view]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: 'Broj tjedna',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Tjedan ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open picker labels
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Odaberi datum, odabrani datum je ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Odaberi datum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Odaberi vrijeme, odabrano vrijeme je ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Odaberi vrijeme',
+  fieldClearLabel: 'Izbriši',
+  // Table labels
+  timeTableLabel: 'Odaberi vrijeme',
+  dateTableLabel: 'Odaberi datum',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'G'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
+  // View names
+  year: 'Godina',
+  month: 'Mjesec',
+  day: 'Dan',
+  weekDay: 'Dan u tjednu',
+  hours: 'Sati',
+  minutes: 'Minute',
+  seconds: 'Sekunde',
+  meridiem: 'Meridiem',
+  // Common
+  empty: 'Isprazni'
+};
+export const hrHR = getPickersLocalization(hrHRPickers);

package/modern/locales/index.js

@@ -1,4 +1,5 @@
 export * from "./beBY.js";
+export * from "./bgBG.js";
 export * from "./caES.js";
 export * from "./csCZ.js";
 export * from "./daDK.js";
@@ -11,6 +12,7 @@ export * from "./faIR.js";
 export * from "./fiFI.js";
 export * from "./frFR.js";
 export * from "./heIL.js";
+export * from "./hrHR.js";
 export * from "./huHU.js";
 export * from "./isIS.js";
 export * from "./itIT.js";
@@ -23,6 +25,7 @@ export * from "./nlNL.js";
 export * from "./nnNO.js";
 export * from "./plPL.js";
 export * from "./ptBR.js";
+export * from "./ptPT.js";
 export * from "./roRO.js";
 export * from "./ruRU.js";
 export * from "./skSK.js";

package/modern/locales/ptBR.js

@@ -10,8 +10,8 @@ const ptBRPickers = {
   previousMonth: 'Mês anterior',
   nextMonth: 'Próximo mês',
   // View navigation
-  openPreviousView: 'Abrir próxima seleção',
-  openNextView: 'Abrir seleção anterior',
+  openPreviousView: 'Abrir seleção anterior',
+  openNextView: 'Abrir próxima seleção',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'Seleção de ano está aberta, alternando para seleção de calendário' : 'Seleção de calendários está aberta, alternando para seleção de ano',
   // DateRange labels
   start: 'Início',
@@ -45,8 +45,7 @@ const ptBRPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Escolha uma data, data selecionada ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Escolha uma data',
   openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Escolha uma hora, hora selecionada ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Escolha uma hora',
-  // fieldClearLabel: 'Clear',
-
+  fieldClearLabel: 'Limpar valor',
   // Table labels
   timeTableLabel: 'escolha uma hora',
   dateTableLabel: 'escolha uma data',

package/modern/locales/ptPT.js

@@ -0,0 +1,73 @@
+import { getPickersLocalization } from "./utils/getPickersLocalization.js";
+const timeViews = {
+  hours: 'horas',
+  minutes: 'minutos',
+  seconds: 'segundos',
+  meridiem: 'meridiano'
+};
+const ptPTPickers = {
+  // Calendar navigation
+  previousMonth: 'Mês anterior',
+  nextMonth: 'Próximo mês',
+  // View navigation
+  openPreviousView: 'Abrir seleção anterior',
+  openNextView: 'Abrir próxima seleção',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'A seleção do ano está aberta, altere para a seleção do calendário' : 'A seleção do calendários está aberta, altere para a seleção do ano',
+  // DateRange labels
+  start: 'Início',
+  end: 'Fim',
+  startDate: 'Data de início',
+  startTime: 'Hora de início',
+  endDate: 'Data de fim',
+  endTime: 'Hora de fim',
+  // Action bar
+  cancelButtonLabel: 'Cancelar',
+  clearButtonLabel: 'Limpar',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Hoje',
+  // Toolbar titles
+  datePickerToolbarTitle: 'Selecione a data',
+  dateTimePickerToolbarTitle: 'Selecione a data e a hora',
+  timePickerToolbarTitle: 'Selecione a hora',
+  dateRangePickerToolbarTitle: 'Selecione o intervalo de datas',
+  // Clock labels
+  clockLabelText: (view, time, utils, formattedTime) => `Selecione ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Hora não selecionada' : `Selecionado a hora ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} horas`,
+  minutesClockNumberText: minutes => `${minutes} minutos`,
+  secondsClockNumberText: seconds => `${seconds} segundos`,
+  // Digital clock labels
+  selectViewText: view => `Selecione ${timeViews[view]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: 'Número da semana',
+  calendarWeekNumberHeaderText: 'N.º',
+  calendarWeekNumberAriaLabelText: weekNumber => `Semana ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open picker labels
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Escolha uma data, a data selecionada é ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Escolha uma data',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Escolha uma hora, a hora selecionada é ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Escolha uma hora',
+  fieldClearLabel: 'Limpar valor',
+  // Table labels
+  timeTableLabel: 'escolha uma hora',
+  dateTableLabel: 'escolha uma data',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'SSSS' : 'SS',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
+  // View names
+  year: 'Ano',
+  month: 'Mês',
+  day: 'Dia',
+  weekDay: 'Dia da Semana',
+  hours: 'Horas',
+  minutes: 'Minutos',
+  seconds: 'Segundos',
+  meridiem: 'Meridiano',
+  // Common
+  empty: 'Vazio'
+};
+export const ptPT = getPickersLocalization(ptPTPickers);

package/node/AdapterDateFnsBase/AdapterDateFnsBase.js

@@ -97,6 +97,7 @@ const formatTokenMap = {
     sectionType: 'weekDay',
     contentType: 'letter'
   },
+  // eslint-disable-next-line id-denylist
   e: {
     sectionType: 'weekDay',
     contentType: 'digit',

package/node/AdapterMoment/AdapterMoment.js

@@ -51,6 +51,7 @@ const formatTokenMap = {
     contentType: 'digit',
     maxLength: 1
   },
+  // eslint-disable-next-line id-denylist
   e: {
     sectionType: 'weekDay',
     contentType: 'digit',

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/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/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -38,7 +38,7 @@ const DesktopDateTimePickerLayout = exports.DesktopDateTimePickerLayout = /*#__P
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutRoot, {
     ref: ref,
-    className: (0, _clsx.default)(className, _PickersLayout.pickersLayoutClasses.root, classes?.root),
+    className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.root, classes?.root, className),
     sx: [{
       [`& .${_PickersLayout.pickersLayoutClasses.tabs}`]: {
         gridRow: 4,

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,52 @@ 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':
+        {
+          if (!listRef.current) {
+            return;
+          }
+          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':
+        {
+          if (!listRef.current) {
+            return;
+          }
+          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,48 @@ 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':
+        {
+          if (!containerRef.current) {
+            return;
+          }
+          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':
+        {
+          if (!containerRef.current) {
+            return;
+          }
+          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/PickersCalendarHeader/PickersCalendarHeader.js

@@ -197,7 +197,7 @@ const PickersCalendarHeader = exports.PickersCalendarHeader = /*#__PURE__*/React
   const label = utils.formatByString(month, format);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarHeaderRoot, (0, _extends2.default)({}, other, {
     ownerState: ownerState,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarHeaderLabelContainer, {
       role: "presentation",

package/node/PickersLayout/PickersLayout.js

@@ -129,7 +129,7 @@ const PickersLayout = exports.PickersLayout = /*#__PURE__*/React.forwardRef(func
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: props,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,

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');
@@ -292,7 +300,7 @@ function Clock(inProps) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ClockRoot, {
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ClockClock, {
       className: classes.clock,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClockSquareMask, {

package/node/TimeClock/ClockNumber.js

@@ -92,7 +92,7 @@ function ClockNumber(inProps) {
   const x = Math.round(Math.cos(angle) * length);
   const y = Math.round(Math.sin(angle) * length);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockNumberRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     "aria-disabled": disabled ? true : undefined,
     "aria-selected": selected ? true : undefined,
     role: "option",

package/node/TimeClock/ClockPointer.js

@@ -110,7 +110,7 @@ function ClockPointer(inProps) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPointerRoot, (0, _extends2.default)({
     style: getAngleStyle(),
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPointerThumb, {

package/node/YearCalendar/YearCalendar.js

@@ -186,7 +186,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     setFocusedYear(prevFocusedYear => selectedYear !== null && prevFocusedYear !== selectedYear ? selectedYear : prevFocusedYear);
   }, [selectedYear]);
   const verticalDirection = yearsOrder !== 'desc' ? yearsPerRow * 1 : yearsPerRow * -1;
-  const horizontalDirection = isRtl || yearsOrder === 'desc' ? -1 : 1;
+  const horizontalDirection = isRtl && yearsOrder === 'asc' || !isRtl && yearsOrder === 'desc' ? -1 : 1;
   const handleKeyDown = (0, _utils.unstable_useEventCallback)((event, year) => {
     switch (event.key) {
       case 'ArrowUp':

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.18.0
+ * @mui/x-date-pickers v7.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the