@box/blueprint-web 16.13.3 → 16.14.1
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.
|
@@ -26,6 +26,7 @@ const handleSubmitKeyPress = (key, callback) => {
|
|
|
26
26
|
callback();
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
+
const isRadixFocusGuard = element => element instanceof HTMLElement && element.hasAttribute('data-radix-focus-guard');
|
|
29
30
|
const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
30
31
|
const {
|
|
31
32
|
className,
|
|
@@ -96,6 +97,22 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
96
97
|
e.preventDefault();
|
|
97
98
|
}
|
|
98
99
|
}, []);
|
|
100
|
+
const onCloseAutoFocus = useCallback(e => {
|
|
101
|
+
e.preventDefault();
|
|
102
|
+
const {
|
|
103
|
+
activeElement
|
|
104
|
+
} = document;
|
|
105
|
+
const isFocusLost = !activeElement || activeElement === document.body || activeElement === document.documentElement || isRadixFocusGuard(activeElement);
|
|
106
|
+
const focusAlreadyOutsidePopover = !isFocusLost && !(e.currentTarget instanceof Node && e.currentTarget.contains(activeElement));
|
|
107
|
+
if (focusAlreadyOutsidePopover) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
if (shouldFocusStayInInput.current) {
|
|
111
|
+
firstDateSegmentRef.current?.focus();
|
|
112
|
+
} else {
|
|
113
|
+
calendarButtonRef.current?.focus();
|
|
114
|
+
}
|
|
115
|
+
}, []);
|
|
99
116
|
const onFocusOutside = useCallback(e => {
|
|
100
117
|
const wasCalendarButtonPressed = calendarButtonRef.current && calendarButtonRef.current.contains(e.target);
|
|
101
118
|
if (!wasCalendarButtonPressed) {
|
|
@@ -160,6 +177,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
160
177
|
onKeyDownCapture: onClearButtonKeypress,
|
|
161
178
|
size: "x-small"
|
|
162
179
|
}), jsx(Button, {
|
|
180
|
+
ref: calendarButtonRef,
|
|
163
181
|
"aria-expanded": isCalendarOpen,
|
|
164
182
|
"aria-label": openCalendarDropdownAriaLabel,
|
|
165
183
|
className: styles.button,
|
|
@@ -178,6 +196,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
178
196
|
children: jsx(RadixPopover.Content, {
|
|
179
197
|
align: "start",
|
|
180
198
|
className: styles.datePickerPopoverContent,
|
|
199
|
+
onCloseAutoFocus: onCloseAutoFocus,
|
|
181
200
|
onFocusOutside: onFocusOutside,
|
|
182
201
|
onOpenAutoFocus: onOpenAutoFocus,
|
|
183
202
|
sideOffset: 8,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.14.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@ariakit/react": "0.4.21",
|
|
52
52
|
"@ariakit/react-core": "0.4.21",
|
|
53
|
-
"@box/blueprint-web-assets": "^5.
|
|
53
|
+
"@box/blueprint-web-assets": "^5.6.1",
|
|
54
54
|
"@internationalized/date": "^3.12.0",
|
|
55
55
|
"@radix-ui/react-accordion": "1.1.2",
|
|
56
56
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"type-fest": "^3.2.0"
|
|
80
80
|
},
|
|
81
81
|
"devDependencies": {
|
|
82
|
-
"@box/storybook-utils": "^1.1
|
|
82
|
+
"@box/storybook-utils": "^1.2.1",
|
|
83
83
|
"@figma/code-connect": "1.4.4",
|
|
84
84
|
"@types/react": "^18.0.0",
|
|
85
85
|
"@types/react-dom": "^18.0.0",
|