@stack-spot/portal-layout 0.0.25 → 0.0.27
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/dist/components/SelectionList.d.ts.map +1 -1
- package/dist/components/SelectionList.js +3 -56
- package/dist/components/SelectionList.js.map +1 -1
- package/dist/components/menu/MenuContent.d.ts +10 -8
- package/dist/components/menu/MenuContent.d.ts.map +1 -1
- package/dist/components/menu/MenuContent.js +9 -3
- package/dist/components/menu/MenuContent.js.map +1 -1
- package/dist/components/menu/MenuSections.d.ts.map +1 -1
- package/dist/components/menu/MenuSections.js +34 -9
- package/dist/components/menu/MenuSections.js.map +1 -1
- package/dist/components/menu/PageSelector.js +1 -1
- package/dist/components/menu/PageSelector.js.map +1 -1
- package/dist/components/menu/types.d.ts +10 -2
- package/dist/components/menu/types.d.ts.map +1 -1
- package/dist/components/menu/{useCheckTextOverflow.d.ts → use-check-text-overflow.d.ts} +1 -1
- package/dist/components/menu/use-check-text-overflow.d.ts.map +1 -0
- package/dist/components/menu/{useCheckTextOverflow.js → use-check-text-overflow.js} +1 -1
- package/dist/components/menu/use-check-text-overflow.js.map +1 -0
- package/dist/components/menu/use-keyboard-controls.d.ts +10 -0
- package/dist/components/menu/use-keyboard-controls.d.ts.map +1 -0
- package/dist/components/menu/use-keyboard-controls.js +74 -0
- package/dist/components/menu/use-keyboard-controls.js.map +1 -0
- package/dist/layout.css +27 -6
- package/package.json +5 -5
- package/src/components/SelectionList.tsx +3 -59
- package/src/components/menu/MenuContent.tsx +9 -2
- package/src/components/menu/MenuSections.tsx +95 -35
- package/src/components/menu/PageSelector.tsx +1 -1
- package/src/components/menu/types.ts +10 -2
- package/src/components/menu/{useCheckTextOverflow.tsx → use-check-text-overflow.tsx} +2 -2
- package/src/components/menu/use-keyboard-controls.tsx +88 -0
- package/src/layout.css +27 -6
- package/dist/components/error/ErrorDescriptor.d.ts +0 -12
- package/dist/components/error/ErrorDescriptor.d.ts.map +0 -1
- package/dist/components/error/ErrorDescriptor.js +0 -17
- package/dist/components/error/ErrorDescriptor.js.map +0 -1
- package/dist/components/menu/useCheckTextOverflow.d.ts.map +0 -1
- package/dist/components/menu/useCheckTextOverflow.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAA;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoHD,eAAO,MAAM,aAAa,wFAEvB,kBAAkB,4CAuDpB,CAAA"}
|
|
@@ -4,8 +4,9 @@ import { ArrowLeft, Check, ChevronRight } from '@citric/icons';
|
|
|
4
4
|
import { IconButton } from '@citric/ui';
|
|
5
5
|
import { listToClass, theme } from '@stack-spot/portal-theme';
|
|
6
6
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
7
|
-
import {
|
|
7
|
+
import { useMemo, useState } from 'react';
|
|
8
8
|
import { styled } from 'styled-components';
|
|
9
|
+
import { useKeyboardControls } from './menu/use-keyboard-controls.js';
|
|
9
10
|
const ANIMATION_DURATION_MS = 300;
|
|
10
11
|
const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`;
|
|
11
12
|
const SelectionBox = styled.div `
|
|
@@ -89,67 +90,13 @@ function renderItem(item, options) {
|
|
|
89
90
|
}
|
|
90
91
|
export const SelectionList = ({ id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, }) => {
|
|
91
92
|
const t = useTranslate(dictionary);
|
|
92
|
-
const wrapper = useRef(null);
|
|
93
93
|
const [current, setCurrent] = useState({ items });
|
|
94
94
|
const listItems = useMemo(() => current.items.map(i => renderItem(i, {
|
|
95
95
|
setCurrent: (next) => setCurrent({ ...next, parent: current }),
|
|
96
96
|
onClose: onHide,
|
|
97
97
|
controllerId: id,
|
|
98
98
|
})), [current]);
|
|
99
|
-
const
|
|
100
|
-
const target = event?.target;
|
|
101
|
-
function getSelectableAnchors() {
|
|
102
|
-
return wrapper.current?.querySelectorAll('li.action a, li.collapsible a, button') ?? [];
|
|
103
|
-
}
|
|
104
|
-
function handleArrows(key = event.key) {
|
|
105
|
-
const anchors = getSelectableAnchors();
|
|
106
|
-
let i = 0;
|
|
107
|
-
while (i < anchors.length && document.activeElement !== anchors[i])
|
|
108
|
-
i++;
|
|
109
|
-
const next = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1]);
|
|
110
|
-
next?.focus?.();
|
|
111
|
-
}
|
|
112
|
-
const handlers = {
|
|
113
|
-
Escape: () => {
|
|
114
|
-
onHide?.();
|
|
115
|
-
event.stopPropagation();
|
|
116
|
-
event.preventDefault();
|
|
117
|
-
},
|
|
118
|
-
Enter: () => target?.click(),
|
|
119
|
-
Tab: () => {
|
|
120
|
-
const anchors = getSelectableAnchors();
|
|
121
|
-
if (document.activeElement === anchors[anchors.length - 1])
|
|
122
|
-
onHide?.();
|
|
123
|
-
else {
|
|
124
|
-
handleArrows('ArrowDown');
|
|
125
|
-
event.preventDefault();
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
ArrowUp: handleArrows,
|
|
129
|
-
ArrowDown: handleArrows,
|
|
130
|
-
};
|
|
131
|
-
handlers[event.key]?.();
|
|
132
|
-
}, []);
|
|
133
|
-
const hide = useCallback((event) => {
|
|
134
|
-
const target = event.target;
|
|
135
|
-
// if the element is not in the DOM anymore, we'll consider the click was inside the selection list
|
|
136
|
-
const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target);
|
|
137
|
-
const isAction = target?.classList?.contains('action') || !!target?.closest('.action');
|
|
138
|
-
if (!isClickInsideSelectionList || isAction)
|
|
139
|
-
onHide?.();
|
|
140
|
-
}, []);
|
|
141
|
-
useEffect(() => {
|
|
142
|
-
if (visible) {
|
|
143
|
-
setCurrent({ items });
|
|
144
|
-
document.addEventListener('keydown', keyboardControls);
|
|
145
|
-
if (onHide)
|
|
146
|
-
setTimeout(() => document.addEventListener('click', hide), 50);
|
|
147
|
-
}
|
|
148
|
-
else {
|
|
149
|
-
document.removeEventListener('keydown', keyboardControls);
|
|
150
|
-
document.removeEventListener('click', hide);
|
|
151
|
-
}
|
|
152
|
-
}, [visible]);
|
|
99
|
+
const wrapper = useKeyboardControls({ onHide, querySelectors: 'li.action a, li.collapsible a, button', visible });
|
|
153
100
|
return (_jsx(SelectionBox, { id: id, ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, "aria-hidden": !visible, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
|
|
154
101
|
? (_jsxs(Flex, { mt: 5, mb: 1, alignItems: "center", children: [_jsx(IconButton, { onClick: (ev) => {
|
|
155
102
|
// accessibility: this will tell the screen reader the section was collapsed before this button is removed from the DOM.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,
|
|
1
|
+
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,6 +19,7 @@ export declare const MenuGroup: import("styled-components").IStyledComponent<"we
|
|
|
19
19
|
id?: string | undefined;
|
|
20
20
|
lang?: string | undefined;
|
|
21
21
|
nonce?: string | undefined;
|
|
22
|
+
placeholder?: string | undefined;
|
|
22
23
|
slot?: string | undefined;
|
|
23
24
|
spellCheck?: (boolean | "false" | "true") | undefined;
|
|
24
25
|
style?: import("react").CSSProperties | undefined;
|
|
@@ -50,7 +51,7 @@ export declare const MenuGroup: import("styled-components").IStyledComponent<"we
|
|
|
50
51
|
results?: number | undefined;
|
|
51
52
|
security?: string | undefined;
|
|
52
53
|
unselectable?: "on" | "off" | undefined;
|
|
53
|
-
inputMode?: "search" | "
|
|
54
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
54
55
|
is?: string | undefined;
|
|
55
56
|
"aria-activedescendant"?: string | undefined;
|
|
56
57
|
"aria-atomic"?: (boolean | "false" | "true") | undefined;
|
|
@@ -64,7 +65,7 @@ export declare const MenuGroup: import("styled-components").IStyledComponent<"we
|
|
|
64
65
|
"aria-colindextext"?: string | undefined;
|
|
65
66
|
"aria-colspan"?: number | undefined;
|
|
66
67
|
"aria-controls"?: string | undefined;
|
|
67
|
-
"aria-current"?: boolean | "
|
|
68
|
+
"aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
|
|
68
69
|
"aria-describedby"?: string | undefined;
|
|
69
70
|
"aria-description"?: string | undefined;
|
|
70
71
|
"aria-details"?: string | undefined;
|
|
@@ -74,7 +75,7 @@ export declare const MenuGroup: import("styled-components").IStyledComponent<"we
|
|
|
74
75
|
"aria-expanded"?: (boolean | "false" | "true") | undefined;
|
|
75
76
|
"aria-flowto"?: string | undefined;
|
|
76
77
|
"aria-grabbed"?: (boolean | "false" | "true") | undefined;
|
|
77
|
-
"aria-haspopup"?: boolean | "
|
|
78
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
|
|
78
79
|
"aria-hidden"?: (boolean | "false" | "true") | undefined;
|
|
79
80
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
80
81
|
"aria-keyshortcuts"?: string | undefined;
|
|
@@ -91,7 +92,7 @@ export declare const MenuGroup: import("styled-components").IStyledComponent<"we
|
|
|
91
92
|
"aria-posinset"?: number | undefined;
|
|
92
93
|
"aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
|
|
93
94
|
"aria-readonly"?: (boolean | "false" | "true") | undefined;
|
|
94
|
-
"aria-relevant"?: "
|
|
95
|
+
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
95
96
|
"aria-required"?: (boolean | "false" | "true") | undefined;
|
|
96
97
|
"aria-roledescription"?: string | undefined;
|
|
97
98
|
"aria-rowcount"?: number | undefined;
|
|
@@ -290,6 +291,7 @@ export declare const Title: import("styled-components").IStyledComponent<"web",
|
|
|
290
291
|
id?: string | undefined;
|
|
291
292
|
lang?: string | undefined;
|
|
292
293
|
nonce?: string | undefined;
|
|
294
|
+
placeholder?: string | undefined;
|
|
293
295
|
slot?: string | undefined;
|
|
294
296
|
spellCheck?: (boolean | "false" | "true") | undefined;
|
|
295
297
|
style?: import("react").CSSProperties | undefined;
|
|
@@ -321,7 +323,7 @@ export declare const Title: import("styled-components").IStyledComponent<"web",
|
|
|
321
323
|
results?: number | undefined;
|
|
322
324
|
security?: string | undefined;
|
|
323
325
|
unselectable?: "on" | "off" | undefined;
|
|
324
|
-
inputMode?: "search" | "
|
|
326
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
325
327
|
is?: string | undefined;
|
|
326
328
|
"aria-activedescendant"?: string | undefined;
|
|
327
329
|
"aria-atomic"?: (boolean | "false" | "true") | undefined;
|
|
@@ -335,7 +337,7 @@ export declare const Title: import("styled-components").IStyledComponent<"web",
|
|
|
335
337
|
"aria-colindextext"?: string | undefined;
|
|
336
338
|
"aria-colspan"?: number | undefined;
|
|
337
339
|
"aria-controls"?: string | undefined;
|
|
338
|
-
"aria-current"?: boolean | "
|
|
340
|
+
"aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
|
|
339
341
|
"aria-describedby"?: string | undefined;
|
|
340
342
|
"aria-description"?: string | undefined;
|
|
341
343
|
"aria-details"?: string | undefined;
|
|
@@ -345,7 +347,7 @@ export declare const Title: import("styled-components").IStyledComponent<"web",
|
|
|
345
347
|
"aria-expanded"?: (boolean | "false" | "true") | undefined;
|
|
346
348
|
"aria-flowto"?: string | undefined;
|
|
347
349
|
"aria-grabbed"?: (boolean | "false" | "true") | undefined;
|
|
348
|
-
"aria-haspopup"?: boolean | "
|
|
350
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
|
|
349
351
|
"aria-hidden"?: (boolean | "false" | "true") | undefined;
|
|
350
352
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
351
353
|
"aria-keyshortcuts"?: string | undefined;
|
|
@@ -362,7 +364,7 @@ export declare const Title: import("styled-components").IStyledComponent<"web",
|
|
|
362
364
|
"aria-posinset"?: number | undefined;
|
|
363
365
|
"aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
|
|
364
366
|
"aria-readonly"?: (boolean | "false" | "true") | undefined;
|
|
365
|
-
"aria-relevant"?: "
|
|
367
|
+
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
366
368
|
"aria-required"?: (boolean | "false" | "true") | undefined;
|
|
367
369
|
"aria-roledescription"?: string | undefined;
|
|
368
370
|
"aria-rowcount"?: number | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";;AAUA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAY7E,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";;AAUA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAY7E,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GrB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIjB,CAAA;AAED,eAAO,MAAM,UAAU,4DAAsE,UAAU,4CAmBtG,CAAA;AAkDD,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAoClI,CAAA"}
|
|
@@ -9,7 +9,7 @@ import { styled } from 'styled-components';
|
|
|
9
9
|
import { hideOverlayImmediately } from './MenuSections.js';
|
|
10
10
|
import { PageSelector } from './PageSelector.js';
|
|
11
11
|
import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants.js';
|
|
12
|
-
import { useCheckTextOverflow } from './
|
|
12
|
+
import { useCheckTextOverflow } from './use-check-text-overflow.js';
|
|
13
13
|
const BackLink = styled.a `
|
|
14
14
|
display: flex;
|
|
15
15
|
flex-direction: row;
|
|
@@ -67,7 +67,7 @@ export const MenuGroup = styled.ul `
|
|
|
67
67
|
left: 2px;
|
|
68
68
|
width: 2px;
|
|
69
69
|
height: 0;
|
|
70
|
-
background:
|
|
70
|
+
background: inherit;
|
|
71
71
|
border-radius: 50%;
|
|
72
72
|
transition: height 0.2s;
|
|
73
73
|
}
|
|
@@ -80,9 +80,15 @@ export const MenuGroup = styled.ul `
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
&:before {
|
|
83
|
+
background: ${theme.color.primary['500']};
|
|
83
84
|
height: 24px;
|
|
84
85
|
}
|
|
85
86
|
}
|
|
87
|
+
|
|
88
|
+
&:not(.active):hover:before {
|
|
89
|
+
background: ${theme.color.light.contrastText};
|
|
90
|
+
height: 24px;
|
|
91
|
+
}
|
|
86
92
|
}
|
|
87
93
|
|
|
88
94
|
.chevron {
|
|
@@ -137,7 +143,7 @@ export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow
|
|
|
137
143
|
if (onClick)
|
|
138
144
|
onClick();
|
|
139
145
|
hideOverlayImmediately();
|
|
140
|
-
}, className: listToClass(['action', 'item-row', active ? 'active' : undefined]), ...(active ? { 'aria-current': 'page' } : undefined), children: [icon, _jsx(Text, { ref: ref, appearance: "body2", className: `label ${overflow}`, title: textOverflow ? label : '', children: label }), badge] }));
|
|
146
|
+
}, className: listToClass(['action', 'item-row', active ? 'active' : undefined]), ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: [icon, _jsx(Text, { ref: ref, appearance: "body2", className: `label ${overflow}`, title: textOverflow ? label : '', children: label }), badge] }));
|
|
141
147
|
};
|
|
142
148
|
const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }) => {
|
|
143
149
|
const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,yBAAyB,IAAI,YAAY,EAAE,oBAAoB,IAAI,OAAO,EAAE,MAAM,aAAa,CAAA;AAExG,OAAO,EAAE,oBAAoB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAehD,wBAAgB,sBAAsB,SAErC;AAgHD,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CAsFlE,CAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { useTranslate } from '@stack-spot/portal-translate';
|
|
2
|
+
import { Flex, IconBox, Text } from '@citric/core';
|
|
3
|
+
import { ChevronRight, Cog, Collapse, Menu as MenuIcon } from '@citric/icons';
|
|
4
|
+
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
6
5
|
import { useCallback, useMemo, useState } from 'react';
|
|
7
6
|
import { MenuContent } from './MenuContent.js';
|
|
7
|
+
import { useKeyboardControls } from './use-keyboard-controls.js';
|
|
8
8
|
const ARROW_HEIGHT = 24;
|
|
9
9
|
const HIDE_OVERLAY_DELAY_MS = 400;
|
|
10
10
|
const MENU_OVERLAY_ID = 'menuContentOverlay';
|
|
@@ -31,8 +31,9 @@ function showOverlay() {
|
|
|
31
31
|
function isMenuContentVisible() {
|
|
32
32
|
return !!document.getElementById('layout')?.classList?.contains('menu-content-visible');
|
|
33
33
|
}
|
|
34
|
-
const Section = ({ icon, label, href, target, onClick, active, content, customContent, onOpen, setCurrentOverlay, id, hasContent, }) => {
|
|
34
|
+
const Section = ({ icon, label, href, target, onClick, active, content, customContent, onOpen, setCurrentOverlay, id, hasContent, className, }) => {
|
|
35
35
|
const contentToRender = typeof content === 'function' ? content() : content;
|
|
36
|
+
const t = useTranslate(dictionary);
|
|
36
37
|
function shouldShowOverlay() {
|
|
37
38
|
/* The overlay should appear if:
|
|
38
39
|
* 1. The section has some content to render OR:
|
|
@@ -59,19 +60,25 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
59
60
|
onClick();
|
|
60
61
|
hideOverlayImmediately();
|
|
61
62
|
}
|
|
62
|
-
return (_jsx("li", { title: label, className: active ? 'active' :
|
|
63
|
+
return (_jsx(_Fragment, { children: _jsxs("li", { title: label, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter: showOverlayAndFixArrowPosition, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: label, "aria-label": label, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 5, children: [icon, _jsx(Text, { appearance: "body2", className: "section-label", ml: 2, children: label })] }) }), shouldShowOverlay() &&
|
|
64
|
+
_jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded": document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible'), onKeyDown: (event) => {
|
|
65
|
+
if (event.key === 'Enter') {
|
|
66
|
+
showOverlayAndFixArrowPosition(event);
|
|
67
|
+
}
|
|
68
|
+
}, children: _jsx(ChevronRight, {}) })] }, label) }));
|
|
63
69
|
};
|
|
64
70
|
const OverlayRenderer = ({ content, customContent }) => {
|
|
65
71
|
if (customContent) {
|
|
66
72
|
return _jsxs(_Fragment, { children: [" ", customContent, " "] });
|
|
67
73
|
}
|
|
68
74
|
const data = typeof content === 'function' ? content() : content;
|
|
69
|
-
return _jsx(
|
|
75
|
+
return _jsx(MenuContent, { ...data });
|
|
70
76
|
};
|
|
71
77
|
export const MenuSections = ({ sections = [], ...props }) => {
|
|
72
78
|
const t = useTranslate(dictionary);
|
|
73
79
|
// this is a mock state only used to force an update on the component.
|
|
74
80
|
const [_, setUpdate] = useState(0);
|
|
81
|
+
const onHide = () => hideOverlay();
|
|
75
82
|
const toggleMenu = useCallback(() => {
|
|
76
83
|
const layout = document.getElementById('layout');
|
|
77
84
|
if (!layout)
|
|
@@ -87,6 +94,16 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
87
94
|
// the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
|
|
88
95
|
const [currentOverlay, setCurrentOverlay] = useState();
|
|
89
96
|
const sectionItems = useMemo(() => sections.map((s, i) => _jsx(Section, { id: i, ...s, setCurrentOverlay: setCurrentOverlay, hasContent: !!props.content || !!props.customContent }, i)), [sections]);
|
|
97
|
+
function onPressEscape() {
|
|
98
|
+
hideOverlay();
|
|
99
|
+
const items = document.getElementsByClassName('section-submenu');
|
|
100
|
+
if (!!items && !!currentOverlay && items.length > currentOverlay && items[currentOverlay].children.length > 1) {
|
|
101
|
+
items[currentOverlay].children[1].focus();
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
const wrapper = useKeyboardControls({ onHide, visible: document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible') || false,
|
|
105
|
+
querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
|
|
106
|
+
onPressEscape: () => onPressEscape() });
|
|
90
107
|
/* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
|
|
91
108
|
instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
|
|
92
109
|
Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
|
|
@@ -101,15 +118,23 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
101
118
|
? _jsx(OverlayRenderer, { content: props.content, customContent: props.customContent }, 'contentKey' in props ? props.contentKey : undefined)
|
|
102
119
|
: _jsx(OverlayRenderer, { content: sections[currentOverlay].content, customContent: sections[currentOverlay].customContent }, currentOverlay);
|
|
103
120
|
}
|
|
104
|
-
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), (!!props.content || !!props.customContent) &&
|
|
105
|
-
|
|
121
|
+
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), (!!props.content || !!props.customContent || props.settings?.show) &&
|
|
122
|
+
_jsxs(Flex, { mb: 7, alignItems: "center", justifyContent: "center", children: [(!!props.content || !!props.customContent) &&
|
|
123
|
+
_jsx("button", { className: "toggle sections-footer", onClick: toggleMenu, title: t.toggle, tabIndex: -1, "aria-hidden": true, children: _jsxs(IconBox, { children: [_jsx(MenuIcon, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }) }), (props.settings?.show) &&
|
|
124
|
+
_jsx("a", { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "body2", ml: 2, children: t.settings })] }) })] }), _jsxs("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: wrapper, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
|
|
106
125
|
};
|
|
107
126
|
const dictionary = {
|
|
108
127
|
en: {
|
|
109
128
|
toggle: 'Show or hide the menu',
|
|
129
|
+
menuOptions: 'View $0 menu options',
|
|
130
|
+
settings: 'Settings',
|
|
131
|
+
settingsIcon: 'Settings icon',
|
|
110
132
|
},
|
|
111
133
|
pt: {
|
|
112
134
|
toggle: 'Visualizar ou esconder o menu',
|
|
135
|
+
menuOptions: 'Visualizar opções do menu $0',
|
|
136
|
+
settings: 'Configurações',
|
|
137
|
+
settingsIcon: 'Icone de configurações',
|
|
113
138
|
},
|
|
114
139
|
};
|
|
115
140
|
//# sourceMappingURL=MenuSections.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,
|
|
1
|
+
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ import { useMemo, useRef, useState } from 'react';
|
|
|
8
8
|
import { styled } from 'styled-components';
|
|
9
9
|
import { SelectionList } from '../SelectionList.js';
|
|
10
10
|
import { MENU_CONTENT_PADDING as PADDING } from './constants.js';
|
|
11
|
-
import { useCheckTextOverflow } from './
|
|
11
|
+
import { useCheckTextOverflow } from './use-check-text-overflow.js';
|
|
12
12
|
const SelectorBox = styled.div `
|
|
13
13
|
position: relative;
|
|
14
14
|
margin: ${PADDING}px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,IAAI,OAAO,EAAE,MAAM,aAAa,CAAA;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -67,16 +67,24 @@ export interface MenuSection extends Action {
|
|
|
67
67
|
customContent?: ReactNode;
|
|
68
68
|
active?: boolean;
|
|
69
69
|
onOpen?: () => void;
|
|
70
|
+
className?: string;
|
|
70
71
|
}
|
|
71
72
|
interface BaseMenuProps {
|
|
72
73
|
sections?: MenuSection[];
|
|
73
74
|
compact?: boolean;
|
|
74
75
|
customContent?: ReactNode;
|
|
76
|
+
settings?: {
|
|
77
|
+
show?: boolean;
|
|
78
|
+
onClick?: () => void;
|
|
79
|
+
href?: string;
|
|
80
|
+
active?: boolean;
|
|
81
|
+
className?: string;
|
|
82
|
+
};
|
|
75
83
|
}
|
|
76
|
-
interface MenuPropsWithStaticContent extends BaseMenuProps {
|
|
84
|
+
export interface MenuPropsWithStaticContent extends BaseMenuProps {
|
|
77
85
|
content?: MenuSectionContent;
|
|
78
86
|
}
|
|
79
|
-
interface MenuPropsWithDynamicContent extends BaseMenuProps {
|
|
87
|
+
export interface MenuPropsWithDynamicContent extends BaseMenuProps {
|
|
80
88
|
/**
|
|
81
89
|
* The function that creates the content. It will be called only when the content is rendered, i.e. only when the content really needs to
|
|
82
90
|
* be rendered.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAC3C;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM,EAAE,YAAY;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7C,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IAC1D;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-check-text-overflow.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-check-text-overflow.tsx"],"names":[],"mappings":";AAEA,wBAAgB,oBAAoB;;;EAuBnC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-check-text-overflow.js","sourceRoot":"","sources":["../../../src/components/menu/use-check-text-overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAM;QACR,CAAC;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface Props {
|
|
3
|
+
onHide?: () => void;
|
|
4
|
+
visible: boolean;
|
|
5
|
+
querySelectors: string;
|
|
6
|
+
onPressEscape?: () => void;
|
|
7
|
+
}
|
|
8
|
+
export declare function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }: Props): import("react").RefObject<HTMLDivElement>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=use-keyboard-controls.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-keyboard-controls.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-keyboard-controls.tsx"],"names":[],"mappings":";AAEA,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,KAAK,6CA8E5F"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
export function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }) {
|
|
3
|
+
const wrapper = useRef(null);
|
|
4
|
+
const onRemoveListeners = () => {
|
|
5
|
+
document.removeEventListener('keydown', keyboardControls);
|
|
6
|
+
document.removeEventListener('click', hide);
|
|
7
|
+
};
|
|
8
|
+
const keyboardControls = useCallback((event) => {
|
|
9
|
+
const target = event?.target;
|
|
10
|
+
function getSelectableAnchors() {
|
|
11
|
+
return wrapper.current?.querySelectorAll(querySelectors) ?? [];
|
|
12
|
+
}
|
|
13
|
+
function handleArrows(key = event.key) {
|
|
14
|
+
const anchors = getSelectableAnchors();
|
|
15
|
+
let i = 0;
|
|
16
|
+
while (i < anchors.length && document.activeElement !== anchors[i])
|
|
17
|
+
i++;
|
|
18
|
+
const next = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1]);
|
|
19
|
+
next?.focus?.();
|
|
20
|
+
}
|
|
21
|
+
const handlers = {
|
|
22
|
+
Escape: () => {
|
|
23
|
+
onPressEscape?.();
|
|
24
|
+
onHide?.();
|
|
25
|
+
onRemoveListeners();
|
|
26
|
+
},
|
|
27
|
+
Enter: () => {
|
|
28
|
+
target?.click();
|
|
29
|
+
},
|
|
30
|
+
Tab: () => {
|
|
31
|
+
const anchors = getSelectableAnchors();
|
|
32
|
+
if (document.activeElement === anchors[anchors.length - 1])
|
|
33
|
+
onHide?.();
|
|
34
|
+
else {
|
|
35
|
+
handleArrows('ArrowDown');
|
|
36
|
+
event.preventDefault();
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
ArrowUp: () => {
|
|
40
|
+
handleArrows();
|
|
41
|
+
},
|
|
42
|
+
ArrowDown: () => {
|
|
43
|
+
handleArrows();
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
handlers[event.key]?.();
|
|
47
|
+
}, [onPressEscape, visible]);
|
|
48
|
+
const hide = useCallback((event) => {
|
|
49
|
+
const target = event.target;
|
|
50
|
+
// if the element is not in the DOM anymore, we'll consider the click was inside the selection list
|
|
51
|
+
const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target);
|
|
52
|
+
const isAction = target?.classList?.contains('action') || !!target?.closest('.action');
|
|
53
|
+
if (!isClickInsideSelectionList || isAction)
|
|
54
|
+
onHide?.();
|
|
55
|
+
}, []);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (visible) {
|
|
58
|
+
document.addEventListener('keydown', keyboardControls);
|
|
59
|
+
document.addEventListener('keydown', keyboardControls);
|
|
60
|
+
if (onHide)
|
|
61
|
+
setTimeout(() => document.addEventListener('click', hide), 50);
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
onRemoveListeners();
|
|
65
|
+
}
|
|
66
|
+
return () => {
|
|
67
|
+
// Remove the event listener
|
|
68
|
+
document.removeEventListener('keydown', keyboardControls);
|
|
69
|
+
document.removeEventListener('click', hide);
|
|
70
|
+
};
|
|
71
|
+
}, [visible, keyboardControls]);
|
|
72
|
+
return wrapper;
|
|
73
|
+
}
|
|
74
|
+
//# sourceMappingURL=use-keyboard-controls.js.map
|