@mui/x-date-pickers 7.6.2 → 7.7.0

package/locales/faIR.js

@@ -1,8 +1,8 @@
 import { getPickersLocalization } from './utils/getPickersLocalization';
 const timeViews = {
-  hours: 'ساعت ها',
-  minutes: 'دقیقه ها',
-  seconds: 'ثانیه ها',
+  hours: 'ساعت‌ها',
+  minutes: 'دقیقه‌ها',
+  seconds: 'ثانیه‌ها',
   meridiem: 'بعد از ظهر'
 };
 const faIRPickers = {
@@ -16,11 +16,10 @@ const faIRPickers = {
   // DateRange labels
   start: 'شروع',
   end: 'پایان',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'تاریخ شروع',
+  startTime: 'ساعت شروع',
+  endDate: 'تاریخ پایان',
+  endTime: 'ساعت پایان',
   // Action bar
   cancelButtonLabel: 'لغو',
   clearButtonLabel: 'پاک کردن',
@@ -33,9 +32,9 @@ const faIRPickers = {
   dateRangePickerToolbarTitle: 'محدوده تاریخ را انتخاب کنید',
   // Clock labels
   clockLabelText: (view, time, adapter) => ` را انتخاب کنید ${timeViews[view]}. ${time === null ? 'هیچ ساعتی انتخاب نشده است' : `ساعت انتخاب ${adapter.format(time, 'fullTime')} می باشد`}`,
-  hoursClockNumberText: hours => `${hours} ساعت ها`,
-  minutesClockNumberText: minutes => `${minutes} دقیقه ها`,
-  secondsClockNumberText: seconds => `${seconds} ثانیه ها`,
+  hoursClockNumberText: hours => `${hours} ساعت‌ها`,
+  minutesClockNumberText: minutes => `${minutes} دقیقه‌ها`,
+  secondsClockNumberText: seconds => `${seconds} ثانیه‌ها`,
   // Digital clock labels
   selectViewText: view => ` را انتخاب کنید ${timeViews[view]}`,
   // Calendar labels
@@ -44,10 +43,9 @@ const faIRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `هفته ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} می باشد` : 'تاریخ را انتخاب کنید',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می باشد` : 'ساعت را انتخاب کنید',
-  // fieldClearLabel: 'Clear value',
-
+  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} می‌باشد` : 'تاریخ را انتخاب کنید',
+  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می‌باشد` : 'ساعت را انتخاب کنید',
+  fieldClearLabel: 'پاک کردن مقدار',
   // Table labels
   timeTableLabel: 'انتخاب تاریخ',
   dateTableLabel: 'انتخاب ساعت',
@@ -64,13 +62,12 @@ const faIRPickers = {
   year: 'سال',
   month: 'ماه',
   day: 'روز',
-  // weekDay: 'Week day',
-  hours: 'ساعت ها',
-  minutes: 'دقیقه ها',
-  seconds: 'ثانیه ها'
-  // meridiem: 'Meridiem',
-
+  weekDay: 'روز هفته',
+  hours: 'ساعت‌ها',
+  minutes: 'دقیقه‌ها',
+  seconds: 'ثانیه‌ها',
+  meridiem: 'نیم‌روز',
   // Common
-  // empty: 'Empty',
+  empty: 'خالی'
 };
 export const faIR = getPickersLocalization(faIRPickers);

package/locales/koKR.js

@@ -3,7 +3,7 @@ const views = {
   hours: '시간을',
   minutes: '분을',
   seconds: '초를',
-  meridiem: '메리디엠'
+  meridiem: '오전/오후를'
 };
 const koKRPickers = {
   // Calendar navigation
@@ -33,7 +33,7 @@ const koKRPickers = {
   dateRangePickerToolbarTitle: '날짜 범위 선택하기',
   // Clock labels
   clockLabelText: (view, time, adapter) => `${views[view]} 선택하세요. ${time === null ? '시간을 선택하지 않았습니다.' : `현재 선택된 시간은 ${adapter.format(time, 'fullTime')}입니다.`}`,
-  hoursClockNumberText: hours => `${hours}시간`,
+  hoursClockNumberText: hours => `${hours}시`,
   minutesClockNumberText: minutes => `${minutes}분`,
   secondsClockNumberText: seconds => `${seconds}초`,
   // Digital clock labels

package/modern/DateCalendar/DateCalendar.js

@@ -272,7 +272,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     readOnly,
     disabled,
     timezone,
-    gridLabelId
+    gridLabelId,
+    slots,
+    slotProps
   };
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
@@ -333,8 +335,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           fixedWeekNumber: fixedWeekNumber,
           dayOfWeekFormatter: dayOfWeekFormatter,
           displayWeekNumber: displayWeekNumber,
-          slots: slots,
-          slotProps: slotProps,
           loading: loading,
           renderLoading: renderLoading
         }))]

package/modern/MonthCalendar/MonthCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -83,7 +83,9 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onFocusedViewChange,
       monthsPerRow = 3,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -218,12 +220,14 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         onKeyDown: handleKeyDown,
         autoFocus: internalHasFocus && monthNumber === focusedMonth,
         disabled: isDisabled,
-        tabIndex: monthNumber === focusedMonth ? 0 : -1,
+        tabIndex: monthNumber === focusedMonth && !isDisabled ? 0 : -1,
         onFocus: handleMonthFocus,
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         "aria-label": monthLabel,
         monthsPerRow: monthsPerRow,
+        slots: slots,
+        slotProps: slotProps,
         children: monthText
       }, monthText);
     })
@@ -303,6 +307,16 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/MonthCalendar/PickersMonth.js

@@ -1,9 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow"];
+const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
 import * as React from 'react';
+import clsx from 'clsx';
 import { styled, alpha, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useSlotProps } from '@mui/base/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getPickersMonthUtilityClass, pickersMonthClasses } from './pickersMonthClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -36,7 +39,7 @@ const PickersMonthRoot = styled('div', {
     }
   }]
 });
-const PickersMonthButton = styled('button', {
+const MonthCalendarButton = styled('button', {
   name: 'MuiPickersMonth',
   slot: 'MonthButton',
   overridesResolver: (_, styles) => [styles.monthButton, {
@@ -89,6 +92,7 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
   });
   const {
       autoFocus,
+      className,
       children,
       disabled,
       selected,
@@ -101,35 +105,48 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       'aria-current': ariaCurrent,
       'aria-label': ariaLabel
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);
   const classes = useUtilityClasses(props);
+
+  // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
   useEnhancedEffect(() => {
     if (autoFocus) {
+      // `ref.current` being `null` would be a bug in MUI.
       ref.current?.focus();
     }
   }, [autoFocus]);
-  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
-    className: classes.root,
-    ownerState: props
-  }, other, {
-    children: /*#__PURE__*/_jsx(PickersMonthButton, {
-      ref: ref,
-      disabled: disabled,
-      type: "button",
-      role: "radio",
-      tabIndex: disabled ? -1 : tabIndex,
-      "aria-current": ariaCurrent,
-      "aria-checked": selected,
-      "aria-label": ariaLabel,
+  const MonthButton = slots?.monthButton ?? MonthCalendarButton;
+  const monthButtonProps = useSlotProps({
+    elementType: MonthButton,
+    externalSlotProps: slotProps?.monthButton,
+    additionalProps: {
+      children,
+      disabled,
+      tabIndex,
+      ref,
+      type: 'button',
+      role: 'radio',
+      'aria-current': ariaCurrent,
+      'aria-checked': selected,
+      'aria-label': ariaLabel,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
       onFocus: event => onFocus(event, value),
-      onBlur: event => onBlur(event, value),
-      className: classes.monthButton,
-      ownerState: props,
-      children: children
-    })
+      onBlur: event => onBlur(event, value)
+    },
+    ownerState: props,
+    className: classes.monthButton
+  });
+  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
+    className: clsx(classes.root, className),
+    ownerState: props
+  }, other, {
+    children: /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps))
   }));
 });

package/modern/YearCalendar/PickersYear.js

@@ -1,10 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow"];
+const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { styled, alpha, useThemeProps } from '@mui/material/styles';
+import { useSlotProps } from '@mui/base/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getPickersYearUtilityClass, pickersYearClasses } from './pickersYearClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -37,7 +39,7 @@ const PickersYearRoot = styled('div', {
     }
   }]
 });
-const PickersYearButton = styled('button', {
+const YearCalendarButton = styled('button', {
   name: 'MuiPickersYear',
   slot: 'YearButton',
   overridesResolver: (_, styles) => [styles.yearButton, {
@@ -102,37 +104,47 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
       onBlur,
       'aria-current': ariaCurrent
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);
   const classes = useUtilityClasses(props);
 
   // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (autoFocus) {
       // `ref.current` being `null` would be a bug in MUI.
-      ref.current.focus();
+      ref.current?.focus();
     }
   }, [autoFocus]);
+  const YearButton = slots?.yearButton ?? YearCalendarButton;
+  const yearButtonProps = useSlotProps({
+    elementType: YearButton,
+    externalSlotProps: slotProps?.yearButton,
+    additionalProps: {
+      children,
+      disabled,
+      tabIndex,
+      ref,
+      type: 'button',
+      role: 'radio',
+      'aria-current': ariaCurrent,
+      'aria-checked': selected,
+      onClick: event => onClick(event, value),
+      onKeyDown: event => onKeyDown(event, value),
+      onFocus: event => onFocus(event, value),
+      onBlur: event => onBlur(event, value)
+    },
+    ownerState: props,
+    className: classes.yearButton
+  });
   return /*#__PURE__*/_jsx(PickersYearRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: props
   }, other, {
-    children: /*#__PURE__*/_jsx(PickersYearButton, {
-      ref: ref,
-      disabled: disabled,
-      type: "button",
-      role: "radio",
-      tabIndex: disabled ? -1 : tabIndex,
-      "aria-current": ariaCurrent,
-      "aria-checked": selected,
-      onClick: event => onClick(event, value),
-      onKeyDown: event => onKeyDown(event, value),
-      onFocus: event => onFocus(event, value),
-      onBlur: event => onBlur(event, value),
-      className: classes.yearButton,
-      ownerState: props,
-      children: children
-    })
+    children: /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps))
   }));
 });

package/modern/YearCalendar/YearCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId"];
+const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -88,7 +88,9 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onFocusedViewChange,
       yearsPerRow,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -244,11 +246,13 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
         onKeyDown: handleKeyDown,
         autoFocus: internalHasFocus && yearNumber === focusedYear,
         disabled: isDisabled,
-        tabIndex: yearNumber === focusedYear ? 0 : -1,
+        tabIndex: yearNumber === focusedYear && !isDisabled ? 0 : -1,
         onFocus: handleYearFocus,
         onBlur: handleYearBlur,
         "aria-current": todayYear === yearNumber ? 'date' : undefined,
         yearsPerRow: yearsPerRow,
+        slots: slots,
+        slotProps: slotProps,
         children: utils.format(year, 'year')
       }, utils.format(year, 'year'));
     })
@@ -323,6 +327,16 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/index.js

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

package/modern/locales/faIR.js

@@ -1,8 +1,8 @@
 import { getPickersLocalization } from './utils/getPickersLocalization';
 const timeViews = {
-  hours: 'ساعت ها',
-  minutes: 'دقیقه ها',
-  seconds: 'ثانیه ها',
+  hours: 'ساعت‌ها',
+  minutes: 'دقیقه‌ها',
+  seconds: 'ثانیه‌ها',
   meridiem: 'بعد از ظهر'
 };
 const faIRPickers = {
@@ -16,11 +16,10 @@ const faIRPickers = {
   // DateRange labels
   start: 'شروع',
   end: 'پایان',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'تاریخ شروع',
+  startTime: 'ساعت شروع',
+  endDate: 'تاریخ پایان',
+  endTime: 'ساعت پایان',
   // Action bar
   cancelButtonLabel: 'لغو',
   clearButtonLabel: 'پاک کردن',
@@ -33,9 +32,9 @@ const faIRPickers = {
   dateRangePickerToolbarTitle: 'محدوده تاریخ را انتخاب کنید',
   // Clock labels
   clockLabelText: (view, time, adapter) => ` را انتخاب کنید ${timeViews[view]}. ${time === null ? 'هیچ ساعتی انتخاب نشده است' : `ساعت انتخاب ${adapter.format(time, 'fullTime')} می باشد`}`,
-  hoursClockNumberText: hours => `${hours} ساعت ها`,
-  minutesClockNumberText: minutes => `${minutes} دقیقه ها`,
-  secondsClockNumberText: seconds => `${seconds} ثانیه ها`,
+  hoursClockNumberText: hours => `${hours} ساعت‌ها`,
+  minutesClockNumberText: minutes => `${minutes} دقیقه‌ها`,
+  secondsClockNumberText: seconds => `${seconds} ثانیه‌ها`,
   // Digital clock labels
   selectViewText: view => ` را انتخاب کنید ${timeViews[view]}`,
   // Calendar labels
@@ -44,10 +43,9 @@ const faIRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `هفته ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} می باشد` : 'تاریخ را انتخاب کنید',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می باشد` : 'ساعت را انتخاب کنید',
-  // fieldClearLabel: 'Clear value',
-
+  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} می‌باشد` : 'تاریخ را انتخاب کنید',
+  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می‌باشد` : 'ساعت را انتخاب کنید',
+  fieldClearLabel: 'پاک کردن مقدار',
   // Table labels
   timeTableLabel: 'انتخاب تاریخ',
   dateTableLabel: 'انتخاب ساعت',
@@ -64,13 +62,12 @@ const faIRPickers = {
   year: 'سال',
   month: 'ماه',
   day: 'روز',
-  // weekDay: 'Week day',
-  hours: 'ساعت ها',
-  minutes: 'دقیقه ها',
-  seconds: 'ثانیه ها'
-  // meridiem: 'Meridiem',
-
+  weekDay: 'روز هفته',
+  hours: 'ساعت‌ها',
+  minutes: 'دقیقه‌ها',
+  seconds: 'ثانیه‌ها',
+  meridiem: 'نیم‌روز',
   // Common
-  // empty: 'Empty',
+  empty: 'خالی'
 };
 export const faIR = getPickersLocalization(faIRPickers);

package/modern/locales/koKR.js

@@ -3,7 +3,7 @@ const views = {
   hours: '시간을',
   minutes: '분을',
   seconds: '초를',
-  meridiem: '메리디엠'
+  meridiem: '오전/오후를'
 };
 const koKRPickers = {
   // Calendar navigation
@@ -33,7 +33,7 @@ const koKRPickers = {
   dateRangePickerToolbarTitle: '날짜 범위 선택하기',
   // Clock labels
   clockLabelText: (view, time, adapter) => `${views[view]} 선택하세요. ${time === null ? '시간을 선택하지 않았습니다.' : `현재 선택된 시간은 ${adapter.format(time, 'fullTime')}입니다.`}`,
-  hoursClockNumberText: hours => `${hours}시간`,
+  hoursClockNumberText: hours => `${hours}시`,
   minutesClockNumberText: minutes => `${minutes}분`,
   secondsClockNumberText: seconds => `${seconds}초`,
   // Digital clock labels

package/node/DateCalendar/DateCalendar.js

@@ -281,7 +281,9 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     readOnly,
     disabled,
     timezone,
-    gridLabelId
+    gridLabelId,
+    slots,
+    slotProps
   };
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
@@ -342,8 +344,6 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
           fixedWeekNumber: fixedWeekNumber,
           dayOfWeekFormatter: dayOfWeekFormatter,
           displayWeekNumber: displayWeekNumber,
-          slots: slots,
-          slotProps: slotProps,
           loading: loading,
           renderLoading: renderLoading
         }))]

package/node/MonthCalendar/MonthCalendar.js

@@ -23,7 +23,7 @@ var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDa
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -93,7 +93,9 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
       onFocusedViewChange,
       monthsPerRow = 3,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -228,12 +230,14 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
         onKeyDown: handleKeyDown,
         autoFocus: internalHasFocus && monthNumber === focusedMonth,
         disabled: isDisabled,
-        tabIndex: monthNumber === focusedMonth ? 0 : -1,
+        tabIndex: monthNumber === focusedMonth && !isDisabled ? 0 : -1,
         onFocus: handleMonthFocus,
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         "aria-label": monthLabel,
         monthsPerRow: monthsPerRow,
+        slots: slots,
+        slotProps: slotProps,
         children: monthText
       }, monthText);
     })
@@ -313,6 +317,16 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: _propTypes.default.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */