@mui/x-date-pickers 7.6.2 → 7.7.1

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 (105) hide show
  1. package/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.d.ts +48 -48
  2. package/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +1 -0
  3. package/AdapterDateFnsV3/AdapterDateFnsV3.d.ts +47 -47
  4. package/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -0
  5. package/CHANGELOG.md +163 -0
  6. package/DateCalendar/DateCalendar.js +3 -3
  7. package/DateCalendar/DateCalendar.types.d.ts +4 -4
  8. package/DateCalendar/DayCalendar.d.ts +3 -4
  9. package/DatePicker/DatePicker.js +2 -0
  10. package/DateTimePicker/DateTimePicker.js +2 -0
  11. package/DesktopDatePicker/DesktopDatePicker.js +2 -0
  12. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
  13. package/DesktopTimePicker/DesktopTimePicker.js +2 -0
  14. package/MobileDatePicker/MobileDatePicker.js +2 -0
  15. package/MobileDateTimePicker/MobileDateTimePicker.js +2 -0
  16. package/MobileTimePicker/MobileTimePicker.js +2 -0
  17. package/MonthCalendar/MonthCalendar.js +17 -3
  18. package/MonthCalendar/MonthCalendar.types.d.ts +25 -0
  19. package/MonthCalendar/PickersMonth.d.ts +4 -0
  20. package/MonthCalendar/PickersMonth.js +38 -21
  21. package/MonthCalendar/index.d.ts +1 -1
  22. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +16 -3
  23. package/PickersCalendarHeader/PickersCalendarHeader.js +4 -0
  24. package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts +5 -1
  25. package/PickersLayout/usePickerLayout.js +0 -5
  26. package/StaticDatePicker/StaticDatePicker.js +2 -0
  27. package/StaticDateTimePicker/StaticDateTimePicker.js +2 -0
  28. package/StaticTimePicker/StaticTimePicker.js +2 -0
  29. package/TimePicker/TimePicker.js +2 -0
  30. package/YearCalendar/PickersYear.d.ts +3 -0
  31. package/YearCalendar/PickersYear.js +34 -22
  32. package/YearCalendar/YearCalendar.js +17 -3
  33. package/YearCalendar/YearCalendar.types.d.ts +25 -0
  34. package/YearCalendar/index.d.ts +1 -1
  35. package/index.js +1 -1
  36. package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +4 -2
  37. package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts +1 -0
  38. package/internals/hooks/useField/useField.utils.js +2 -1
  39. package/internals/hooks/usePicker/usePickerValue.js +45 -38
  40. package/internals/hooks/usePicker/usePickerValue.types.d.ts +3 -1
  41. package/internals/hooks/usePicker/usePickerViews.js +2 -1
  42. package/locales/daDK.js +15 -19
  43. package/locales/faIR.js +19 -22
  44. package/locales/koKR.js +2 -2
  45. package/modern/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +1 -0
  46. package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -0
  47. package/modern/DateCalendar/DateCalendar.js +3 -3
  48. package/modern/DatePicker/DatePicker.js +2 -0
  49. package/modern/DateTimePicker/DateTimePicker.js +2 -0
  50. package/modern/DesktopDatePicker/DesktopDatePicker.js +2 -0
  51. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
  52. package/modern/DesktopTimePicker/DesktopTimePicker.js +2 -0
  53. package/modern/MobileDatePicker/MobileDatePicker.js +2 -0
  54. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -0
  55. package/modern/MobileTimePicker/MobileTimePicker.js +2 -0
  56. package/modern/MonthCalendar/MonthCalendar.js +17 -3
  57. package/modern/MonthCalendar/PickersMonth.js +38 -21
  58. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +16 -3
  59. package/modern/PickersCalendarHeader/PickersCalendarHeader.js +4 -0
  60. package/modern/PickersLayout/usePickerLayout.js +0 -5
  61. package/modern/StaticDatePicker/StaticDatePicker.js +2 -0
  62. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -0
  63. package/modern/StaticTimePicker/StaticTimePicker.js +2 -0
  64. package/modern/TimePicker/TimePicker.js +2 -0
  65. package/modern/YearCalendar/PickersYear.js +34 -22
  66. package/modern/YearCalendar/YearCalendar.js +17 -3
  67. package/modern/index.js +1 -1
  68. package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +4 -2
  69. package/modern/internals/hooks/useField/useField.utils.js +2 -1
  70. package/modern/internals/hooks/usePicker/usePickerValue.js +45 -38
  71. package/modern/internals/hooks/usePicker/usePickerViews.js +2 -1
  72. package/modern/locales/daDK.js +15 -19
  73. package/modern/locales/faIR.js +19 -22
  74. package/modern/locales/koKR.js +2 -2
  75. package/node/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js +1 -0
  76. package/node/AdapterDateFnsV3/AdapterDateFnsV3.js +1 -0
  77. package/node/DateCalendar/DateCalendar.js +3 -3
  78. package/node/DatePicker/DatePicker.js +2 -0
  79. package/node/DateTimePicker/DateTimePicker.js +2 -0
  80. package/node/DesktopDatePicker/DesktopDatePicker.js +2 -0
  81. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -0
  82. package/node/DesktopTimePicker/DesktopTimePicker.js +2 -0
  83. package/node/MobileDatePicker/MobileDatePicker.js +2 -0
  84. package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -0
  85. package/node/MobileTimePicker/MobileTimePicker.js +2 -0
  86. package/node/MonthCalendar/MonthCalendar.js +17 -3
  87. package/node/MonthCalendar/PickersMonth.js +40 -23
  88. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +16 -3
  89. package/node/PickersCalendarHeader/PickersCalendarHeader.js +4 -0
  90. package/node/PickersLayout/usePickerLayout.js +0 -5
  91. package/node/StaticDatePicker/StaticDatePicker.js +2 -0
  92. package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -0
  93. package/node/StaticTimePicker/StaticTimePicker.js +2 -0
  94. package/node/TimePicker/TimePicker.js +2 -0
  95. package/node/YearCalendar/PickersYear.js +34 -22
  96. package/node/YearCalendar/YearCalendar.js +17 -3
  97. package/node/index.js +1 -1
  98. package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +4 -2
  99. package/node/internals/hooks/useField/useField.utils.js +2 -1
  100. package/node/internals/hooks/usePicker/usePickerValue.js +45 -38
  101. package/node/internals/hooks/usePicker/usePickerViews.js +2 -1
  102. package/node/locales/daDK.js +15 -19
  103. package/node/locales/faIR.js +19 -22
  104. package/node/locales/koKR.js +2 -2
  105. package/package.json +4 -4
@@ -243,6 +243,10 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
243
243
  * @default `${adapter.formats.month} ${adapter.formats.year}`
244
244
  */
245
245
  format: PropTypes.string,
246
+ /**
247
+ * Id of the calendar text element.
248
+ * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
249
+ */
246
250
  labelId: PropTypes.string,
247
251
  maxDate: PropTypes.object.isRequired,
248
252
  minDate: PropTypes.object.isRequired,
@@ -53,7 +53,6 @@ const usePickerLayout = props => {
53
53
  const classes = useUtilityClasses(props);
54
54
 
55
55
  // Action bar
56
-
57
56
  const ActionBar = slots?.actionBar ?? PickersActionBar;
58
57
  const actionBarProps = useSlotProps({
59
58
  elementType: ActionBar,
@@ -73,7 +72,6 @@ const usePickerLayout = props => {
73
72
  const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
74
73
 
75
74
  // Toolbar
76
-
77
75
  const Toolbar = slots?.toolbar;
78
76
  const toolbarProps = useSlotProps({
79
77
  elementType: Toolbar,
@@ -96,11 +94,9 @@ const usePickerLayout = props => {
96
94
  const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
97
95
 
98
96
  // Content
99
-
100
97
  const content = children;
101
98
 
102
99
  // Tabs
103
-
104
100
  const Tabs = slots?.tabs;
105
101
  const tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
106
102
  view: view,
@@ -109,7 +105,6 @@ const usePickerLayout = props => {
109
105
  }, slotProps?.tabs)) : null;
110
106
 
111
107
  // Shortcuts
112
-
113
108
  const Shortcuts = slots?.shortcuts ?? PickersShortcuts;
114
109
  const shortcutsProps = useSlotProps({
115
110
  elementType: Shortcuts,
@@ -133,7 +133,9 @@ StaticDatePicker.propTypes = {
133
133
  /**
134
134
  * Callback fired when the value is accepted.
135
135
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
136
+ * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
136
137
  * @param {TValue} value The value that was just accepted.
138
+ * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
137
139
  */
138
140
  onAccept: PropTypes.func,
139
141
  /**
@@ -181,7 +181,9 @@ StaticDateTimePicker.propTypes = {
181
181
  /**
182
182
  * Callback fired when the value is accepted.
183
183
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
184
+ * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
184
185
  * @param {TValue} value The value that was just accepted.
186
+ * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
185
187
  */
186
188
  onAccept: PropTypes.func,
187
189
  /**
@@ -125,7 +125,9 @@ StaticTimePicker.propTypes = {
125
125
  /**
126
126
  * Callback fired when the value is accepted.
127
127
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
128
+ * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
128
129
  * @param {TValue} value The value that was just accepted.
130
+ * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
129
131
  */
130
132
  onAccept: PropTypes.func,
131
133
  /**
@@ -157,7 +157,9 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
157
157
  /**
158
158
  * Callback fired when the value is accepted.
159
159
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
160
+ * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
160
161
  * @param {TValue} value The value that was just accepted.
162
+ * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
161
163
  */
162
164
  onAccept: PropTypes.func,
163
165
  /**
@@ -1,10 +1,12 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow"];
3
+ const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
4
4
  import * as React from 'react';
5
5
  import clsx from 'clsx';
6
- import { unstable_composeClasses as composeClasses } from '@mui/utils';
7
- import { alpha, styled, useThemeProps } from '@mui/material/styles';
6
+ import { styled, alpha, useThemeProps } from '@mui/material/styles';
7
+ import { useSlotProps } from '@mui/base/utils';
8
+ import composeClasses from '@mui/utils/composeClasses';
9
+ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
8
10
  import { getPickersYearUtilityClass, pickersYearClasses } from './pickersYearClasses';
9
11
  import { jsx as _jsx } from "react/jsx-runtime";
10
12
  const useUtilityClasses = ownerState => {
@@ -37,7 +39,7 @@ const PickersYearRoot = styled('div', {
37
39
  }
38
40
  }]
39
41
  });
40
- const PickersYearButton = styled('button', {
42
+ const YearCalendarButton = styled('button', {
41
43
  name: 'MuiPickersYear',
42
44
  slot: 'YearButton',
43
45
  overridesResolver: (_, styles) => [styles.yearButton, {
@@ -102,37 +104,47 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
102
104
  onBlur,
103
105
  'aria-current': ariaCurrent
104
106
  // We don't want to forward this prop to the root element
107
+ ,
108
+
109
+ slots,
110
+ slotProps
105
111
  } = props,
106
112
  other = _objectWithoutPropertiesLoose(props, _excluded);
107
113
  const ref = React.useRef(null);
108
114
  const classes = useUtilityClasses(props);
109
115
 
110
116
  // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
111
- React.useEffect(() => {
117
+ useEnhancedEffect(() => {
112
118
  if (autoFocus) {
113
119
  // `ref.current` being `null` would be a bug in MUI.
114
- ref.current.focus();
120
+ ref.current?.focus();
115
121
  }
116
122
  }, [autoFocus]);
123
+ const YearButton = slots?.yearButton ?? YearCalendarButton;
124
+ const yearButtonProps = useSlotProps({
125
+ elementType: YearButton,
126
+ externalSlotProps: slotProps?.yearButton,
127
+ additionalProps: {
128
+ children,
129
+ disabled,
130
+ tabIndex,
131
+ ref,
132
+ type: 'button',
133
+ role: 'radio',
134
+ 'aria-current': ariaCurrent,
135
+ 'aria-checked': selected,
136
+ onClick: event => onClick(event, value),
137
+ onKeyDown: event => onKeyDown(event, value),
138
+ onFocus: event => onFocus(event, value),
139
+ onBlur: event => onBlur(event, value)
140
+ },
141
+ ownerState: props,
142
+ className: classes.yearButton
143
+ });
117
144
  return /*#__PURE__*/_jsx(PickersYearRoot, _extends({
118
145
  className: clsx(classes.root, className),
119
146
  ownerState: props
120
147
  }, other, {
121
- children: /*#__PURE__*/_jsx(PickersYearButton, {
122
- ref: ref,
123
- disabled: disabled,
124
- type: "button",
125
- role: "radio",
126
- tabIndex: disabled ? -1 : tabIndex,
127
- "aria-current": ariaCurrent,
128
- "aria-checked": selected,
129
- onClick: event => onClick(event, value),
130
- onKeyDown: event => onKeyDown(event, value),
131
- onFocus: event => onFocus(event, value),
132
- onBlur: event => onBlur(event, value),
133
- className: classes.yearButton,
134
- ownerState: props,
135
- children: children
136
- })
148
+ children: /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps))
137
149
  }));
138
150
  });
@@ -1,6 +1,6 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId"];
3
+ const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import clsx from 'clsx';
@@ -88,7 +88,9 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
88
88
  onFocusedViewChange,
89
89
  yearsPerRow,
90
90
  timezone: timezoneProp,
91
- gridLabelId
91
+ gridLabelId,
92
+ slots,
93
+ slotProps
92
94
  } = props,
93
95
  other = _objectWithoutPropertiesLoose(props, _excluded);
94
96
  const {
@@ -244,11 +246,13 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
244
246
  onKeyDown: handleKeyDown,
245
247
  autoFocus: internalHasFocus && yearNumber === focusedYear,
246
248
  disabled: isDisabled,
247
- tabIndex: yearNumber === focusedYear ? 0 : -1,
249
+ tabIndex: yearNumber === focusedYear && !isDisabled ? 0 : -1,
248
250
  onFocus: handleYearFocus,
249
251
  onBlur: handleYearBlur,
250
252
  "aria-current": todayYear === yearNumber ? 'date' : undefined,
251
253
  yearsPerRow: yearsPerRow,
254
+ slots: slots,
255
+ slotProps: slotProps,
252
256
  children: utils.format(year, 'year')
253
257
  }, utils.format(year, 'year'));
254
258
  })
@@ -323,6 +327,16 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
323
327
  * @returns {boolean} If `true`, the year will be disabled.
324
328
  */
325
329
  shouldDisableYear: PropTypes.func,
330
+ /**
331
+ * The props used for each component slot.
332
+ * @default {}
333
+ */
334
+ slotProps: PropTypes.object,
335
+ /**
336
+ * Overridable component slots.
337
+ * @default {}
338
+ */
339
+ slots: PropTypes.object,
326
340
  /**
327
341
  * The system prop that allows defining system overrides as well as additional CSS styles.
328
342
  */
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v7.6.2
2
+ * @mui/x-date-pickers v7.7.1
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
3
+ const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
4
4
  _excluded2 = ["ownerState"],
5
5
  _excluded3 = ["ownerState"];
6
6
  import * as React from 'react';
@@ -73,7 +73,8 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
73
73
  isPreviousDisabled,
74
74
  isPreviousHidden,
75
75
  onGoToPrevious,
76
- previousLabel
76
+ previousLabel,
77
+ labelId
77
78
  } = props,
78
79
  other = _objectWithoutPropertiesLoose(props, _excluded);
79
80
  const ownerState = props;
@@ -156,6 +157,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
156
157
  })), children ? /*#__PURE__*/_jsx(Typography, {
157
158
  variant: "subtitle1",
158
159
  component: "span",
160
+ id: labelId,
159
161
  children: children
160
162
  }) : /*#__PURE__*/_jsx(PickersArrowSwitcherSpacer, {
161
163
  className: classes.spacer,
@@ -103,7 +103,8 @@ export const applyLocalizedDigits = (valueStr, localizedDigits) => {
103
103
  };
104
104
  export const isStringNumber = (valueStr, localizedDigits) => {
105
105
  const nonLocalizedValueStr = removeLocalizedDigits(valueStr, localizedDigits);
106
- return !Number.isNaN(Number(nonLocalizedValueStr));
106
+ // `Number(' ')` returns `0` even if ' ' is not a valid number.
107
+ return nonLocalizedValueStr !== ' ' && !Number.isNaN(Number(nonLocalizedValueStr));
107
108
  };
108
109
 
109
110
  /**
@@ -119,7 +119,7 @@ export const usePickerValue = ({
119
119
  const {
120
120
  onAccept,
121
121
  onChange,
122
- value: inValue,
122
+ value: inValueWithoutRenderTimezone,
123
123
  defaultValue: inDefaultValue,
124
124
  closeOnSelect = wrapperVariant === 'desktop',
125
125
  timezone: timezoneProp
@@ -129,15 +129,15 @@ export const usePickerValue = ({
129
129
  } = React.useRef(inDefaultValue);
130
130
  const {
131
131
  current: isControlled
132
- } = React.useRef(inValue !== undefined);
132
+ } = React.useRef(inValueWithoutRenderTimezone !== undefined);
133
133
 
134
134
  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
135
135
  if (process.env.NODE_ENV !== 'production') {
136
136
  React.useEffect(() => {
137
- if (isControlled !== (inValue !== undefined)) {
137
+ if (isControlled !== (inValueWithoutRenderTimezone !== undefined)) {
138
138
  console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
139
139
  }
140
- }, [inValue]);
140
+ }, [inValueWithoutRenderTimezone]);
141
141
  React.useEffect(() => {
142
142
  if (!isControlled && defaultValue !== inDefaultValue) {
143
143
  console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
@@ -152,10 +152,21 @@ export const usePickerValue = ({
152
152
  isOpen,
153
153
  setIsOpen
154
154
  } = useOpenState(props);
155
+ const {
156
+ timezone,
157
+ value: inValueWithTimezoneToRender,
158
+ handleValueChange
159
+ } = useValueWithTimezone({
160
+ timezone: timezoneProp,
161
+ value: inValueWithoutRenderTimezone,
162
+ defaultValue,
163
+ onChange,
164
+ valueManager
165
+ });
155
166
  const [dateState, setDateState] = React.useState(() => {
156
167
  let initialValue;
157
- if (inValue !== undefined) {
158
- initialValue = inValue;
168
+ if (inValueWithTimezoneToRender !== undefined) {
169
+ initialValue = inValueWithTimezoneToRender;
159
170
  } else if (defaultValue !== undefined) {
160
171
  initialValue = defaultValue;
161
172
  } else {
@@ -165,20 +176,10 @@ export const usePickerValue = ({
165
176
  draft: initialValue,
166
177
  lastPublishedValue: initialValue,
167
178
  lastCommittedValue: initialValue,
168
- lastControlledValue: inValue,
179
+ lastControlledValue: inValueWithTimezoneToRender,
169
180
  hasBeenModifiedSinceMount: false
170
181
  };
171
182
  });
172
- const {
173
- timezone,
174
- handleValueChange
175
- } = useValueWithTimezone({
176
- timezone: timezoneProp,
177
- value: inValue,
178
- defaultValue,
179
- onChange,
180
- valueManager
181
- });
182
183
  useValidation(_extends({}, props, {
183
184
  value: dateState.draft,
184
185
  timezone
@@ -200,38 +201,44 @@ export const usePickerValue = ({
200
201
  lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
201
202
  hasBeenModifiedSinceMount: true
202
203
  }));
203
- if (shouldPublish) {
204
- const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
205
- adapter,
206
- value: action.value,
207
- props: _extends({}, props, {
204
+ let cachedContext = null;
205
+ const getContext = () => {
206
+ if (!cachedContext) {
207
+ const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
208
+ adapter,
208
209
  value: action.value,
209
- timezone
210
- })
211
- });
212
- const context = {
213
- validationError
214
- };
215
- if (action.name === 'setValueFromShortcut') {
216
- context.shortcut = action.shortcut;
210
+ props: _extends({}, props, {
211
+ value: action.value,
212
+ timezone
213
+ })
214
+ });
215
+ cachedContext = {
216
+ validationError
217
+ };
218
+ if (action.name === 'setValueFromShortcut') {
219
+ cachedContext.shortcut = action.shortcut;
220
+ }
217
221
  }
218
- handleValueChange(action.value, context);
222
+ return cachedContext;
223
+ };
224
+ if (shouldPublish) {
225
+ handleValueChange(action.value, getContext());
219
226
  }
220
227
  if (shouldCommit && onAccept) {
221
- onAccept(action.value);
228
+ onAccept(action.value, getContext());
222
229
  }
223
230
  if (shouldClose) {
224
231
  setIsOpen(false);
225
232
  }
226
233
  });
227
- if (inValue !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue))) {
228
- const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValue);
234
+ if (inValueWithTimezoneToRender !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValueWithTimezoneToRender))) {
235
+ const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
229
236
  setDateState(prev => _extends({}, prev, {
230
- lastControlledValue: inValue
237
+ lastControlledValue: inValueWithTimezoneToRender
231
238
  }, isUpdateComingFromPicker ? {} : {
232
- lastCommittedValue: inValue,
233
- lastPublishedValue: inValue,
234
- draft: inValue,
239
+ lastCommittedValue: inValueWithTimezoneToRender,
240
+ lastPublishedValue: inValueWithTimezoneToRender,
241
+ draft: inValueWithTimezoneToRender,
235
242
  hasBeenModifiedSinceMount: true
236
243
  }));
237
244
  }
@@ -39,6 +39,7 @@ export const usePickerViews = ({
39
39
  onClose
40
40
  } = propsFromPickerValue;
41
41
  const {
42
+ view: inView,
42
43
  views,
43
44
  openTo,
44
45
  onViewChange,
@@ -54,7 +55,7 @@ export const usePickerViews = ({
54
55
  setFocusedView,
55
56
  setValueAndGoToNextView
56
57
  } = useViews({
57
- view: undefined,
58
+ view: inView,
58
59
  views,
59
60
  openTo,
60
61
  onChange,
@@ -17,11 +17,10 @@ const daDKPickers = {
17
17
  // DateRange labels
18
18
  start: 'Start',
19
19
  end: 'Slut',
20
- // startDate: 'Start date',
21
- // startTime: 'Start time',
22
- // endDate: 'End date',
23
- // endTime: 'End time',
24
-
20
+ startDate: 'Start dato',
21
+ startTime: 'Start tid',
22
+ endDate: 'Slut date',
23
+ endTime: 'Slut tid',
25
24
  // Action bar
26
25
  cancelButtonLabel: 'Annuller',
27
26
  clearButtonLabel: 'Ryd',
@@ -47,8 +46,7 @@ const daDKPickers = {
47
46
  // Open picker labels
48
47
  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg dato, valgte dato er ${utils.format(value, 'fullDate')}` : 'Vælg dato',
49
48
  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt',
50
- // fieldClearLabel: 'Clear value',
51
-
49
+ fieldClearLabel: 'ryd felt',
52
50
  // Table labels
53
51
  timeTableLabel: 'vælg tidspunkt',
54
52
  dateTableLabel: 'vælg dato',
@@ -60,19 +58,17 @@ const daDKPickers = {
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: 'år',
64
+ month: 'måned',
65
+ day: 'dag',
66
+ weekDay: 'ugedag',
67
+ hours: 'timer',
68
+ minutes: 'minutter',
69
+ seconds: 'sekunder',
70
+ meridiem: 'middag',
75
71
  // Common
76
- // empty: 'Empty',
72
+ empty: 'tom'
77
73
  };
78
74
  export const daDK = getPickersLocalization(daDKPickers);
@@ -1,8 +1,8 @@
1
1
  import { getPickersLocalization } from './utils/getPickersLocalization';
2
2
  const timeViews = {
3
- hours: 'ساعت ها',
4
- minutes: 'دقیقه ها',
5
- seconds: 'ثانیه ها',
3
+ hours: 'ساعت‌ها',
4
+ minutes: 'دقیقه‌ها',
5
+ seconds: 'ثانیه‌ها',
6
6
  meridiem: 'بعد از ظهر'
7
7
  };
8
8
  const faIRPickers = {
@@ -16,11 +16,10 @@ const faIRPickers = {
16
16
  // DateRange labels
17
17
  start: 'شروع',
18
18
  end: 'پایان',
19
- // startDate: 'Start date',
20
- // startTime: 'Start time',
21
- // endDate: 'End date',
22
- // endTime: 'End time',
23
-
19
+ startDate: 'تاریخ شروع',
20
+ startTime: 'ساعت شروع',
21
+ endDate: 'تاریخ پایان',
22
+ endTime: 'ساعت پایان',
24
23
  // Action bar
25
24
  cancelButtonLabel: 'لغو',
26
25
  clearButtonLabel: 'پاک کردن',
@@ -33,9 +32,9 @@ const faIRPickers = {
33
32
  dateRangePickerToolbarTitle: 'محدوده تاریخ را انتخاب کنید',
34
33
  // Clock labels
35
34
  clockLabelText: (view, time, adapter) => ` را انتخاب کنید ${timeViews[view]}. ${time === null ? 'هیچ ساعتی انتخاب نشده است' : `ساعت انتخاب ${adapter.format(time, 'fullTime')} می باشد`}`,
36
- hoursClockNumberText: hours => `${hours} ساعت ها`,
37
- minutesClockNumberText: minutes => `${minutes} دقیقه ها`,
38
- secondsClockNumberText: seconds => `${seconds} ثانیه ها`,
35
+ hoursClockNumberText: hours => `${hours} ساعت‌ها`,
36
+ minutesClockNumberText: minutes => `${minutes} دقیقه‌ها`,
37
+ secondsClockNumberText: seconds => `${seconds} ثانیه‌ها`,
39
38
  // Digital clock labels
40
39
  selectViewText: view => ` را انتخاب کنید ${timeViews[view]}`,
41
40
  // Calendar labels
@@ -44,10 +43,9 @@ const faIRPickers = {
44
43
  calendarWeekNumberAriaLabelText: weekNumber => `هفته ${weekNumber}`,
45
44
  calendarWeekNumberText: weekNumber => `${weekNumber}`,
46
45
  // Open picker labels
47
- openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} می باشد` : 'تاریخ را انتخاب کنید',
48
- openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می باشد` : 'ساعت را انتخاب کنید',
49
- // fieldClearLabel: 'Clear value',
50
-
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: 'پاک کردن مقدار',
51
49
  // Table labels
52
50
  timeTableLabel: 'انتخاب تاریخ',
53
51
  dateTableLabel: 'انتخاب ساعت',
@@ -64,13 +62,12 @@ const faIRPickers = {
64
62
  year: 'سال',
65
63
  month: 'ماه',
66
64
  day: 'روز',
67
- // weekDay: 'Week day',
68
- hours: 'ساعت ها',
69
- minutes: 'دقیقه ها',
70
- seconds: 'ثانیه ها'
71
- // meridiem: 'Meridiem',
72
-
65
+ weekDay: 'روز هفته',
66
+ hours: 'ساعت‌ها',
67
+ minutes: 'دقیقه‌ها',
68
+ seconds: 'ثانیه‌ها',
69
+ meridiem: 'نیم‌روز',
73
70
  // Common
74
- // empty: 'Empty',
71
+ empty: 'خالی'
75
72
  };
76
73
  export const faIR = getPickersLocalization(faIRPickers);
@@ -3,7 +3,7 @@ const views = {
3
3
  hours: '시간을',
4
4
  minutes: '분을',
5
5
  seconds: '초를',
6
- meridiem: '메리디엠'
6
+ meridiem: '오전/오후를'
7
7
  };
8
8
  const koKRPickers = {
9
9
  // Calendar navigation
@@ -33,7 +33,7 @@ const koKRPickers = {
33
33
  dateRangePickerToolbarTitle: '날짜 범위 선택하기',
34
34
  // Clock labels
35
35
  clockLabelText: (view, time, adapter) => `${views[view]} 선택하세요. ${time === null ? '시간을 선택하지 않았습니다.' : `현재 선택된 시간은 ${adapter.format(time, 'fullTime')}입니다.`}`,
36
- hoursClockNumberText: hours => `${hours}시간`,
36
+ hoursClockNumberText: hours => `${hours}시`,
37
37
  minutesClockNumberText: minutes => `${minutes}분`,
38
38
  secondsClockNumberText: seconds => `${seconds}초`,
39
39
  // Digital clock labels
@@ -138,6 +138,7 @@ class AdapterDateFnsJalali extends _AdapterDateFnsBase.AdapterDateFnsBase {
138
138
  longFormatters: _format.longFormatters,
139
139
  lib: 'date-fns-jalali'
140
140
  });
141
+ // TODO: explicit return types can be removed once there is only one date-fns version supported
141
142
  this.parse = (value, format) => {
142
143
  if (value === '') {
143
144
  return null;
@@ -98,6 +98,7 @@ class AdapterDateFns extends _AdapterDateFnsBase.AdapterDateFnsBase {
98
98
  formats,
99
99
  longFormatters: _format.longFormatters
100
100
  });
101
+ // TODO: explicit return types can be removed once there is only one date-fns version supported
101
102
  this.parse = (value, format) => {
102
103
  if (value === '') {
103
104
  return null;
@@ -281,7 +281,9 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
281
281
  readOnly,
282
282
  disabled,
283
283
  timezone,
284
- gridLabelId
284
+ gridLabelId,
285
+ slots,
286
+ slotProps
285
287
  };
286
288
  const prevOpenViewRef = React.useRef(view);
287
289
  React.useEffect(() => {
@@ -342,8 +344,6 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
342
344
  fixedWeekNumber: fixedWeekNumber,
343
345
  dayOfWeekFormatter: dayOfWeekFormatter,
344
346
  displayWeekNumber: displayWeekNumber,
345
- slots: slots,
346
- slotProps: slotProps,
347
347
  loading: loading,
348
348
  renderLoading: renderLoading
349
349
  }))]
@@ -176,7 +176,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
176
176
  /**
177
177
  * Callback fired when the value is accepted.
178
178
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
179
+ * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
179
180
  * @param {TValue} value The value that was just accepted.
181
+ * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
180
182
  */
181
183
  onAccept: _propTypes.default.func,
182
184
  /**
@@ -214,7 +214,9 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
214
214
  /**
215
215
  * Callback fired when the value is accepted.
216
216
  * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
217
+ * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
217
218
  * @param {TValue} value The value that was just accepted.
219
+ * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
218
220
  */
219
221
  onAccept: _propTypes.default.func,
220
222
  /**