@mui/x-date-pickers 7.17.0 → 7.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/AdapterDateFns/AdapterDateFns.js +1 -1
  2. package/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -0
  3. package/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -1
  4. package/AdapterMoment/AdapterMoment.js +1 -0
  5. package/CHANGELOG.md +208 -5
  6. package/DateCalendar/DateCalendar.js +9 -1
  7. package/DateField/useDateField.d.ts +1 -1
  8. package/DatePicker/DatePicker.js +6 -0
  9. package/DatePicker/DatePicker.types.d.ts +5 -5
  10. package/DateTimeField/useDateTimeField.d.ts +1 -1
  11. package/DateTimePicker/DateTimePicker.js +6 -0
  12. package/DateTimePicker/DateTimePicker.types.d.ts +7 -6
  13. package/DateTimePicker/DateTimePickerTabs.js +1 -1
  14. package/DesktopDatePicker/DesktopDatePicker.js +6 -0
  15. package/DesktopDatePicker/DesktopDatePicker.types.d.ts +7 -6
  16. package/DesktopDateTimePicker/DesktopDateTimePicker.js +6 -0
  17. package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +11 -10
  18. package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -1
  19. package/MobileDatePicker/MobileDatePicker.js +6 -0
  20. package/MobileDatePicker/MobileDatePicker.types.d.ts +5 -0
  21. package/MobileDateTimePicker/MobileDateTimePicker.js +6 -0
  22. package/MonthCalendar/MonthCalendar.types.d.ts +1 -1
  23. package/PickersCalendarHeader/PickersCalendarHeader.js +1 -1
  24. package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts +1 -1
  25. package/PickersLayout/PickersLayout.d.ts +2 -2
  26. package/PickersLayout/PickersLayout.js +1 -1
  27. package/PickersSectionList/PickersSectionList.d.ts +4 -4
  28. package/PickersTextField/PickersInputBase/PickersInputBase.d.ts +2 -2
  29. package/StaticDatePicker/StaticDatePicker.js +7 -1
  30. package/StaticDatePicker/StaticDatePicker.types.d.ts +5 -0
  31. package/StaticDateTimePicker/StaticDateTimePicker.js +7 -1
  32. package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts +5 -0
  33. package/TimeClock/Clock.js +1 -1
  34. package/TimeClock/ClockNumber.js +1 -1
  35. package/TimeClock/ClockPointer.js +1 -1
  36. package/TimeField/useTimeField.d.ts +1 -1
  37. package/YearCalendar/YearCalendar.js +19 -6
  38. package/YearCalendar/YearCalendar.types.d.ts +7 -1
  39. package/dateViewRenderers/dateViewRenderers.d.ts +1 -1
  40. package/dateViewRenderers/dateViewRenderers.js +2 -0
  41. package/index.js +1 -1
  42. package/internals/components/PickerViewRoot/PickerViewRoot.d.ts +1 -1
  43. package/internals/components/PickersToolbarButton.js +1 -1
  44. package/internals/components/PickersToolbarText.js +1 -1
  45. package/locales/bgBG.d.ts +80 -0
  46. package/locales/bgBG.js +73 -0
  47. package/locales/csCZ.js +16 -20
  48. package/locales/hrHR.d.ts +80 -0
  49. package/locales/hrHR.js +90 -0
  50. package/locales/index.d.ts +3 -0
  51. package/locales/index.js +3 -0
  52. package/locales/ptBR.js +3 -4
  53. package/locales/ptPT.d.ts +80 -0
  54. package/locales/ptPT.js +73 -0
  55. package/models/pickers.d.ts +1 -1
  56. package/modern/AdapterDateFns/AdapterDateFns.js +1 -1
  57. package/modern/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -0
  58. package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -1
  59. package/modern/AdapterMoment/AdapterMoment.js +1 -0
  60. package/modern/DateCalendar/DateCalendar.js +9 -1
  61. package/modern/DatePicker/DatePicker.js +6 -0
  62. package/modern/DateTimePicker/DateTimePicker.js +6 -0
  63. package/modern/DateTimePicker/DateTimePickerTabs.js +1 -1
  64. package/modern/DesktopDatePicker/DesktopDatePicker.js +6 -0
  65. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +6 -0
  66. package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -1
  67. package/modern/MobileDatePicker/MobileDatePicker.js +6 -0
  68. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +6 -0
  69. package/modern/PickersCalendarHeader/PickersCalendarHeader.js +1 -1
  70. package/modern/PickersLayout/PickersLayout.js +1 -1
  71. package/modern/StaticDatePicker/StaticDatePicker.js +7 -1
  72. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +7 -1
  73. package/modern/TimeClock/Clock.js +1 -1
  74. package/modern/TimeClock/ClockNumber.js +1 -1
  75. package/modern/TimeClock/ClockPointer.js +1 -1
  76. package/modern/YearCalendar/YearCalendar.js +19 -6
  77. package/modern/dateViewRenderers/dateViewRenderers.js +2 -0
  78. package/modern/index.js +1 -1
  79. package/modern/internals/components/PickersToolbarButton.js +1 -1
  80. package/modern/internals/components/PickersToolbarText.js +1 -1
  81. package/modern/locales/bgBG.js +73 -0
  82. package/modern/locales/csCZ.js +16 -20
  83. package/modern/locales/hrHR.js +90 -0
  84. package/modern/locales/index.js +3 -0
  85. package/modern/locales/ptBR.js +3 -4
  86. package/modern/locales/ptPT.js +73 -0
  87. package/node/AdapterDateFns/AdapterDateFns.js +1 -1
  88. package/node/AdapterDateFnsBase/AdapterDateFnsBase.js +1 -0
  89. package/node/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -1
  90. package/node/AdapterMoment/AdapterMoment.js +1 -0
  91. package/node/DateCalendar/DateCalendar.js +9 -1
  92. package/node/DatePicker/DatePicker.js +6 -0
  93. package/node/DateTimePicker/DateTimePicker.js +6 -0
  94. package/node/DateTimePicker/DateTimePickerTabs.js +1 -1
  95. package/node/DesktopDatePicker/DesktopDatePicker.js +6 -0
  96. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +6 -0
  97. package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js +1 -1
  98. package/node/MobileDatePicker/MobileDatePicker.js +6 -0
  99. package/node/MobileDateTimePicker/MobileDateTimePicker.js +6 -0
  100. package/node/PickersCalendarHeader/PickersCalendarHeader.js +1 -1
  101. package/node/PickersLayout/PickersLayout.js +1 -1
  102. package/node/StaticDatePicker/StaticDatePicker.js +7 -1
  103. package/node/StaticDateTimePicker/StaticDateTimePicker.js +7 -1
  104. package/node/TimeClock/Clock.js +1 -1
  105. package/node/TimeClock/ClockNumber.js +1 -1
  106. package/node/TimeClock/ClockPointer.js +1 -1
  107. package/node/YearCalendar/YearCalendar.js +19 -6
  108. package/node/dateViewRenderers/dateViewRenderers.js +2 -0
  109. package/node/index.js +1 -1
  110. package/node/internals/components/PickersToolbarButton.js +1 -1
  111. package/node/internals/components/PickersToolbarText.js +1 -1
  112. package/node/locales/bgBG.js +79 -0
  113. package/node/locales/csCZ.js +16 -20
  114. package/node/locales/hrHR.js +96 -0
  115. package/node/locales/index.js +33 -0
  116. package/node/locales/ptBR.js +3 -4
  117. package/node/locales/ptPT.js +79 -0
  118. package/package.json +4 -4
@@ -122,7 +122,7 @@ const PickersLayout = /*#__PURE__*/React.forwardRef(function PickersLayout(inPro
122
122
  return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
123
123
  ref: ref,
124
124
  sx: sx,
125
- className: clsx(className, classes.root),
125
+ className: clsx(classes.root, className),
126
126
  ownerState: props,
127
127
  children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
128
128
  className: classes.contentWrapper,
@@ -1,9 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { PickersSectionListProps } from './PickersSectionList.types';
3
- export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
4
- export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
5
- export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
6
- export declare const PickersSectionListSectionContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
3
+ export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
4
+ export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
5
+ export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
6
+ export declare const PickersSectionListSectionContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
7
7
  type PickersSectionListComponent = ((props: PickersSectionListProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
8
8
  propTypes?: any;
9
9
  };
@@ -1,10 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { FormControlState } from '@mui/material/FormControl';
3
3
  import { PickersInputBaseProps } from './PickersInputBase.types';
4
- export declare const PickersInputBaseRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
4
+ export declare const PickersInputBaseRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
5
5
  ownerState: OwnerStateType;
6
6
  }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
7
- export declare const PickersInputBaseSectionsContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
7
+ export declare const PickersInputBaseSectionsContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
8
8
  ownerState: OwnerStateType;
9
9
  }, {}, {}>;
10
10
  interface OwnerStateType extends FormControlState, Omit<PickersInputBaseProps, keyof FormControlState> {
@@ -293,9 +293,15 @@ StaticDatePicker.propTypes = {
293
293
  * Available views.
294
294
  */
295
295
  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired),
296
+ /**
297
+ * Years are displayed in ascending (chronological) order by default.
298
+ * If `desc`, years are displayed in descending order.
299
+ * @default 'asc'
300
+ */
301
+ yearsOrder: PropTypes.oneOf(['asc', 'desc']),
296
302
  /**
297
303
  * Years rendered per row.
298
- * @default 3
304
+ * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
299
305
  */
300
306
  yearsPerRow: PropTypes.oneOf([3, 4])
301
307
  };
@@ -17,4 +17,9 @@ export interface StaticDatePickerProps<TDate extends PickerValidDate> extends Ba
17
17
  * @default {}
18
18
  */
19
19
  slotProps?: StaticDatePickerSlotProps<TDate>;
20
+ /**
21
+ * Years rendered per row.
22
+ * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
23
+ */
24
+ yearsPerRow?: 3 | 4;
20
25
  }
@@ -352,9 +352,15 @@ StaticDateTimePicker.propTypes = {
352
352
  * Available views.
353
353
  */
354
354
  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired),
355
+ /**
356
+ * Years are displayed in ascending (chronological) order by default.
357
+ * If `desc`, years are displayed in descending order.
358
+ * @default 'asc'
359
+ */
360
+ yearsOrder: PropTypes.oneOf(['asc', 'desc']),
355
361
  /**
356
362
  * Years rendered per row.
357
- * @default 3
363
+ * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
358
364
  */
359
365
  yearsPerRow: PropTypes.oneOf([3, 4])
360
366
  };
@@ -17,4 +17,9 @@ export interface StaticDateTimePickerProps<TDate extends PickerValidDate> extend
17
17
  * @default {}
18
18
  */
19
19
  slotProps?: StaticDateTimePickerSlotProps<TDate>;
20
+ /**
21
+ * Years rendered per row.
22
+ * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
23
+ */
24
+ yearsPerRow?: 3 | 4;
20
25
  }
@@ -284,7 +284,7 @@ export function Clock(inProps) {
284
284
  }
285
285
  };
286
286
  return /*#__PURE__*/_jsxs(ClockRoot, {
287
- className: clsx(className, classes.root),
287
+ className: clsx(classes.root, className),
288
288
  children: [/*#__PURE__*/_jsxs(ClockClock, {
289
289
  className: classes.clock,
290
290
  children: [/*#__PURE__*/_jsx(ClockSquareMask, {
@@ -84,7 +84,7 @@ export function ClockNumber(inProps) {
84
84
  const x = Math.round(Math.cos(angle) * length);
85
85
  const y = Math.round(Math.sin(angle) * length);
86
86
  return /*#__PURE__*/_jsx(ClockNumberRoot, _extends({
87
- className: clsx(className, classes.root),
87
+ className: clsx(classes.root, className),
88
88
  "aria-disabled": disabled ? true : undefined,
89
89
  "aria-selected": selected ? true : undefined,
90
90
  role: "option",
@@ -102,7 +102,7 @@ export function ClockPointer(inProps) {
102
102
  };
103
103
  return /*#__PURE__*/_jsx(ClockPointerRoot, _extends({
104
104
  style: getAngleStyle(),
105
- className: clsx(className, classes.root),
105
+ className: clsx(classes.root, className),
106
106
  ownerState: ownerState
107
107
  }, other, {
108
108
  children: /*#__PURE__*/_jsx(ClockPointerThumb, {
@@ -1,3 +1,3 @@
1
1
  import { UseTimeFieldProps } from './TimeField.types';
2
2
  import { PickerValidDate } from '../models';
3
- export declare const useTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals/hooks/useField").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "ampm" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps<any> | "dateSeparator">>;
3
+ export declare const useTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "ampm" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps<any> | "dateSeparator">>;
@@ -2,7 +2,7 @@
2
2
 
3
3
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
4
  import _extends from "@babel/runtime/helpers/esm/extends";
5
- const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
5
+ const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
6
6
  import * as React from 'react';
7
7
  import PropTypes from 'prop-types';
8
8
  import clsx from 'clsx';
@@ -88,6 +88,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
88
88
  onYearFocus,
89
89
  hasFocus,
90
90
  onFocusedViewChange,
91
+ yearsOrder = 'asc',
91
92
  yearsPerRow,
92
93
  timezone: timezoneProp,
93
94
  gridLabelId,
@@ -177,22 +178,24 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
177
178
  React.useEffect(() => {
178
179
  setFocusedYear(prevFocusedYear => selectedYear !== null && prevFocusedYear !== selectedYear ? selectedYear : prevFocusedYear);
179
180
  }, [selectedYear]);
181
+ const verticalDirection = yearsOrder !== 'desc' ? yearsPerRow * 1 : yearsPerRow * -1;
182
+ const horizontalDirection = isRtl && yearsOrder === 'asc' || !isRtl && yearsOrder === 'desc' ? -1 : 1;
180
183
  const handleKeyDown = useEventCallback((event, year) => {
181
184
  switch (event.key) {
182
185
  case 'ArrowUp':
183
- focusYear(year - yearsPerRow);
186
+ focusYear(year - verticalDirection);
184
187
  event.preventDefault();
185
188
  break;
186
189
  case 'ArrowDown':
187
- focusYear(year + yearsPerRow);
190
+ focusYear(year + verticalDirection);
188
191
  event.preventDefault();
189
192
  break;
190
193
  case 'ArrowLeft':
191
- focusYear(year + (isRtl ? 1 : -1));
194
+ focusYear(year - horizontalDirection);
192
195
  event.preventDefault();
193
196
  break;
194
197
  case 'ArrowRight':
195
- focusYear(year + (isRtl ? -1 : 1));
198
+ focusYear(year + horizontalDirection);
196
199
  event.preventDefault();
197
200
  break;
198
201
  default:
@@ -230,6 +233,10 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
230
233
  }
231
234
  scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
232
235
  }, [autoFocus]);
236
+ const yearRange = utils.getYearRange([minDate, maxDate]);
237
+ if (yearsOrder === 'desc') {
238
+ yearRange.reverse();
239
+ }
233
240
  return /*#__PURE__*/_jsx(YearCalendarRoot, _extends({
234
241
  ref: handleRef,
235
242
  className: clsx(classes.root, className),
@@ -237,7 +244,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
237
244
  role: "radiogroup",
238
245
  "aria-labelledby": gridLabelId
239
246
  }, other, {
240
- children: utils.getYearRange([minDate, maxDate]).map(year => {
247
+ children: yearRange.map(year => {
241
248
  const yearNumber = utils.getYear(year);
242
249
  const isSelected = yearNumber === selectedYear;
243
250
  const isDisabled = disabled || isYearDisabled(year);
@@ -358,6 +365,12 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
358
365
  * Used when the component is controlled.
359
366
  */
360
367
  value: PropTypes.object,
368
+ /**
369
+ * Years are displayed in ascending (chronological) order by default.
370
+ * If `desc`, years are displayed in descending order.
371
+ * @default 'asc'
372
+ */
373
+ yearsOrder: PropTypes.oneOf(['asc', 'desc']),
361
374
  /**
362
375
  * Years rendered per row.
363
376
  * @default 3
@@ -8,7 +8,7 @@ import type { PickersYearProps } from './PickersYear';
8
8
  import { SlotComponentPropsFromProps } from '../internals/models/helpers';
9
9
  export interface YearCalendarSlots {
10
10
  /**
11
- * Button displayed to render a single year in the "year" view.
11
+ * Button displayed to render a single year in the `year` view.
12
12
  * @default YearCalendarButton
13
13
  */
14
14
  yearButton?: React.ElementType;
@@ -19,6 +19,12 @@ export interface YearCalendarSlotProps {
19
19
  }, {}, PickersYearProps>;
20
20
  }
21
21
  export interface ExportedYearCalendarProps {
22
+ /**
23
+ * Years are displayed in ascending (chronological) order by default.
24
+ * If `desc`, years are displayed in descending order.
25
+ * @default 'asc'
26
+ */
27
+ yearsOrder?: 'asc' | 'desc';
22
28
  /**
23
29
  * Years rendered per row.
24
30
  * @default 3
@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate extends PickerValidDate, TView exte
8
8
  views: readonly TView[];
9
9
  focusedView: TView | null;
10
10
  }
11
- export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
11
+ export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsOrder, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
@@ -25,6 +25,7 @@ export const renderDateViewCalendar = ({
25
25
  onMonthChange,
26
26
  monthsPerRow,
27
27
  onYearChange,
28
+ yearsOrder,
28
29
  yearsPerRow,
29
30
  slots,
30
31
  slotProps,
@@ -63,6 +64,7 @@ export const renderDateViewCalendar = ({
63
64
  onMonthChange: onMonthChange,
64
65
  monthsPerRow: monthsPerRow,
65
66
  onYearChange: onYearChange,
67
+ yearsOrder: yearsOrder,
66
68
  yearsPerRow: yearsPerRow,
67
69
  slots: slots,
68
70
  slotProps: slotProps,
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v7.17.0
2
+ * @mui/x-date-pickers v7.19.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -1 +1 @@
1
- export declare const PickerViewRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1
+ export declare const PickerViewRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -46,7 +46,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
46
46
  return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
47
47
  variant: "text",
48
48
  ref: ref,
49
- className: clsx(className, classes.root)
49
+ className: clsx(classes.root, className)
50
50
  }, width ? {
51
51
  sx: {
52
52
  width
@@ -46,7 +46,7 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
46
46
  const classes = useUtilityClasses(props);
47
47
  return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
48
48
  ref: ref,
49
- className: clsx(className, classes.root),
49
+ className: clsx(classes.root, className),
50
50
  component: "span"
51
51
  }, other, {
52
52
  children: value
@@ -0,0 +1,80 @@
1
+ import { TimeViewWithMeridiem } from '../internals/models';
2
+ export declare const bgBG: {
3
+ components: {
4
+ MuiLocalizationProvider: {
5
+ defaultProps: {
6
+ localeText: {
7
+ previousMonth?: string | undefined;
8
+ nextMonth?: string | undefined;
9
+ calendarWeekNumberHeaderLabel?: string | undefined;
10
+ calendarWeekNumberHeaderText?: string | undefined;
11
+ calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
12
+ calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
13
+ openPreviousView?: string | undefined;
14
+ openNextView?: string | undefined;
15
+ calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers/models").DateView) => string) | undefined;
16
+ start?: string | undefined;
17
+ end?: string | undefined;
18
+ startDate?: string | undefined;
19
+ startTime?: string | undefined;
20
+ endDate?: string | undefined;
21
+ endTime?: string | undefined;
22
+ cancelButtonLabel?: string | undefined;
23
+ clearButtonLabel?: string | undefined;
24
+ okButtonLabel?: string | undefined;
25
+ todayButtonLabel?: string | undefined;
26
+ clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, time: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime?: string | null) => string) | undefined;
27
+ hoursClockNumberText?: ((hours: string) => string) | undefined;
28
+ minutesClockNumberText?: ((minutes: string) => string) | undefined;
29
+ secondsClockNumberText?: ((seconds: string) => string) | undefined;
30
+ selectViewText?: ((view: TimeViewWithMeridiem) => string) | undefined;
31
+ openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedDate: string | null) => string) | undefined;
32
+ openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime: string | null) => string) | undefined;
33
+ fieldClearLabel?: string | undefined;
34
+ timeTableLabel?: string | undefined;
35
+ dateTableLabel?: string | undefined;
36
+ fieldYearPlaceholder?: ((params: {
37
+ digitAmount: number;
38
+ format: string;
39
+ }) => string) | undefined;
40
+ fieldMonthPlaceholder?: ((params: {
41
+ contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
42
+ format: string;
43
+ }) => string) | undefined;
44
+ fieldDayPlaceholder?: ((params: {
45
+ format: string;
46
+ }) => string) | undefined;
47
+ fieldWeekDayPlaceholder?: ((params: {
48
+ contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
49
+ format: string;
50
+ }) => string) | undefined;
51
+ fieldHoursPlaceholder?: ((params: {
52
+ format: string;
53
+ }) => string) | undefined;
54
+ fieldMinutesPlaceholder?: ((params: {
55
+ format: string;
56
+ }) => string) | undefined;
57
+ fieldSecondsPlaceholder?: ((params: {
58
+ format: string;
59
+ }) => string) | undefined;
60
+ fieldMeridiemPlaceholder?: ((params: {
61
+ format: string;
62
+ }) => string) | undefined;
63
+ year?: string | undefined;
64
+ month?: string | undefined;
65
+ day?: string | undefined;
66
+ weekDay?: string | undefined;
67
+ hours?: string | undefined;
68
+ minutes?: string | undefined;
69
+ seconds?: string | undefined;
70
+ meridiem?: string | undefined;
71
+ empty?: string | undefined;
72
+ datePickerToolbarTitle?: string | undefined;
73
+ timePickerToolbarTitle?: string | undefined;
74
+ dateTimePickerToolbarTitle?: string | undefined;
75
+ dateRangePickerToolbarTitle?: string | undefined;
76
+ };
77
+ };
78
+ };
79
+ };
80
+ };
@@ -0,0 +1,73 @@
1
+ import { getPickersLocalization } from "./utils/getPickersLocalization.js";
2
+ const views = {
3
+ hours: 'часове',
4
+ minutes: 'минути',
5
+ seconds: 'секунди',
6
+ meridiem: 'преди обяд/след обяд'
7
+ };
8
+ const bgBGPickers = {
9
+ // Calendar navigation
10
+ previousMonth: 'Предишен месец',
11
+ nextMonth: 'Следващ месец',
12
+ // View navigation
13
+ openPreviousView: 'Отвори предишен изглед',
14
+ openNextView: 'Отвори следващ изглед',
15
+ calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'отворен е изглед на година, премини на изглед на календар' : 'отворен е изглед на календар, премини на изглед на година',
16
+ // DateRange labels
17
+ start: 'Начало',
18
+ end: 'Край',
19
+ startDate: 'Начална дата',
20
+ startTime: 'Начален час',
21
+ endDate: 'Крайна дата',
22
+ endTime: 'Краен час',
23
+ // Action bar
24
+ cancelButtonLabel: 'Отказ',
25
+ clearButtonLabel: 'Изчисти',
26
+ okButtonLabel: 'ОК',
27
+ todayButtonLabel: 'Днес',
28
+ // Toolbar titles
29
+ datePickerToolbarTitle: 'Избери дата',
30
+ dateTimePickerToolbarTitle: 'Избери дата и час',
31
+ timePickerToolbarTitle: 'Избери час',
32
+ dateRangePickerToolbarTitle: 'Избери времеви период',
33
+ // Clock labels
34
+ clockLabelText: (view, time, adapter) => `Избери ${views[view]}. ${time === null ? 'Не е избран час' : `Избраният час е ${adapter.format(time, 'fullTime')}`}`,
35
+ hoursClockNumberText: hours => `${hours} часа`,
36
+ minutesClockNumberText: minutes => `${minutes} минути`,
37
+ secondsClockNumberText: seconds => `${seconds} секунди`,
38
+ // Digital clock labels
39
+ selectViewText: view => `Избери ${views[view]}`,
40
+ // Calendar labels
41
+ calendarWeekNumberHeaderLabel: 'Седмица',
42
+ calendarWeekNumberHeaderText: '#',
43
+ calendarWeekNumberAriaLabelText: weekNumber => `Седмица ${weekNumber}`,
44
+ calendarWeekNumberText: weekNumber => `${weekNumber}`,
45
+ // Open picker labels
46
+ openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Избери дата, избраната дата е ${utils.format(value, 'fullDate')}` : 'Избери дата',
47
+ openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Избери час, избраният час е ${utils.format(value, 'fullTime')}` : 'Избери час',
48
+ fieldClearLabel: 'Изчисти стойност',
49
+ // Table labels
50
+ timeTableLabel: 'избери час',
51
+ dateTableLabel: 'избери дата',
52
+ // Field section placeholders
53
+ fieldYearPlaceholder: params => 'Г'.repeat(params.digitAmount),
54
+ fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'ММММ' : 'ММ',
55
+ fieldDayPlaceholder: () => 'ДД',
56
+ fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'СССС' : 'СС',
57
+ fieldHoursPlaceholder: () => 'чч',
58
+ fieldMinutesPlaceholder: () => 'мм',
59
+ fieldSecondsPlaceholder: () => 'сс',
60
+ fieldMeridiemPlaceholder: () => 'пс',
61
+ // View names
62
+ year: 'Година',
63
+ month: 'Месец',
64
+ day: 'Ден',
65
+ weekDay: 'Ден от седмицата',
66
+ hours: 'Часове',
67
+ minutes: 'Минути',
68
+ seconds: 'Секунди',
69
+ meridiem: 'Преди обяд/след обяд',
70
+ // Common
71
+ empty: 'Празно'
72
+ };
73
+ export const bgBG = getPickersLocalization(bgBGPickers);
package/locales/csCZ.js CHANGED
@@ -17,11 +17,10 @@ const csCZPickers = {
17
17
  // DateRange labels
18
18
  start: 'Začátek',
19
19
  end: 'Konec',
20
- // startDate: 'Start date',
21
- // startTime: 'Start time',
22
- // endDate: 'End date',
23
- // endTime: 'End time',
24
-
20
+ startDate: 'Datum začátku',
21
+ startTime: 'Čas začátku',
22
+ endDate: 'Datum konce',
23
+ endTime: 'Čas konce',
25
24
  // Action bar
26
25
  cancelButtonLabel: 'Zrušit',
27
26
  clearButtonLabel: 'Vymazat',
@@ -47,8 +46,7 @@ const csCZPickers = {
47
46
  // Open picker labels
48
47
  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Vyberte datum, vybrané datum je ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vyberte datum',
49
48
  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Vyberte čas',
50
- // fieldClearLabel: 'Clear',
51
-
49
+ fieldClearLabel: 'Vymazat',
52
50
  // Table labels
53
51
  timeTableLabel: 'vyberte čas',
54
52
  dateTableLabel: 'vyberte datum',
@@ -56,23 +54,21 @@ const csCZPickers = {
56
54
  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
57
55
  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
58
56
  fieldDayPlaceholder: () => 'DD',
59
- // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
57
+ fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
60
58
  fieldHoursPlaceholder: () => 'hh',
61
59
  fieldMinutesPlaceholder: () => 'mm',
62
60
  fieldSecondsPlaceholder: () => 'ss',
63
- fieldMeridiemPlaceholder: () => 'aa'
64
-
61
+ fieldMeridiemPlaceholder: () => 'aa',
65
62
  // View names
66
- // year: 'Year',
67
- // month: 'Month',
68
- // day: 'Day',
69
- // weekDay: 'Week day',
70
- // hours: 'Hours',
71
- // minutes: 'Minutes',
72
- // seconds: 'Seconds',
73
- // meridiem: 'Meridiem',
74
-
63
+ year: 'Rok',
64
+ month: 'Měsíc',
65
+ day: 'Den',
66
+ weekDay: 'Pracovní den',
67
+ hours: 'Hodiny',
68
+ minutes: 'Minuty',
69
+ seconds: 'Sekundy',
70
+ meridiem: 'Odpoledne',
75
71
  // Common
76
- // empty: 'Empty',
72
+ empty: 'Prázdný'
77
73
  };
78
74
  export const csCZ = getPickersLocalization(csCZPickers);
@@ -0,0 +1,80 @@
1
+ import { TimeViewWithMeridiem } from '../internals/models';
2
+ export declare const hrHR: {
3
+ components: {
4
+ MuiLocalizationProvider: {
5
+ defaultProps: {
6
+ localeText: {
7
+ previousMonth?: string | undefined;
8
+ nextMonth?: string | undefined;
9
+ calendarWeekNumberHeaderLabel?: string | undefined;
10
+ calendarWeekNumberHeaderText?: string | undefined;
11
+ calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
12
+ calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
13
+ openPreviousView?: string | undefined;
14
+ openNextView?: string | undefined;
15
+ calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers/models").DateView) => string) | undefined;
16
+ start?: string | undefined;
17
+ end?: string | undefined;
18
+ startDate?: string | undefined;
19
+ startTime?: string | undefined;
20
+ endDate?: string | undefined;
21
+ endTime?: string | undefined;
22
+ cancelButtonLabel?: string | undefined;
23
+ clearButtonLabel?: string | undefined;
24
+ okButtonLabel?: string | undefined;
25
+ todayButtonLabel?: string | undefined;
26
+ clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, time: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime?: string | null) => string) | undefined;
27
+ hoursClockNumberText?: ((hours: string) => string) | undefined;
28
+ minutesClockNumberText?: ((minutes: string) => string) | undefined;
29
+ secondsClockNumberText?: ((seconds: string) => string) | undefined;
30
+ selectViewText?: ((view: TimeViewWithMeridiem) => string) | undefined;
31
+ openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedDate: string | null) => string) | undefined;
32
+ openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime: string | null) => string) | undefined;
33
+ fieldClearLabel?: string | undefined;
34
+ timeTableLabel?: string | undefined;
35
+ dateTableLabel?: string | undefined;
36
+ fieldYearPlaceholder?: ((params: {
37
+ digitAmount: number;
38
+ format: string;
39
+ }) => string) | undefined;
40
+ fieldMonthPlaceholder?: ((params: {
41
+ contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
42
+ format: string;
43
+ }) => string) | undefined;
44
+ fieldDayPlaceholder?: ((params: {
45
+ format: string;
46
+ }) => string) | undefined;
47
+ fieldWeekDayPlaceholder?: ((params: {
48
+ contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
49
+ format: string;
50
+ }) => string) | undefined;
51
+ fieldHoursPlaceholder?: ((params: {
52
+ format: string;
53
+ }) => string) | undefined;
54
+ fieldMinutesPlaceholder?: ((params: {
55
+ format: string;
56
+ }) => string) | undefined;
57
+ fieldSecondsPlaceholder?: ((params: {
58
+ format: string;
59
+ }) => string) | undefined;
60
+ fieldMeridiemPlaceholder?: ((params: {
61
+ format: string;
62
+ }) => string) | undefined;
63
+ year?: string | undefined;
64
+ month?: string | undefined;
65
+ day?: string | undefined;
66
+ weekDay?: string | undefined;
67
+ hours?: string | undefined;
68
+ minutes?: string | undefined;
69
+ seconds?: string | undefined;
70
+ meridiem?: string | undefined;
71
+ empty?: string | undefined;
72
+ datePickerToolbarTitle?: string | undefined;
73
+ timePickerToolbarTitle?: string | undefined;
74
+ dateTimePickerToolbarTitle?: string | undefined;
75
+ dateRangePickerToolbarTitle?: string | undefined;
76
+ };
77
+ };
78
+ };
79
+ };
80
+ };