@mui/x-date-pickers 7.0.0-alpha.5 → 7.0.0-alpha.6

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 (89) hide show
  1. package/CHANGELOG.md +226 -6
  2. package/PickersSectionList/PickersSectionList.d.ts +11 -0
  3. package/PickersSectionList/PickersSectionList.js +223 -0
  4. package/PickersSectionList/PickersSectionList.types.d.ts +56 -0
  5. package/PickersSectionList/index.d.ts +4 -0
  6. package/PickersSectionList/index.js +2 -0
  7. package/PickersSectionList/package.json +6 -0
  8. package/PickersSectionList/pickersSectionListClasses.d.ts +11 -0
  9. package/PickersSectionList/pickersSectionListClasses.js +6 -0
  10. package/index.d.ts +1 -0
  11. package/index.js +4 -1
  12. package/internals/components/{PickersTextField → PickersInput}/Outline.d.ts +1 -0
  13. package/internals/components/{PickersTextField → PickersInput}/Outline.js +35 -19
  14. package/internals/components/PickersInput/PickersFilledInput.d.ts +3 -0
  15. package/internals/components/PickersInput/PickersFilledInput.js +166 -0
  16. package/internals/components/PickersInput/PickersInput.d.ts +15 -0
  17. package/internals/components/{PickersTextField → PickersInput}/PickersInput.js +78 -106
  18. package/internals/components/PickersInput/PickersInput.types.d.ts +60 -0
  19. package/internals/components/PickersInput/PickersOutlinedInput.d.ts +3 -0
  20. package/internals/components/PickersInput/PickersOutlinedInput.js +117 -0
  21. package/internals/components/PickersInput/PickersStandardInput.d.ts +3 -0
  22. package/internals/components/PickersInput/PickersStandardInput.js +123 -0
  23. package/internals/components/PickersInput/index.d.ts +4 -0
  24. package/internals/components/PickersInput/index.js +3 -0
  25. package/internals/components/PickersInput/pickersInputClasses.d.ts +84 -0
  26. package/internals/components/PickersInput/pickersInputClasses.js +18 -0
  27. package/internals/components/PickersTextField/PickersTextField.d.ts +1 -2
  28. package/internals/components/PickersTextField/PickersTextField.js +15 -6
  29. package/internals/components/PickersTextField/PickersTextField.types.d.ts +46 -3
  30. package/internals/components/PickersTextField/pickersTextFieldClasses.d.ts +0 -31
  31. package/internals/components/PickersTextField/pickersTextFieldClasses.js +3 -6
  32. package/internals/hooks/useField/useField.js +8 -1
  33. package/legacy/PickersSectionList/PickersSectionList.js +230 -0
  34. package/legacy/PickersSectionList/index.js +2 -0
  35. package/legacy/PickersSectionList/pickersSectionListClasses.js +6 -0
  36. package/legacy/index.js +4 -1
  37. package/legacy/internals/components/{PickersTextField → PickersInput}/Outline.js +40 -22
  38. package/legacy/internals/components/PickersInput/PickersFilledInput.js +161 -0
  39. package/legacy/internals/components/{PickersTextField → PickersInput}/PickersInput.js +75 -90
  40. package/legacy/internals/components/PickersInput/PickersInput.types.js +1 -0
  41. package/legacy/internals/components/PickersInput/PickersOutlinedInput.js +110 -0
  42. package/legacy/internals/components/PickersInput/PickersStandardInput.js +117 -0
  43. package/legacy/internals/components/PickersInput/index.js +3 -0
  44. package/legacy/internals/components/PickersInput/pickersInputClasses.js +18 -0
  45. package/legacy/internals/components/PickersTextField/PickersTextField.js +16 -7
  46. package/legacy/internals/components/PickersTextField/pickersTextFieldClasses.js +3 -6
  47. package/legacy/internals/hooks/useField/useField.js +8 -1
  48. package/legacy/locales/ruRU.js +1 -2
  49. package/locales/ruRU.js +1 -2
  50. package/modern/PickersSectionList/PickersSectionList.js +221 -0
  51. package/modern/PickersSectionList/PickersSectionList.types.js +1 -0
  52. package/modern/PickersSectionList/index.js +2 -0
  53. package/modern/PickersSectionList/pickersSectionListClasses.js +6 -0
  54. package/modern/index.js +4 -1
  55. package/modern/internals/components/{PickersTextField → PickersInput}/Outline.js +35 -19
  56. package/modern/internals/components/PickersInput/PickersFilledInput.js +165 -0
  57. package/modern/internals/components/{PickersTextField → PickersInput}/PickersInput.js +78 -106
  58. package/modern/internals/components/PickersInput/PickersInput.types.js +1 -0
  59. package/modern/internals/components/PickersInput/PickersOutlinedInput.js +117 -0
  60. package/modern/internals/components/PickersInput/PickersStandardInput.js +123 -0
  61. package/modern/internals/components/PickersInput/index.js +3 -0
  62. package/modern/internals/components/PickersInput/pickersInputClasses.js +18 -0
  63. package/modern/internals/components/PickersTextField/PickersTextField.js +15 -6
  64. package/modern/internals/components/PickersTextField/pickersTextFieldClasses.js +3 -6
  65. package/modern/internals/hooks/useField/useField.js +8 -1
  66. package/modern/locales/ruRU.js +1 -2
  67. package/node/PickersSectionList/PickersSectionList.js +228 -0
  68. package/node/PickersSectionList/index.js +49 -0
  69. package/node/PickersSectionList/pickersSectionListClasses.js +14 -0
  70. package/node/index.js +13 -1
  71. package/node/internals/components/{PickersTextField → PickersInput}/Outline.js +35 -19
  72. package/node/internals/components/PickersInput/PickersFilledInput.js +174 -0
  73. package/node/internals/components/{PickersTextField → PickersInput}/PickersInput.js +80 -108
  74. package/node/internals/components/PickersInput/PickersInput.types.js +5 -0
  75. package/node/internals/components/PickersInput/PickersOutlinedInput.js +125 -0
  76. package/node/internals/components/PickersInput/PickersStandardInput.js +132 -0
  77. package/node/internals/components/PickersInput/index.js +32 -0
  78. package/node/internals/components/PickersInput/pickersInputClasses.js +29 -0
  79. package/node/internals/components/PickersTextField/PickersTextField.js +15 -6
  80. package/node/internals/components/PickersTextField/pickersTextFieldClasses.js +6 -9
  81. package/node/internals/hooks/useField/useField.js +8 -1
  82. package/node/locales/ruRU.js +1 -2
  83. package/package.json +4 -4
  84. package/internals/components/PickersTextField/PickersInput.d.ts +0 -3
  85. package/internals/components/PickersTextField/PickersInput.types.d.ts +0 -45
  86. /package/{internals/components/PickersTextField/PickersInput.types.js → PickersSectionList/PickersSectionList.types.js} +0 -0
  87. /package/{legacy/internals/components/PickersTextField → internals/components/PickersInput}/PickersInput.types.js +0 -0
  88. /package/{modern/internals/components/PickersTextField/PickersInput.types.js → legacy/PickersSectionList/PickersSectionList.types.js} +0 -0
  89. /package/node/{internals/components/PickersTextField/PickersInput.types.js → PickersSectionList/PickersSectionList.types.js} +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,96 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 7.0.0-alpha.6
7
+
8
+ _Dec 22, 2023_
9
+
10
+ We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
11
+
12
+ - 🎁 Data Grid now supports `Date` objects in the `filterModel`
13
+ - 🌍 Improve Russian (ru-RU) locale on the Data Grid
14
+ - 🐞 Bugfixes
15
+
16
+ ### Data Grid
17
+
18
+ #### Breaking changes
19
+
20
+ - The filter panel no longer uses the native version of the [`Select`](https://mui.com/material-ui/react-select/) component for all components.
21
+ - The `getOptionValue` and `getOptionLabel` props were removed from the following components:
22
+
23
+ - `GridEditSingleSelectCell`
24
+ - `GridFilterInputSingleSelect`
25
+ - `GridFilterInputMultipleSingleSelect`
26
+
27
+ Use the `getOptionValue` and `getOptionLabel` properties on the `singleSelect` column definition instead:
28
+
29
+ ```tsx
30
+ const column: GridColDef = {
31
+ type: 'singleSelect',
32
+ field: 'country',
33
+ valueOptions: [
34
+ { code: 'BR', name: 'Brazil' },
35
+ { code: 'FR', name: 'France' },
36
+ ],
37
+ getOptionValue: (value: any) => value.code,
38
+ getOptionLabel: (value: any) => value.name,
39
+ };
40
+ ```
41
+ - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types.
42
+ The `filterModel` still accepts strings as values for `date` and `dateTime` column types,
43
+ but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object.
44
+
45
+ #### `@mui/x-data-grid@7.0.0-alpha.6`
46
+
47
+ - [DataGrid] Fix typos in the JSDoc (#11451) @flaviendelangle
48
+ - [DataGrid] Make `checkboxSelection` respect the `disableMultipleRowSelection` prop (#11448) @cherniavskii
49
+ - [DataGrid] Support `Date` objects in filter model (#7069) @cherniavskii
50
+ - [DataGrid] Use non-native `Select`s by default (#11330) @cherniavskii
51
+ - [l10n] Improve Russian (ru-RU) locale (#11441) @wensiet
52
+
53
+ #### `@mui/x-data-grid-pro@7.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
54
+
55
+ Same changes as in `@mui/x-data-grid@7.0.0-alpha.6`.
56
+
57
+ #### `@mui/x-data-grid-premium@7.0.0-alpha.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
58
+
59
+ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.6`.
60
+
61
+ ### Date Pickers
62
+
63
+ #### `@mui/x-date-pickers@7.0.0-alpha.6`
64
+
65
+ - [fields] Adjust `PickersInput` sizing styles (#11392) @noraleonte
66
+ - [fields] Fix section pasting (#11447) @LukasTy
67
+ - [pickers] Add `PickersTextField` `standard` and `filled` variants (#11250) @noraleonte
68
+ - [pickers] Add missing breaking changes to changelog (#11420) @MBilalShafi
69
+ - [pickers] Cleanup error messages in `PickersSectionList` (#11449) @flaviendelangle
70
+ - [pickers] Create new component `PickersSectionList` (#11352) @flaviendelangle
71
+
72
+ #### `@mui/x-date-pickers-pro@7.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
73
+
74
+ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.6`.
75
+
76
+ ### Charts / `@mui/x-charts@7.0.0-alpha.6`
77
+
78
+ - [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
79
+ - [charts] Improve dataset typing (#11372) @alexfauquette
80
+ - [charts] Make error message more explicit (#11457) @alexfauquette
81
+ - [charts] Make the helper `ChartsText` component public (#11370) @alexfauquette
82
+
83
+ ### Docs
84
+
85
+ - [docs] Document `false` default values for boolean props (#11477) @cherniavskii
86
+ - [docs] Improve Pickers `name` prop examples (#11422) @LukasTy
87
+ - [docs] Limit `date-fns` package to v2 in codesandbox (#11463) @LukasTy
88
+
89
+ ### Core
90
+
91
+ - [core] Cherry pick follow up (#11469) @LukasTy
92
+ - [core] Fix `cherry-pick` action (#11446) @LukasTy
93
+ - [core] Fix security regressions in cherry-pick-next-to-master.yml (#11482) @MBilalShafi
94
+ - [test] Reload the page if its blank and there are no links to the remaining tests (#11466) @cherniavskii
95
+
6
96
  ## 7.0.0-alpha.5
7
97
 
8
98
  _Dec 14, 2023_
@@ -43,12 +133,93 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
43
133
  - The slot interfaces got renamed to match with `@mui/base` naming.
44
134
  The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsProps` with `SlotProps`.
45
135
 
46
- ```diff
47
- - DateCalendarSlotsComponent
48
- + DateCalendarSlots
49
- - DateCalendarSlotsComponentsProps
50
- + DateCalendarSlotProps
51
- ```
136
+ ```diff
137
+ - DateCalendarSlotsComponent
138
+ + DateCalendarSlots
139
+ - DateCalendarSlotsComponentsProps
140
+ + DateCalendarSlotProps
141
+ ```
142
+
143
+ - Move `inputRef` inside the props passed to the field hooks
144
+
145
+ The field hooks now only receive the props instead of an object containing both the props and the `inputRef`.
146
+
147
+ ```diff
148
+ - const { inputRef, ...otherProps } = props
149
+ - const fieldResponse = useDateField({ props: otherProps, inputRef });
150
+ + const fieldResponse = useDateField(props);
151
+ ```
152
+
153
+ If you are using a multi input range field hook, the same applies to `startInputRef` and `endInputRef` params
154
+
155
+ ```diff
156
+ - const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
157
+ - const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps
158
+
159
+ const fieldResponse = useMultiInputDateRangeField({
160
+ sharedProps,
161
+ - startTextFieldProps: otherStartTextFieldProps,
162
+ - endTextFieldProps: otherEndTextFieldProps,
163
+ - startInputRef
164
+ - endInputRef,
165
+ + startTextFieldProps,
166
+ + endTextFieldProps
167
+ });
168
+ ```
169
+
170
+ - Rename the ref returned by the field hooks to `inputRef`
171
+
172
+ When used with the v6 TextField approach (where the input is an `<input />` HTML element), the field hooks return a ref that needs to be passed to the `<input />` element.
173
+ This ref was previously named `ref` and has been renamed `inputRef` for extra clarity.
174
+
175
+ ```diff
176
+ const fieldResponse = useDateField(props);
177
+
178
+ - return <input ref={fieldResponse.ref} />
179
+ + return <input ref={fieldResponse.inputRef} />
180
+ ```
181
+
182
+ If you are using a multi input range field hook, the same applies to the ref in the `startDate` and `endDate` objects
183
+
184
+ ```diff
185
+ const fieldResponse = useDateField(props);
186
+
187
+ return (
188
+ <div>
189
+ - <input ref={fieldResponse.startDate.ref} />
190
+ + <input ref={fieldResponse.startDate.inputRef} />
191
+ <span>–</span>
192
+ - <input ref={fieldResponse.endDate.ref} />
193
+ + <input ref={fieldResponse.endDate.inputRef} />
194
+ </div>
195
+ )
196
+ ```
197
+
198
+ - Restructure the API of `useClearableField`
199
+
200
+ The `useClearableField` hook API has been simplified to now take a `props` parameter instead of a `fieldProps`, `InputProps`, `clearable`, `onClear`, `slots` and `slotProps` parameters.
201
+
202
+ You should now be able to directly pass the returned value from your field hook (e.g: `useDateField`) to `useClearableField`
203
+
204
+ ```diff
205
+ const fieldResponse = useDateField(props);
206
+
207
+ - const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
208
+ - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
209
+ - fieldProps: otherFieldProps,
210
+ - InputProps,
211
+ - clearable,
212
+ - onClear,
213
+ - slots,
214
+ - slotProps,
215
+ - });
216
+ -
217
+ - return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />
218
+
219
+ + const processedFieldProps = useClearableField(fieldResponse);
220
+ +
221
+ + return <MyCustomTextField {...processedFieldProps} />
222
+ ```
52
223
 
53
224
  #### `@mui/x-date-pickers@7.0.0-alpha.5`
54
225
 
@@ -1029,6 +1200,55 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
1029
1200
  - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
1030
1201
  - [license] Correctly throw errors (#10924) @oliviertassinari
1031
1202
 
1203
+ ## 6.18.6
1204
+
1205
+ _Dec 22, 2023_
1206
+
1207
+ We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
1208
+
1209
+ - 🌍 Improve Russian (ru-RU) locale (#11429) @wensiet
1210
+ - 🐞 Bugfixes
1211
+
1212
+ ### Data Grid
1213
+
1214
+ #### `@mui/x-data-grid@6.18.6`
1215
+
1216
+ - [DataGrid] Fix typos in the JSDoc (#11475) @flaviendelangle
1217
+ - [l10n] Improve Russian (ru-RU) locale (#11429) @wensiet
1218
+
1219
+ #### `@mui/x-data-grid-pro@6.18.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
1220
+
1221
+ Same changes as in `@mui/x-data-grid@6.18.6`.
1222
+
1223
+ #### `@mui/x-data-grid-premium@6.18.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
1224
+
1225
+ Same changes as in `@mui/x-data-grid-pro@6.18.6`.
1226
+
1227
+ ### Date Pickers
1228
+
1229
+ #### `@mui/x-date-pickers@6.18.6`
1230
+
1231
+ - [fields] Fix section pasting (#11467) @LukasTy
1232
+
1233
+ #### `@mui/x-date-pickers-pro@6.18.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
1234
+
1235
+ Same changes as in `@mui/x-date-pickers@6.18.6`.
1236
+
1237
+ ### Charts / `@mui/x-charts@6.18.6`
1238
+
1239
+ - [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
1240
+ - [charts] Make error message more explicit (#11457) @alexfauquette
1241
+ - [charts] Make the helper `ChartsText` component public (#11370) @alexfauquette
1242
+ - [charts] Improve dataset typing (#11372) @alexfauquette
1243
+ - [charts] Fix size overflow (#11385) @alexfauquette
1244
+
1245
+ ### Docs
1246
+
1247
+ - [docs] Document false default values for boolean props (#11489) @cherniavskii
1248
+ - [docs] Improve Pickers `name` prop examples (#11442) @LukasTy
1249
+ - [docs] Limit `date-fns` package to v2 in codesandbox (#11478) @LukasTy
1250
+ - [test] Reload the page if its blank and there are no links to the remaining tests (#11471) @cherniavskii
1251
+
1032
1252
  ## 6.18.5
1033
1253
 
1034
1254
  _Dec 14, 2023_
@@ -0,0 +1,11 @@
1
+ import * as React from 'react';
2
+ import { PickersSectionListProps } from './PickersSectionList.types';
3
+ export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
4
+ export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
5
+ export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
6
+ export declare const PickersSectionListSectionContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
7
+ type PickersSectionListComponent = ((props: PickersSectionListProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
8
+ propTypes?: any;
9
+ };
10
+ declare const PickersSectionList: PickersSectionListComponent;
11
+ export { PickersSectionList };
@@ -0,0 +1,223 @@
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
4
+ import * as React from 'react';
5
+ import styled from '@mui/system/styled';
6
+ import PropTypes from 'prop-types';
7
+ import { useSlotProps } from '@mui/base/utils';
8
+ import composeClasses from '@mui/utils/composeClasses';
9
+ import useForkRef from '@mui/utils/useForkRef';
10
+ import { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ import { jsxs as _jsxs } from "react/jsx-runtime";
13
+ export const PickersSectionListRoot = styled('div', {
14
+ name: 'MuiPickersSectionList',
15
+ slot: 'Root',
16
+ overridesResolver: (props, styles) => styles.root
17
+ })({
18
+ direction: 'ltr /*! @noflip */',
19
+ outline: 'none'
20
+ });
21
+ export const PickersSectionListSection = styled('span', {
22
+ name: 'MuiPickersSectionList',
23
+ slot: 'Section',
24
+ overridesResolver: (props, styles) => styles.section
25
+ })({});
26
+ export const PickersSectionListSectionSeparator = styled('span', {
27
+ name: 'MuiPickersSectionList',
28
+ slot: 'SectionSeparator',
29
+ overridesResolver: (props, styles) => styles.sectionSeparator
30
+ })({
31
+ whiteSpace: 'pre'
32
+ });
33
+ export const PickersSectionListSectionContent = styled('span', {
34
+ name: 'MuiPickersSectionList',
35
+ slot: 'SectionContent',
36
+ overridesResolver: (props, styles) => styles.sectionContent
37
+ })({
38
+ outline: 'none'
39
+ });
40
+ const useUtilityClasses = ownerState => {
41
+ const {
42
+ classes
43
+ } = ownerState;
44
+ const slots = {
45
+ root: ['root'],
46
+ section: ['section'],
47
+ sectionContent: ['sectionContent']
48
+ };
49
+ return composeClasses(slots, getPickersSectionListUtilityClass, classes);
50
+ };
51
+ /**
52
+ * Demos:
53
+ *
54
+ * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
55
+ *
56
+ * API:
57
+ *
58
+ * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
59
+ */
60
+ function PickersSection(props) {
61
+ var _slots$section, _slots$sectionContent, _slots$sectionSeparat;
62
+ const {
63
+ slots,
64
+ slotProps,
65
+ element,
66
+ classes
67
+ } = props;
68
+ const Section = (_slots$section = slots == null ? void 0 : slots.section) != null ? _slots$section : PickersSectionListSection;
69
+ const sectionProps = useSlotProps({
70
+ elementType: Section,
71
+ externalSlotProps: slotProps == null ? void 0 : slotProps.section,
72
+ externalForwardedProps: element.container,
73
+ className: classes.section,
74
+ ownerState: {}
75
+ });
76
+ const SectionContent = (_slots$sectionContent = slots == null ? void 0 : slots.sectionContent) != null ? _slots$sectionContent : PickersSectionListSectionContent;
77
+ const sectionContentProps = useSlotProps({
78
+ elementType: SectionContent,
79
+ externalSlotProps: slotProps == null ? void 0 : slotProps.sectionContent,
80
+ externalForwardedProps: element.content,
81
+ additionalProps: {
82
+ suppressContentEditableWarning: true
83
+ },
84
+ className: classes.sectionContent,
85
+ ownerState: {}
86
+ });
87
+ const SectionSeparator = (_slots$sectionSeparat = slots == null ? void 0 : slots.sectionSeparator) != null ? _slots$sectionSeparat : PickersSectionListSectionSeparator;
88
+ const sectionSeparatorBeforeProps = useSlotProps({
89
+ elementType: SectionSeparator,
90
+ externalSlotProps: slotProps == null ? void 0 : slotProps.sectionSeparator,
91
+ externalForwardedProps: element.before,
92
+ ownerState: {
93
+ position: 'before'
94
+ }
95
+ });
96
+ const sectionSeparatorAfterProps = useSlotProps({
97
+ elementType: SectionSeparator,
98
+ externalSlotProps: slotProps == null ? void 0 : slotProps.sectionSeparator,
99
+ externalForwardedProps: element.after,
100
+ ownerState: {
101
+ position: 'after'
102
+ }
103
+ });
104
+ return /*#__PURE__*/_jsxs(Section, _extends({}, sectionProps, {
105
+ children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorBeforeProps)), /*#__PURE__*/_jsx(SectionContent, _extends({}, sectionContentProps)), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorAfterProps))]
106
+ }));
107
+ }
108
+ const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(props, ref) {
109
+ var _slots$root;
110
+ const {
111
+ slots,
112
+ slotProps,
113
+ elements,
114
+ sectionListRef
115
+ } = props,
116
+ other = _objectWithoutPropertiesLoose(props, _excluded);
117
+ const classes = useUtilityClasses(props);
118
+ const rootRef = React.useRef(null);
119
+ const handleRootRef = useForkRef(ref, rootRef);
120
+ const getRoot = methodName => {
121
+ if (!rootRef.current) {
122
+ throw new Error(`MUI: Cannot call sectionListRef.${methodName} before the mount of the component`);
123
+ }
124
+ return rootRef.current;
125
+ };
126
+ React.useImperativeHandle(sectionListRef, () => ({
127
+ getRoot() {
128
+ return getRoot('getRoot');
129
+ },
130
+ getSectionContainer(index) {
131
+ const root = getRoot('getSectionContainer');
132
+ return root.querySelector(`.${pickersSectionListClasses.section}[data-sectionindex="${index}"]`);
133
+ },
134
+ getSectionContent(index) {
135
+ const root = getRoot('getSectionContent');
136
+ return root.querySelector(`.${pickersSectionListClasses.section}[data-sectionindex="${index}"] .${pickersSectionListClasses.sectionContent}`);
137
+ },
138
+ getSectionIndexFromDOMElement(element) {
139
+ const root = getRoot('getSectionIndexFromDOMElement');
140
+ if (element == null || !root.contains(element)) {
141
+ return null;
142
+ }
143
+ let sectionContainer = null;
144
+ if (element.classList.contains(pickersSectionListClasses.section)) {
145
+ sectionContainer = element;
146
+ } else if (element.classList.contains(pickersSectionListClasses.sectionContent)) {
147
+ sectionContainer = element.parentElement;
148
+ }
149
+ if (sectionContainer == null) {
150
+ return null;
151
+ }
152
+ return Number(sectionContainer.dataset.sectionindex);
153
+ }
154
+ }));
155
+ const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PickersSectionListRoot;
156
+ const rootProps = useSlotProps({
157
+ elementType: Root,
158
+ externalSlotProps: slotProps == null ? void 0 : slotProps.root,
159
+ externalForwardedProps: other,
160
+ additionalProps: {
161
+ ref: handleRootRef,
162
+ suppressContentEditableWarning: true
163
+ },
164
+ className: classes.root,
165
+ ownerState: {}
166
+ });
167
+ return /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
168
+ children: rootProps.contentEditable ? elements.map(({
169
+ content,
170
+ before,
171
+ after
172
+ }) => `${before.children}${content.children}${after.children}`).join('') : /*#__PURE__*/_jsx(React.Fragment, {
173
+ children: elements.map((element, elementIndex) => /*#__PURE__*/_jsx(PickersSection, {
174
+ slots: slots,
175
+ slotProps: slotProps,
176
+ element: element,
177
+ classes: classes
178
+ }, elementIndex))
179
+ })
180
+ }));
181
+ });
182
+ process.env.NODE_ENV !== "production" ? PickersSectionList.propTypes = {
183
+ // ----------------------------- Warning --------------------------------
184
+ // | These PropTypes are generated from the TypeScript type definitions |
185
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
186
+ // ----------------------------------------------------------------------
187
+ /**
188
+ * Override or extend the styles applied to the component.
189
+ */
190
+ classes: PropTypes.object,
191
+ /**
192
+ * If true, the whole element is editable.
193
+ * Useful when all the sections are selected.
194
+ */
195
+ contentEditable: PropTypes.bool.isRequired,
196
+ /**
197
+ * The elements to render.
198
+ * Each element contains the prop to edit a section of the value.
199
+ */
200
+ elements: PropTypes.arrayOf(PropTypes.shape({
201
+ after: PropTypes.object.isRequired,
202
+ before: PropTypes.object.isRequired,
203
+ container: PropTypes.object.isRequired,
204
+ content: PropTypes.object.isRequired
205
+ })).isRequired,
206
+ sectionListRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
207
+ current: PropTypes.shape({
208
+ getRoot: PropTypes.func.isRequired,
209
+ getSectionContainer: PropTypes.func.isRequired,
210
+ getSectionContent: PropTypes.func.isRequired,
211
+ getSectionIndexFromDOMElement: PropTypes.func.isRequired
212
+ })
213
+ })]),
214
+ /**
215
+ * The props used for each component slot.
216
+ */
217
+ slotProps: PropTypes.object,
218
+ /**
219
+ * Overridable component slots.
220
+ */
221
+ slots: PropTypes.object
222
+ } : void 0;
223
+ export { PickersSectionList };
@@ -0,0 +1,56 @@
1
+ import * as React from 'react';
2
+ import { SlotComponentProps } from '@mui/base/utils';
3
+ import { PickersSectionListClasses } from './pickersSectionListClasses';
4
+ export interface PickersSectionListSlots {
5
+ root: React.ElementType;
6
+ section: React.ElementType;
7
+ sectionSeparator: React.ElementType;
8
+ sectionContent: React.ElementType;
9
+ }
10
+ export interface PickersSectionListSlotProps {
11
+ root?: SlotComponentProps<'div', {}, {}>;
12
+ section?: SlotComponentProps<'span', {}, {}>;
13
+ sectionSeparator?: SlotComponentProps<'span', {}, {
14
+ position: 'before' | 'after';
15
+ }>;
16
+ sectionContent?: SlotComponentProps<'span', {}, {}>;
17
+ }
18
+ export interface PickersSectionElement {
19
+ container: React.HTMLAttributes<HTMLSpanElement>;
20
+ content: React.HTMLAttributes<HTMLSpanElement>;
21
+ before: React.HTMLAttributes<HTMLSpanElement>;
22
+ after: React.HTMLAttributes<HTMLSpanElement>;
23
+ }
24
+ export interface PickersSectionListRef {
25
+ getRoot: () => HTMLElement;
26
+ getSectionContainer: (sectionIndex: number) => HTMLElement;
27
+ getSectionContent: (sectionIndex: number) => HTMLElement;
28
+ getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
29
+ }
30
+ export interface ExportedPickersSectionListProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
31
+ /**
32
+ * The elements to render.
33
+ * Each element contains the prop to edit a section of the value.
34
+ */
35
+ elements: PickersSectionElement[];
36
+ sectionListRef: React.Ref<PickersSectionListRef>;
37
+ /**
38
+ * If true, the whole element is editable.
39
+ * Useful when all the sections are selected.
40
+ */
41
+ contentEditable: boolean;
42
+ }
43
+ export interface PickersSectionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'contentEditable'>, ExportedPickersSectionListProps {
44
+ /**
45
+ * Overridable component slots.
46
+ */
47
+ slots?: PickersSectionListSlots;
48
+ /**
49
+ * The props used for each component slot.
50
+ */
51
+ slotProps?: PickersSectionListSlotProps;
52
+ /**
53
+ * Override or extend the styles applied to the component.
54
+ */
55
+ classes?: Partial<PickersSectionListClasses>;
56
+ }
@@ -0,0 +1,4 @@
1
+ export { PickersSectionList as Unstable_PickersSectionList, PickersSectionListRoot as Unstable_PickersSectionListRoot, PickersSectionListSection as Unstable_PickersSectionListSection, PickersSectionListSectionSeparator as Unstable_PickersSectionListSectionSeparator, PickersSectionListSectionContent as Unstable_PickersSectionListSectionContent, } from './PickersSectionList';
2
+ export type { PickersSectionListProps, PickersSectionElement, PickersSectionListRef, PickersSectionListSlots, PickersSectionListSlotProps, ExportedPickersSectionListProps, } from './PickersSectionList.types';
3
+ export { getPickersSectionListUtilityClass, pickersSectionListClasses, } from './pickersSectionListClasses';
4
+ export type { PickersSectionListClasses, PickersSectionListClassKey, } from './pickersSectionListClasses';
@@ -0,0 +1,2 @@
1
+ export { PickersSectionList as Unstable_PickersSectionList, PickersSectionListRoot as Unstable_PickersSectionListRoot, PickersSectionListSection as Unstable_PickersSectionListSection, PickersSectionListSectionSeparator as Unstable_PickersSectionListSectionSeparator, PickersSectionListSectionContent as Unstable_PickersSectionListSectionContent } from './PickersSectionList';
2
+ export { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "./index.js",
4
+ "main": "../node/PickersSectionList/index.js",
5
+ "types": "./index.d.ts"
6
+ }
@@ -0,0 +1,11 @@
1
+ export interface PickersSectionListClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the container of a section. */
5
+ section: string;
6
+ /** Styles applied to the content of a section. */
7
+ sectionContent: string;
8
+ }
9
+ export type PickersSectionListClassKey = keyof PickersSectionListClasses;
10
+ export declare function getPickersSectionListUtilityClass(slot: string): string;
11
+ export declare const pickersSectionListClasses: Record<keyof PickersSectionListClasses, string>;
@@ -0,0 +1,6 @@
1
+ import generateUtilityClass from '@mui/utils/generateUtilityClass';
2
+ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
3
+ export function getPickersSectionListUtilityClass(slot) {
4
+ return generateUtilityClass('MuiPickersSectionList', slot);
5
+ }
6
+ export const pickersSectionListClasses = generateUtilityClasses('MuiPickersSectionList', ['root', 'section', 'sectionContent']);
package/index.d.ts CHANGED
@@ -29,6 +29,7 @@ export * from './PickersLayout';
29
29
  export * from './PickersActionBar';
30
30
  export * from './PickersShortcuts';
31
31
  export * from './PickersCalendarHeader';
32
+ export * from './PickersSectionList';
32
33
  export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
33
34
  export * from './models';
34
35
  export * from './icons';
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v7.0.0-alpha.5
2
+ * @mui/x-date-pickers v7.0.0-alpha.6
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -49,6 +49,9 @@ export * from './PickersShortcuts';
49
49
 
50
50
  // Other slots
51
51
  export * from './PickersCalendarHeader';
52
+
53
+ // Field utilities
54
+ export * from './PickersSectionList';
52
55
  export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
53
56
  export * from './models';
54
57
  export * from './icons';
@@ -3,6 +3,7 @@ interface OutlineProps extends React.HTMLAttributes<HTMLFieldSetElement> {
3
3
  notched: boolean;
4
4
  shrink: boolean;
5
5
  label: React.ReactNode;
6
+ ownerState: any;
6
7
  }
7
8
  export default function Outline(props: OutlineProps): React.JSX.Element;
8
9
  export {};