@mui/x-date-pickers 8.5.1 → 8.5.3

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 (42) hide show
  1. package/CHANGELOG.md +187 -10
  2. package/PickerDay2/PickerDay2.d.ts +7 -0
  3. package/PickerDay2/PickerDay2.js +369 -0
  4. package/PickerDay2/PickerDay2.types.d.ts +18 -0
  5. package/PickerDay2/PickerDay2.types.js +5 -0
  6. package/PickerDay2/index.d.ts +4 -0
  7. package/PickerDay2/index.js +25 -0
  8. package/PickerDay2/pickerDay2Classes.d.ts +17 -0
  9. package/PickerDay2/pickerDay2Classes.js +14 -0
  10. package/PickersDay/PickersDay.js +1 -1
  11. package/PickersTextField/PickersFilledInput/pickersFilledInputClasses.d.ts +1 -0
  12. package/PickersTextField/PickersInput/pickersInputClasses.d.ts +1 -0
  13. package/PickersTextField/PickersInputBase/pickersInputBaseClasses.d.ts +2 -0
  14. package/PickersTextField/PickersInputBase/pickersInputBaseClasses.js +1 -1
  15. package/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts +1 -0
  16. package/PickersTextField/PickersTextField.js +4 -1
  17. package/esm/PickerDay2/PickerDay2.d.ts +7 -0
  18. package/esm/PickerDay2/PickerDay2.js +361 -0
  19. package/esm/PickerDay2/PickerDay2.types.d.ts +18 -0
  20. package/esm/PickerDay2/PickerDay2.types.js +1 -0
  21. package/esm/PickerDay2/index.d.ts +4 -0
  22. package/esm/PickerDay2/index.js +2 -0
  23. package/esm/PickerDay2/pickerDay2Classes.d.ts +17 -0
  24. package/esm/PickerDay2/pickerDay2Classes.js +6 -0
  25. package/esm/PickersDay/PickersDay.js +1 -1
  26. package/esm/PickersTextField/PickersFilledInput/pickersFilledInputClasses.d.ts +1 -0
  27. package/esm/PickersTextField/PickersInput/pickersInputClasses.d.ts +1 -0
  28. package/esm/PickersTextField/PickersInputBase/pickersInputBaseClasses.d.ts +2 -0
  29. package/esm/PickersTextField/PickersInputBase/pickersInputBaseClasses.js +1 -1
  30. package/esm/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts +1 -0
  31. package/esm/PickersTextField/PickersTextField.js +4 -1
  32. package/esm/index.d.ts +1 -0
  33. package/esm/index.js +2 -1
  34. package/esm/themeAugmentation/components.d.ts +4 -0
  35. package/esm/themeAugmentation/overrides.d.ts +2 -0
  36. package/esm/themeAugmentation/props.d.ts +2 -0
  37. package/index.d.ts +1 -0
  38. package/index.js +13 -1
  39. package/package.json +3 -3
  40. package/themeAugmentation/components.d.ts +4 -0
  41. package/themeAugmentation/overrides.d.ts +2 -0
  42. package/themeAugmentation/props.d.ts +2 -0
@@ -224,7 +224,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
224
224
  onMouseDown: handleMouseDown
225
225
  }, other, {
226
226
  ownerState: ownerState,
227
- children: !children ? utils.format(day, 'dayOfMonth') : children
227
+ children: children ?? utils.format(day, 'dayOfMonth')
228
228
  }));
229
229
  });
230
230
  if (process.env.NODE_ENV !== "production") PickersDayRaw.displayName = "PickersDayRaw";
@@ -14,6 +14,7 @@ export declare const pickersFilledInputClasses: {
14
14
  readOnly: string;
15
15
  focused: string;
16
16
  error: string;
17
+ inputSizeSmall: string;
17
18
  notchedOutline: string;
18
19
  sectionsContainer: string;
19
20
  sectionBefore: string;
@@ -14,6 +14,7 @@ export declare const pickersInputClasses: {
14
14
  readOnly: string;
15
15
  focused: string;
16
16
  error: string;
17
+ inputSizeSmall: string;
17
18
  notchedOutline: string;
18
19
  sectionsContainer: string;
19
20
  sectionBefore: string;
@@ -9,6 +9,8 @@ export interface PickersInputBaseClasses {
9
9
  readOnly: string;
10
10
  /** State class applied to the root element if `error=true`. */
11
11
  error: string;
12
+ /** State class applied to the root element if `size=small`. */
13
+ inputSizeSmall: string;
12
14
  /** Styles applied to the NotchedOutline element. */
13
15
  notchedOutline: string;
14
16
  /** Styles applied to the real hidden input element. */
@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
11
11
  function getPickersInputBaseUtilityClass(slot) {
12
12
  return (0, _generateUtilityClass.default)('MuiPickersInputBase', slot);
13
13
  }
14
- const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'activeBar']);
14
+ const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'inputSizeSmall', 'activeBar']);
@@ -14,6 +14,7 @@ export declare const pickersOutlinedInputClasses: {
14
14
  readOnly: string;
15
15
  focused: string;
16
16
  error: string;
17
+ inputSizeSmall: string;
17
18
  sectionsContainer: string;
18
19
  sectionBefore: string;
19
20
  sectionAfter: string;
@@ -27,7 +27,7 @@ var _PickersInput = require("./PickersInput");
27
27
  var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
28
28
  var _usePickerTextFieldOwnerState = require("./usePickerTextFieldOwnerState");
29
29
  var _jsxRuntime = require("react/jsx-runtime");
30
- const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
30
+ const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
31
31
  const VARIANT_COMPONENT = {
32
32
  standard: _PickersInput.PickersInput,
33
33
  filled: _PickersFilledInput.PickersFilledInput,
@@ -66,6 +66,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
66
66
  error = false,
67
67
  variant = 'outlined',
68
68
  required = false,
69
+ hiddenLabel = false,
69
70
  // Props used by PickersInput
70
71
  InputProps,
71
72
  inputProps,
@@ -127,6 +128,8 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
127
128
  inputAdditionalProps.notched = InputLabelProps.shrink;
128
129
  }
129
130
  inputAdditionalProps.label = label;
131
+ } else if (variant === 'filled') {
132
+ inputAdditionalProps.hiddenLabel = hiddenLabel;
130
133
  }
131
134
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePickerTextFieldOwnerState.PickerTextFieldOwnerStateContext.Provider, {
132
135
  value: ownerState,
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ import { PickerDay2Props } from "./PickerDay2.types.js";
3
+ type PickerDay2Component = ((props: PickerDay2Props & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element) & {
4
+ propTypes?: any;
5
+ };
6
+ export declare const PickerDay2: PickerDay2Component;
7
+ export {};
@@ -0,0 +1,361 @@
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ const _excluded = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth", "isVisuallySelected"];
4
+ import * as React from 'react';
5
+ import PropTypes from 'prop-types';
6
+ import clsx from 'clsx';
7
+ import { alpha, styled, useThemeProps } from '@mui/material/styles';
8
+ import ButtonBase from '@mui/material/ButtonBase';
9
+ import useForkRef from '@mui/utils/useForkRef';
10
+ import composeClasses from '@mui/utils/composeClasses';
11
+ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
12
+ import { DAY_MARGIN, DAY_SIZE } from "../internals/constants/dimensions.js";
13
+ import { pickerDay2Classes, getPickerDay2UtilityClass } from "./pickerDay2Classes.js";
14
+ import { useUtils } from "../internals/hooks/useUtils.js";
15
+ import { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
16
+ import { jsx as _jsx } from "react/jsx-runtime";
17
+ const useUtilityClasses = (ownerState, classes) => {
18
+ const {
19
+ isDaySelected,
20
+ disableHighlightToday,
21
+ isDayCurrent,
22
+ isDayDisabled,
23
+ isDayOutsideMonth,
24
+ isDayFillerCell
25
+ } = ownerState;
26
+ const slots = {
27
+ root: ['root', isDaySelected && !isDayFillerCell && 'selected', isDayDisabled && 'disabled', !disableHighlightToday && isDayCurrent && !isDaySelected && !isDayFillerCell && 'today', isDayOutsideMonth && 'dayOutsideMonth', isDayFillerCell && 'fillerCell']
28
+ };
29
+ return composeClasses(slots, getPickerDay2UtilityClass, classes);
30
+ };
31
+ const PickerDay2Root = styled(ButtonBase, {
32
+ name: 'MuiPickerDay2',
33
+ slot: 'Root',
34
+ overridesResolver: (props, styles) => {
35
+ const {
36
+ ownerState
37
+ } = props;
38
+ return [styles.root, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles.today, !ownerState.isDayOutsideMonth && styles.dayOutsideMonth, ownerState.isDayFillerCell && styles.fillerCell];
39
+ }
40
+ })(({
41
+ theme
42
+ }) => _extends({
43
+ '--PickerDay-horizontalMargin': `${DAY_MARGIN}px`,
44
+ '--PickerDay-size': `${DAY_SIZE}px`
45
+ }, theme.typography.caption, {
46
+ width: 'var(--PickerDay-size)',
47
+ height: 'var(--PickerDay-size)',
48
+ borderRadius: 'calc(var(--PickerDay-size) / 2)',
49
+ padding: 0,
50
+ // explicitly setting to `transparent` to avoid potentially getting impacted by change from the overridden component
51
+ backgroundColor: 'transparent',
52
+ transition: theme.transitions.create('background-color', {
53
+ duration: theme.transitions.duration.short
54
+ }),
55
+ color: (theme.vars || theme).palette.text.primary,
56
+ '@media (pointer: fine)': {
57
+ '&:hover': {
58
+ backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
59
+ }
60
+ },
61
+ '&:focus': {
62
+ backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
63
+ },
64
+ marginLeft: 'var(--PickerDay-horizontalMargin)',
65
+ marginRight: 'var(--PickerDay-horizontalMargin)',
66
+ variants: [{
67
+ props: {
68
+ isDaySelected: true
69
+ },
70
+ style: {
71
+ color: (theme.vars || theme).palette.primary.contrastText,
72
+ backgroundColor: (theme.vars || theme).palette.primary.main,
73
+ fontWeight: theme.typography.fontWeightMedium,
74
+ '&:focus, &:hover': {
75
+ willChange: 'background-color',
76
+ backgroundColor: (theme.vars || theme).palette.primary.dark
77
+ },
78
+ [`&.${pickerDay2Classes.disabled}`]: {
79
+ opacity: 0.6
80
+ }
81
+ }
82
+ }, {
83
+ props: {
84
+ isDayDisabled: true
85
+ },
86
+ style: {
87
+ color: (theme.vars || theme).palette.text.disabled
88
+ }
89
+ }, {
90
+ props: {
91
+ isDayFillerCell: true
92
+ },
93
+ style: {
94
+ // visibility: 'hidden' does not work here as it hides the element from screen readers
95
+ // and results in unexpected relationships between week day and day columns.
96
+ opacity: 0,
97
+ pointerEvents: 'none'
98
+ }
99
+ }, {
100
+ props: {
101
+ isDayOutsideMonth: true
102
+ },
103
+ style: {
104
+ color: (theme.vars || theme).palette.text.secondary
105
+ }
106
+ }, {
107
+ props: {
108
+ isDayCurrent: true,
109
+ isDaySelected: false
110
+ },
111
+ style: {
112
+ outline: `1px solid ${(theme.vars || theme).palette.text.secondary}`,
113
+ outlineOffset: -1
114
+ }
115
+ }]
116
+ }));
117
+ const noop = () => {};
118
+ const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps, forwardedRef) {
119
+ const props = useThemeProps({
120
+ props: inProps,
121
+ name: 'MuiPickerDay2'
122
+ });
123
+ const utils = useUtils();
124
+ const {
125
+ autoFocus = false,
126
+ className,
127
+ classes: classesProp,
128
+ isAnimating,
129
+ onClick,
130
+ onDaySelect,
131
+ onFocus = noop,
132
+ onBlur = noop,
133
+ onKeyDown = noop,
134
+ onMouseDown = noop,
135
+ onMouseEnter = noop,
136
+ children,
137
+ day,
138
+ selected,
139
+ disabled,
140
+ today,
141
+ outsideCurrentMonth,
142
+ disableMargin,
143
+ disableHighlightToday,
144
+ showDaysOutsideCurrentMonth
145
+ } = props,
146
+ other = _objectWithoutPropertiesLoose(props, _excluded);
147
+ const pickersDayOwnerState = usePickerDayOwnerState({
148
+ day,
149
+ selected,
150
+ disabled,
151
+ today,
152
+ outsideCurrentMonth,
153
+ disableMargin,
154
+ disableHighlightToday,
155
+ showDaysOutsideCurrentMonth
156
+ });
157
+ const ownerState = _extends({}, pickersDayOwnerState, {
158
+ // Properties specific to the MUI implementation (some might be removed in the next major)
159
+ isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth
160
+ });
161
+ const classes = useUtilityClasses(ownerState, classesProp);
162
+ const ref = React.useRef(null);
163
+ const handleRef = useForkRef(ref, forwardedRef);
164
+
165
+ // Since this is rendered when a Popper is opened we can't use passive effects.
166
+ // Focusing in passive effects in Popper causes scroll jump.
167
+ useEnhancedEffect(() => {
168
+ if (autoFocus && !disabled && !isAnimating && !outsideCurrentMonth) {
169
+ // ref.current being null would be a bug in MUI
170
+ ref.current.focus();
171
+ }
172
+ }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]);
173
+
174
+ // For a day outside the current month, move the focus from mouseDown to mouseUp
175
+ // Goal: have the onClick ends before sliding to the new month
176
+ const handleMouseDown = event => {
177
+ onMouseDown(event);
178
+ if (outsideCurrentMonth) {
179
+ event.preventDefault();
180
+ }
181
+ };
182
+ const handleClick = event => {
183
+ if (!disabled) {
184
+ onDaySelect(day);
185
+ }
186
+ if (outsideCurrentMonth) {
187
+ event.currentTarget.focus();
188
+ }
189
+ if (onClick) {
190
+ onClick(event);
191
+ }
192
+ };
193
+ return /*#__PURE__*/_jsx(PickerDay2Root, _extends({
194
+ ref: handleRef,
195
+ centerRipple: true
196
+ // compat with PickersDay for tests
197
+ ,
198
+
199
+ disabled: disabled,
200
+ tabIndex: selected ? 0 : -1,
201
+ onKeyDown: event => onKeyDown(event, day),
202
+ onFocus: event => onFocus(event, day),
203
+ onBlur: event => onBlur(event, day),
204
+ onMouseEnter: event => onMouseEnter(event, day),
205
+ onClick: handleClick,
206
+ onMouseDown: handleMouseDown
207
+ }, other, {
208
+ ownerState: ownerState,
209
+ className: clsx(classes.root, className),
210
+ children: children ?? (ownerState.isDayFillerCell ? null : utils.format(day, 'dayOfMonth'))
211
+ }));
212
+ });
213
+ if (process.env.NODE_ENV !== "production") PickerDay2Raw.displayName = "PickerDay2Raw";
214
+ process.env.NODE_ENV !== "production" ? PickerDay2Raw.propTypes = {
215
+ // ----------------------------- Warning --------------------------------
216
+ // | These PropTypes are generated from the TypeScript type definitions |
217
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
218
+ // ----------------------------------------------------------------------
219
+ /**
220
+ * A ref for imperative actions.
221
+ * It currently only supports `focusVisible()` action.
222
+ */
223
+ action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
224
+ current: PropTypes.shape({
225
+ focusVisible: PropTypes.func.isRequired
226
+ })
227
+ })]),
228
+ /**
229
+ * If `true`, the ripples are centered.
230
+ * They won't start at the cursor interaction position.
231
+ * @default false
232
+ */
233
+ centerRipple: PropTypes.bool,
234
+ /**
235
+ * Override or extend the styles applied to the component.
236
+ */
237
+ classes: PropTypes.object,
238
+ className: PropTypes.string,
239
+ component: PropTypes.elementType,
240
+ /**
241
+ * The date to show.
242
+ */
243
+ day: PropTypes.object.isRequired,
244
+ /**
245
+ * If `true`, renders as disabled.
246
+ * @default false
247
+ */
248
+ disabled: PropTypes.bool,
249
+ /**
250
+ * If `true`, today's date is rendering without highlighting with circle.
251
+ * @default false
252
+ */
253
+ disableHighlightToday: PropTypes.bool,
254
+ /**
255
+ * If `true`, days are rendering without margin. Useful for displaying linked range of days.
256
+ * @default false
257
+ */
258
+ disableMargin: PropTypes.bool,
259
+ /**
260
+ * If `true`, the ripple effect is disabled.
261
+ *
262
+ * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
263
+ * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
264
+ * @default false
265
+ */
266
+ disableRipple: PropTypes.bool,
267
+ /**
268
+ * If `true`, the touch ripple effect is disabled.
269
+ * @default false
270
+ */
271
+ disableTouchRipple: PropTypes.bool,
272
+ /**
273
+ * If `true`, the base button will have a keyboard focus ripple.
274
+ * @default false
275
+ */
276
+ focusRipple: PropTypes.bool,
277
+ /**
278
+ * This prop can help identify which element has keyboard focus.
279
+ * The class name will be applied when the element gains the focus through keyboard interaction.
280
+ * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
281
+ * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
282
+ * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
283
+ * if needed.
284
+ */
285
+ focusVisibleClassName: PropTypes.string,
286
+ isAnimating: PropTypes.bool,
287
+ /**
288
+ * If `true`, day is the first visible cell of the month.
289
+ * Either the first day of the month or the first day of the week depending on `showDaysOutsideCurrentMonth`.
290
+ */
291
+ isFirstVisibleCell: PropTypes.bool.isRequired,
292
+ /**
293
+ * If `true`, day is the last visible cell of the month.
294
+ * Either the last day of the month or the last day of the week depending on `showDaysOutsideCurrentMonth`.
295
+ */
296
+ isLastVisibleCell: PropTypes.bool.isRequired,
297
+ /**
298
+ * Indicates if the day should be visually selected.
299
+ */
300
+ isVisuallySelected: PropTypes.bool,
301
+ onBlur: PropTypes.func,
302
+ onDaySelect: PropTypes.func.isRequired,
303
+ onFocus: PropTypes.func,
304
+ /**
305
+ * Callback fired when the component is focused with a keyboard.
306
+ * We trigger a `onFocus` callback too.
307
+ */
308
+ onFocusVisible: PropTypes.func,
309
+ onKeyDown: PropTypes.func,
310
+ onMouseEnter: PropTypes.func,
311
+ /**
312
+ * If `true`, day is outside of month and will be hidden.
313
+ */
314
+ outsideCurrentMonth: PropTypes.bool.isRequired,
315
+ /**
316
+ * If `true`, renders as selected.
317
+ * @default false
318
+ */
319
+ selected: PropTypes.bool,
320
+ /**
321
+ * If `true`, days outside the current month are rendered:
322
+ *
323
+ * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
324
+ *
325
+ * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
326
+ *
327
+ * - ignored if `calendars` equals more than `1` on range pickers.
328
+ * @default false
329
+ */
330
+ showDaysOutsideCurrentMonth: PropTypes.bool,
331
+ style: PropTypes.object,
332
+ /**
333
+ * The system prop that allows defining system overrides as well as additional CSS styles.
334
+ */
335
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
336
+ /**
337
+ * @default 0
338
+ */
339
+ tabIndex: PropTypes.number,
340
+ /**
341
+ * If `true`, renders as today date.
342
+ * @default false
343
+ */
344
+ today: PropTypes.bool,
345
+ /**
346
+ * Props applied to the `TouchRipple` element.
347
+ */
348
+ TouchRippleProps: PropTypes.object,
349
+ /**
350
+ * A ref that points to the `TouchRipple` element.
351
+ */
352
+ touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
353
+ current: PropTypes.shape({
354
+ pulsate: PropTypes.func.isRequired,
355
+ start: PropTypes.func.isRequired,
356
+ stop: PropTypes.func.isRequired
357
+ })
358
+ })])
359
+ } : void 0;
360
+ export const PickerDay2 = /*#__PURE__*/React.memo(PickerDay2Raw);
361
+ if (process.env.NODE_ENV !== "production") PickerDay2.displayName = "PickerDay2";
@@ -0,0 +1,18 @@
1
+ import { PickerDay2Classes } from "./pickerDay2Classes.js";
2
+ import { PickerDayOwnerState, PickersDayProps } from "../PickersDay/index.js";
3
+ export interface PickerDay2Props extends Omit<PickersDayProps, 'classes'> {
4
+ /**
5
+ * Override or extend the styles applied to the component.
6
+ */
7
+ classes?: Partial<PickerDay2Classes>;
8
+ /**
9
+ * Indicates if the day should be visually selected.
10
+ */
11
+ isVisuallySelected?: boolean;
12
+ }
13
+ export interface PickerDay2OwnerState extends PickerDayOwnerState {
14
+ /**
15
+ * Whether the day is a filler day (its content is hidden).
16
+ */
17
+ isDayFillerCell: boolean;
18
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,4 @@
1
+ export { PickerDay2 } from "./PickerDay2.js";
2
+ export type { PickerDay2Props, PickerDay2OwnerState } from "./PickerDay2.types.js";
3
+ export { getPickerDay2UtilityClass, pickerDay2Classes } from "./pickerDay2Classes.js";
4
+ export type { PickerDay2ClassKey } from "./pickerDay2Classes.js";
@@ -0,0 +1,2 @@
1
+ export { PickerDay2 } from "./PickerDay2.js";
2
+ export { getPickerDay2UtilityClass, pickerDay2Classes } from "./pickerDay2Classes.js";
@@ -0,0 +1,17 @@
1
+ export interface PickerDay2Classes {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=true`. */
5
+ dayOutsideMonth: string;
6
+ /** Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=false`. */
7
+ fillerCell: string;
8
+ /** Styles applied to the root element if `disableHighlightToday=false` and `today=true`. */
9
+ today: string;
10
+ /** State class applied to the root element if `selected=true`. */
11
+ selected: string;
12
+ /** State class applied to the root element if `disabled=true`. */
13
+ disabled: string;
14
+ }
15
+ export type PickerDay2ClassKey = keyof PickerDay2Classes;
16
+ export declare function getPickerDay2UtilityClass(slot: string): string;
17
+ export declare const pickerDay2Classes: Record<keyof PickerDay2Classes, string>;
@@ -0,0 +1,6 @@
1
+ import generateUtilityClass from '@mui/utils/generateUtilityClass';
2
+ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
3
+ export function getPickerDay2UtilityClass(slot) {
4
+ return generateUtilityClass('MuiPickerDay2', slot);
5
+ }
6
+ export const pickerDay2Classes = generateUtilityClasses('MuiPickerDay2', ['root', 'dayOutsideMonth', 'today', 'selected', 'disabled', 'fillerCell']);
@@ -217,7 +217,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
217
217
  onMouseDown: handleMouseDown
218
218
  }, other, {
219
219
  ownerState: ownerState,
220
- children: !children ? utils.format(day, 'dayOfMonth') : children
220
+ children: children ?? utils.format(day, 'dayOfMonth')
221
221
  }));
222
222
  });
223
223
  if (process.env.NODE_ENV !== "production") PickersDayRaw.displayName = "PickersDayRaw";
@@ -14,6 +14,7 @@ export declare const pickersFilledInputClasses: {
14
14
  readOnly: string;
15
15
  focused: string;
16
16
  error: string;
17
+ inputSizeSmall: string;
17
18
  notchedOutline: string;
18
19
  sectionsContainer: string;
19
20
  sectionBefore: string;
@@ -14,6 +14,7 @@ export declare const pickersInputClasses: {
14
14
  readOnly: string;
15
15
  focused: string;
16
16
  error: string;
17
+ inputSizeSmall: string;
17
18
  notchedOutline: string;
18
19
  sectionsContainer: string;
19
20
  sectionBefore: string;
@@ -9,6 +9,8 @@ export interface PickersInputBaseClasses {
9
9
  readOnly: string;
10
10
  /** State class applied to the root element if `error=true`. */
11
11
  error: string;
12
+ /** State class applied to the root element if `size=small`. */
13
+ inputSizeSmall: string;
12
14
  /** Styles applied to the NotchedOutline element. */
13
15
  notchedOutline: string;
14
16
  /** Styles applied to the real hidden input element. */
@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
3
3
  export function getPickersInputBaseUtilityClass(slot) {
4
4
  return generateUtilityClass('MuiPickersInputBase', slot);
5
5
  }
6
- export const pickersInputBaseClasses = generateUtilityClasses('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'activeBar']);
6
+ export const pickersInputBaseClasses = generateUtilityClasses('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'inputSizeSmall', 'activeBar']);
@@ -14,6 +14,7 @@ export declare const pickersOutlinedInputClasses: {
14
14
  readOnly: string;
15
15
  focused: string;
16
16
  error: string;
17
+ inputSizeSmall: string;
17
18
  sectionsContainer: string;
18
19
  sectionBefore: string;
19
20
  sectionAfter: string;
@@ -2,7 +2,7 @@
2
2
 
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
5
- const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
5
+ const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
6
6
  import * as React from 'react';
7
7
  import PropTypes from 'prop-types';
8
8
  import clsx from 'clsx';
@@ -59,6 +59,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
59
59
  error = false,
60
60
  variant = 'outlined',
61
61
  required = false,
62
+ hiddenLabel = false,
62
63
  // Props used by PickersInput
63
64
  InputProps,
64
65
  inputProps,
@@ -120,6 +121,8 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
120
121
  inputAdditionalProps.notched = InputLabelProps.shrink;
121
122
  }
122
123
  inputAdditionalProps.label = label;
124
+ } else if (variant === 'filled') {
125
+ inputAdditionalProps.hiddenLabel = hiddenLabel;
123
126
  }
124
127
  return /*#__PURE__*/_jsx(PickerTextFieldOwnerStateContext.Provider, {
125
128
  value: ownerState,
package/esm/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export * from "./DigitalClock/index.js";
3
3
  export * from "./MultiSectionDigitalClock/index.js";
4
4
  export * from "./LocalizationProvider/index.js";
5
5
  export * from "./PickersDay/index.js";
6
+ export * from "./PickerDay2/index.js";
6
7
  export * from "./locales/utils/pickersLocaleTextApi.js";
7
8
  export * from "./DateField/index.js";
8
9
  export * from "./TimeField/index.js";
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v8.5.1
2
+ * @mui/x-date-pickers v8.5.3
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -11,6 +11,7 @@ export * from "./DigitalClock/index.js";
11
11
  export * from "./MultiSectionDigitalClock/index.js";
12
12
  export * from "./LocalizationProvider/index.js";
13
13
  export * from "./PickersDay/index.js";
14
+ export * from "./PickerDay2/index.js";
14
15
  export * from "./locales/utils/pickersLocaleTextApi.js";
15
16
 
16
17
  // Fields
@@ -88,6 +88,10 @@ export interface PickerComponents<Theme = unknown> {
88
88
  defaultProps?: ComponentsProps['MuiPickersDay'];
89
89
  styleOverrides?: ComponentsOverrides<Theme, PickerDayOwnerState>['MuiPickersDay'];
90
90
  };
91
+ MuiPickerDay2?: {
92
+ defaultProps?: ComponentsProps['MuiPickerDay2'];
93
+ styleOverrides?: ComponentsOverrides<Theme>['MuiPickerDay2'];
94
+ };
91
95
  MuiPickersFadeTransitionGroup?: {
92
96
  defaultProps?: ComponentsProps['MuiPickersFadeTransitionGroup'];
93
97
  styleOverrides?: ComponentsOverrides<Theme>['MuiPickersFadeTransitionGroup'];
@@ -4,6 +4,7 @@ import { DayCalendarSkeletonClassKey } from "../DayCalendarSkeleton/index.js";
4
4
  import { ClockClassKey, ClockNumberClassKey, TimeClockClassKey, ClockPointerClassKey } from "../TimeClock/index.js";
5
5
  import { MonthCalendarClassKey } from "../MonthCalendar/index.js";
6
6
  import { PickersDayClassKey } from "../PickersDay/index.js";
7
+ import { PickerDay2ClassKey } from "../PickerDay2/index.js";
7
8
  import { YearCalendarClassKey } from "../YearCalendar/index.js";
8
9
  import { PickersLayoutClassKey } from "../PickersLayout/index.js";
9
10
  import { DatePickerToolbarClassKey } from "../DatePicker/index.js";
@@ -35,6 +36,7 @@ export interface PickersComponentNameToClassKey {
35
36
  MuiPickersArrowSwitcher: PickersArrowSwitcherClassKey;
36
37
  MuiPickersCalendarHeader: PickersCalendarHeaderClassKey;
37
38
  MuiPickersDay: PickersDayClassKey;
39
+ MuiPickerDay2: PickerDay2ClassKey;
38
40
  MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupClassKey;
39
41
  MuiPickersLayout: PickersLayoutClassKey;
40
42
  MuiPickerPopper: PickerPopperClassKey;