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

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 (141) hide show
  1. package/CHANGELOG.md +299 -0
  2. package/DateRangePicker/DateRangePicker.types.d.ts +2 -2
  3. package/DateTimeRangePicker/DateTimeRangePicker.types.d.ts +2 -2
  4. package/DesktopDateRangePicker/DesktopDateRangePicker.js +2 -2
  5. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +2 -2
  6. package/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
  7. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +2 -2
  8. package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
  9. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
  10. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
  11. package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts +6 -4
  12. package/dateRangeViewRenderers/dateRangeViewRenderers.js +13 -8
  13. package/esm/DateRangePicker/DateRangePicker.types.d.ts +2 -2
  14. package/esm/DateTimeRangePicker/DateTimeRangePicker.types.d.ts +2 -2
  15. package/esm/DesktopDateRangePicker/DesktopDateRangePicker.js +2 -2
  16. package/esm/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +2 -2
  17. package/esm/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
  18. package/esm/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +2 -2
  19. package/esm/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
  20. package/esm/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
  21. package/esm/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
  22. package/esm/dateRangeViewRenderers/dateRangeViewRenderers.d.ts +6 -4
  23. package/esm/dateRangeViewRenderers/dateRangeViewRenderers.js +13 -8
  24. package/esm/hooks/index.d.ts +2 -1
  25. package/esm/hooks/useMultiInputRangeField/index.d.ts +2 -1
  26. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts +37 -18
  27. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeField.js +41 -50
  28. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.d.ts +11 -0
  29. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.js +25 -0
  30. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts +4 -1
  31. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js +3 -2
  32. package/esm/hooks/useMultiInputRangeField/useTextFieldProps.d.ts +30 -0
  33. package/esm/hooks/useMultiInputRangeField/useTextFieldProps.js +141 -0
  34. package/esm/index.js +1 -1
  35. package/esm/internals/hooks/models/index.d.ts +1 -1
  36. package/esm/internals/hooks/models/useRangePicker.d.ts +1 -8
  37. package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +8 -75
  38. package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts +16 -4
  39. package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +17 -47
  40. package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts +17 -4
  41. package/esm/internals/hooks/useRangePosition.d.ts +1 -4
  42. package/esm/internals/hooks/useRangePosition.js +1 -18
  43. package/esm/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +3 -3
  44. package/esm/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +26 -32
  45. package/esm/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts +1 -1
  46. package/esm/internals/utils/createMultiInputRangeField/useTextFieldProps.d.ts +12 -0
  47. package/esm/internals/utils/createMultiInputRangeField/useTextFieldProps.js +36 -0
  48. package/esm/internals/utils/date-fields-utils.d.ts +4 -1
  49. package/esm/internals/utils/date-fields-utils.js +5 -1
  50. package/esm/internals/utils/releaseInfo.js +1 -1
  51. package/esm/managers/useDateRangeManager.js +8 -1
  52. package/esm/managers/useDateTimeRangeManager.js +8 -1
  53. package/esm/managers/useTimeRangeManager.js +10 -1
  54. package/esm/models/fields.d.ts +5 -18
  55. package/hooks/index.d.ts +2 -1
  56. package/hooks/useMultiInputRangeField/index.d.ts +2 -1
  57. package/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts +37 -18
  58. package/hooks/useMultiInputRangeField/useMultiInputRangeField.js +40 -51
  59. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.d.ts +11 -0
  60. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.js +31 -0
  61. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts +4 -1
  62. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js +3 -1
  63. package/hooks/useMultiInputRangeField/useTextFieldProps.d.ts +30 -0
  64. package/hooks/useMultiInputRangeField/useTextFieldProps.js +149 -0
  65. package/index.js +1 -1
  66. package/internals/hooks/models/index.d.ts +1 -1
  67. package/internals/hooks/models/useRangePicker.d.ts +1 -8
  68. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +7 -74
  69. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts +16 -4
  70. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +17 -47
  71. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts +17 -4
  72. package/internals/hooks/useRangePosition.d.ts +1 -4
  73. package/internals/hooks/useRangePosition.js +1 -18
  74. package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +3 -3
  75. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +25 -31
  76. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts +1 -1
  77. package/internals/utils/createMultiInputRangeField/useTextFieldProps.d.ts +12 -0
  78. package/internals/utils/createMultiInputRangeField/useTextFieldProps.js +44 -0
  79. package/internals/utils/date-fields-utils.d.ts +4 -1
  80. package/internals/utils/date-fields-utils.js +6 -1
  81. package/internals/utils/releaseInfo.js +1 -1
  82. package/managers/useDateRangeManager.js +8 -1
  83. package/managers/useDateTimeRangeManager.js +8 -1
  84. package/managers/useTimeRangeManager.js +10 -1
  85. package/models/fields.d.ts +5 -18
  86. package/modern/DateRangePicker/DateRangePicker.types.d.ts +2 -2
  87. package/modern/DateTimeRangePicker/DateTimeRangePicker.types.d.ts +2 -2
  88. package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js +2 -2
  89. package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +2 -2
  90. package/modern/MobileDateRangePicker/MobileDateRangePicker.js +2 -2
  91. package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +2 -2
  92. package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
  93. package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
  94. package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
  95. package/modern/dateRangeViewRenderers/dateRangeViewRenderers.d.ts +6 -4
  96. package/modern/dateRangeViewRenderers/dateRangeViewRenderers.js +13 -8
  97. package/modern/hooks/index.d.ts +2 -1
  98. package/modern/hooks/useMultiInputRangeField/index.d.ts +2 -1
  99. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts +37 -18
  100. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeField.js +41 -50
  101. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.d.ts +11 -0
  102. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.js +25 -0
  103. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts +4 -1
  104. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js +3 -2
  105. package/modern/hooks/useMultiInputRangeField/useTextFieldProps.d.ts +30 -0
  106. package/modern/hooks/useMultiInputRangeField/useTextFieldProps.js +141 -0
  107. package/modern/index.js +1 -1
  108. package/modern/internals/hooks/models/index.d.ts +1 -1
  109. package/modern/internals/hooks/models/useRangePicker.d.ts +1 -8
  110. package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +8 -75
  111. package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts +16 -4
  112. package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +17 -47
  113. package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts +17 -4
  114. package/modern/internals/hooks/useRangePosition.d.ts +1 -4
  115. package/modern/internals/hooks/useRangePosition.js +1 -18
  116. package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.js +3 -3
  117. package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +26 -32
  118. package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts +1 -1
  119. package/modern/internals/utils/createMultiInputRangeField/useTextFieldProps.d.ts +12 -0
  120. package/modern/internals/utils/createMultiInputRangeField/useTextFieldProps.js +36 -0
  121. package/modern/internals/utils/date-fields-utils.d.ts +4 -1
  122. package/modern/internals/utils/date-fields-utils.js +5 -1
  123. package/modern/internals/utils/releaseInfo.js +1 -1
  124. package/modern/managers/useDateRangeManager.js +8 -1
  125. package/modern/managers/useDateTimeRangeManager.js +8 -1
  126. package/modern/managers/useTimeRangeManager.js +10 -1
  127. package/modern/models/fields.d.ts +5 -18
  128. package/package.json +4 -4
  129. package/tsconfig.build.tsbuildinfo +1 -1
  130. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.d.ts +0 -17
  131. package/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +0 -59
  132. package/esm/internals/hooks/useEnrichedRangePickerField.d.ts +0 -70
  133. package/esm/internals/hooks/useEnrichedRangePickerField.js +0 -236
  134. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.d.ts +0 -17
  135. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +0 -66
  136. package/internals/hooks/useEnrichedRangePickerField.d.ts +0 -70
  137. package/internals/hooks/useEnrichedRangePickerField.js +0 -245
  138. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.d.ts +0 -17
  139. package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +0 -59
  140. package/modern/internals/hooks/useEnrichedRangePickerField.d.ts +0 -70
  141. package/modern/internals/hooks/useEnrichedRangePickerField.js +0 -236
@@ -1,17 +0,0 @@
1
- import { UseDateManagerReturnValue, UseDateTimeManagerReturnValue, UseTimeManagerReturnValue } from '@mui/x-date-pickers/managers';
2
- import { PickerValueType } from '@mui/x-date-pickers/models';
3
- import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldResponse } from '@mui/x-date-pickers/internals';
4
- import { PickerAnyRangeManager } from "../../internals/models/managers.js";
5
- import { UseDateRangeManagerReturnValue, UseDateTimeRangeManagerReturnValue, UseTimeRangeManagerReturnValue } from "../../managers/index.js";
6
- /**
7
- * @ignore - internal hook.
8
- */
9
- export declare function useMultiInputRangeFieldTextFieldProps<TManager extends PickerAnyRangeManager, TForwardedProps extends {
10
- [key: string]: any;
11
- }>(parameters: UseMultiInputRangeFieldTextFieldProps<TManager>): Omit<UseFieldResponse<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TForwardedProps>, "clearable" | "onClear">;
12
- interface UseMultiInputRangeFieldTextFieldProps<TManager extends PickerAnyRangeManager> {
13
- valueType: PickerValueType;
14
- fieldProps: PickerManagerFieldInternalProps<GetDerivedManager<TManager>>;
15
- }
16
- type GetDerivedManager<TManager extends PickerAnyRangeManager> = TManager extends UseDateRangeManagerReturnValue<infer TEnableAccessibleFieldDOMStructure> ? UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure> : TManager extends UseTimeRangeManagerReturnValue<infer TEnableAccessibleFieldDOMStructure> ? UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure> : TManager extends UseDateTimeRangeManagerReturnValue<infer TEnableAccessibleFieldDOMStructure> ? UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure> : never;
17
- export {};
@@ -1,59 +0,0 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
- const _excluded = ["clearable", "onClear"];
3
- import { useDateManager, useDateTimeManager, useTimeManager } from '@mui/x-date-pickers/managers';
4
- import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
5
- import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
6
- /**
7
- * @ignore - internal hook.
8
- */
9
- export function useMultiInputRangeFieldTextFieldProps(parameters) {
10
- const {
11
- fieldProps,
12
- valueType
13
- } = parameters;
14
- let useManager;
15
- switch (valueType) {
16
- case 'date':
17
- {
18
- useManager = useDateManager;
19
- break;
20
- }
21
- case 'time':
22
- {
23
- useManager = useTimeManager;
24
- break;
25
- }
26
- case 'date-time':
27
- {
28
- useManager = useDateTimeManager;
29
- break;
30
- }
31
- default:
32
- {
33
- throw new Error(`Unknown valueType: ${valueType}`);
34
- }
35
- }
36
- const manager = useManager({
37
- enableAccessibleFieldDOMStructure: fieldProps.enableAccessibleFieldDOMStructure
38
- });
39
- const {
40
- forwardedProps,
41
- internalProps
42
- } = useSplitFieldProps(fieldProps, 'date');
43
- const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
44
- manager,
45
- internalProps
46
- });
47
- const _ref = useField({
48
- forwardedProps,
49
- internalProps: internalPropsWithDefaults,
50
- valueManager: manager.internal_valueManager,
51
- fieldValueManager: manager.internal_fieldValueManager,
52
- validator: manager.validator,
53
- valueType: manager.valueType,
54
- // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
55
- getOpenPickerButtonAriaLabel: () => ''
56
- }),
57
- fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
58
- return fieldResponse;
59
- }
@@ -1,70 +0,0 @@
1
- import * as React from 'react';
2
- import Stack, { StackProps } from '@mui/material/Stack';
3
- import Typography, { TypographyProps } from '@mui/material/Typography';
4
- import { SlotComponentProps } from '@mui/utils';
5
- import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
6
- import { FieldSelectedSections, FieldRef, PickerOwnerState, FieldOwnerState } from '@mui/x-date-pickers/models';
7
- import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
8
- import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
9
- import { PickerVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerRangeValue, PickerValue, PickerContextValue, PickerFieldPrivateContextValue } from '@mui/x-date-pickers/internals';
10
- import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
11
- import { RangePosition, FieldType, PickerRangeFieldSlotProps } from "../../models/index.js";
12
- import { UseRangePositionResponse } from "./useRangePosition.js";
13
- import { BaseMultiInputFieldProps } from "../models/fields.js";
14
- export interface RangePickerFieldSlots extends UseClearableFieldSlots {
15
- field: React.ElementType;
16
- /**
17
- * Element rendered at the root.
18
- * Ignored if the field has only one input.
19
- */
20
- fieldRoot?: React.ElementType<StackProps>;
21
- /**
22
- * Element rendered between the two inputs.
23
- * Ignored if the field has only one input.
24
- */
25
- fieldSeparator?: React.ElementType<TypographyProps>;
26
- /**
27
- * Form control with an input to render a date or time inside the default field.
28
- * It is rendered twice: once for the start element and once for the end element.
29
- * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
30
- */
31
- textField?: React.ElementType;
32
- }
33
- export interface RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
34
- field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
35
- fieldRoot?: SlotComponentProps<typeof Stack, {}, FieldOwnerState>;
36
- fieldSeparator?: SlotComponentProps<typeof Typography, {}, FieldOwnerState>;
37
- textField?: SlotComponentProps<typeof PickersTextField, {}, FieldOwnerState & {
38
- position?: RangePosition;
39
- }>;
40
- }
41
- export type RangePickerPropsForFieldSlot<TIsSingleInput extends boolean> = (TIsSingleInput extends true ? BaseSingleInputFieldProps<PickerRangeValue> : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps : never);
42
- export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends UseRangePositionResponse {
43
- contextValue: PickerContextValue<PickerRangeValue, TView, TError>;
44
- fieldPrivateContextValue: PickerFieldPrivateContextValue;
45
- variant: PickerVariant;
46
- fieldType: FieldType;
47
- readOnly?: boolean;
48
- labelId?: string;
49
- disableOpenPicker?: boolean;
50
- onBlur?: () => void;
51
- localeText: PickersInputLocaleText | undefined;
52
- pickerSlotProps: RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure> | undefined;
53
- pickerSlots: RangePickerFieldSlots | undefined;
54
- fieldProps: RangePickerPropsForFieldSlot<TIsSingleInput>;
55
- anchorRef?: React.Ref<HTMLElement>;
56
- currentView?: TView | null;
57
- initialView?: TView;
58
- startFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
59
- endFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
60
- singleInputFieldRef: React.RefObject<FieldRef<PickerRangeValue> | null>;
61
- }
62
- export declare const useEnrichedRangePickerField: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError>(params: UseEnrichedRangePickerFieldPropsParams<boolean, TView, TEnableAccessibleFieldDOMStructure, TError>) => {
63
- fieldProps: BaseMultiInputFieldProps;
64
- fieldPrivateContextValue: {};
65
- } | {
66
- fieldProps: BaseSingleInputFieldProps<PickerRangeValue>;
67
- fieldPrivateContextValue: {
68
- onSelectedSectionsChange: (selectedSection: FieldSelectedSections) => void;
69
- };
70
- };
@@ -1,236 +0,0 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
- import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["clearable", "onClear"];
4
- import * as React from 'react';
5
- import resolveComponentProps from '@mui/utils/resolveComponentProps';
6
- import useEventCallback from '@mui/utils/useEventCallback';
7
- import useForkRef from '@mui/utils/useForkRef';
8
- import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
9
- import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
10
- const useMultiInputFieldSlotProps = ({
11
- contextValue,
12
- variant,
13
- readOnly,
14
- labelId,
15
- disableOpenPicker,
16
- onBlur,
17
- rangePosition,
18
- setRangePosition,
19
- localeText: inLocaleText,
20
- pickerSlotProps,
21
- pickerSlots,
22
- fieldProps,
23
- anchorRef,
24
- currentView,
25
- initialView,
26
- startFieldRef,
27
- endFieldRef
28
- }) => {
29
- const translations = usePickerTranslations();
30
- const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
31
- const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
32
- const previousRangePosition = React.useRef(rangePosition);
33
- React.useEffect(() => {
34
- if (!contextValue.open || variant === 'mobile') {
35
- return;
36
- }
37
- const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
38
- currentFieldRef.current?.focusField();
39
- if (!currentFieldRef.current || !currentView) {
40
- // could happen when the user is switching between the inputs
41
- previousRangePosition.current = rangePosition;
42
- return;
43
- }
44
-
45
- // bring back focus to the field
46
- // currentView is present on DateTimeRangePicker
47
- currentFieldRef.current.setSelectedSections(
48
- // use the current view or `0` when the range position has just been swapped
49
- previousRangePosition.current === rangePosition ? currentView : 0);
50
- previousRangePosition.current = rangePosition;
51
- }, [rangePosition, contextValue.open, currentView, startFieldRef, endFieldRef, variant]);
52
- const openRangeStartSelection = event => {
53
- event.stopPropagation();
54
- setRangePosition('start');
55
- if (!readOnly && !disableOpenPicker) {
56
- event.preventDefault();
57
- contextValue.setOpen(true);
58
- }
59
- };
60
- const openRangeEndSelection = event => {
61
- event.stopPropagation();
62
- setRangePosition('end');
63
- if (!readOnly && !disableOpenPicker) {
64
- event.preventDefault();
65
- contextValue.setOpen(true);
66
- }
67
- };
68
- const handleFocusStart = () => {
69
- if (contextValue.open) {
70
- setRangePosition('start');
71
- if (previousRangePosition.current !== 'start' && initialView) {
72
- contextValue.setView?.(initialView);
73
- }
74
- }
75
- };
76
- const handleFocusEnd = () => {
77
- if (contextValue.open) {
78
- setRangePosition('end');
79
- if (previousRangePosition.current !== 'end' && initialView) {
80
- contextValue.setView?.(initialView);
81
- }
82
- }
83
- };
84
- const slots = _extends({
85
- textField: pickerSlots?.textField,
86
- root: pickerSlots?.fieldRoot,
87
- separator: pickerSlots?.fieldSeparator
88
- }, fieldProps.slots);
89
- const slotProps = _extends({}, fieldProps.slotProps, {
90
- textField: ownerState => {
91
- const resolvedComponentProps = resolveComponentProps(pickerSlotProps?.textField, ownerState);
92
- let textFieldProps;
93
- let InputProps;
94
- if (ownerState.position === 'start') {
95
- textFieldProps = _extends({
96
- label: inLocaleText?.start ?? translations.start,
97
- onKeyDown: onSpaceOrEnter(openRangeStartSelection),
98
- onFocus: handleFocusStart,
99
- focused: contextValue.open ? rangePosition === 'start' : undefined
100
- }, !readOnly && !contextValue.disabled && {
101
- onClick: openRangeStartSelection
102
- }, variant === 'mobile' && {
103
- readOnly: true
104
- });
105
- if (anchorRef) {
106
- InputProps = _extends({}, resolvedComponentProps?.InputProps, {
107
- ref: anchorRef
108
- });
109
- }
110
- } else {
111
- textFieldProps = _extends({
112
- label: inLocaleText?.end ?? translations.end,
113
- onKeyDown: onSpaceOrEnter(openRangeEndSelection),
114
- onFocus: handleFocusEnd,
115
- focused: contextValue.open ? rangePosition === 'end' : undefined
116
- }, !readOnly && !contextValue.disabled && {
117
- onClick: openRangeEndSelection
118
- }, variant === 'mobile' && {
119
- readOnly: true
120
- });
121
- InputProps = resolvedComponentProps?.InputProps;
122
- }
123
- return _extends({}, labelId != null && {
124
- id: `${labelId}-${ownerState.position}`
125
- }, textFieldProps, resolveComponentProps(pickerSlotProps?.textField, ownerState), {
126
- InputProps
127
- });
128
- },
129
- root: ownerState => {
130
- const rootProps = {
131
- onBlur
132
- };
133
- return _extends({}, rootProps, resolveComponentProps(pickerSlotProps?.fieldRoot, ownerState));
134
- },
135
- separator: pickerSlotProps?.fieldSeparator
136
- });
137
-
138
- /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
139
- const _ref = fieldProps,
140
- restFieldProps = _objectWithoutPropertiesLoose(_ref, _excluded);
141
- const enrichedFieldProps = _extends({}, restFieldProps, {
142
- unstableStartFieldRef: handleStartFieldRef,
143
- unstableEndFieldRef: handleEndFieldRef,
144
- slots,
145
- slotProps
146
- });
147
- return {
148
- fieldProps: enrichedFieldProps,
149
- fieldPrivateContextValue: {}
150
- };
151
- };
152
- const useSingleInputFieldSlotProps = ({
153
- contextValue,
154
- fieldPrivateContextValue,
155
- variant,
156
- readOnly,
157
- labelId,
158
- disableOpenPicker,
159
- onBlur,
160
- rangePosition,
161
- setRangePosition,
162
- singleInputFieldRef,
163
- fieldProps,
164
- currentView
165
- }) => {
166
- const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef);
167
- React.useEffect(() => {
168
- if (!contextValue.open || !singleInputFieldRef.current || variant === 'mobile') {
169
- return;
170
- }
171
- if (singleInputFieldRef.current.isFieldFocused()) {
172
- return;
173
- }
174
-
175
- // bring back focus to the field with the current view section selected
176
- if (currentView) {
177
- const sections = singleInputFieldRef.current.getSections().map(section => section.type);
178
- const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView);
179
- singleInputFieldRef.current?.focusField(newSelectedSection);
180
- }
181
- }, [rangePosition, contextValue.open, currentView, singleInputFieldRef, variant]);
182
- const updateRangePosition = () => {
183
- if (!singleInputFieldRef.current?.isFieldFocused()) {
184
- return;
185
- }
186
- const sections = singleInputFieldRef.current.getSections();
187
- const activeSectionIndex = singleInputFieldRef.current?.getActiveSectionIndex();
188
- const domRangePosition = activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end';
189
- if (domRangePosition != null && domRangePosition !== rangePosition) {
190
- setRangePosition(domRangePosition);
191
- }
192
- };
193
- const handleSelectedSectionsChange = useEventCallback(selectedSection => {
194
- setTimeout(updateRangePosition);
195
- fieldPrivateContextValue.onSelectedSectionsChange?.(selectedSection);
196
- });
197
- const openPicker = event => {
198
- event.stopPropagation();
199
- if (!readOnly && !disableOpenPicker) {
200
- event.preventDefault();
201
- contextValue.setOpen(true);
202
- }
203
- };
204
- const enrichedFieldProps = _extends({}, fieldProps, {
205
- unstableFieldRef: handleFieldRef,
206
- onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown),
207
- onBlur,
208
- focused: contextValue.open ? true : undefined
209
- }, labelId != null && {
210
- id: labelId
211
- }, variant === 'mobile' && {
212
- readOnly: true
213
- }, !readOnly && !contextValue.disabled && {
214
- onClick: openPicker
215
- });
216
- return {
217
- fieldProps: enrichedFieldProps,
218
- fieldPrivateContextValue: {
219
- onSelectedSectionsChange: handleSelectedSectionsChange
220
- }
221
- };
222
- };
223
- export const useEnrichedRangePickerField = params => {
224
- /* eslint-disable react-hooks/rules-of-hooks */
225
- if (process.env.NODE_ENV !== 'production') {
226
- const fieldTypeRef = React.useRef(params.fieldType);
227
- if (params.fieldType !== fieldTypeRef.current) {
228
- console.error('Should not switch between a multi input field and a single input field on a range picker.');
229
- }
230
- }
231
- if (params.fieldType === 'multi-input') {
232
- return useMultiInputFieldSlotProps(params);
233
- }
234
- return useSingleInputFieldSlotProps(params);
235
- /* eslint-enable react-hooks/rules-of-hooks */
236
- };
@@ -1,17 +0,0 @@
1
- import { UseDateManagerReturnValue, UseDateTimeManagerReturnValue, UseTimeManagerReturnValue } from '@mui/x-date-pickers/managers';
2
- import { PickerValueType } from '@mui/x-date-pickers/models';
3
- import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldResponse } from '@mui/x-date-pickers/internals';
4
- import { PickerAnyRangeManager } from "../../internals/models/managers.js";
5
- import { UseDateRangeManagerReturnValue, UseDateTimeRangeManagerReturnValue, UseTimeRangeManagerReturnValue } from "../../managers/index.js";
6
- /**
7
- * @ignore - internal hook.
8
- */
9
- export declare function useMultiInputRangeFieldTextFieldProps<TManager extends PickerAnyRangeManager, TForwardedProps extends {
10
- [key: string]: any;
11
- }>(parameters: UseMultiInputRangeFieldTextFieldProps<TManager>): Omit<UseFieldResponse<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TForwardedProps>, "clearable" | "onClear">;
12
- interface UseMultiInputRangeFieldTextFieldProps<TManager extends PickerAnyRangeManager> {
13
- valueType: PickerValueType;
14
- fieldProps: PickerManagerFieldInternalProps<GetDerivedManager<TManager>>;
15
- }
16
- type GetDerivedManager<TManager extends PickerAnyRangeManager> = TManager extends UseDateRangeManagerReturnValue<infer TEnableAccessibleFieldDOMStructure> ? UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure> : TManager extends UseTimeRangeManagerReturnValue<infer TEnableAccessibleFieldDOMStructure> ? UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure> : TManager extends UseDateTimeRangeManagerReturnValue<infer TEnableAccessibleFieldDOMStructure> ? UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure> : never;
17
- export {};
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.useMultiInputRangeFieldTextFieldProps = useMultiInputRangeFieldTextFieldProps;
8
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
- var _managers = require("@mui/x-date-pickers/managers");
10
- var _hooks = require("@mui/x-date-pickers/hooks");
11
- var _internals = require("@mui/x-date-pickers/internals");
12
- const _excluded = ["clearable", "onClear"];
13
- /**
14
- * @ignore - internal hook.
15
- */
16
- function useMultiInputRangeFieldTextFieldProps(parameters) {
17
- const {
18
- fieldProps,
19
- valueType
20
- } = parameters;
21
- let useManager;
22
- switch (valueType) {
23
- case 'date':
24
- {
25
- useManager = _managers.useDateManager;
26
- break;
27
- }
28
- case 'time':
29
- {
30
- useManager = _managers.useTimeManager;
31
- break;
32
- }
33
- case 'date-time':
34
- {
35
- useManager = _managers.useDateTimeManager;
36
- break;
37
- }
38
- default:
39
- {
40
- throw new Error(`Unknown valueType: ${valueType}`);
41
- }
42
- }
43
- const manager = useManager({
44
- enableAccessibleFieldDOMStructure: fieldProps.enableAccessibleFieldDOMStructure
45
- });
46
- const {
47
- forwardedProps,
48
- internalProps
49
- } = (0, _hooks.useSplitFieldProps)(fieldProps, 'date');
50
- const internalPropsWithDefaults = (0, _internals.useFieldInternalPropsWithDefaults)({
51
- manager,
52
- internalProps
53
- });
54
- const _ref = (0, _internals.useField)({
55
- forwardedProps,
56
- internalProps: internalPropsWithDefaults,
57
- valueManager: manager.internal_valueManager,
58
- fieldValueManager: manager.internal_fieldValueManager,
59
- validator: manager.validator,
60
- valueType: manager.valueType,
61
- // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
62
- getOpenPickerButtonAriaLabel: () => ''
63
- }),
64
- fieldResponse = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
65
- return fieldResponse;
66
- }
@@ -1,70 +0,0 @@
1
- import * as React from 'react';
2
- import Stack, { StackProps } from '@mui/material/Stack';
3
- import Typography, { TypographyProps } from '@mui/material/Typography';
4
- import { SlotComponentProps } from '@mui/utils';
5
- import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
6
- import { FieldSelectedSections, FieldRef, PickerOwnerState, FieldOwnerState } from '@mui/x-date-pickers/models';
7
- import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
8
- import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
9
- import { PickerVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerRangeValue, PickerValue, PickerContextValue, PickerFieldPrivateContextValue } from '@mui/x-date-pickers/internals';
10
- import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
11
- import { RangePosition, FieldType, PickerRangeFieldSlotProps } from "../../models/index.js";
12
- import { UseRangePositionResponse } from "./useRangePosition.js";
13
- import { BaseMultiInputFieldProps } from "../models/fields.js";
14
- export interface RangePickerFieldSlots extends UseClearableFieldSlots {
15
- field: React.ElementType;
16
- /**
17
- * Element rendered at the root.
18
- * Ignored if the field has only one input.
19
- */
20
- fieldRoot?: React.ElementType<StackProps>;
21
- /**
22
- * Element rendered between the two inputs.
23
- * Ignored if the field has only one input.
24
- */
25
- fieldSeparator?: React.ElementType<TypographyProps>;
26
- /**
27
- * Form control with an input to render a date or time inside the default field.
28
- * It is rendered twice: once for the start element and once for the end element.
29
- * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
30
- */
31
- textField?: React.ElementType;
32
- }
33
- export interface RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
34
- field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
35
- fieldRoot?: SlotComponentProps<typeof Stack, {}, FieldOwnerState>;
36
- fieldSeparator?: SlotComponentProps<typeof Typography, {}, FieldOwnerState>;
37
- textField?: SlotComponentProps<typeof PickersTextField, {}, FieldOwnerState & {
38
- position?: RangePosition;
39
- }>;
40
- }
41
- export type RangePickerPropsForFieldSlot<TIsSingleInput extends boolean> = (TIsSingleInput extends true ? BaseSingleInputFieldProps<PickerRangeValue> : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps : never);
42
- export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends UseRangePositionResponse {
43
- contextValue: PickerContextValue<PickerRangeValue, TView, TError>;
44
- fieldPrivateContextValue: PickerFieldPrivateContextValue;
45
- variant: PickerVariant;
46
- fieldType: FieldType;
47
- readOnly?: boolean;
48
- labelId?: string;
49
- disableOpenPicker?: boolean;
50
- onBlur?: () => void;
51
- localeText: PickersInputLocaleText | undefined;
52
- pickerSlotProps: RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure> | undefined;
53
- pickerSlots: RangePickerFieldSlots | undefined;
54
- fieldProps: RangePickerPropsForFieldSlot<TIsSingleInput>;
55
- anchorRef?: React.Ref<HTMLElement>;
56
- currentView?: TView | null;
57
- initialView?: TView;
58
- startFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
59
- endFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
60
- singleInputFieldRef: React.RefObject<FieldRef<PickerRangeValue> | null>;
61
- }
62
- export declare const useEnrichedRangePickerField: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError>(params: UseEnrichedRangePickerFieldPropsParams<boolean, TView, TEnableAccessibleFieldDOMStructure, TError>) => {
63
- fieldProps: BaseMultiInputFieldProps;
64
- fieldPrivateContextValue: {};
65
- } | {
66
- fieldProps: BaseSingleInputFieldProps<PickerRangeValue>;
67
- fieldPrivateContextValue: {
68
- onSelectedSectionsChange: (selectedSection: FieldSelectedSections) => void;
69
- };
70
- };