@mui/x-date-pickers 8.0.0-alpha.13 → 8.0.0-alpha.14

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 (197) hide show
  1. package/CHANGELOG.md +131 -0
  2. package/DatePicker/shared.d.ts +1 -1
  3. package/DateTimePicker/DateTimePicker.types.d.ts +2 -2
  4. package/DateTimePicker/DateTimePickerToolbar.d.ts +1 -1
  5. package/DateTimePicker/DateTimePickerToolbar.js +1 -1
  6. package/DateTimePicker/shared.d.ts +18 -10
  7. package/DateTimePicker/shared.js +23 -2
  8. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -11
  9. package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +4 -7
  10. package/DesktopTimePicker/DesktopTimePicker.types.d.ts +2 -2
  11. package/MobileDateTimePicker/MobileDateTimePicker.d.ts +1 -2
  12. package/MobileDateTimePicker/MobileDateTimePicker.js +61 -6
  13. package/MobileDateTimePicker/MobileDateTimePicker.types.d.ts +1 -3
  14. package/PickersTextField/PickersTextField.js +3 -1
  15. package/StaticDateTimePicker/StaticDateTimePicker.js +60 -6
  16. package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts +1 -2
  17. package/TimePicker/shared.d.ts +1 -1
  18. package/esm/DatePicker/shared.d.ts +1 -1
  19. package/esm/DateTimePicker/DateTimePicker.types.d.ts +2 -2
  20. package/esm/DateTimePicker/DateTimePickerToolbar.d.ts +1 -1
  21. package/esm/DateTimePicker/DateTimePickerToolbar.js +1 -1
  22. package/esm/DateTimePicker/shared.d.ts +18 -10
  23. package/esm/DateTimePicker/shared.js +23 -2
  24. package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +3 -12
  25. package/esm/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +4 -7
  26. package/esm/DesktopTimePicker/DesktopTimePicker.types.d.ts +2 -2
  27. package/esm/MobileDateTimePicker/MobileDateTimePicker.d.ts +1 -2
  28. package/esm/MobileDateTimePicker/MobileDateTimePicker.js +62 -7
  29. package/esm/MobileDateTimePicker/MobileDateTimePicker.types.d.ts +1 -3
  30. package/esm/PickersTextField/PickersTextField.js +3 -1
  31. package/esm/StaticDateTimePicker/StaticDateTimePicker.js +61 -7
  32. package/esm/StaticDateTimePicker/StaticDateTimePicker.types.d.ts +1 -2
  33. package/esm/TimePicker/shared.d.ts +1 -1
  34. package/esm/index.js +1 -1
  35. package/esm/internals/components/PickerFieldUI.js +6 -2
  36. package/esm/internals/components/PickerPopper/PickerPopper.js +3 -3
  37. package/esm/internals/components/PickerProvider.d.ts +137 -6
  38. package/esm/internals/components/PickerProvider.js +1 -1
  39. package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +4 -7
  40. package/esm/internals/hooks/useField/useField.js +7 -8
  41. package/esm/internals/hooks/useField/useField.types.d.ts +46 -43
  42. package/esm/internals/hooks/useField/useField.utils.js +4 -1
  43. package/esm/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
  44. package/esm/internals/hooks/useField/useFieldState.d.ts +2 -1
  45. package/esm/internals/hooks/useField/useFieldState.js +136 -83
  46. package/esm/internals/hooks/useField/useFieldV6TextField.js +1 -1
  47. package/esm/internals/hooks/useField/useFieldV7TextField.js +2 -1
  48. package/esm/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts +4 -7
  49. package/esm/internals/hooks/useNullableFieldPrivateContext.d.ts +5 -2
  50. package/esm/internals/hooks/usePicker/hooks/useOrientation.d.ts +2 -0
  51. package/esm/internals/hooks/usePicker/hooks/useOrientation.js +34 -0
  52. package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts +19 -0
  53. package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +210 -0
  54. package/esm/internals/hooks/usePicker/index.d.ts +1 -3
  55. package/esm/internals/hooks/usePicker/usePicker.d.ts +5 -5
  56. package/esm/internals/hooks/usePicker/usePicker.js +276 -34
  57. package/esm/internals/hooks/usePicker/usePicker.types.d.ts +181 -9
  58. package/esm/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts +3 -4
  59. package/esm/internals/hooks/useValueWithTimezone.d.ts +1 -1
  60. package/esm/internals/index.d.ts +3 -6
  61. package/esm/internals/models/manager.d.ts +108 -4
  62. package/esm/internals/models/props/basePickerProps.d.ts +2 -2
  63. package/esm/internals/models/props/time.d.ts +1 -1
  64. package/esm/internals/utils/date-time-utils.d.ts +2 -2
  65. package/esm/internals/utils/valueManagers.d.ts +1 -1
  66. package/esm/internals/utils/valueManagers.js +10 -18
  67. package/esm/managers/useDateManager.d.ts +3 -4
  68. package/esm/managers/useDateTimeManager.d.ts +3 -4
  69. package/esm/managers/useTimeManager.d.ts +3 -4
  70. package/esm/models/adapters.d.ts +2 -1
  71. package/esm/models/manager.d.ts +4 -5
  72. package/esm/validation/useValidation.d.ts +1 -1
  73. package/index.js +1 -1
  74. package/internals/components/PickerFieldUI.js +6 -2
  75. package/internals/components/PickerPopper/PickerPopper.js +3 -3
  76. package/internals/components/PickerProvider.d.ts +137 -6
  77. package/internals/components/PickerProvider.js +1 -1
  78. package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +4 -7
  79. package/internals/hooks/useField/useField.js +7 -8
  80. package/internals/hooks/useField/useField.types.d.ts +46 -43
  81. package/internals/hooks/useField/useField.utils.js +4 -1
  82. package/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
  83. package/internals/hooks/useField/useFieldState.d.ts +2 -1
  84. package/internals/hooks/useField/useFieldState.js +135 -82
  85. package/internals/hooks/useField/useFieldV6TextField.js +1 -1
  86. package/internals/hooks/useField/useFieldV7TextField.js +2 -1
  87. package/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts +4 -7
  88. package/internals/hooks/useNullableFieldPrivateContext.d.ts +5 -2
  89. package/internals/hooks/usePicker/hooks/useOrientation.d.ts +2 -0
  90. package/internals/hooks/usePicker/hooks/useOrientation.js +42 -0
  91. package/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts +19 -0
  92. package/internals/hooks/usePicker/{usePickerValue.js → hooks/useValueAndOpenStates.js} +97 -114
  93. package/internals/hooks/usePicker/index.d.ts +1 -3
  94. package/internals/hooks/usePicker/usePicker.d.ts +5 -5
  95. package/internals/hooks/usePicker/usePicker.js +278 -34
  96. package/internals/hooks/usePicker/usePicker.types.d.ts +181 -9
  97. package/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts +3 -4
  98. package/internals/hooks/useValueWithTimezone.d.ts +1 -1
  99. package/internals/index.d.ts +3 -6
  100. package/internals/models/manager.d.ts +108 -4
  101. package/internals/models/props/basePickerProps.d.ts +2 -2
  102. package/internals/models/props/time.d.ts +1 -1
  103. package/internals/utils/date-time-utils.d.ts +2 -2
  104. package/internals/utils/valueManagers.d.ts +1 -1
  105. package/internals/utils/valueManagers.js +10 -18
  106. package/managers/useDateManager.d.ts +3 -4
  107. package/managers/useDateTimeManager.d.ts +3 -4
  108. package/managers/useTimeManager.d.ts +3 -4
  109. package/models/adapters.d.ts +2 -1
  110. package/models/manager.d.ts +4 -5
  111. package/modern/DatePicker/shared.d.ts +1 -1
  112. package/modern/DateTimePicker/DateTimePicker.types.d.ts +2 -2
  113. package/modern/DateTimePicker/DateTimePickerToolbar.d.ts +1 -1
  114. package/modern/DateTimePicker/DateTimePickerToolbar.js +1 -1
  115. package/modern/DateTimePicker/shared.d.ts +18 -10
  116. package/modern/DateTimePicker/shared.js +23 -2
  117. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +3 -12
  118. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +4 -7
  119. package/modern/DesktopTimePicker/DesktopTimePicker.types.d.ts +2 -2
  120. package/modern/MobileDateTimePicker/MobileDateTimePicker.d.ts +1 -2
  121. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +62 -7
  122. package/modern/MobileDateTimePicker/MobileDateTimePicker.types.d.ts +1 -3
  123. package/modern/PickersTextField/PickersTextField.js +3 -1
  124. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +61 -7
  125. package/modern/StaticDateTimePicker/StaticDateTimePicker.types.d.ts +1 -2
  126. package/modern/TimePicker/shared.d.ts +1 -1
  127. package/modern/index.js +1 -1
  128. package/modern/internals/components/PickerFieldUI.js +6 -2
  129. package/modern/internals/components/PickerPopper/PickerPopper.js +3 -3
  130. package/modern/internals/components/PickerProvider.d.ts +137 -6
  131. package/modern/internals/components/PickerProvider.js +1 -1
  132. package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +4 -7
  133. package/modern/internals/hooks/useField/useField.js +7 -8
  134. package/modern/internals/hooks/useField/useField.types.d.ts +46 -43
  135. package/modern/internals/hooks/useField/useField.utils.js +4 -1
  136. package/modern/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
  137. package/modern/internals/hooks/useField/useFieldState.d.ts +2 -1
  138. package/modern/internals/hooks/useField/useFieldState.js +136 -83
  139. package/modern/internals/hooks/useField/useFieldV6TextField.js +1 -1
  140. package/modern/internals/hooks/useField/useFieldV7TextField.js +2 -1
  141. package/modern/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts +4 -7
  142. package/modern/internals/hooks/useNullableFieldPrivateContext.d.ts +5 -2
  143. package/modern/internals/hooks/usePicker/hooks/useOrientation.d.ts +2 -0
  144. package/modern/internals/hooks/usePicker/hooks/useOrientation.js +34 -0
  145. package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts +19 -0
  146. package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +210 -0
  147. package/modern/internals/hooks/usePicker/index.d.ts +1 -3
  148. package/modern/internals/hooks/usePicker/usePicker.d.ts +5 -5
  149. package/modern/internals/hooks/usePicker/usePicker.js +276 -34
  150. package/modern/internals/hooks/usePicker/usePicker.types.d.ts +181 -9
  151. package/modern/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts +3 -4
  152. package/modern/internals/hooks/useValueWithTimezone.d.ts +1 -1
  153. package/modern/internals/index.d.ts +3 -6
  154. package/modern/internals/models/manager.d.ts +108 -4
  155. package/modern/internals/models/props/basePickerProps.d.ts +2 -2
  156. package/modern/internals/models/props/time.d.ts +1 -1
  157. package/modern/internals/utils/date-time-utils.d.ts +2 -2
  158. package/modern/internals/utils/valueManagers.d.ts +1 -1
  159. package/modern/internals/utils/valueManagers.js +10 -18
  160. package/modern/managers/useDateManager.d.ts +3 -4
  161. package/modern/managers/useDateTimeManager.d.ts +3 -4
  162. package/modern/managers/useTimeManager.d.ts +3 -4
  163. package/modern/models/adapters.d.ts +2 -1
  164. package/modern/models/manager.d.ts +4 -5
  165. package/modern/validation/useValidation.d.ts +1 -1
  166. package/package.json +1 -1
  167. package/tsconfig.build.tsbuildinfo +1 -1
  168. package/validation/useValidation.d.ts +1 -1
  169. package/esm/internals/hooks/useOpenState.d.ts +0 -14
  170. package/esm/internals/hooks/useOpenState.js +0 -37
  171. package/esm/internals/hooks/usePicker/usePickerProvider.d.ts +0 -65
  172. package/esm/internals/hooks/usePicker/usePickerProvider.js +0 -125
  173. package/esm/internals/hooks/usePicker/usePickerValue.d.ts +0 -12
  174. package/esm/internals/hooks/usePicker/usePickerValue.js +0 -226
  175. package/esm/internals/hooks/usePicker/usePickerValue.types.d.ts +0 -327
  176. package/esm/internals/hooks/usePicker/usePickerValue.types.js +0 -1
  177. package/esm/internals/hooks/usePicker/usePickerViews.d.ts +0 -137
  178. package/esm/internals/hooks/usePicker/usePickerViews.js +0 -188
  179. package/internals/hooks/useOpenState.d.ts +0 -14
  180. package/internals/hooks/useOpenState.js +0 -46
  181. package/internals/hooks/usePicker/usePickerProvider.d.ts +0 -65
  182. package/internals/hooks/usePicker/usePickerProvider.js +0 -135
  183. package/internals/hooks/usePicker/usePickerValue.d.ts +0 -12
  184. package/internals/hooks/usePicker/usePickerValue.types.d.ts +0 -327
  185. package/internals/hooks/usePicker/usePickerValue.types.js +0 -5
  186. package/internals/hooks/usePicker/usePickerViews.d.ts +0 -137
  187. package/internals/hooks/usePicker/usePickerViews.js +0 -195
  188. package/modern/internals/hooks/useOpenState.d.ts +0 -14
  189. package/modern/internals/hooks/useOpenState.js +0 -37
  190. package/modern/internals/hooks/usePicker/usePickerProvider.d.ts +0 -65
  191. package/modern/internals/hooks/usePicker/usePickerProvider.js +0 -125
  192. package/modern/internals/hooks/usePicker/usePickerValue.d.ts +0 -12
  193. package/modern/internals/hooks/usePicker/usePickerValue.js +0 -226
  194. package/modern/internals/hooks/usePicker/usePickerValue.types.d.ts +0 -327
  195. package/modern/internals/hooks/usePicker/usePickerValue.types.js +0 -1
  196. package/modern/internals/hooks/usePicker/usePickerViews.d.ts +0 -137
  197. package/modern/internals/hooks/usePicker/usePickerViews.js +0 -188
@@ -1,137 +0,0 @@
1
- import * as React from 'react';
2
- import { SxProps } from '@mui/system';
3
- import { Theme } from '@mui/material/styles';
4
- import { UseViewsOptions } from "../useViews.js";
5
- import type { UsePickerValueViewsResponse } from './usePickerValue.types';
6
- import { DateOrTimeViewWithMeridiem, PickerRangeValue, PickerValidValue, PickerValue } from "../../models/index.js";
7
- import { FieldRef, PickerValidDate, TimezoneProps } from "../../../models/index.js";
8
- export interface PickerViewsRendererBaseExternalProps extends Omit<UsePickerViewsProps<any, any, any>, 'openTo' | 'viewRenderers'> {}
9
- export type PickerViewsRendererProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps> = Omit<TExternalProps, 'className' | 'sx'> & Pick<UsePickerValueViewsResponse<TValue>, 'value' | 'onChange'> & {
10
- view: TView;
11
- views: readonly TView[];
12
- focusedView: TView | null;
13
- onFocusedViewChange: (viewToFocus: TView, hasFocus: boolean) => void;
14
- showViewSwitcher: boolean;
15
- timeViewsCount: number;
16
- };
17
- export type PickerViewRenderer<TValue extends PickerValidValue, TExternalProps extends PickerViewsRendererBaseExternalProps> = (props: PickerViewsRendererProps<TValue, any, TExternalProps>) => React.ReactNode;
18
- export type PickerViewRendererLookup<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps> = Record<TView, PickerViewRenderer<TValue, TExternalProps> | null>;
19
- /**
20
- * Props used to handle the views that are common to all pickers.
21
- */
22
- export interface UsePickerViewsBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
23
- /**
24
- * If `null`, the section will only have field editing.
25
- * If `undefined`, internally defined view will be used.
26
- */
27
- viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
28
- /**
29
- * The date used to generate the new value when both `value` and `defaultValue` are empty.
30
- * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
31
- */
32
- referenceDate?: PickerValidDate;
33
- }
34
- /**
35
- * Props used to handle the value of the pickers.
36
- */
37
- export interface UsePickerViewsProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerViewsBaseProps<TValue, TView, TExternalProps> {
38
- className?: string;
39
- sx?: SxProps<Theme>;
40
- }
41
- export interface UsePickerViewParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps>> {
42
- props: TExternalProps;
43
- propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
44
- autoFocusView: boolean;
45
- viewContainerRole: 'dialog' | 'tooltip' | null;
46
- /**
47
- * A function that intercepts the regular picker rendering.
48
- * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
49
- * @param {PickerViewRendererLookup<TValue, TView, TExternalProps>} viewRenderers The `viewRenderers` that were provided to the picker component.
50
- * @param {TView} popperView The current picker view.
51
- * @param {any} rendererProps All the props that are being passed down to the renderer.
52
- * @returns {React.ReactNode} A React node that will be rendered instead of the default renderer.
53
- */
54
- rendererInterceptor?: React.JSXElementConstructor<PickerRendererInterceptorProps<TValue, TView, TExternalProps>>;
55
- }
56
- export interface PickerRendererInterceptorProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps>> {
57
- viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
58
- popperView: TView;
59
- rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps>;
60
- }
61
- export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
62
- renderCurrentView: () => React.ReactNode;
63
- provider: UsePickerViewsProviderParams<TView>;
64
- }
65
- export interface UsePickerViewsActionsContextValue<TView extends DateOrTimeViewWithMeridiem> {
66
- /**
67
- * Set the current view.
68
- * @template TView
69
- * @param {TView} view The view to render
70
- */
71
- setView: (view: TView) => void;
72
- }
73
- export interface UsePickerViewsContextValue<TView extends DateOrTimeViewWithMeridiem> extends UsePickerViewsActionsContextValue<TView> {
74
- /**
75
- * The views that the picker must render.
76
- * It is equal to the picker `views` prop if defined.
77
- * Otherwise, a default set of views is provided based on the component you are using:
78
- * - Date Pickers: ['year', 'day']
79
- * - Time Pickers: ['hours', 'minutes']
80
- * - Date Time Pickers: ['year', 'day', 'hours', 'minutes']
81
- * - Date Range Pickers: ['day']
82
- * - Date Time Range Pickers: ['day', 'hours', 'minutes']
83
- */
84
- views: readonly TView[];
85
- /**
86
- * The view currently rendered.
87
- */
88
- view: TView | null;
89
- /**
90
- * The view showed when first opening the picker.
91
- */
92
- initialView: TView | null;
93
- }
94
- export interface UsePickerViewsPrivateContextValue {
95
- /**
96
- * Whether one of the view has an UI (it has a view renderer associated).
97
- */
98
- hasUIView: boolean;
99
- /**
100
- * Check whether the current view has an UI.
101
- * @returns {boolean} Whether the current view has an UI.
102
- */
103
- doesTheCurrentViewHasAnUI: () => boolean;
104
- /**
105
- * The aria role associated with the view container.
106
- * It is equal to "dialog" when the view is rendered inside a `@mui/material/Dialog`.
107
- * It is equal to "dialog" when the view is rendered inside a `@mui/material/Popper` and the focus is trapped inside the view.
108
- * It is equal to "tooltip" when the view is rendered inside a `@mui/material/Popper` and the focus remains inside the field.
109
- * It is always equal to null if the picker does not have a field (static pickers).
110
- * It is always equal to null if the component you are accessing the context from is not wrapped by a picker.
111
- */
112
- viewContainerRole: 'dialog' | 'tooltip' | null;
113
- }
114
- export interface UsePickerViewsFieldPrivateContextValue {
115
- fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
116
- }
117
- export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
118
- hasUIView: boolean;
119
- views: readonly TView[];
120
- contextValue: UsePickerViewsContextValue<TView>;
121
- actionsContextValue: UsePickerViewsActionsContextValue<TView>;
122
- privateContextValue: UsePickerViewsPrivateContextValue;
123
- fieldPrivateContextValue: UsePickerViewsFieldPrivateContextValue;
124
- }
125
- /**
126
- * Manage the views of all the pickers:
127
- * - Handles the view switch
128
- * - Handles the switch between UI views and field views
129
- * - Handles the focus management when switching views
130
- */
131
- export declare const usePickerViews: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>>({
132
- props,
133
- propsFromPickerValue,
134
- autoFocusView,
135
- viewContainerRole,
136
- rendererInterceptor: RendererInterceptor
137
- }: UsePickerViewParams<TValue, TView, TExternalProps>) => UsePickerViewsResponse<TView>;
@@ -1,195 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.usePickerViews = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
- var React = _interopRequireWildcard(require("react"));
12
- var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
13
- var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
14
- var _useViews = require("../useViews");
15
- var _timeUtils = require("../../utils/time-utils");
16
- var _jsxRuntime = require("react/jsx-runtime");
17
- const _excluded = ["className", "sx"];
18
- /**
19
- * Props used to handle the views that are common to all pickers.
20
- */
21
- /**
22
- * Props used to handle the value of the pickers.
23
- */
24
- /**
25
- * Manage the views of all the pickers:
26
- * - Handles the view switch
27
- * - Handles the switch between UI views and field views
28
- * - Handles the focus management when switching views
29
- */
30
- const usePickerViews = ({
31
- props,
32
- propsFromPickerValue,
33
- autoFocusView,
34
- viewContainerRole,
35
- rendererInterceptor: RendererInterceptor
36
- }) => {
37
- const {
38
- onChange,
39
- value,
40
- open,
41
- setOpen
42
- } = propsFromPickerValue;
43
- const {
44
- view: inView,
45
- views,
46
- openTo,
47
- onViewChange,
48
- viewRenderers,
49
- timezone
50
- } = props;
51
- const propsToForwardToView = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
52
- const fieldRef = React.useRef(null);
53
- const {
54
- view,
55
- setView,
56
- defaultView,
57
- focusedView,
58
- setFocusedView,
59
- setValueAndGoToNextView
60
- } = (0, _useViews.useViews)({
61
- view: inView,
62
- views,
63
- openTo,
64
- onChange,
65
- onViewChange,
66
- autoFocus: autoFocusView
67
- });
68
- const {
69
- hasUIView,
70
- viewModeLookup
71
- } = React.useMemo(() => views.reduce((acc, viewForReduce) => {
72
- let viewMode;
73
- if (viewRenderers[viewForReduce] != null) {
74
- viewMode = 'UI';
75
- } else {
76
- viewMode = 'field';
77
- }
78
- acc.viewModeLookup[viewForReduce] = viewMode;
79
- if (viewMode === 'UI') {
80
- acc.hasUIView = true;
81
- }
82
- return acc;
83
- }, {
84
- hasUIView: false,
85
- viewModeLookup: {}
86
- }), [viewRenderers, views]);
87
- const timeViewsCount = React.useMemo(() => views.reduce((acc, viewForReduce) => {
88
- if (viewRenderers[viewForReduce] != null && (0, _timeUtils.isTimeView)(viewForReduce)) {
89
- return acc + 1;
90
- }
91
- return acc;
92
- }, 0), [viewRenderers, views]);
93
- const currentViewMode = viewModeLookup[view];
94
- const doesTheCurrentViewHasAnUI = (0, _useEventCallback.default)(() => currentViewMode === 'UI');
95
- const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
96
- if (popperView !== view && viewModeLookup[view] === 'UI') {
97
- setPopperView(view);
98
- }
99
- (0, _useEnhancedEffect.default)(() => {
100
- // Handle case of `DateTimePicker` without time renderers
101
- if (currentViewMode === 'field' && open) {
102
- setOpen(false);
103
- setTimeout(() => {
104
- fieldRef?.current?.setSelectedSections(view);
105
- // focusing the input before the range selection is done
106
- // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
107
- fieldRef?.current?.focusField(view);
108
- });
109
- }
110
- }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
111
-
112
- (0, _useEnhancedEffect.default)(() => {
113
- if (!open) {
114
- return;
115
- }
116
- let newView = view;
117
-
118
- // If the current view is a field view, go to the last popper view
119
- if (currentViewMode === 'field' && popperView != null) {
120
- newView = popperView;
121
- }
122
-
123
- // If the current view is not the default view and both are UI views
124
- if (newView !== defaultView && viewModeLookup[newView] === 'UI' && viewModeLookup[defaultView] === 'UI') {
125
- newView = defaultView;
126
- }
127
- if (newView !== view) {
128
- setView(newView);
129
- }
130
- setFocusedView(newView, true);
131
- }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
132
-
133
- const actionsContextValue = React.useMemo(() => ({
134
- setView
135
- }), [setView]);
136
- const initialViewRef = React.useRef(openTo ?? null);
137
- const contextValue = React.useMemo(() => (0, _extends2.default)({}, actionsContextValue, {
138
- views,
139
- view: popperView,
140
- initialView: initialViewRef.current
141
- }), [actionsContextValue, views, popperView]);
142
- const privateContextValue = React.useMemo(() => ({
143
- hasUIView,
144
- doesTheCurrentViewHasAnUI,
145
- viewContainerRole
146
- }), [hasUIView, doesTheCurrentViewHasAnUI, viewContainerRole]);
147
- const fieldPrivateContextValue = React.useMemo(() => ({
148
- fieldRef
149
- }), []);
150
- const providerParams = {
151
- hasUIView,
152
- views,
153
- contextValue,
154
- actionsContextValue,
155
- privateContextValue,
156
- fieldPrivateContextValue
157
- };
158
- return {
159
- provider: providerParams,
160
- renderCurrentView: () => {
161
- if (popperView == null) {
162
- return null;
163
- }
164
- const renderer = viewRenderers[popperView];
165
- if (renderer == null) {
166
- return null;
167
- }
168
- const rendererProps = (0, _extends2.default)({}, propsToForwardToView, {
169
- views,
170
- timezone,
171
- value,
172
- onChange: setValueAndGoToNextView,
173
- view: popperView,
174
- onViewChange: setView,
175
- showViewSwitcher: timeViewsCount > 1,
176
- timeViewsCount
177
- }, viewContainerRole === 'tooltip' ? {
178
- focusedView: null,
179
- onFocusedViewChange: () => {}
180
- } : {
181
- focusedView,
182
- onFocusedViewChange: setFocusedView
183
- });
184
- if (RendererInterceptor) {
185
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(RendererInterceptor, {
186
- viewRenderers: viewRenderers,
187
- popperView: popperView,
188
- rendererProps: rendererProps
189
- });
190
- }
191
- return renderer(rendererProps);
192
- }
193
- };
194
- };
195
- exports.usePickerViews = usePickerViews;
@@ -1,14 +0,0 @@
1
- import * as React from 'react';
2
- export interface OpenStateProps {
3
- open?: boolean;
4
- onOpen?: () => void;
5
- onClose?: () => void;
6
- }
7
- export declare const useOpenState: ({
8
- open,
9
- onOpen,
10
- onClose
11
- }: OpenStateProps) => {
12
- open: boolean;
13
- setOpen: (action: React.SetStateAction<boolean>) => void;
14
- };
@@ -1,37 +0,0 @@
1
- import * as React from 'react';
2
- import useEventCallback from '@mui/utils/useEventCallback';
3
- export const useOpenState = ({
4
- open,
5
- onOpen,
6
- onClose
7
- }) => {
8
- const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
9
- const [openState, setOpenState] = React.useState(false);
10
-
11
- // It is required to update inner state in useEffect in order to avoid situation when
12
- // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
13
- React.useEffect(() => {
14
- if (isControllingOpenProp) {
15
- if (typeof open !== 'boolean') {
16
- throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
17
- }
18
- setOpenState(open);
19
- }
20
- }, [isControllingOpenProp, open]);
21
- const setOpen = useEventCallback(action => {
22
- const newOpen = typeof action === 'function' ? action(openState) : action;
23
- if (!isControllingOpenProp) {
24
- setOpenState(newOpen);
25
- }
26
- if (newOpen && onOpen) {
27
- onOpen();
28
- }
29
- if (!newOpen && onClose) {
30
- onClose();
31
- }
32
- });
33
- return {
34
- open: openState,
35
- setOpen
36
- };
37
- };
@@ -1,65 +0,0 @@
1
- import * as React from 'react';
2
- import { PickerValueManager, UsePickerValueProviderParams } from "./usePickerValue.types.js";
3
- import { PickerProviderProps } from "../../components/PickerProvider.js";
4
- import type { UsePickerProps } from './usePicker.types';
5
- import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from "../../models/index.js";
6
- import { UsePickerViewsProviderParams } from "./usePickerViews.js";
7
- import type { UseFieldInternalProps } from '../useField';
8
- import { ExportedBaseToolbarProps } from "../../models/props/toolbar.js";
9
- export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
10
- export declare function usePickerProvider<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError>(parameters: UsePickerProviderParameters<TValue, TView, TError>): UsePickerProviderReturnValue<TValue>;
11
- export interface UsePickerProviderParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<PickerProviderProps<TValue>, 'localeText'> {
12
- ref: React.ForwardedRef<HTMLDivElement> | undefined;
13
- props: UsePickerProps<TValue, any, any, any> & UsePickerProviderNonStaticProps & {
14
- slotProps?: {
15
- toolbar?: ExportedBaseToolbarProps;
16
- };
17
- };
18
- valueManager: PickerValueManager<TValue, any>;
19
- variant: PickerVariant;
20
- paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
21
- paramsFromUsePickerViews: UsePickerViewsProviderParams<TView>;
22
- }
23
- export interface UsePickerProviderReturnValue<TValue extends PickerValidValue> extends Omit<PickerProviderProps<TValue>, 'children'> {}
24
- /**
25
- * Props used to create the picker's contexts.
26
- * Those props are exposed on all the pickers.
27
- */
28
- export interface UsePickerProviderProps extends FormProps {
29
- /**
30
- * Force rendering in particular orientation.
31
- */
32
- orientation?: PickerOrientation;
33
- /**
34
- * If `true`, disable heavy animations.
35
- * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
36
- */
37
- reduceAnimations?: boolean;
38
- }
39
- /**
40
- * Props used to create the picker's contexts and that are not available on static pickers.
41
- */
42
- export interface UsePickerProviderNonStaticProps extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
43
- /**
44
- * Format of the date when rendered in the input(s).
45
- * Defaults to localized format based on the used `views`.
46
- */
47
- format?: string;
48
- /**
49
- * If `true`, the open picker button will not be rendered (renders only the field).
50
- * @default false
51
- */
52
- disableOpenPicker?: boolean;
53
- /**
54
- * The label content.
55
- */
56
- label?: React.ReactNode;
57
- /**
58
- * Pass a ref to the `input` element.
59
- */
60
- inputRef?: React.Ref<HTMLInputElement>;
61
- /**
62
- * Name attribute used by the `input` element in the Field.
63
- */
64
- name?: string;
65
- }
@@ -1,125 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import * as React from 'react';
3
- import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
4
- import useForkRef from '@mui/utils/useForkRef';
5
- import useId from '@mui/utils/useId';
6
- import { useUtils } from "../useUtils.js";
7
- import { arrayIncludes } from "../../utils/utils.js";
8
- import { useReduceAnimations } from "../useReduceAnimations.js";
9
- function getOrientation() {
10
- if (typeof window === 'undefined') {
11
- return 'portrait';
12
- }
13
- if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
14
- return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
15
- }
16
-
17
- // Support IOS safari
18
- if (window.orientation) {
19
- return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
20
- }
21
- return 'portrait';
22
- }
23
- export const usePickerOrientation = (views, customOrientation) => {
24
- const [orientation, setOrientation] = React.useState(getOrientation);
25
- useEnhancedEffect(() => {
26
- const eventHandler = () => {
27
- setOrientation(getOrientation());
28
- };
29
- window.addEventListener('orientationchange', eventHandler);
30
- return () => {
31
- window.removeEventListener('orientationchange', eventHandler);
32
- };
33
- }, []);
34
- if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
35
- // could not display 13:34:44 in landscape mode
36
- return 'portrait';
37
- }
38
- return customOrientation ?? orientation;
39
- };
40
- export function usePickerProvider(parameters) {
41
- const {
42
- ref,
43
- props,
44
- valueManager,
45
- localeText,
46
- variant,
47
- paramsFromUsePickerValue,
48
- paramsFromUsePickerViews
49
- } = parameters;
50
- const utils = useUtils();
51
- const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
52
- const reduceAnimations = useReduceAnimations(props.reduceAnimations);
53
- const triggerRef = React.useRef(null);
54
- const popupRef = React.useRef(null);
55
- const rootRefObject = React.useRef(null);
56
- const rootRef = useForkRef(ref, rootRefObject);
57
-
58
- /**
59
- * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
60
- */
61
- const labelId = useId();
62
- const ownerState = React.useMemo(() => ({
63
- isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
64
- isPickerOpen: paramsFromUsePickerValue.contextValue.open,
65
- isPickerDisabled: props.disabled ?? false,
66
- isPickerReadOnly: props.readOnly ?? false,
67
- pickerOrientation: orientation,
68
- pickerVariant: variant
69
- }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
70
- const triggerStatus = React.useMemo(() => {
71
- if (props.disableOpenPicker || !paramsFromUsePickerViews.hasUIView) {
72
- return 'hidden';
73
- }
74
- if (props.disabled || props.readOnly) {
75
- return 'disabled';
76
- }
77
- return 'enabled';
78
- }, [props.disableOpenPicker, paramsFromUsePickerViews.hasUIView, props.disabled, props.readOnly]);
79
- const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
80
- disabled: props.disabled ?? false,
81
- readOnly: props.readOnly ?? false,
82
- autoFocus: props.autoFocus ?? false,
83
- variant,
84
- orientation,
85
- popupRef,
86
- reduceAnimations,
87
- triggerRef,
88
- triggerStatus,
89
- fieldFormat: props.format ?? '',
90
- name: props.name,
91
- label: props.label,
92
- rootSx: props.sx,
93
- rootRef,
94
- rootClassName: props.className
95
- }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, rootRef, variant, orientation, reduceAnimations, props.disabled, props.readOnly, props.autoFocus, props.format, props.className, props.name, props.label, props.sx, triggerRef, triggerStatus]);
96
- const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, {
97
- ownerState,
98
- rootRefObject,
99
- labelId
100
- }), [paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, ownerState, labelId]);
101
- const actionsContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
102
- const fieldPrivateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerViews.fieldPrivateContextValue, {
103
- formatDensity: props.formatDensity,
104
- enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
105
- selectedSections: props.selectedSections,
106
- onSelectedSectionsChange: props.onSelectedSectionsChange
107
- }), [paramsFromUsePickerViews.fieldPrivateContextValue, props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
108
- return {
109
- localeText,
110
- contextValue,
111
- privateContextValue,
112
- actionsContextValue,
113
- fieldPrivateContextValue,
114
- isValidContextValue: paramsFromUsePickerValue.isValidContextValue
115
- };
116
- }
117
-
118
- /**
119
- * Props used to create the picker's contexts.
120
- * Those props are exposed on all the pickers.
121
- */
122
-
123
- /**
124
- * Props used to create the picker's contexts and that are not available on static pickers.
125
- */
@@ -1,12 +0,0 @@
1
- import { InferError } from "../../../models/index.js";
2
- import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } from "./usePickerValue.types.js";
3
- import { PickerValidValue } from "../../models/index.js";
4
- /**
5
- * Manage the value lifecycle of all the pickers.
6
- */
7
- export declare const usePickerValue: <TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>>({
8
- props,
9
- valueManager,
10
- valueType,
11
- validator
12
- }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, InferError<TExternalProps>>;