@mui/x-date-pickers 5.0.8 → 5.0.10
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.
- package/CHANGELOG.md +109 -0
- package/MonthPicker/MonthPicker.js +5 -5
- package/YearPicker/YearPicker.js +4 -4
- package/index.js +1 -1
- package/internals/components/PickersPopper.js +2 -1
- package/internals/components/PickersToolbarText.d.ts +1 -1
- package/internals/components/wrappers/DesktopTooltipWrapper.js +2 -2
- package/internals/utils/utils.d.ts +1 -0
- package/internals/utils/utils.js +15 -1
- package/legacy/MonthPicker/MonthPicker.js +7 -5
- package/legacy/YearPicker/YearPicker.js +6 -4
- package/legacy/index.js +1 -1
- package/legacy/internals/components/PickersPopper.js +2 -1
- package/legacy/internals/components/wrappers/DesktopTooltipWrapper.js +2 -2
- package/legacy/internals/utils/utils.js +16 -1
- package/modern/MonthPicker/MonthPicker.js +5 -5
- package/modern/YearPicker/YearPicker.js +4 -4
- package/modern/index.js +1 -1
- package/modern/internals/components/PickersPopper.js +2 -1
- package/modern/internals/components/wrappers/DesktopTooltipWrapper.js +2 -2
- package/modern/internals/utils/utils.js +15 -1
- package/node/MonthPicker/MonthPicker.js +5 -5
- package/node/YearPicker/YearPicker.js +4 -4
- package/node/index.js +1 -1
- package/node/internals/components/PickersPopper.js +3 -1
- package/node/internals/components/wrappers/DesktopTooltipWrapper.js +1 -1
- package/node/internals/utils/utils.js +20 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,115 @@
|
|
|
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
|
+
## 5.17.15
|
|
7
|
+
|
|
8
|
+
_Dec 8, 2022_
|
|
9
|
+
|
|
10
|
+
We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
|
|
11
|
+
|
|
12
|
+
- ✨ Fix lazy-loading not working in `DataGridPremium` (#7130) @m4theushw
|
|
13
|
+
- 🐞 Bugfixes
|
|
14
|
+
|
|
15
|
+
### `@mui/x-data-grid@v5.17.15` / `@mui/x-data-grid-pro@v5.17.15` / `@mui/x-data-grid-premium@v5.17.15`
|
|
16
|
+
|
|
17
|
+
#### Changes
|
|
18
|
+
|
|
19
|
+
- [DataGridPremium] Add support for lazy-loading (#7130) @m4theushw
|
|
20
|
+
- [DataGridPremium] Pass `groupId` to the aggregation function (#7143) @m4theushw
|
|
21
|
+
|
|
22
|
+
### `@mui/x-date-pickers@v5.0.10` / `@mui/x-date-pickers-pro@v5.0.10`
|
|
23
|
+
|
|
24
|
+
#### Changes
|
|
25
|
+
|
|
26
|
+
- [pickers] Initialize date without time when selecting year or month (#7136) @LukasTy
|
|
27
|
+
|
|
28
|
+
### Docs
|
|
29
|
+
|
|
30
|
+
- [docs] Fix the nested import on the api pages (#7134) @flaviendelangle
|
|
31
|
+
- [docs] Keep track of the localization completion (#7099) @alexfauquette
|
|
32
|
+
- [docs] Update localization doc to use existing locale (#7104) @LukasTy
|
|
33
|
+
|
|
34
|
+
## 5.17.14
|
|
35
|
+
|
|
36
|
+
_Dec 1, 2022_
|
|
37
|
+
|
|
38
|
+
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
|
|
39
|
+
|
|
40
|
+
- 🌍 Improve Ukrainian (uk-UA) locale (#7035) @rettoua
|
|
41
|
+
- 🐞 Bugfixes
|
|
42
|
+
|
|
43
|
+
### `@mui/x-data-grid@v5.17.14` / `@mui/x-data-grid-pro@v5.17.14` / `@mui/x-data-grid-premium@v5.17.14`
|
|
44
|
+
|
|
45
|
+
#### Changes
|
|
46
|
+
|
|
47
|
+
- [DataGrid] Fix row selection when clicking blank cell (#7056) @yami03
|
|
48
|
+
- [DataGridPremium] Update cache before hydrating columns (#7043) @m4theushw
|
|
49
|
+
- [l10n] Improve Ukrainian (uk-UA) locale (#7035) @rettoua
|
|
50
|
+
|
|
51
|
+
## 5.17.13
|
|
52
|
+
|
|
53
|
+
_Nov 24, 2022_
|
|
54
|
+
|
|
55
|
+
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
|
|
56
|
+
|
|
57
|
+
- 🚀 Fix support of the pickers to Shadow DOM (#6971) @flaviendelangle
|
|
58
|
+
- 💅 Improve DataGrid theme augmentation (#6980) @iigrik
|
|
59
|
+
- 🐞 Bugfixes
|
|
60
|
+
|
|
61
|
+
### `@mui/x-data-grid@v5.17.13` / `@mui/x-data-grid-pro@v5.17.13` / `@mui/x-data-grid-premium@v5.17.13`
|
|
62
|
+
|
|
63
|
+
#### Changes
|
|
64
|
+
|
|
65
|
+
- [DataGrid] Fix `ErrorOverlay` not receiving defined input props (#6885) @banoth-ravinder
|
|
66
|
+
- [DataGrid] Improve typing for `styleOverrides` (#6980) @iigrik
|
|
67
|
+
- [DataGridPro] Fix lazy-loaded rows not working with `updateRows` API method (#6875) @cherniavskii
|
|
68
|
+
- [l10n] Fix translation of `filterOperatorBefore` in Arabic (ar-SD) locale (#6917) @HassanGhazy
|
|
69
|
+
|
|
70
|
+
### `@mui/x-date-pickers@v5.0.9` / `@mui/x-date-pickers-pro@v5.0.9`
|
|
71
|
+
|
|
72
|
+
#### Changes
|
|
73
|
+
|
|
74
|
+
- [pickers] Fix usage with Shadow DOM (#6971) @flaviendelangle
|
|
75
|
+
|
|
76
|
+
### Docs
|
|
77
|
+
|
|
78
|
+
- [docs] Add new "Expired package version" error type (#6937) @oliviertassinari
|
|
79
|
+
- [docs] Enforce values for installation options in Date / Time pickers Getting Started page (#6896) @01zulfi
|
|
80
|
+
- [docs] Fix live edit @oliviertassinari
|
|
81
|
+
- [docs] Upgrade to Next 13 (#6911) @cherniavskii
|
|
82
|
+
|
|
83
|
+
### Core
|
|
84
|
+
|
|
85
|
+
- [core] Upgrade monorepo (#6906) @cherniavskii
|
|
86
|
+
- [core] Upgrade node to v14.21 (#6939) @piwysocki
|
|
87
|
+
|
|
88
|
+
## 5.17.12
|
|
89
|
+
|
|
90
|
+
_Nov 17, 2022_
|
|
91
|
+
|
|
92
|
+
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
|
|
93
|
+
|
|
94
|
+
- 🌍 Improve Finnish (fi-FI) locale (#6859) @RainoPikkarainen
|
|
95
|
+
- 🐞 Bugfixes
|
|
96
|
+
|
|
97
|
+
### `@mui/x-data-grid@v5.17.12` / `@mui/x-data-grid-pro@v5.17.12` / `@mui/x-data-grid-premium@v5.17.12`
|
|
98
|
+
|
|
99
|
+
#### Changes
|
|
100
|
+
|
|
101
|
+
- [DataGrid] Fix conflict with the latest version of `@types/react` (#6883) @vizv
|
|
102
|
+
- [DataGridPremium] Support aggregating data from multiple row fields (#6844) @cherniavskii
|
|
103
|
+
- [DataGridPro] Fix detail panel not working with `getRowSpacing` prop (#6858) @cherniavskii
|
|
104
|
+
- [l10n] Improve Finnish (fi-FI) locale (#6859) @RainoPikkarainen
|
|
105
|
+
|
|
106
|
+
### Docs
|
|
107
|
+
|
|
108
|
+
- [docs] Clarify DataGrid Row Pinning docs (#6891) @cherniavskii
|
|
109
|
+
|
|
110
|
+
### Core
|
|
111
|
+
|
|
112
|
+
- [core] Upgrade monorepo (#6864) @m4theushw
|
|
113
|
+
- [license] Polish error messages (#6881) @oliviertassinari
|
|
114
|
+
|
|
6
115
|
## 5.17.11
|
|
7
116
|
|
|
8
117
|
_Nov 10, 2022_
|
|
@@ -76,7 +76,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
76
76
|
const ownerState = props;
|
|
77
77
|
const classes = useUtilityClasses(ownerState);
|
|
78
78
|
const theme = useTheme();
|
|
79
|
-
const
|
|
79
|
+
const selectedDateOrStartOfMonth = React.useMemo(() => date != null ? date : utils.startOfMonth(now), [now, utils, date]);
|
|
80
80
|
const selectedMonth = React.useMemo(() => {
|
|
81
81
|
if (date != null) {
|
|
82
82
|
return utils.getMonth(date);
|
|
@@ -113,7 +113,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
113
113
|
return;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
const newDate = utils.setMonth(
|
|
116
|
+
const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
|
|
117
117
|
onChange(newDate, 'finish');
|
|
118
118
|
};
|
|
119
119
|
|
|
@@ -131,7 +131,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
131
131
|
}
|
|
132
132
|
}, [setInternalHasFocus, onFocusedViewChange]);
|
|
133
133
|
const focusMonth = React.useCallback(month => {
|
|
134
|
-
if (!isMonthDisabled(utils.setMonth(
|
|
134
|
+
if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
|
|
135
135
|
setFocusedMonth(month);
|
|
136
136
|
changeHasFocus(true);
|
|
137
137
|
|
|
@@ -139,7 +139,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
139
139
|
onMonthFocus(month);
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
}, [
|
|
142
|
+
}, [isMonthDisabled, utils, selectedDateOrStartOfMonth, changeHasFocus, onMonthFocus]);
|
|
143
143
|
React.useEffect(() => {
|
|
144
144
|
setFocusedMonth(prevFocusedMonth => selectedMonth !== null && prevFocusedMonth !== selectedMonth ? selectedMonth : prevFocusedMonth);
|
|
145
145
|
}, [selectedMonth]);
|
|
@@ -185,7 +185,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
185
185
|
ownerState: ownerState,
|
|
186
186
|
onKeyDown: handleKeyDown
|
|
187
187
|
}, other, {
|
|
188
|
-
children: utils.getMonthArray(
|
|
188
|
+
children: utils.getMonthArray(selectedDateOrStartOfMonth).map(month => {
|
|
189
189
|
const monthNumber = utils.getMonth(month);
|
|
190
190
|
const monthText = utils.format(month, 'monthShort');
|
|
191
191
|
const isDisabled = disabled || isMonthDisabled(month);
|
package/YearPicker/YearPicker.js
CHANGED
|
@@ -76,7 +76,7 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
|
|
|
76
76
|
} = props;
|
|
77
77
|
const ownerState = props;
|
|
78
78
|
const classes = useUtilityClasses(ownerState);
|
|
79
|
-
const
|
|
79
|
+
const selectedDateOrStartOfYear = React.useMemo(() => date != null ? date : utils.startOfYear(now), [now, utils, date]);
|
|
80
80
|
const currentYear = React.useMemo(() => {
|
|
81
81
|
if (date != null) {
|
|
82
82
|
return utils.getYear(date);
|
|
@@ -133,17 +133,17 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
|
|
|
133
133
|
return;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
const newDate = utils.setYear(
|
|
136
|
+
const newDate = utils.setYear(selectedDateOrStartOfYear, year);
|
|
137
137
|
onChange(newDate, isFinish);
|
|
138
138
|
};
|
|
139
139
|
|
|
140
140
|
const focusYear = React.useCallback(year => {
|
|
141
|
-
if (!isYearDisabled(utils.setYear(
|
|
141
|
+
if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
|
|
142
142
|
setFocusedYear(year);
|
|
143
143
|
changeHasFocus(true);
|
|
144
144
|
onYearFocus == null ? void 0 : onYearFocus(year);
|
|
145
145
|
}
|
|
146
|
-
}, [isYearDisabled, utils,
|
|
146
|
+
}, [isYearDisabled, utils, selectedDateOrStartOfYear, changeHasFocus, onYearFocus]);
|
|
147
147
|
React.useEffect(() => {
|
|
148
148
|
setFocusedYear(prevFocusedYear => currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear);
|
|
149
149
|
}, [currentYear]);
|
package/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
|
|
|
11
11
|
import { unstable_composeClasses as composeClasses } from '@mui/material';
|
|
12
12
|
import { PickersActionBar } from '../../PickersActionBar';
|
|
13
13
|
import { getPickersPopperUtilityClass } from './pickersPopperClasses';
|
|
14
|
+
import { getActiveElement } from '../utils/utils';
|
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
17
|
|
|
@@ -213,7 +214,7 @@ export function PickersPopper(inProps) {
|
|
|
213
214
|
}
|
|
214
215
|
|
|
215
216
|
if (open) {
|
|
216
|
-
lastFocusedElementRef.current = document
|
|
217
|
+
lastFocusedElementRef.current = getActiveElement(document);
|
|
217
218
|
} else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
|
|
218
219
|
// make sure the button is flushed with updated label, before returning focus to it
|
|
219
220
|
// avoids issue, where screen reader could fail to announce selected date after selection
|
|
@@ -6,4 +6,4 @@ export interface PickersToolbarTextProps extends Omit<TypographyProps, 'classes'
|
|
|
6
6
|
value: React.ReactNode;
|
|
7
7
|
classes?: Partial<PickersToolbarTextClasses>;
|
|
8
8
|
}
|
|
9
|
-
export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "selected" | "p" | "slot" | "style" | "title" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "translate" | "className" | "classes" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;
|
|
9
|
+
export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "selected" | "p" | "slot" | "style" | "title" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "translate" | "className" | "classes" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;
|
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useForkRef } from '@mui/material/utils';
|
|
4
4
|
import { WrapperVariantContext } from './WrapperVariantContext';
|
|
5
|
-
import { executeInTheNextEventLoopTick } from '../../utils/utils';
|
|
5
|
+
import { executeInTheNextEventLoopTick, getActiveElement } from '../../utils/utils';
|
|
6
6
|
import { PickersPopper } from '../PickersPopper';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -30,7 +30,7 @@ export function DesktopTooltipWrapper(props) {
|
|
|
30
30
|
executeInTheNextEventLoopTick(() => {
|
|
31
31
|
var _inputContainerRef$cu, _popperRef$current;
|
|
32
32
|
|
|
33
|
-
if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(document
|
|
33
|
+
if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -3,3 +3,4 @@ export declare function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems:
|
|
|
3
3
|
export declare const onSpaceOrEnter: (innerFn: (ev: React.MouseEvent<any> | React.KeyboardEvent<any>) => void, onFocus?: ((event: React.KeyboardEvent<any>) => void) | undefined) => (event: React.KeyboardEvent) => void;
|
|
4
4
|
export declare const executeInTheNextEventLoopTick: (fn: () => void) => void;
|
|
5
5
|
export declare const doNothing: () => void;
|
|
6
|
+
export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
|
package/internals/utils/utils.js
CHANGED
|
@@ -21,4 +21,18 @@ export const onSpaceOrEnter = (innerFn, onFocus) => event => {
|
|
|
21
21
|
export const executeInTheNextEventLoopTick = fn => {
|
|
22
22
|
setTimeout(fn, 0);
|
|
23
23
|
};
|
|
24
|
-
export const doNothing = () => {};
|
|
24
|
+
export const doNothing = () => {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
|
|
25
|
+
|
|
26
|
+
export const getActiveElement = (root = document) => {
|
|
27
|
+
const activeEl = root.activeElement;
|
|
28
|
+
|
|
29
|
+
if (!activeEl) {
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (activeEl.shadowRoot) {
|
|
34
|
+
return getActiveElement(activeEl.shadowRoot);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return activeEl;
|
|
38
|
+
};
|
|
@@ -76,7 +76,9 @@ export var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inPr
|
|
|
76
76
|
var ownerState = props;
|
|
77
77
|
var classes = useUtilityClasses(ownerState);
|
|
78
78
|
var theme = useTheme();
|
|
79
|
-
var
|
|
79
|
+
var selectedDateOrStartOfMonth = React.useMemo(function () {
|
|
80
|
+
return date != null ? date : utils.startOfMonth(now);
|
|
81
|
+
}, [now, utils, date]);
|
|
80
82
|
var selectedMonth = React.useMemo(function () {
|
|
81
83
|
if (date != null) {
|
|
82
84
|
return utils.getMonth(date);
|
|
@@ -120,7 +122,7 @@ export var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inPr
|
|
|
120
122
|
return;
|
|
121
123
|
}
|
|
122
124
|
|
|
123
|
-
var newDate = utils.setMonth(
|
|
125
|
+
var newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
|
|
124
126
|
onChange(newDate, 'finish');
|
|
125
127
|
};
|
|
126
128
|
|
|
@@ -142,7 +144,7 @@ export var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inPr
|
|
|
142
144
|
}
|
|
143
145
|
}, [setInternalHasFocus, onFocusedViewChange]);
|
|
144
146
|
var focusMonth = React.useCallback(function (month) {
|
|
145
|
-
if (!isMonthDisabled(utils.setMonth(
|
|
147
|
+
if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
|
|
146
148
|
setFocusedMonth(month);
|
|
147
149
|
changeHasFocus(true);
|
|
148
150
|
|
|
@@ -150,7 +152,7 @@ export var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inPr
|
|
|
150
152
|
onMonthFocus(month);
|
|
151
153
|
}
|
|
152
154
|
}
|
|
153
|
-
}, [
|
|
155
|
+
}, [isMonthDisabled, utils, selectedDateOrStartOfMonth, changeHasFocus, onMonthFocus]);
|
|
154
156
|
React.useEffect(function () {
|
|
155
157
|
setFocusedMonth(function (prevFocusedMonth) {
|
|
156
158
|
return selectedMonth !== null && prevFocusedMonth !== selectedMonth ? selectedMonth : prevFocusedMonth;
|
|
@@ -198,7 +200,7 @@ export var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inPr
|
|
|
198
200
|
ownerState: ownerState,
|
|
199
201
|
onKeyDown: handleKeyDown
|
|
200
202
|
}, other, {
|
|
201
|
-
children: utils.getMonthArray(
|
|
203
|
+
children: utils.getMonthArray(selectedDateOrStartOfMonth).map(function (month) {
|
|
202
204
|
var monthNumber = utils.getMonth(month);
|
|
203
205
|
var monthText = utils.format(month, 'monthShort');
|
|
204
206
|
var isDisabled = disabled || isMonthDisabled(month);
|
|
@@ -75,7 +75,9 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
|
|
|
75
75
|
onFocusedViewChange = props.onFocusedViewChange;
|
|
76
76
|
var ownerState = props;
|
|
77
77
|
var classes = useUtilityClasses(ownerState);
|
|
78
|
-
var
|
|
78
|
+
var selectedDateOrStartOfYear = React.useMemo(function () {
|
|
79
|
+
return date != null ? date : utils.startOfYear(now);
|
|
80
|
+
}, [now, utils, date]);
|
|
79
81
|
var currentYear = React.useMemo(function () {
|
|
80
82
|
if (date != null) {
|
|
81
83
|
return utils.getYear(date);
|
|
@@ -145,17 +147,17 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
|
|
|
145
147
|
return;
|
|
146
148
|
}
|
|
147
149
|
|
|
148
|
-
var newDate = utils.setYear(
|
|
150
|
+
var newDate = utils.setYear(selectedDateOrStartOfYear, year);
|
|
149
151
|
onChange(newDate, isFinish);
|
|
150
152
|
};
|
|
151
153
|
|
|
152
154
|
var focusYear = React.useCallback(function (year) {
|
|
153
|
-
if (!isYearDisabled(utils.setYear(
|
|
155
|
+
if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
|
|
154
156
|
setFocusedYear(year);
|
|
155
157
|
changeHasFocus(true);
|
|
156
158
|
onYearFocus == null ? void 0 : onYearFocus(year);
|
|
157
159
|
}
|
|
158
|
-
}, [isYearDisabled, utils,
|
|
160
|
+
}, [isYearDisabled, utils, selectedDateOrStartOfYear, changeHasFocus, onYearFocus]);
|
|
159
161
|
React.useEffect(function () {
|
|
160
162
|
setFocusedYear(function (prevFocusedYear) {
|
|
161
163
|
return currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear;
|
package/legacy/index.js
CHANGED
|
@@ -12,6 +12,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
|
|
|
12
12
|
import { unstable_composeClasses as composeClasses } from '@mui/material';
|
|
13
13
|
import { PickersActionBar } from '../../PickersActionBar';
|
|
14
14
|
import { getPickersPopperUtilityClass } from './pickersPopperClasses';
|
|
15
|
+
import { getActiveElement } from '../utils/utils';
|
|
15
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
18
|
|
|
@@ -219,7 +220,7 @@ export function PickersPopper(inProps) {
|
|
|
219
220
|
}
|
|
220
221
|
|
|
221
222
|
if (open) {
|
|
222
|
-
lastFocusedElementRef.current = document
|
|
223
|
+
lastFocusedElementRef.current = getActiveElement(document);
|
|
223
224
|
} else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
|
|
224
225
|
// make sure the button is flushed with updated label, before returning focus to it
|
|
225
226
|
// avoids issue, where screen reader could fail to announce selected date after selection
|
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useForkRef } from '@mui/material/utils';
|
|
4
4
|
import { WrapperVariantContext } from './WrapperVariantContext';
|
|
5
|
-
import { executeInTheNextEventLoopTick } from '../../utils/utils';
|
|
5
|
+
import { executeInTheNextEventLoopTick, getActiveElement } from '../../utils/utils';
|
|
6
6
|
import { PickersPopper } from '../PickersPopper';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -28,7 +28,7 @@ export function DesktopTooltipWrapper(props) {
|
|
|
28
28
|
executeInTheNextEventLoopTick(function () {
|
|
29
29
|
var _inputContainerRef$cu, _popperRef$current;
|
|
30
30
|
|
|
31
|
-
if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(document
|
|
31
|
+
if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -25,4 +25,19 @@ export var onSpaceOrEnter = function onSpaceOrEnter(innerFn, onFocus) {
|
|
|
25
25
|
export var executeInTheNextEventLoopTick = function executeInTheNextEventLoopTick(fn) {
|
|
26
26
|
setTimeout(fn, 0);
|
|
27
27
|
};
|
|
28
|
-
export var doNothing = function doNothing() {};
|
|
28
|
+
export var doNothing = function doNothing() {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
|
|
29
|
+
|
|
30
|
+
export var getActiveElement = function getActiveElement() {
|
|
31
|
+
var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
|
32
|
+
var activeEl = root.activeElement;
|
|
33
|
+
|
|
34
|
+
if (!activeEl) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
if (activeEl.shadowRoot) {
|
|
39
|
+
return getActiveElement(activeEl.shadowRoot);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return activeEl;
|
|
43
|
+
};
|
|
@@ -76,7 +76,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
76
76
|
const ownerState = props;
|
|
77
77
|
const classes = useUtilityClasses(ownerState);
|
|
78
78
|
const theme = useTheme();
|
|
79
|
-
const
|
|
79
|
+
const selectedDateOrStartOfMonth = React.useMemo(() => date ?? utils.startOfMonth(now), [now, utils, date]);
|
|
80
80
|
const selectedMonth = React.useMemo(() => {
|
|
81
81
|
if (date != null) {
|
|
82
82
|
return utils.getMonth(date);
|
|
@@ -113,7 +113,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
113
113
|
return;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
const newDate = utils.setMonth(
|
|
116
|
+
const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
|
|
117
117
|
onChange(newDate, 'finish');
|
|
118
118
|
};
|
|
119
119
|
|
|
@@ -131,7 +131,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
131
131
|
}
|
|
132
132
|
}, [setInternalHasFocus, onFocusedViewChange]);
|
|
133
133
|
const focusMonth = React.useCallback(month => {
|
|
134
|
-
if (!isMonthDisabled(utils.setMonth(
|
|
134
|
+
if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
|
|
135
135
|
setFocusedMonth(month);
|
|
136
136
|
changeHasFocus(true);
|
|
137
137
|
|
|
@@ -139,7 +139,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
139
139
|
onMonthFocus(month);
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
}, [
|
|
142
|
+
}, [isMonthDisabled, utils, selectedDateOrStartOfMonth, changeHasFocus, onMonthFocus]);
|
|
143
143
|
React.useEffect(() => {
|
|
144
144
|
setFocusedMonth(prevFocusedMonth => selectedMonth !== null && prevFocusedMonth !== selectedMonth ? selectedMonth : prevFocusedMonth);
|
|
145
145
|
}, [selectedMonth]);
|
|
@@ -185,7 +185,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
|
|
|
185
185
|
ownerState: ownerState,
|
|
186
186
|
onKeyDown: handleKeyDown
|
|
187
187
|
}, other, {
|
|
188
|
-
children: utils.getMonthArray(
|
|
188
|
+
children: utils.getMonthArray(selectedDateOrStartOfMonth).map(month => {
|
|
189
189
|
const monthNumber = utils.getMonth(month);
|
|
190
190
|
const monthText = utils.format(month, 'monthShort');
|
|
191
191
|
const isDisabled = disabled || isMonthDisabled(month);
|
|
@@ -76,7 +76,7 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
|
|
|
76
76
|
} = props;
|
|
77
77
|
const ownerState = props;
|
|
78
78
|
const classes = useUtilityClasses(ownerState);
|
|
79
|
-
const
|
|
79
|
+
const selectedDateOrStartOfYear = React.useMemo(() => date ?? utils.startOfYear(now), [now, utils, date]);
|
|
80
80
|
const currentYear = React.useMemo(() => {
|
|
81
81
|
if (date != null) {
|
|
82
82
|
return utils.getYear(date);
|
|
@@ -133,17 +133,17 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
|
|
|
133
133
|
return;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
const newDate = utils.setYear(
|
|
136
|
+
const newDate = utils.setYear(selectedDateOrStartOfYear, year);
|
|
137
137
|
onChange(newDate, isFinish);
|
|
138
138
|
};
|
|
139
139
|
|
|
140
140
|
const focusYear = React.useCallback(year => {
|
|
141
|
-
if (!isYearDisabled(utils.setYear(
|
|
141
|
+
if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
|
|
142
142
|
setFocusedYear(year);
|
|
143
143
|
changeHasFocus(true);
|
|
144
144
|
onYearFocus?.(year);
|
|
145
145
|
}
|
|
146
|
-
}, [isYearDisabled, utils,
|
|
146
|
+
}, [isYearDisabled, utils, selectedDateOrStartOfYear, changeHasFocus, onYearFocus]);
|
|
147
147
|
React.useEffect(() => {
|
|
148
148
|
setFocusedYear(prevFocusedYear => currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear);
|
|
149
149
|
}, [currentYear]);
|
package/modern/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
|
|
|
11
11
|
import { unstable_composeClasses as composeClasses } from '@mui/material';
|
|
12
12
|
import { PickersActionBar } from '../../PickersActionBar';
|
|
13
13
|
import { getPickersPopperUtilityClass } from './pickersPopperClasses';
|
|
14
|
+
import { getActiveElement } from '../utils/utils';
|
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
17
|
|
|
@@ -211,7 +212,7 @@ export function PickersPopper(inProps) {
|
|
|
211
212
|
}
|
|
212
213
|
|
|
213
214
|
if (open) {
|
|
214
|
-
lastFocusedElementRef.current = document
|
|
215
|
+
lastFocusedElementRef.current = getActiveElement(document);
|
|
215
216
|
} else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
|
|
216
217
|
// make sure the button is flushed with updated label, before returning focus to it
|
|
217
218
|
// avoids issue, where screen reader could fail to announce selected date after selection
|
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useForkRef } from '@mui/material/utils';
|
|
4
4
|
import { WrapperVariantContext } from './WrapperVariantContext';
|
|
5
|
-
import { executeInTheNextEventLoopTick } from '../../utils/utils';
|
|
5
|
+
import { executeInTheNextEventLoopTick, getActiveElement } from '../../utils/utils';
|
|
6
6
|
import { PickersPopper } from '../PickersPopper';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -28,7 +28,7 @@ export function DesktopTooltipWrapper(props) {
|
|
|
28
28
|
|
|
29
29
|
const handleBlur = () => {
|
|
30
30
|
executeInTheNextEventLoopTick(() => {
|
|
31
|
-
if (inputContainerRef.current?.contains(document
|
|
31
|
+
if (inputContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -21,4 +21,18 @@ export const onSpaceOrEnter = (innerFn, onFocus) => event => {
|
|
|
21
21
|
export const executeInTheNextEventLoopTick = fn => {
|
|
22
22
|
setTimeout(fn, 0);
|
|
23
23
|
};
|
|
24
|
-
export const doNothing = () => {};
|
|
24
|
+
export const doNothing = () => {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
|
|
25
|
+
|
|
26
|
+
export const getActiveElement = (root = document) => {
|
|
27
|
+
const activeEl = root.activeElement;
|
|
28
|
+
|
|
29
|
+
if (!activeEl) {
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (activeEl.shadowRoot) {
|
|
34
|
+
return getActiveElement(activeEl.shadowRoot);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return activeEl;
|
|
38
|
+
};
|
|
@@ -102,7 +102,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
|
|
|
102
102
|
const ownerState = props;
|
|
103
103
|
const classes = useUtilityClasses(ownerState);
|
|
104
104
|
const theme = (0, _system.useTheme)();
|
|
105
|
-
const
|
|
105
|
+
const selectedDateOrStartOfMonth = React.useMemo(() => date != null ? date : utils.startOfMonth(now), [now, utils, date]);
|
|
106
106
|
const selectedMonth = React.useMemo(() => {
|
|
107
107
|
if (date != null) {
|
|
108
108
|
return utils.getMonth(date);
|
|
@@ -139,7 +139,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
|
|
|
139
139
|
return;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
const newDate = utils.setMonth(
|
|
142
|
+
const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
|
|
143
143
|
onChange(newDate, 'finish');
|
|
144
144
|
};
|
|
145
145
|
|
|
@@ -157,7 +157,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
|
|
|
157
157
|
}
|
|
158
158
|
}, [setInternalHasFocus, onFocusedViewChange]);
|
|
159
159
|
const focusMonth = React.useCallback(month => {
|
|
160
|
-
if (!isMonthDisabled(utils.setMonth(
|
|
160
|
+
if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
|
|
161
161
|
setFocusedMonth(month);
|
|
162
162
|
changeHasFocus(true);
|
|
163
163
|
|
|
@@ -165,7 +165,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
|
|
|
165
165
|
onMonthFocus(month);
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
|
-
}, [
|
|
168
|
+
}, [isMonthDisabled, utils, selectedDateOrStartOfMonth, changeHasFocus, onMonthFocus]);
|
|
169
169
|
React.useEffect(() => {
|
|
170
170
|
setFocusedMonth(prevFocusedMonth => selectedMonth !== null && prevFocusedMonth !== selectedMonth ? selectedMonth : prevFocusedMonth);
|
|
171
171
|
}, [selectedMonth]);
|
|
@@ -211,7 +211,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
|
|
|
211
211
|
ownerState: ownerState,
|
|
212
212
|
onKeyDown: handleKeyDown
|
|
213
213
|
}, other, {
|
|
214
|
-
children: utils.getMonthArray(
|
|
214
|
+
children: utils.getMonthArray(selectedDateOrStartOfMonth).map(month => {
|
|
215
215
|
const monthNumber = utils.getMonth(month);
|
|
216
216
|
const monthText = utils.format(month, 'monthShort');
|
|
217
217
|
const isDisabled = disabled || isMonthDisabled(month);
|
|
@@ -102,7 +102,7 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
|
|
|
102
102
|
} = props;
|
|
103
103
|
const ownerState = props;
|
|
104
104
|
const classes = useUtilityClasses(ownerState);
|
|
105
|
-
const
|
|
105
|
+
const selectedDateOrStartOfYear = React.useMemo(() => date != null ? date : utils.startOfYear(now), [now, utils, date]);
|
|
106
106
|
const currentYear = React.useMemo(() => {
|
|
107
107
|
if (date != null) {
|
|
108
108
|
return utils.getYear(date);
|
|
@@ -159,17 +159,17 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
|
|
|
159
159
|
return;
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
-
const newDate = utils.setYear(
|
|
162
|
+
const newDate = utils.setYear(selectedDateOrStartOfYear, year);
|
|
163
163
|
onChange(newDate, isFinish);
|
|
164
164
|
};
|
|
165
165
|
|
|
166
166
|
const focusYear = React.useCallback(year => {
|
|
167
|
-
if (!isYearDisabled(utils.setYear(
|
|
167
|
+
if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
|
|
168
168
|
setFocusedYear(year);
|
|
169
169
|
changeHasFocus(true);
|
|
170
170
|
onYearFocus == null ? void 0 : onYearFocus(year);
|
|
171
171
|
}
|
|
172
|
-
}, [isYearDisabled, utils,
|
|
172
|
+
}, [isYearDisabled, utils, selectedDateOrStartOfYear, changeHasFocus, onYearFocus]);
|
|
173
173
|
React.useEffect(() => {
|
|
174
174
|
setFocusedYear(prevFocusedYear => currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear);
|
|
175
175
|
}, [currentYear]);
|
package/node/index.js
CHANGED
|
@@ -31,6 +31,8 @@ var _PickersActionBar = require("../../PickersActionBar");
|
|
|
31
31
|
|
|
32
32
|
var _pickersPopperClasses = require("./pickersPopperClasses");
|
|
33
33
|
|
|
34
|
+
var _utils2 = require("../utils/utils");
|
|
35
|
+
|
|
34
36
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
35
37
|
|
|
36
38
|
const _excluded = ["onClick", "onTouchStart"];
|
|
@@ -238,7 +240,7 @@ function PickersPopper(inProps) {
|
|
|
238
240
|
}
|
|
239
241
|
|
|
240
242
|
if (open) {
|
|
241
|
-
lastFocusedElementRef.current = document
|
|
243
|
+
lastFocusedElementRef.current = (0, _utils2.getActiveElement)(document);
|
|
242
244
|
} else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
|
|
243
245
|
// make sure the button is flushed with updated label, before returning focus to it
|
|
244
246
|
// avoids issue, where screen reader could fail to announce selected date after selection
|
|
@@ -49,7 +49,7 @@ function DesktopTooltipWrapper(props) {
|
|
|
49
49
|
(0, _utils2.executeInTheNextEventLoopTick)(() => {
|
|
50
50
|
var _inputContainerRef$cu, _popperRef$current;
|
|
51
51
|
|
|
52
|
-
if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(
|
|
52
|
+
if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains((0, _utils2.getActiveElement)(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains((0, _utils2.getActiveElement)(document))) {
|
|
53
53
|
return;
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.arrayIncludes = arrayIncludes;
|
|
7
|
-
exports.onSpaceOrEnter = exports.executeInTheNextEventLoopTick = exports.doNothing = void 0;
|
|
7
|
+
exports.onSpaceOrEnter = exports.getActiveElement = exports.executeInTheNextEventLoopTick = exports.doNothing = void 0;
|
|
8
8
|
|
|
9
9
|
/* Use it instead of .includes method for IE support */
|
|
10
10
|
function arrayIncludes(array, itemOrItems) {
|
|
@@ -36,6 +36,23 @@ const executeInTheNextEventLoopTick = fn => {
|
|
|
36
36
|
|
|
37
37
|
exports.executeInTheNextEventLoopTick = executeInTheNextEventLoopTick;
|
|
38
38
|
|
|
39
|
-
const doNothing = () => {};
|
|
39
|
+
const doNothing = () => {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
|
|
42
|
+
exports.doNothing = doNothing;
|
|
43
|
+
|
|
44
|
+
const getActiveElement = (root = document) => {
|
|
45
|
+
const activeEl = root.activeElement;
|
|
46
|
+
|
|
47
|
+
if (!activeEl) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
if (activeEl.shadowRoot) {
|
|
52
|
+
return getActiveElement(activeEl.shadowRoot);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return activeEl;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
exports.getActiveElement = getActiveElement;
|