@mui/x-date-pickers 7.6.2 → 7.7.0

package/node/MonthCalendar/PickersMonth.js

@@ -8,11 +8,14 @@ exports.PickersMonth = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _pickersMonthClasses = require("./pickersMonthClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 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 => {
@@ -25,7 +28,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     monthButton: ['monthButton', disabled && 'disabled', selected && 'selected']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
 };
 const PickersMonthRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersMonth',
@@ -45,7 +48,7 @@ const PickersMonthRoot = (0, _styles.styled)('div', {
     }
   }]
 });
-const PickersMonthButton = (0, _styles.styled)('button', {
+const MonthCalendarButton = (0, _styles.styled)('button', {
   name: 'MuiPickersMonth',
   slot: 'MonthButton',
   overridesResolver: (_, styles) => [styles.monthButton, {
@@ -98,6 +101,7 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
   });
   const {
       autoFocus,
+      className,
       children,
       disabled,
       selected,
@@ -110,35 +114,48 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
       'aria-current': ariaCurrent,
       'aria-label': ariaLabel
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);
   const classes = useUtilityClasses(props);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+
+  // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
+  (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {
+      // `ref.current` being `null` would be a bug in MUI.
       ref.current?.focus();
     }
   }, [autoFocus]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
-    className: classes.root,
-    ownerState: props
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.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 = (0, _utils.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__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: props
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthButton, (0, _extends2.default)({}, monthButtonProps))
   }));
 });

package/node/YearCalendar/PickersYear.js

@@ -9,11 +9,13 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _pickersYearClasses = require("./pickersYearClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 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 => {
@@ -26,7 +28,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _pickersYearClasses.getPickersYearUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _pickersYearClasses.getPickersYearUtilityClass, classes);
 };
 const PickersYearRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersYear',
@@ -46,7 +48,7 @@ const PickersYearRoot = (0, _styles.styled)('div', {
     }
   }]
 });
-const PickersYearButton = (0, _styles.styled)('button', {
+const YearCalendarButton = (0, _styles.styled)('button', {
   name: 'MuiPickersYear',
   slot: 'YearButton',
   overridesResolver: (_, styles) => [styles.yearButton, {
@@ -111,37 +113,47 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
       onBlur,
       'aria-current': ariaCurrent
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(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(() => {
+  (0, _useEnhancedEffect.default)(() => {
     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 = (0, _utils.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__*/(0, _jsxRuntime.jsx)(PickersYearRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: props
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(YearButton, (0, _extends2.default)({}, yearButtonProps))
   }));
 });

package/node/YearCalendar/YearCalendar.js

@@ -22,7 +22,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 = ["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"];
 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 => {
@@ -97,7 +97,9 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
       onFocusedViewChange,
       yearsPerRow,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -253,11 +255,13 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
         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'));
     })
@@ -332,6 +336,16 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _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.
    */

package/node/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/node/locales/faIR.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.faIR = void 0;
 var _getPickersLocalization = require("./utils/getPickersLocalization");
 const timeViews = {
-  hours: 'ساعت ها',
-  minutes: 'دقیقه ها',
-  seconds: 'ثانیه ها',
+  hours: 'ساعت‌ها',
+  minutes: 'دقیقه‌ها',
+  seconds: 'ثانیه‌ها',
   meridiem: 'بعد از ظهر'
 };
 const faIRPickers = {
@@ -22,11 +22,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: 'پاک کردن',
@@ -39,9 +38,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
@@ -50,10 +49,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: 'انتخاب ساعت',
@@ -70,13 +68,12 @@ const faIRPickers = {
   year: 'سال',
   month: 'ماه',
   day: 'روز',
-  // weekDay: 'Week day',
-  hours: 'ساعت ها',
-  minutes: 'دقیقه ها',
-  seconds: 'ثانیه ها'
-  // meridiem: 'Meridiem',
-
+  weekDay: 'روز هفته',
+  hours: 'ساعت‌ها',
+  minutes: 'دقیقه‌ها',
+  seconds: 'ثانیه‌ها',
+  meridiem: 'نیم‌روز',
   // Common
-  // empty: 'Empty',
+  empty: 'خالی'
 };
 const faIR = exports.faIR = (0, _getPickersLocalization.getPickersLocalization)(faIRPickers);

package/node/locales/koKR.js

@@ -9,7 +9,7 @@ const views = {
   hours: '시간을',
   minutes: '분을',
   seconds: '초를',
-  meridiem: '메리디엠'
+  meridiem: '오전/오후를'
 };
 const koKRPickers = {
   // Calendar navigation
@@ -39,7 +39,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.6.2",
+  "version": "7.7.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,7 +35,7 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
     "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",