@mui/x-date-pickers-pro 9.0.0-beta.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/CHANGELOG.md +267 -1
  2. package/DateRangeCalendar/DateRangeCalendar.js +9 -21
  3. package/DateRangeCalendar/DateRangeCalendar.mjs +9 -21
  4. package/DateRangeCalendar/DateRangeCalendar.types.d.mts +3 -3
  5. package/DateRangeCalendar/DateRangeCalendar.types.d.ts +3 -3
  6. package/DateRangePicker/DateRangePicker.d.mts +1 -1
  7. package/DateRangePicker/DateRangePicker.d.ts +1 -1
  8. package/DateRangePicker/DateRangePicker.js +1 -5
  9. package/DateRangePicker/DateRangePicker.mjs +1 -5
  10. package/DateRangePicker/DateRangePicker.types.d.mts +3 -3
  11. package/DateRangePicker/DateRangePicker.types.d.ts +3 -3
  12. package/DateRangePickerDay/DateRangePickerDay.d.mts +3 -3
  13. package/DateRangePickerDay/DateRangePickerDay.d.ts +3 -3
  14. package/DateRangePickerDay/DateRangePickerDay.js +416 -212
  15. package/DateRangePickerDay/DateRangePickerDay.mjs +418 -214
  16. package/DateRangePickerDay/DateRangePickerDay.types.d.mts +71 -23
  17. package/DateRangePickerDay/DateRangePickerDay.types.d.ts +71 -23
  18. package/DateRangePickerDay/dateRangePickerDayClasses.d.mts +35 -31
  19. package/DateRangePickerDay/dateRangePickerDayClasses.d.ts +35 -31
  20. package/DateRangePickerDay/dateRangePickerDayClasses.js +1 -1
  21. package/DateRangePickerDay/dateRangePickerDayClasses.mjs +1 -1
  22. package/DateTimeRangePicker/DateTimeRangePicker.d.mts +1 -1
  23. package/DateTimeRangePicker/DateTimeRangePicker.d.ts +1 -1
  24. package/DateTimeRangePicker/DateTimeRangePicker.js +1 -5
  25. package/DateTimeRangePicker/DateTimeRangePicker.mjs +1 -5
  26. package/DateTimeRangePicker/DateTimeRangePicker.types.d.mts +3 -3
  27. package/DateTimeRangePicker/DateTimeRangePicker.types.d.ts +3 -3
  28. package/DesktopDateRangePicker/DesktopDateRangePicker.d.mts +1 -1
  29. package/DesktopDateRangePicker/DesktopDateRangePicker.d.ts +1 -1
  30. package/DesktopDateRangePicker/DesktopDateRangePicker.js +1 -5
  31. package/DesktopDateRangePicker/DesktopDateRangePicker.mjs +1 -5
  32. package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.mts +3 -3
  33. package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts +3 -3
  34. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.d.mts +1 -1
  35. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.d.ts +1 -1
  36. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js +1 -5
  37. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.mjs +1 -5
  38. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.d.mts +3 -3
  39. package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.d.ts +3 -3
  40. package/DesktopTimeRangePicker/DesktopTimeRangePicker.d.mts +1 -1
  41. package/DesktopTimeRangePicker/DesktopTimeRangePicker.d.ts +1 -1
  42. package/DesktopTimeRangePicker/DesktopTimeRangePicker.js +0 -4
  43. package/DesktopTimeRangePicker/DesktopTimeRangePicker.mjs +0 -4
  44. package/DesktopTimeRangePicker/DesktopTimeRangePicker.types.d.mts +3 -3
  45. package/DesktopTimeRangePicker/DesktopTimeRangePicker.types.d.ts +3 -3
  46. package/MobileDateRangePicker/MobileDateRangePicker.d.mts +1 -1
  47. package/MobileDateRangePicker/MobileDateRangePicker.d.ts +1 -1
  48. package/MobileDateRangePicker/MobileDateRangePicker.js +1 -5
  49. package/MobileDateRangePicker/MobileDateRangePicker.mjs +1 -5
  50. package/MobileDateRangePicker/MobileDateRangePicker.types.d.mts +3 -3
  51. package/MobileDateRangePicker/MobileDateRangePicker.types.d.ts +3 -3
  52. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.d.mts +1 -1
  53. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.d.ts +1 -1
  54. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js +1 -5
  55. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.mjs +1 -5
  56. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.d.mts +3 -3
  57. package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.d.ts +3 -3
  58. package/MobileTimeRangePicker/MobileTimeRangePicker.d.mts +1 -1
  59. package/MobileTimeRangePicker/MobileTimeRangePicker.d.ts +1 -1
  60. package/MobileTimeRangePicker/MobileTimeRangePicker.js +0 -4
  61. package/MobileTimeRangePicker/MobileTimeRangePicker.mjs +0 -4
  62. package/MobileTimeRangePicker/MobileTimeRangePicker.types.d.mts +3 -3
  63. package/MobileTimeRangePicker/MobileTimeRangePicker.types.d.ts +3 -3
  64. package/MultiInputDateRangeField/MultiInputDateRangeField.d.mts +2 -2
  65. package/MultiInputDateRangeField/MultiInputDateRangeField.d.ts +2 -2
  66. package/MultiInputDateRangeField/MultiInputDateRangeField.js +0 -4
  67. package/MultiInputDateRangeField/MultiInputDateRangeField.mjs +0 -4
  68. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.d.mts +2 -2
  69. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.d.ts +2 -2
  70. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +0 -4
  71. package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.mjs +0 -4
  72. package/MultiInputTimeRangeField/MultiInputTimeRangeField.d.mts +2 -2
  73. package/MultiInputTimeRangeField/MultiInputTimeRangeField.d.ts +2 -2
  74. package/MultiInputTimeRangeField/MultiInputTimeRangeField.js +0 -4
  75. package/MultiInputTimeRangeField/MultiInputTimeRangeField.mjs +0 -4
  76. package/SingleInputDateRangeField/SingleInputDateRangeField.d.mts +1 -1
  77. package/SingleInputDateRangeField/SingleInputDateRangeField.d.ts +1 -1
  78. package/SingleInputDateRangeField/SingleInputDateRangeField.js +22 -28
  79. package/SingleInputDateRangeField/SingleInputDateRangeField.mjs +22 -28
  80. package/SingleInputDateRangeField/SingleInputDateRangeField.types.d.mts +2 -2
  81. package/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts +2 -2
  82. package/SingleInputDateRangeField/useSingleInputDateRangeField.d.mts +1 -1
  83. package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
  84. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.d.mts +1 -1
  85. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.d.ts +1 -1
  86. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +22 -28
  87. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.mjs +22 -28
  88. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.mts +2 -2
  89. package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts +2 -2
  90. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.mts +1 -1
  91. package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
  92. package/SingleInputTimeRangeField/SingleInputTimeRangeField.d.mts +1 -1
  93. package/SingleInputTimeRangeField/SingleInputTimeRangeField.d.ts +1 -1
  94. package/SingleInputTimeRangeField/SingleInputTimeRangeField.js +22 -28
  95. package/SingleInputTimeRangeField/SingleInputTimeRangeField.mjs +22 -28
  96. package/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.mts +2 -2
  97. package/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts +2 -2
  98. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.mts +1 -1
  99. package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
  100. package/StaticDateRangePicker/StaticDateRangePicker.js +1 -1
  101. package/StaticDateRangePicker/StaticDateRangePicker.mjs +1 -1
  102. package/TimeRangePicker/TimeRangePicker.d.mts +1 -1
  103. package/TimeRangePicker/TimeRangePicker.d.ts +1 -1
  104. package/TimeRangePicker/TimeRangePicker.js +0 -4
  105. package/TimeRangePicker/TimeRangePicker.mjs +0 -4
  106. package/TimeRangePicker/TimeRangePicker.types.d.mts +3 -3
  107. package/TimeRangePicker/TimeRangePicker.types.d.ts +3 -3
  108. package/hooks/useMultiInputRangeField/useMultiInputRangeField.d.mts +8 -9
  109. package/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts +8 -9
  110. package/hooks/useMultiInputRangeField/useMultiInputRangeField.js +4 -7
  111. package/hooks/useMultiInputRangeField/useMultiInputRangeField.mjs +4 -7
  112. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.mts +1 -1
  113. package/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts +1 -1
  114. package/hooks/useMultiInputRangeField/useTextFieldProps.d.mts +3 -3
  115. package/hooks/useMultiInputRangeField/useTextFieldProps.d.ts +3 -3
  116. package/hooks/useMultiInputRangeField/useTextFieldProps.js +1 -3
  117. package/hooks/useMultiInputRangeField/useTextFieldProps.mjs +1 -3
  118. package/index.d.mts +0 -1
  119. package/index.d.ts +0 -1
  120. package/index.js +1 -12
  121. package/index.mjs +1 -2
  122. package/internals/constants/dimensions.d.mts +1 -2
  123. package/internals/constants/dimensions.d.ts +1 -2
  124. package/internals/constants/dimensions.js +7 -2
  125. package/internals/constants/dimensions.mjs +2 -2
  126. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.d.mts +2 -2
  127. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.d.ts +2 -2
  128. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +2 -2
  129. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.mjs +2 -2
  130. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.mts +5 -5
  131. package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts +5 -5
  132. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.mts +2 -2
  133. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.ts +2 -2
  134. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +2 -2
  135. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.mjs +2 -2
  136. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.mts +6 -6
  137. package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts +6 -6
  138. package/internals/models/fields.d.mts +1 -1
  139. package/internals/models/fields.d.ts +1 -1
  140. package/internals/models/managers.d.mts +1 -1
  141. package/internals/models/managers.d.ts +1 -1
  142. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +7 -6
  143. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.mjs +7 -6
  144. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.mts +4 -7
  145. package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts +4 -7
  146. package/internals/utils/createMultiInputRangeField/useTextFieldProps.js +7 -5
  147. package/internals/utils/createMultiInputRangeField/useTextFieldProps.mjs +7 -5
  148. package/internals/utils/valueManagers.js +2 -6
  149. package/internals/utils/valueManagers.mjs +3 -7
  150. package/managers/useDateRangeManager.d.mts +4 -6
  151. package/managers/useDateRangeManager.d.ts +4 -6
  152. package/managers/useDateRangeManager.js +1 -3
  153. package/managers/useDateRangeManager.mjs +1 -3
  154. package/managers/useDateTimeRangeManager.d.mts +4 -6
  155. package/managers/useDateTimeRangeManager.d.ts +4 -6
  156. package/managers/useDateTimeRangeManager.js +1 -3
  157. package/managers/useDateTimeRangeManager.mjs +1 -3
  158. package/managers/useTimeRangeManager.d.mts +4 -6
  159. package/managers/useTimeRangeManager.d.ts +4 -6
  160. package/managers/useTimeRangeManager.js +1 -3
  161. package/managers/useTimeRangeManager.mjs +1 -3
  162. package/models/fields.d.mts +2 -2
  163. package/models/fields.d.ts +2 -2
  164. package/package.json +7 -21
  165. package/themeAugmentation/components.d.mts +0 -4
  166. package/themeAugmentation/components.d.ts +0 -4
  167. package/themeAugmentation/overrides.d.mts +0 -2
  168. package/themeAugmentation/overrides.d.ts +0 -2
  169. package/themeAugmentation/props.d.mts +12 -14
  170. package/themeAugmentation/props.d.ts +12 -14
  171. package/DateRangePickerDay2/DateRangePickerDay2.d.mts +0 -7
  172. package/DateRangePickerDay2/DateRangePickerDay2.d.ts +0 -7
  173. package/DateRangePickerDay2/DateRangePickerDay2.js +0 -605
  174. package/DateRangePickerDay2/DateRangePickerDay2.mjs +0 -598
  175. package/DateRangePickerDay2/DateRangePickerDay2.types.d.mts +0 -92
  176. package/DateRangePickerDay2/DateRangePickerDay2.types.d.ts +0 -92
  177. package/DateRangePickerDay2/DateRangePickerDay2.types.js +0 -5
  178. package/DateRangePickerDay2/DateRangePickerDay2.types.mjs +0 -1
  179. package/DateRangePickerDay2/dateRangePickerDay2Classes.d.mts +0 -29
  180. package/DateRangePickerDay2/dateRangePickerDay2Classes.d.ts +0 -29
  181. package/DateRangePickerDay2/dateRangePickerDay2Classes.js +0 -14
  182. package/DateRangePickerDay2/dateRangePickerDay2Classes.mjs +0 -6
  183. package/DateRangePickerDay2/index.d.mts +0 -4
  184. package/DateRangePickerDay2/index.d.ts +0 -4
  185. package/DateRangePickerDay2/index.js +0 -25
  186. package/DateRangePickerDay2/index.mjs +0 -2
@@ -1,598 +0,0 @@
1
- 'use client';
2
-
3
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
- import _extends from "@babel/runtime/helpers/esm/extends";
5
- const _excluded = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableHighlightToday", "showDaysOutsideCurrentMonth", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "isVisuallySelected", "draggable"];
6
- import * as React from 'react';
7
- import PropTypes from 'prop-types';
8
- import clsx from 'clsx';
9
- import { alpha, styled, useThemeProps } from '@mui/material/styles';
10
- import ButtonBase from '@mui/material/ButtonBase';
11
- import useForkRef from '@mui/utils/useForkRef';
12
- import composeClasses from '@mui/utils/composeClasses';
13
- import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
14
- import { usePickerDayOwnerState } from '@mui/x-date-pickers/internals';
15
- import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
16
- import { dateRangePickerDay2Classes, getDateRangePickerDay2UtilityClass } from "./dateRangePickerDay2Classes.mjs";
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- const useUtilityClasses = (ownerState, classes) => {
19
- const {
20
- isDaySelected,
21
- disableHighlightToday,
22
- isDayCurrent,
23
- isDayDisabled,
24
- isDayOutsideMonth,
25
- isDayFillerCell,
26
- isDayPreviewStart,
27
- isDayPreviewEnd,
28
- isDayInsidePreview,
29
- isDayPreviewed,
30
- isDaySelectionStart,
31
- isDaySelectionEnd,
32
- isDayInsideSelection,
33
- isDayStartOfWeek,
34
- isDayEndOfWeek,
35
- isDayStartOfMonth,
36
- isDayEndOfMonth,
37
- isDayDraggable
38
- } = ownerState;
39
- const slots = {
40
- root: ['root', isDayDisabled && 'disabled', !disableHighlightToday && isDayCurrent && !isDaySelected && !isDayFillerCell && 'today', isDayOutsideMonth && 'dayOutsideMonth', isDayFillerCell && 'fillerCell', isDaySelected && 'selected', isDayPreviewStart && 'previewStart', isDayPreviewEnd && 'previewEnd', isDayInsidePreview && 'insidePreviewing', isDaySelectionStart && 'selectionStart', isDaySelectionEnd && 'selectionEnd', isDayInsideSelection && 'insideSelection', isDayEndOfWeek && 'endOfWeek', isDayStartOfWeek && 'startOfWeek', isDayPreviewed && 'previewed', isDayStartOfMonth && 'startOfMonth', isDayEndOfMonth && 'endOfMonth', isDayDraggable && 'draggable']
41
- };
42
- return composeClasses(slots, getDateRangePickerDay2UtilityClass, classes);
43
- };
44
- const highlightStyles = theme => ({
45
- content: '""' /* Creates an empty element */,
46
- height: '100%',
47
- backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
48
- boxSizing: 'border-box',
49
- left: 'calc(var(--PickerDay-horizontalMargin) * (-1))',
50
- right: 'calc(var(--PickerDay-horizontalMargin) * (-1))'
51
- });
52
- const previewStyles = theme => ({
53
- content: '""' /* Creates an empty element */,
54
- height: '100%',
55
- border: `1.2px dashed ${(theme.vars || theme).palette.divider}`,
56
- borderLeftColor: 'transparent',
57
- borderRightColor: 'transparent',
58
- boxSizing: 'border-box',
59
- borderOffset: '-1px',
60
- left: 'calc(-1 * var(--PickerDay-horizontalMargin))',
61
- right: 'calc(-1 * var(--PickerDay-horizontalMargin))'
62
- });
63
- const selectedDayStyles = theme => ({
64
- color: (theme.vars || theme).palette.primary.contrastText,
65
- backgroundColor: (theme.vars || theme).palette.primary.main,
66
- fontWeight: theme.typography.fontWeightMedium,
67
- '&:focus, &:hover': {
68
- willChange: 'background-color',
69
- backgroundColor: (theme.vars || theme).palette.primary.dark
70
- },
71
- [`&.${dateRangePickerDay2Classes.disabled}`]: {
72
- opacity: 0.6
73
- }
74
- });
75
- const DateRangePickerDay2Root = styled(ButtonBase, {
76
- name: 'MuiDateRangePickerDay2',
77
- slot: 'Root',
78
- overridesResolver: (props, styles) => {
79
- const {
80
- ownerState
81
- } = props;
82
- return [styles.root, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles.today, !ownerState.isDayOutsideMonth && styles.dayOutsideMonth, ownerState.isDayFillerCell && styles.fillerCell, ownerState.isDaySelected && !ownerState.isDayInsideSelection && styles.selected, ownerState.isDayPreviewStart && styles.previewStart, ownerState.isDayPreviewEnd && styles.previewEnd, ownerState.isDayInsidePreview && styles.insidePreviewing, ownerState.isDaySelectionStart && styles.selectionStart, ownerState.isDaySelectionEnd && styles.selectionEnd, ownerState.isDayInsideSelection && styles.insideSelection, ownerState.isDayDraggable && styles.draggable, ownerState.isDayStartOfWeek && styles.startOfWeek, ownerState.isDayEndOfWeek && styles.endOfWeek];
83
- }
84
- })(({
85
- theme
86
- }) => _extends({
87
- '--PickerDay-horizontalMargin': '2px',
88
- '--PickerDay-size': '36px'
89
- }, theme.typography.caption, {
90
- width: 'var(--PickerDay-size)',
91
- height: 'var(--PickerDay-size)',
92
- borderRadius: '18px',
93
- padding: 0,
94
- position: 'relative',
95
- marginLeft: 'var(--PickerDay-horizontalMargin)',
96
- marginRight: 'var(--PickerDay-horizontalMargin)',
97
- // explicitly setting to `transparent` to avoid potentially getting impacted by change from the overridden component
98
- backgroundColor: 'transparent',
99
- transition: theme.transitions.create('background-color', {
100
- duration: theme.transitions.duration.short
101
- }),
102
- color: (theme.vars || theme).palette.text.primary,
103
- '@media (pointer: fine)': {
104
- '&:hover': {
105
- backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
106
- }
107
- },
108
- '&:focus': {
109
- backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
110
- },
111
- zIndex: 1,
112
- isolation: 'isolate',
113
- '&::before, &::after': {
114
- zIndex: -1,
115
- position: 'absolute',
116
- pointerEvents: 'none',
117
- mixBlendMode: 'multiply'
118
- },
119
- variants: [{
120
- props: {
121
- isDayDisabled: true
122
- },
123
- style: {
124
- color: (theme.vars || theme).palette.text.disabled
125
- }
126
- }, {
127
- props: {
128
- isDayFillerCell: true
129
- },
130
- style: {
131
- // visibility: 'hidden' does not work here as it hides the element from screen readers
132
- // and results in unexpected relationships between week day and day columns.
133
- opacity: 0,
134
- pointerEvents: 'none'
135
- }
136
- }, {
137
- props: {
138
- isDayOutsideMonth: true
139
- },
140
- style: {
141
- color: (theme.vars || theme).palette.text.secondary
142
- }
143
- }, {
144
- props: {
145
- isDayCurrent: true,
146
- isDaySelected: false
147
- },
148
- style: {
149
- outline: `1px solid ${(theme.vars || theme).palette.text.secondary}`,
150
- outlineOffset: -1
151
- }
152
- }, {
153
- props: {
154
- isDayDraggable: true
155
- },
156
- style: {
157
- cursor: 'grab',
158
- touchAction: 'none'
159
- }
160
- }, {
161
- props: {
162
- isDayPreviewStart: true
163
- },
164
- style: {
165
- '::after': _extends({}, previewStyles(theme), {
166
- borderTopLeftRadius: 'inherit',
167
- borderBottomLeftRadius: 'inherit',
168
- borderLeftColor: (theme.vars || theme).palette.divider,
169
- left: 0
170
- })
171
- }
172
- }, {
173
- props: {
174
- isDayPreviewEnd: true
175
- },
176
- style: {
177
- '::after': _extends({}, previewStyles(theme), {
178
- borderTopRightRadius: 'inherit',
179
- borderBottomRightRadius: 'inherit',
180
- borderRightColor: (theme.vars || theme).palette.divider,
181
- right: 0
182
- })
183
- }
184
- }, {
185
- props: {
186
- isDayInsidePreview: true
187
- },
188
- style: {
189
- '::after': _extends({}, previewStyles(theme))
190
- }
191
- }, {
192
- props: {
193
- isDaySelectionStart: true
194
- },
195
- style: {
196
- '::before': _extends({}, highlightStyles(theme), {
197
- borderTopLeftRadius: 'inherit',
198
- borderBottomLeftRadius: 'inherit',
199
- left: 0
200
- })
201
- }
202
- }, {
203
- props: {
204
- isDaySelectionEnd: true
205
- },
206
- style: {
207
- '::before': _extends({}, highlightStyles(theme), {
208
- borderTopRightRadius: 'inherit',
209
- borderBottomRightRadius: 'inherit',
210
- right: 0
211
- }),
212
- '::after': {
213
- borderLeftColor: 'transparent'
214
- }
215
- }
216
- }, {
217
- props: {
218
- isDayInsideSelection: true
219
- },
220
- color: 'initial',
221
- background: 'initial',
222
- style: {
223
- '::before': _extends({}, highlightStyles(theme))
224
- }
225
- }, {
226
- props: {
227
- isDaySelected: true,
228
- isDayInsideSelection: false
229
- },
230
- style: _extends({}, selectedDayStyles(theme))
231
- }, {
232
- props: {
233
- isDaySelectionStart: true,
234
- isDaySelectionEnd: true
235
- },
236
- style: {
237
- '::before': {
238
- left: 0,
239
- right: 0
240
- }
241
- }
242
- }, {
243
- props: {
244
- isDaySelectionStart: true,
245
- isDaySelectionEnd: true,
246
- isDayPreviewEnd: false,
247
- isDayPreviewStart: false
248
- },
249
- style: {
250
- '::after': {
251
- left: 0,
252
- right: 0
253
- }
254
- }
255
- }, {
256
- props: {
257
- isDayPreviewEnd: true,
258
- isDayPreviewStart: true
259
- },
260
- style: {
261
- '::after': {
262
- left: 0,
263
- right: 0
264
- }
265
- }
266
- }, {
267
- props: {
268
- isDayEndOfWeek: true
269
- },
270
- style: {
271
- '::after': {
272
- borderTopRightRadius: 'inherit',
273
- borderBottomRightRadius: 'inherit',
274
- borderRightColor: (theme.vars || theme).palette.divider,
275
- right: 0
276
- },
277
- '::before': {
278
- borderTopRightRadius: 'inherit',
279
- borderBottomRightRadius: 'inherit',
280
- right: 0
281
- }
282
- }
283
- }, {
284
- props: {
285
- isDayStartOfWeek: true
286
- },
287
- style: {
288
- '::after': {
289
- borderTopLeftRadius: 'inherit',
290
- borderBottomLeftRadius: 'inherit',
291
- borderLeftColor: (theme.vars || theme).palette.divider,
292
- left: 0
293
- },
294
- '::before': {
295
- borderTopLeftRadius: 'inherit',
296
- borderBottomLeftRadius: 'inherit',
297
- left: 0
298
- }
299
- }
300
- }]
301
- }));
302
- const noop = () => {};
303
- const DateRangePickerDay2Raw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay2(inProps, forwardedRef) {
304
- const props = useThemeProps({
305
- props: inProps,
306
- name: 'MuiDateRangePickerDay2'
307
- });
308
- const adapter = usePickerAdapter();
309
- const {
310
- autoFocus = false,
311
- className,
312
- classes: classesProp,
313
- isAnimating,
314
- onClick,
315
- onDaySelect,
316
- onFocus = noop,
317
- onBlur = noop,
318
- onKeyDown = noop,
319
- onMouseDown = noop,
320
- onMouseEnter = noop,
321
- children,
322
- isFirstVisibleCell,
323
- isLastVisibleCell,
324
- day,
325
- selected,
326
- disabled,
327
- today,
328
- outsideCurrentMonth,
329
- disableHighlightToday,
330
- showDaysOutsideCurrentMonth,
331
- isEndOfHighlighting,
332
- isEndOfPreviewing,
333
- isHighlighting,
334
- isPreviewing,
335
- isStartOfHighlighting,
336
- isStartOfPreviewing,
337
- draggable
338
- } = props,
339
- other = _objectWithoutPropertiesLoose(props, _excluded);
340
- const pickersDayOwnerState = usePickerDayOwnerState({
341
- day,
342
- selected,
343
- disabled,
344
- today,
345
- outsideCurrentMonth,
346
- disableMargin: false,
347
- disableHighlightToday,
348
- showDaysOutsideCurrentMonth
349
- });
350
- const ownerState = _extends({}, pickersDayOwnerState, {
351
- // Properties that the Base UI implementation will have
352
- isDaySelectionStart: isStartOfHighlighting,
353
- isDaySelectionEnd: isEndOfHighlighting,
354
- isDayInsideSelection: isHighlighting && !isStartOfHighlighting && !isEndOfHighlighting,
355
- isDaySelected: isHighlighting || Boolean(selected),
356
- isDayPreviewed: isPreviewing,
357
- isDayPreviewStart: isStartOfPreviewing,
358
- isDayPreviewEnd: isEndOfPreviewing,
359
- isDayInsidePreview: isPreviewing && !isStartOfPreviewing && !isEndOfPreviewing,
360
- // Properties specific to the MUI implementation (some might be removed in the next major)
361
- isDayStartOfMonth: adapter.isSameDay(day, adapter.startOfMonth(day)),
362
- isDayEndOfMonth: adapter.isSameDay(day, adapter.endOfMonth(day)),
363
- isDayFirstVisibleCell: isFirstVisibleCell,
364
- isDayLastVisibleCell: isLastVisibleCell,
365
- isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth,
366
- isDayDraggable: Boolean(draggable)
367
- });
368
- const classes = useUtilityClasses(ownerState, classesProp);
369
- const ref = React.useRef(null);
370
- const handleRef = useForkRef(ref, forwardedRef);
371
-
372
- // Since this is rendered when a Popper is opened we can't use passive effects.
373
- // Focusing in passive effects in Popper causes scroll jump.
374
- useEnhancedEffect(() => {
375
- if (autoFocus && !disabled && !isAnimating && !outsideCurrentMonth) {
376
- // ref.current being null would be a bug in MUI
377
- ref.current.focus();
378
- }
379
- }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]);
380
-
381
- // For a day outside the current month, move the focus from mouseDown to mouseUp
382
- // Goal: have the onClick ends before sliding to the new month
383
- const handleMouseDown = event => {
384
- onMouseDown(event);
385
- if (outsideCurrentMonth) {
386
- event.preventDefault();
387
- }
388
- };
389
- const handleClick = event => {
390
- if (!disabled) {
391
- onDaySelect(day);
392
- }
393
- if (outsideCurrentMonth) {
394
- event.currentTarget.focus();
395
- }
396
- if (onClick) {
397
- onClick(event);
398
- }
399
- };
400
- return /*#__PURE__*/_jsx(DateRangePickerDay2Root, _extends({
401
- ref: handleRef,
402
- centerRipple: true
403
- // compat with DateRangePickerDay for tests
404
- ,
405
-
406
- disabled: ownerState.isDayFillerCell ? undefined : disabled,
407
- tabIndex: selected ? 0 : -1,
408
- onKeyDown: event => onKeyDown(event, day),
409
- onFocus: event => onFocus(event, day),
410
- onBlur: event => onBlur(event, day),
411
- onMouseEnter: event => onMouseEnter(event, day),
412
- onClick: handleClick,
413
- onMouseDown: handleMouseDown,
414
- draggable: draggable
415
- }, other, {
416
- ownerState: ownerState,
417
- className: clsx(classes.root, className),
418
- children: children ?? (ownerState.isDayFillerCell ? null : adapter.format(day, 'dayOfMonth'))
419
- }));
420
- });
421
- if (process.env.NODE_ENV !== "production") DateRangePickerDay2Raw.displayName = "DateRangePickerDay2Raw";
422
- process.env.NODE_ENV !== "production" ? DateRangePickerDay2Raw.propTypes = {
423
- // ----------------------------- Warning --------------------------------
424
- // | These PropTypes are generated from the TypeScript type definitions |
425
- // | To update them edit the TypeScript types and run "pnpm proptypes" |
426
- // ----------------------------------------------------------------------
427
- /**
428
- * A ref for imperative actions.
429
- * It currently only supports `focusVisible()` action.
430
- */
431
- action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
432
- current: PropTypes.shape({
433
- focusVisible: PropTypes.func.isRequired
434
- })
435
- })]),
436
- /**
437
- * If `true`, the ripples are centered.
438
- * They won't start at the cursor interaction position.
439
- * @default false
440
- */
441
- centerRipple: PropTypes.bool,
442
- /**
443
- * Override or extend the styles applied to the component.
444
- */
445
- classes: PropTypes.object,
446
- className: PropTypes.string,
447
- component: PropTypes.elementType,
448
- /**
449
- * The date to show.
450
- */
451
- day: PropTypes.object.isRequired,
452
- /**
453
- * If `true`, renders as disabled.
454
- * @default false
455
- */
456
- disabled: PropTypes.bool,
457
- /**
458
- * If `true`, today's date is rendering without highlighting with circle.
459
- * @default false
460
- */
461
- disableHighlightToday: PropTypes.bool,
462
- /**
463
- * If `true`, days are rendering without margin. Useful for displaying linked range of days.
464
- * @default false
465
- */
466
- disableMargin: PropTypes.bool,
467
- /**
468
- * If `true`, the ripple effect is disabled.
469
- *
470
- * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
471
- * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
472
- * @default false
473
- */
474
- disableRipple: PropTypes.bool,
475
- /**
476
- * If `true`, the touch ripple effect is disabled.
477
- * @default false
478
- */
479
- disableTouchRipple: PropTypes.bool,
480
- /**
481
- * If `true`, the day can be dragged to change the current date range.
482
- * @default false
483
- */
484
- draggable: PropTypes.bool,
485
- /**
486
- * If `true`, the base button will have a keyboard focus ripple.
487
- * @default false
488
- */
489
- focusRipple: PropTypes.bool,
490
- /**
491
- * This prop can help identify which element has keyboard focus.
492
- * The class name will be applied when the element gains the focus through keyboard interaction.
493
- * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
494
- * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
495
- * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
496
- * if needed.
497
- */
498
- focusVisibleClassName: PropTypes.string,
499
- isAnimating: PropTypes.bool,
500
- /**
501
- * Set to `true` if the `day` is the end of a highlighted date range.
502
- */
503
- isEndOfHighlighting: PropTypes.bool.isRequired,
504
- /**
505
- * Set to `true` if the `day` is the end of a previewing date range.
506
- */
507
- isEndOfPreviewing: PropTypes.bool.isRequired,
508
- /**
509
- * If `true`, day is the first visible cell of the month.
510
- * Either the first day of the month or the first day of the week depending on `showDaysOutsideCurrentMonth`.
511
- */
512
- isFirstVisibleCell: PropTypes.bool.isRequired,
513
- /**
514
- * Set to `true` if the `day` is in a highlighted date range.
515
- */
516
- isHighlighting: PropTypes.bool.isRequired,
517
- /**
518
- * If `true`, day is the last visible cell of the month.
519
- * Either the last day of the month or the last day of the week depending on `showDaysOutsideCurrentMonth`.
520
- */
521
- isLastVisibleCell: PropTypes.bool.isRequired,
522
- /**
523
- * Set to `true` if the `day` is in a preview date range.
524
- */
525
- isPreviewing: PropTypes.bool.isRequired,
526
- /**
527
- * Set to `true` if the `day` is the start of a highlighted date range.
528
- */
529
- isStartOfHighlighting: PropTypes.bool.isRequired,
530
- /**
531
- * Set to `true` if the `day` is the start of a previewing date range.
532
- */
533
- isStartOfPreviewing: PropTypes.bool.isRequired,
534
- /**
535
- * Indicates if the day should be visually selected.
536
- */
537
- isVisuallySelected: PropTypes.bool,
538
- onBlur: PropTypes.func,
539
- onDaySelect: PropTypes.func.isRequired,
540
- onFocus: PropTypes.func,
541
- /**
542
- * Callback fired when the component is focused with a keyboard.
543
- * We trigger a `onFocus` callback too.
544
- */
545
- onFocusVisible: PropTypes.func,
546
- onKeyDown: PropTypes.func,
547
- onMouseEnter: PropTypes.func,
548
- /**
549
- * If `true`, day is outside of month and will be hidden.
550
- */
551
- outsideCurrentMonth: PropTypes.bool.isRequired,
552
- /**
553
- * If `true`, renders as selected.
554
- * @default false
555
- */
556
- selected: PropTypes.bool,
557
- /**
558
- * If `true`, days outside the current month are rendered:
559
- *
560
- * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
561
- *
562
- * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
563
- *
564
- * - ignored if `calendars` equals more than `1` on range pickers.
565
- * @default false
566
- */
567
- showDaysOutsideCurrentMonth: PropTypes.bool,
568
- style: PropTypes.object,
569
- /**
570
- * The system prop that allows defining system overrides as well as additional CSS styles.
571
- */
572
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
573
- /**
574
- * @default 0
575
- */
576
- tabIndex: PropTypes.number,
577
- /**
578
- * If `true`, renders as today date.
579
- * @default false
580
- */
581
- today: PropTypes.bool,
582
- /**
583
- * Props applied to the `TouchRipple` element.
584
- */
585
- TouchRippleProps: PropTypes.object,
586
- /**
587
- * A ref that points to the `TouchRipple` element.
588
- */
589
- touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
590
- current: PropTypes.shape({
591
- pulsate: PropTypes.func.isRequired,
592
- start: PropTypes.func.isRequired,
593
- stop: PropTypes.func.isRequired
594
- })
595
- })])
596
- } : void 0;
597
- export const DateRangePickerDay2 = /*#__PURE__*/React.memo(DateRangePickerDay2Raw);
598
- if (process.env.NODE_ENV !== "production") DateRangePickerDay2.displayName = "DateRangePickerDay2";
@@ -1,92 +0,0 @@
1
- import { PickerDay2OwnerState, PickerDay2Props } from '@mui/x-date-pickers/PickerDay2';
2
- import { DateRangePickerDay2Classes } from "./dateRangePickerDay2Classes.mjs";
3
- export interface DateRangePickerDay2Props extends Omit<PickerDay2Props, 'classes'> {
4
- /**
5
- * Set to `true` if the `day` is in a highlighted date range.
6
- */
7
- isHighlighting: boolean;
8
- /**
9
- * Set to `true` if the `day` is the end of a highlighted date range.
10
- */
11
- isEndOfHighlighting: boolean;
12
- /**
13
- * Set to `true` if the `day` is the start of a highlighted date range.
14
- */
15
- isStartOfHighlighting: boolean;
16
- /**
17
- * Set to `true` if the `day` is in a preview date range.
18
- */
19
- isPreviewing: boolean;
20
- /**
21
- * Set to `true` if the `day` is the end of a previewing date range.
22
- */
23
- isEndOfPreviewing: boolean;
24
- /**
25
- * Set to `true` if the `day` is the start of a previewing date range.
26
- */
27
- isStartOfPreviewing: boolean;
28
- /**
29
- * Override or extend the styles applied to the component.
30
- */
31
- classes?: Partial<DateRangePickerDay2Classes>;
32
- /**
33
- * Indicates if the day should be visually selected.
34
- */
35
- isVisuallySelected?: boolean;
36
- /**
37
- * If `true`, the day can be dragged to change the current date range.
38
- * @default false
39
- */
40
- draggable?: boolean;
41
- }
42
- export interface DateRangePickerDay2OwnerState extends PickerDay2OwnerState {
43
- /**
44
- * Whether the day is the first day of the selected range.
45
- */
46
- isDaySelectionStart: boolean;
47
- /**
48
- * Whether the day is the last day of the selected range.
49
- */
50
- isDaySelectionEnd: boolean;
51
- /**
52
- * Whether the day is within the selected range and is not its first or last day.
53
- */
54
- isDayInsideSelection: boolean;
55
- /**
56
- * Whether the day is within the preview range.
57
- */
58
- isDayPreviewed: boolean;
59
- /**
60
- * Whether the day is the first day of the preview range.
61
- */
62
- isDayPreviewStart: boolean;
63
- /**
64
- * Whether the day is the last day of the preview range.
65
- */
66
- isDayPreviewEnd: boolean;
67
- /**
68
- * Whether the day is within the preview range and is not its first or last day.
69
- */
70
- isDayInsidePreview: boolean;
71
- /**
72
- * If `true`, the day can be dragged to change the current date range.
73
- * @default false
74
- */
75
- isDayDraggable?: boolean;
76
- /**
77
- * Whether the day is the first day of the month.
78
- */
79
- isDayStartOfMonth: boolean;
80
- /**
81
- * Whether the day is the last day of the month.
82
- */
83
- isDayEndOfMonth: boolean;
84
- /**
85
- * Whether the day is the first visible cell of the month it's being rendered in.
86
- */
87
- isDayFirstVisibleCell: boolean;
88
- /**
89
- * Whether the day is the last visible cell of the month it's being rendered in.
90
- */
91
- isDayLastVisibleCell: boolean;
92
- }