@stack-spot/portal-layout 0.0.33 → 0.0.35
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/Layout.d.ts +1 -2
- package/dist/Layout.d.ts.map +1 -1
- package/dist/Layout.js +7 -5
- package/dist/Layout.js.map +1 -1
- package/dist/LayoutOverlayManager.js.map +1 -1
- package/dist/components/SelectionList.d.ts.map +1 -1
- package/dist/components/SelectionList.js +22 -2
- package/dist/components/SelectionList.js.map +1 -1
- package/dist/components/menu/MenuContent.d.ts +2 -545
- package/dist/components/menu/MenuContent.d.ts.map +1 -1
- 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 +43 -33
- package/dist/components/menu/MenuSections.js.map +1 -1
- package/dist/components/menu/PageSelector.js.map +1 -1
- package/dist/components/menu/types.d.ts +0 -1
- package/dist/components/menu/types.d.ts.map +1 -1
- package/dist/components/menu/use-check-text-overflow.js.map +1 -1
- package/dist/components/menu/use-keyboard-controls.d.ts +16 -3
- package/dist/components/menu/use-keyboard-controls.d.ts.map +1 -1
- package/dist/components/menu/use-keyboard-controls.js +21 -46
- package/dist/components/menu/use-keyboard-controls.js.map +1 -1
- package/dist/layout.css +24 -27
- package/dist/utils.js.map +1 -1
- package/package.json +5 -5
- package/src/Layout.tsx +7 -6
- package/src/components/SelectionList.tsx +24 -2
- package/src/components/menu/MenuSections.tsx +49 -37
- package/src/components/menu/types.ts +0 -1
- package/src/components/menu/use-keyboard-controls.tsx +32 -50
- package/src/layout.css +24 -27
- 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 +0 -6
- package/dist/components/menu/useCheckTextOverflow.d.ts.map +0 -1
- package/dist/components/menu/useCheckTextOverflow.js +0 -20
- package/dist/components/menu/useCheckTextOverflow.js.map +0 -1
|
@@ -3,20 +3,32 @@ import { Flex, IconBox, Text } from '@citric/core';
|
|
|
3
3
|
import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons';
|
|
4
4
|
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
5
5
|
import { useCallback, useMemo, useState } from 'react';
|
|
6
|
+
import { getLayoutElements } from '../../elements.js';
|
|
7
|
+
import { elementIds } from '../../elements.js';
|
|
6
8
|
import { MenuContent } from './MenuContent.js';
|
|
7
9
|
import { useKeyboardControls } from './use-keyboard-controls.js';
|
|
8
|
-
const ARROW_HEIGHT = 24;
|
|
9
10
|
const HIDE_OVERLAY_DELAY_MS = 400;
|
|
10
11
|
const MENU_OVERLAY_ID = 'menuContentOverlay';
|
|
11
12
|
let hideOverlayTask;
|
|
13
|
+
// fixme: this should definitely not be handled like this...
|
|
14
|
+
let attachKeyboardListenersForOverlay;
|
|
15
|
+
let detachKeyboardListenersForOverlay;
|
|
12
16
|
function hideOverlay() {
|
|
13
17
|
if (hideOverlayTask !== undefined)
|
|
14
18
|
return;
|
|
15
19
|
hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS);
|
|
16
20
|
}
|
|
21
|
+
function getAccessibilityButtonOfSectionWithActiveOverlay() {
|
|
22
|
+
return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]');
|
|
23
|
+
}
|
|
17
24
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
18
25
|
export function hideOverlayImmediately() {
|
|
19
|
-
|
|
26
|
+
detachKeyboardListenersForOverlay?.();
|
|
27
|
+
const overlay = document.getElementById(MENU_OVERLAY_ID);
|
|
28
|
+
overlay?.setAttribute('inert', '');
|
|
29
|
+
overlay?.setAttribute('aria-hidden', '');
|
|
30
|
+
overlay?.classList.remove('visible');
|
|
31
|
+
getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false');
|
|
20
32
|
}
|
|
21
33
|
function cancelHideOverlayTask() {
|
|
22
34
|
if (hideOverlayTask === undefined)
|
|
@@ -26,7 +38,11 @@ function cancelHideOverlayTask() {
|
|
|
26
38
|
}
|
|
27
39
|
function showOverlay() {
|
|
28
40
|
cancelHideOverlayTask();
|
|
29
|
-
document.getElementById(MENU_OVERLAY_ID)
|
|
41
|
+
const overlay = document.getElementById(MENU_OVERLAY_ID);
|
|
42
|
+
overlay?.removeAttribute('inert');
|
|
43
|
+
overlay?.removeAttribute('aria-hidden');
|
|
44
|
+
overlay?.classList.add('visible');
|
|
45
|
+
attachKeyboardListenersForOverlay?.();
|
|
30
46
|
}
|
|
31
47
|
function isMenuContentVisible() {
|
|
32
48
|
return !!document.getElementById('layout')?.classList?.contains('menu-content-visible');
|
|
@@ -38,25 +54,21 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
38
54
|
/* The overlay should appear if:
|
|
39
55
|
* 1. The menu is compacted showing only the icons
|
|
40
56
|
* 2. The section has some content to render OR:
|
|
41
|
-
*
|
|
42
|
-
* 3. The section is inactive OR:
|
|
43
|
-
* 2.1. The contextual menu is hidden.
|
|
57
|
+
* 3. The section is active and there is a contextual menu for the active page.
|
|
44
58
|
*/
|
|
45
|
-
const layout =
|
|
46
|
-
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact
|
|
47
|
-
return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
|
|
59
|
+
const { layout } = getLayoutElements();
|
|
60
|
+
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact');
|
|
61
|
+
return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active));
|
|
48
62
|
}
|
|
49
|
-
function
|
|
63
|
+
function prepareShowOverlay(event) {
|
|
50
64
|
if (!shouldShowOverlay())
|
|
51
65
|
return;
|
|
52
66
|
onOpen?.();
|
|
53
|
-
const
|
|
54
|
-
const
|
|
67
|
+
const anchorElement = event.target;
|
|
68
|
+
const accessibilityButton = anchorElement?.parentElement?.querySelector('button');
|
|
69
|
+
accessibilityButton?.setAttribute('aria-expanded', 'true');
|
|
55
70
|
setCurrentOverlay(id);
|
|
56
71
|
showOverlay();
|
|
57
|
-
if (rect && arrow) {
|
|
58
|
-
arrow.style.top = `${rect.top + rect.height / 2 - ARROW_HEIGHT / 2}px`;
|
|
59
|
-
}
|
|
60
72
|
}
|
|
61
73
|
function click() {
|
|
62
74
|
if (onClick)
|
|
@@ -64,16 +76,16 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
64
76
|
hideOverlayImmediately();
|
|
65
77
|
}
|
|
66
78
|
const labelText = typeof label === 'string' ? label : label.id;
|
|
67
|
-
return (_jsx(_Fragment, { children: _jsxs("li", { title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter:
|
|
68
|
-
_jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded":
|
|
79
|
+
return (_jsx(_Fragment, { children: _jsxs("li", { title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter: prepareShowOverlay, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: labelText, "aria-label": labelText, 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: [_jsx(IconBox, { children: icon }), typeof label === 'string' ? _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, children: label }) : label.element] }) }), shouldShowOverlay() &&
|
|
80
|
+
_jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded": false, onKeyDown: (event) => {
|
|
69
81
|
if (event.key === 'Enter') {
|
|
70
|
-
|
|
82
|
+
prepareShowOverlay(event);
|
|
71
83
|
}
|
|
72
84
|
}, children: _jsx(ChevronRight, {}) })] }, labelText) }));
|
|
73
85
|
};
|
|
74
86
|
const OverlayRenderer = ({ content, customContent }) => {
|
|
75
87
|
if (customContent) {
|
|
76
|
-
return _jsxs(
|
|
88
|
+
return _jsxs("div", { id: "custom-selectable-item", children: [" ", customContent, " "] });
|
|
77
89
|
}
|
|
78
90
|
const data = typeof content === 'function' ? content() : content;
|
|
79
91
|
return _jsx(MenuContent, { ...data });
|
|
@@ -82,16 +94,15 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
82
94
|
const t = useTranslate(dictionary);
|
|
83
95
|
// this is a mock state only used to force an update on the component.
|
|
84
96
|
const [_, setUpdate] = useState(0);
|
|
85
|
-
const onHide = () => hideOverlay();
|
|
86
97
|
const toggleMenu = useCallback((hasContent) => {
|
|
87
98
|
const layout = document.getElementById('layout');
|
|
88
99
|
if (!layout)
|
|
89
100
|
return;
|
|
90
|
-
if (layout.classList.contains('menu-compact
|
|
91
|
-
layout.classList.remove('menu-compact
|
|
101
|
+
if (layout.classList.contains('menu-compact')) {
|
|
102
|
+
layout.classList.remove('menu-compact');
|
|
92
103
|
}
|
|
93
104
|
else {
|
|
94
|
-
layout.classList.add('menu-compact
|
|
105
|
+
layout.classList.add('menu-compact');
|
|
95
106
|
}
|
|
96
107
|
if (hasContent) {
|
|
97
108
|
if (layout.classList.contains('menu-content-visible')) {
|
|
@@ -107,17 +118,16 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
107
118
|
const [currentOverlay, setCurrentOverlay] = useState();
|
|
108
119
|
const sectionItems = useMemo(() => sections.map((s, i) => _jsx(Section, { id: i, ...s, setCurrentOverlay: setCurrentOverlay, hasContent: !!props.content || !!props.customContent }, i)), [sections]);
|
|
109
120
|
function onPressEscape() {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
if (!!items && !!currentOverlay && items.length > currentOverlay && items[currentOverlay].children.length > 1) {
|
|
113
|
-
items[currentOverlay].children[1].focus();
|
|
114
|
-
}
|
|
121
|
+
getAccessibilityButtonOfSectionWithActiveOverlay()?.focus();
|
|
122
|
+
hideOverlayImmediately();
|
|
115
123
|
}
|
|
116
|
-
const
|
|
117
|
-
|
|
124
|
+
const { keyboardControlledElement: overlayRef, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls({
|
|
125
|
+
onPressEscape,
|
|
118
126
|
querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
|
|
119
|
-
onPressEscape: () => onPressEscape(),
|
|
120
127
|
});
|
|
128
|
+
// fixme: this should definitely not be handled like this...
|
|
129
|
+
attachKeyboardListenersForOverlay = attachKeyboardListeners;
|
|
130
|
+
detachKeyboardListenersForOverlay = detachKeyboardListeners;
|
|
121
131
|
/* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
|
|
122
132
|
instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
|
|
123
133
|
Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
|
|
@@ -132,8 +142,8 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
132
142
|
? _jsx(OverlayRenderer, { content: props.content, customContent: props.customContent }, 'contentKey' in props ? props.contentKey : undefined)
|
|
133
143
|
: _jsx(OverlayRenderer, { content: sections[currentOverlay].content, customContent: sections[currentOverlay].customContent }, currentOverlay);
|
|
134
144
|
}
|
|
135
|
-
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), _jsxs(Flex, { mb: 7, alignItems: "center", children: [_jsxs("button", { className: "toggle sections-footer", onClick: () => toggleMenu(!!props.content || !!props.customContent), title: t.toggle, tabIndex: -1,
|
|
136
|
-
_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", children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "microtext1", ml: 2, children: t.settings })] }) })] }), _jsxs("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref:
|
|
145
|
+
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), _jsxs(Flex, { mb: 7, alignItems: "center", children: [_jsxs("button", { className: "toggle sections-footer", onClick: () => toggleMenu(!!props.content || !!props.customContent), title: t.toggle, tabIndex: -1, children: [_jsxs(IconBox, { children: [_jsx(Expand, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", colorScheme: "light.contrastText", children: t.hide })] }), (props.settings?.show) &&
|
|
146
|
+
_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: "microtext1", ml: 2, children: t.settings })] }) })] }), _jsxs("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: overlayRef, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
|
|
137
147
|
};
|
|
138
148
|
const dictionary = {
|
|
139
149
|
en: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAE5C,IAAI,eAAmC,CAAA;AAEvC,4DAA4D;AAC5D,IAAI,iCAA6C,CAAA;AACjD,IAAI,iCAA6C,CAAA;AAEjD,SAAS,WAAW;IAClB,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,sBAAsB,EAAE,qBAAqB,CAAC,CAAA;AACpF,CAAC;AAED,SAAS,gDAAgD;IACvD,OAAO,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,8BAA8B,CAAC,CAAA;AACxG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,sBAAsB;IACpC,iCAAiC,EAAE,EAAE,CAAA;IACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAA;IACxD,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAClC,OAAO,EAAE,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;IACxC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;IACpC,gDAAgD,EAAE,EAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;AAC5F,CAAC;AAED,SAAS,qBAAqB;IAC5B,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,YAAY,CAAC,eAAe,CAAC,CAAA;IAC7B,eAAe,GAAG,SAAS,CAAA;AAC7B,CAAC;AAED,SAAS,WAAW;IAClB,qBAAqB,EAAE,CAAA;IACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAA;IACxD,OAAO,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IACjC,OAAO,EAAE,eAAe,CAAC,aAAa,CAAC,CAAA;IACvC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACjC,iCAAiC,EAAE,EAAE,CAAA;AACvC,CAAC;AAED,SAAS,oBAAoB;IAC3B,OAAO,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAA;AACzF,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,EACf,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,EAAE,EACF,UAAU,EACV,SAAS,GAGV,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IAC3E,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,SAAS,iBAAiB;QACxB;;;;WAIG;QACH,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;QACtC,MAAM,oBAAoB,GAAG,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAA;QACvE,OAAO,oBAAoB,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,CAAC,CAAA;IACjG,CAAC;IAED,SAAS,kBAAkB,CAAC,KAAiF;QAC3G,IAAI,CAAC,iBAAiB,EAAE;YAAE,OAAM;QAChC,MAAM,EAAE,EAAE,CAAA;QACV,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAA;QACjD,MAAM,mBAAmB,GAAG,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAgB,CAAA;QAChG,mBAAmB,EAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;QAC1D,iBAAiB,CAAC,EAAE,CAAC,CAAA;QACrB,WAAW,EAAE,CAAA;IACf,CAAC;IAED,SAAS,KAAK;QACZ,IAAI,OAAO;YAAE,OAAO,EAAE,CAAA;QACtB,sBAAsB,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAA;IAE9D,OAAO,CACL,4BACE,cAAoB,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,SAAS,IAAI,EAAE,IAAI,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,aAC7G,YACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,EACd,YAAY,EAAE,kBAAkB,EAChC,YAAY,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,IAAI,WAAW,EAAE,EACxD,KAAK,EAAE,SAAS,gBACJ,SAAS,EACrB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,KAChE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KACjD,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YAE3C,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,aACrD,KAAC,OAAO,cAAE,IAAI,GAAW,EACxB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,SAAS,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IACrH,GACL,EACH,iBAAiB,EAAE;oBAClB,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,EACjD,EAAE,EAAC,QAAQ,gBACC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,mBAC9B,eAAe,mBACf,KAAK,EACpB,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;4BACnB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gCAC1B,kBAAkB,CAAC,KAAK,CAAC,CAAA;4BAC3B,CAAC;wBACH,CAAC,YACD,KAAC,YAAY,KAAG,GACR,KA9BL,SAAS,CAgCb,GACJ,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,aAAa,EAAkD,EAAE,EAAE;IACrG,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,eAAK,EAAE,EAAC,wBAAwB,kBAAG,aAAa,SAAQ,CAAA;IACjE,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IAChE,OAAO,KAAC,WAAW,OAAK,IAAI,GAAI,CAAA;AAClC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACrE,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,sEAAsE;IACtE,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAElC,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,UAAmB,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;QAChD,IAAI,CAAC,MAAM;YAAE,OAAM;QACnB,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;YAC9C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;QACtC,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,CAAC;gBACtD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAA;YACjD,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAA;YAC9C,CAAC;QACH,CAAC;QACD,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,2HAA2H;IAC3H,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IAE1E,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAC,OAAO,IAAS,EAAE,EAAE,CAAC,KAAM,CAAC,EAAE,iBAAiB,EAAE,iBAAiB,EAC9F,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,IADX,CAAC,CACc,CAAC,EAC3D,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,SAAS,aAAa;QACpB,gDAAgD,EAAE,EAAE,KAAK,EAAE,CAAA;QAC3D,sBAAsB,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM,EAAE,yBAAyB,EAAE,UAAU,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,GAAG,mBAAmB,CAAC;QACtH,aAAa;QACb,cAAc,EAAE,4EAA4E;KAC7F,CAAC,CAAA;IAEF,4DAA4D;IAC5D,iCAAiC,GAAG,uBAAuB,CAAA;IAC3D,iCAAiC,GAAG,uBAAuB,CAAA;IAE3D;;;;oDAIgD;IAChD,SAAS,iBAAiB;QACxB,IAAI,cAAc,KAAK,SAAS;YAAE,OAAO,IAAI,CAAA;QAC7C,MAAM,8BAA8B,GAAG,CAAC,oBAAoB,EAAE,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,MAAM;YAC/F,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;QAC5C,OAAO,8BAA8B;YACnC,CAAC,CAAC,KAAC,eAAe,IAA4D,OAAO,EAAE,KAAK,CAAC,OAAO,EAClG,aAAa,EAAE,KAAK,CAAC,aAAa,IADZ,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpC;YACxC,CAAC,CAAC,KAAC,eAAe,IAAsB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,OAAO,EAC/E,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,aAAa,IAD/B,cAAc,CACqB,CAAA;IAC/D,CAAC;IAED,OAAO,CACL,8BACE,uBAAK,YAAY,GAAM,EAEvB,MAAC,IAAI,IAAC,EAAE,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,aAC9B,kBAAQ,SAAS,EAAC,wBAAwB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,EAC5G,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,aAC7B,MAAC,OAAO,eACN,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,EAC7B,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IACzB,EACV,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,EAAC,WAAW,EAAC,oBAAoB,YAAE,CAAC,CAAC,IAAI,GAAQ,IACnG,EACR,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;wBACrB,YAAG,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,OAAO,EAC7D,SAAS,EAAC,iBAAiB,KACvB,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YACpE,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,aAC/C,KAAC,OAAO,kBAAa,CAAC,CAAC,YAAY,YACjC,KAAC,GAAG,KAAG,GACC,EACV,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,YAAG,CAAC,CAAC,QAAQ,GAAQ,IACnD,GACL,IAED,EAEP,eAAK,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,aAC5F,iBAAiB,EAAE,EACpB,cAAK,SAAS,EAAC,OAAO,GAAO,IACzB,IACL,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,MAAM,EAAE,uBAAuB;QAC/B,WAAW,EAAE,sBAAsB;QACnC,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,eAAe;QAC7B,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,MAAM,EAAE,+BAA+B;QACvC,WAAW,EAAE,8BAA8B;QAC3C,QAAQ,EAAE,eAAe;QACzB,YAAY,EAAE,wBAAwB;QACtC,IAAI,EAAE,UAAU;KACjB;CACmB,CAAA"}
|
|
@@ -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,2BAA2B,CAAA;AAEhE,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;YAElB,OAAO;;;;;;;;wBAQK,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;0BAKtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+BxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;0BACxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;4BAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;oBAKhC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;CAU3C,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAY,EAAE,EAAE;IACnF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAChD,MAAM,EAAE,GAAG,MAAM,CAAC,eAAe,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAC1D,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,OAAO,CAC3C,GAAG,EAAE;QACH,IAAI,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;QACzB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,CAAa,CAAC,MAAM,EAAE,EAAE;YACzD,IAAI,MAAM,CAAC,GAAG,KAAK,KAAK,EAAE;
|
|
1
|
+
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -1,10 +1,23 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface Props {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* A query selector that returns every html element that must be navigable through the keyboard.
|
|
5
|
+
*/
|
|
5
6
|
querySelectors: string;
|
|
7
|
+
/**
|
|
8
|
+
* Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
|
|
9
|
+
*/
|
|
6
10
|
onPressEscape?: () => void;
|
|
11
|
+
/**
|
|
12
|
+
* Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
|
|
13
|
+
* onPressEscape if not specified.
|
|
14
|
+
*/
|
|
15
|
+
onPressLastTab?: () => void;
|
|
7
16
|
}
|
|
8
|
-
export declare function useKeyboardControls({
|
|
17
|
+
export declare function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab }: Props): {
|
|
18
|
+
keyboardControlledElement: import("react").RefObject<HTMLDivElement>;
|
|
19
|
+
attachKeyboardListeners: () => void;
|
|
20
|
+
detachKeyboardListeners: () => void;
|
|
21
|
+
};
|
|
9
22
|
export {};
|
|
10
23
|
//# sourceMappingURL=use-keyboard-controls.d.ts.map
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"use-keyboard-controls.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-keyboard-controls.tsx"],"names":[],"mappings":";AAEA,UAAU,KAAK;IACb;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,cAA8B,EAAE,EAAE,KAAK;;;;EAmD3G"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import { useCallback,
|
|
2
|
-
export function useKeyboardControls({
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
document.removeEventListener('click', hide);
|
|
7
|
-
};
|
|
1
|
+
import { useCallback, useRef } from 'react';
|
|
2
|
+
export function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab = onPressEscape }) {
|
|
3
|
+
const keyboardControlledElement = useRef(null);
|
|
4
|
+
const listeners = useRef({});
|
|
5
|
+
listeners.current = { onPressEscape, onPressLastTab };
|
|
8
6
|
const keyboardControls = useCallback((event) => {
|
|
9
7
|
const target = event?.target;
|
|
10
8
|
function getSelectableAnchors() {
|
|
11
|
-
return
|
|
9
|
+
return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? [];
|
|
12
10
|
}
|
|
13
11
|
function handleArrows(key = event.key) {
|
|
14
12
|
const anchors = getSelectableAnchors();
|
|
@@ -20,9 +18,9 @@ export function useKeyboardControls({ onHide, visible, querySelectors, onPressEs
|
|
|
20
18
|
}
|
|
21
19
|
const handlers = {
|
|
22
20
|
Escape: () => {
|
|
23
|
-
onPressEscape?.();
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
listeners.current.onPressEscape?.();
|
|
22
|
+
event.stopPropagation();
|
|
23
|
+
event.preventDefault();
|
|
26
24
|
},
|
|
27
25
|
Enter: () => {
|
|
28
26
|
target?.click();
|
|
@@ -30,45 +28,22 @@ export function useKeyboardControls({ onHide, visible, querySelectors, onPressEs
|
|
|
30
28
|
Tab: () => {
|
|
31
29
|
const anchors = getSelectableAnchors();
|
|
32
30
|
if (document.activeElement === anchors[anchors.length - 1])
|
|
33
|
-
|
|
34
|
-
else
|
|
31
|
+
listeners.current.onPressLastTab?.();
|
|
32
|
+
else
|
|
35
33
|
handleArrows('ArrowDown');
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
ArrowUp: () => {
|
|
40
|
-
handleArrows();
|
|
41
|
-
},
|
|
42
|
-
ArrowDown: () => {
|
|
43
|
-
handleArrows();
|
|
34
|
+
event.preventDefault();
|
|
44
35
|
},
|
|
36
|
+
ArrowUp: handleArrows,
|
|
37
|
+
ArrowDown: handleArrows,
|
|
45
38
|
};
|
|
46
39
|
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
40
|
}, []);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
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;
|
|
41
|
+
const attachKeyboardListeners = useCallback(() => {
|
|
42
|
+
document.addEventListener('keydown', keyboardControls);
|
|
43
|
+
}, []);
|
|
44
|
+
const detachKeyboardListeners = useCallback(() => {
|
|
45
|
+
document.removeEventListener('keydown', keyboardControls);
|
|
46
|
+
}, []);
|
|
47
|
+
return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners };
|
|
73
48
|
}
|
|
74
49
|
//# sourceMappingURL=use-keyboard-controls.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-keyboard-controls.js","sourceRoot":"","sources":["../../../src/components/menu/use-keyboard-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"use-keyboard-controls.js","sourceRoot":"","sources":["../../../src/components/menu/use-keyboard-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAkB3C,MAAM,UAAU,mBAAmB,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,GAAG,aAAa,EAAS;IAC1G,MAAM,yBAAyB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9D,MAAM,SAAS,GAAG,MAAM,CAAkD,EAAE,CAAC,CAAA;IAC7E,SAAS,CAAC,OAAO,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,CAAA;IAErD,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,KAAoB,EAAE,EAAE;QAC5D,MAAM,MAAM,GAAG,KAAK,EAAE,MAA4B,CAAA;QAElD,SAAS,oBAAoB;YAC3B,OAAO,yBAAyB,CAAC,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;QAClF,CAAC;QAED,SAAS,YAAY,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG;YACnC,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;YACtC,IAAI,CAAC,GAAG,CAAC,CAAA;YACT,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC;gBAAE,CAAC,EAAE,CAAA;YACvE,MAAM,IAAI,GAAQ,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;YACxH,IAAI,EAAE,KAAK,EAAE,EAAE,CAAA;QACjB,CAAC;QAED,MAAM,QAAQ,GAA6C;YACzD,MAAM,EAAE,GAAG,EAAE;gBACX,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAA;gBACnC,KAAK,CAAC,eAAe,EAAE,CAAA;gBACvB,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,EAAE,KAAK,EAAE,CAAA;YACjB,CAAC;YACD,GAAG,EAAE,GAAG,EAAE;gBACR,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;gBACtC,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;oBAAE,SAAS,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAA;;oBAC1F,YAAY,CAAC,WAAW,CAAC,CAAA;gBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE,YAAY;SACxB,CAAA;QAED,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,CAAA;IACzB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IACxD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAA;AACxF,CAAC"}
|
package/dist/layout.css
CHANGED
|
@@ -45,16 +45,16 @@ body {
|
|
|
45
45
|
--modal-animation-duration: 0.3s;
|
|
46
46
|
--right-panel-animation-duration: 0.3s;
|
|
47
47
|
--menu-animation-duration: 0.3s;
|
|
48
|
-
--menu-overlay-width:
|
|
48
|
+
--menu-overlay-width: 240px;
|
|
49
49
|
--toastify-font-family: 'Roboto', sans-serif;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
#layout
|
|
52
|
+
#layout:not(.menu-compact) {
|
|
53
53
|
--menu-sections-width: 135px;
|
|
54
54
|
--menu-item-height: 56px;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
#layout.menu-compact
|
|
57
|
+
#layout.menu-compact {
|
|
58
58
|
--menu-sections-width: 56px;
|
|
59
59
|
--menu-item-height: 56px;
|
|
60
60
|
}
|
|
@@ -87,7 +87,6 @@ body {
|
|
|
87
87
|
display: flex;
|
|
88
88
|
flex-direction: column;
|
|
89
89
|
background-color: var(--light-300);
|
|
90
|
-
border-top-left-radius: 0.5rem;
|
|
91
90
|
align-items: center;
|
|
92
91
|
padding: 24px;
|
|
93
92
|
transition: left ease-in-out var(--menu-animation-duration);
|
|
@@ -133,20 +132,24 @@ body {
|
|
|
133
132
|
}
|
|
134
133
|
|
|
135
134
|
#menu .toggle .expand,
|
|
136
|
-
#layout.menu-compact
|
|
135
|
+
#layout.menu-compact .toggle .collapse {
|
|
137
136
|
opacity: 0;
|
|
138
137
|
}
|
|
139
138
|
|
|
140
139
|
#menu .toggle .collapse,
|
|
141
|
-
#layout.menu-compact
|
|
140
|
+
#layout.menu-compact .toggle .expand {
|
|
142
141
|
opacity: 1;
|
|
143
142
|
}
|
|
144
143
|
|
|
145
|
-
#layout
|
|
144
|
+
#layout .section-label {
|
|
145
|
+
line-height: 0.875rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
#layout.menu-compact .section-label {
|
|
146
149
|
display: none;
|
|
147
150
|
}
|
|
148
151
|
|
|
149
|
-
#layout:not(.menu-compact
|
|
152
|
+
#layout:not(.menu-compact) .section-label {
|
|
150
153
|
display: block;
|
|
151
154
|
}
|
|
152
155
|
|
|
@@ -154,10 +157,12 @@ body {
|
|
|
154
157
|
width: var(--menu-sections-width);
|
|
155
158
|
display: flex;
|
|
156
159
|
flex-direction: column;
|
|
157
|
-
padding:
|
|
160
|
+
padding: 0 0 10px;
|
|
158
161
|
justify-content: space-between;
|
|
159
162
|
background-color: var(--light-400);
|
|
160
163
|
position: relative;
|
|
164
|
+
border-right: 1px solid var(--light-300);
|
|
165
|
+
border-top: 1px solid var(--light-300);
|
|
161
166
|
}
|
|
162
167
|
|
|
163
168
|
#menuSections .sections-footer {
|
|
@@ -179,6 +184,7 @@ body {
|
|
|
179
184
|
transition: background-color 0.2s;
|
|
180
185
|
cursor: pointer;
|
|
181
186
|
position: relative;
|
|
187
|
+
z-index: 2;
|
|
182
188
|
}
|
|
183
189
|
|
|
184
190
|
#menuSections > ul li a:before {
|
|
@@ -194,6 +200,7 @@ body {
|
|
|
194
200
|
|
|
195
201
|
#menuSections > ul li.active a {
|
|
196
202
|
background-color: var(--light-500);
|
|
203
|
+
border-right: 1px solid var(--light-300);
|
|
197
204
|
}
|
|
198
205
|
|
|
199
206
|
#menuSections > ul li.active a:before {
|
|
@@ -206,6 +213,7 @@ body {
|
|
|
206
213
|
#menuSections .toggle:focus,
|
|
207
214
|
#menuSections > ul li a:focus {
|
|
208
215
|
background: var(--light-500);
|
|
216
|
+
border-right: 1px solid var(--light-300);
|
|
209
217
|
}
|
|
210
218
|
|
|
211
219
|
#menuSections > ul li:not(.active) a:hover:before {
|
|
@@ -220,11 +228,12 @@ body {
|
|
|
220
228
|
#menuContentOverlay {
|
|
221
229
|
width: var(--menu-overlay-width);
|
|
222
230
|
position: fixed;
|
|
223
|
-
top: calc(var(--header-height)
|
|
224
|
-
left: calc(var(--menu-sections-width)
|
|
225
|
-
bottom:
|
|
231
|
+
top: calc(var(--header-height));
|
|
232
|
+
left: calc(var(--menu-sections-width));
|
|
233
|
+
bottom: 1px;
|
|
226
234
|
background-color: var(--light-500);
|
|
227
|
-
border-radius:
|
|
235
|
+
border-radius: 0px 8px 8px 0px;
|
|
236
|
+
border-top: 1px solid var(--light-300);
|
|
228
237
|
display: flex;
|
|
229
238
|
flex-direction: column;
|
|
230
239
|
overflow: hidden;
|
|
@@ -244,19 +253,6 @@ body {
|
|
|
244
253
|
overflow: auto;
|
|
245
254
|
}
|
|
246
255
|
|
|
247
|
-
#menuContentOverlay > .arrow {
|
|
248
|
-
width: 0;
|
|
249
|
-
height: 0;
|
|
250
|
-
border-top: 12px solid transparent;
|
|
251
|
-
border-bottom: 12px solid transparent;
|
|
252
|
-
border-right: 12px solid var(--light-400);
|
|
253
|
-
position: fixed;
|
|
254
|
-
/* header + menu sections padding + item height / 2 - arrow height / 2 */
|
|
255
|
-
top: calc(var(--header-height) + 10px + var(--menu-item-height) / 2 - 12px);
|
|
256
|
-
left: calc(var(--menu-sections-width) + 3px);
|
|
257
|
-
transition: top ease-out 0.3s;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
256
|
#menuContent {
|
|
261
257
|
width: var(--menu-content-width);
|
|
262
258
|
transition: left ease-out var(--menu-animation-duration);
|
|
@@ -266,7 +262,7 @@ body {
|
|
|
266
262
|
top: 0;
|
|
267
263
|
bottom: 0;
|
|
268
264
|
left: calc(var(--menu-sections-width) - var(--menu-content-width) - 2px); /* 2px from border */
|
|
269
|
-
border-
|
|
265
|
+
border-top: 1px solid var(--light-300);
|
|
270
266
|
}
|
|
271
267
|
|
|
272
268
|
#layout.menu-content-visible #menuContent {
|
|
@@ -458,6 +454,7 @@ i {
|
|
|
458
454
|
top: 27%;
|
|
459
455
|
right: 10px;
|
|
460
456
|
background-color: inherit;
|
|
457
|
+
z-index: 1;
|
|
461
458
|
}
|
|
462
459
|
|
|
463
460
|
#menuSections .section-submenu-icon:focus-visible {
|
package/dist/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAE9C,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC9C,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IAChD,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAA;IACtB,OAAO,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;AACjC,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,yBAAyB,CAAC,OAA4B;IACpE,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC,aAA4B,CAAA;IAC1D,OAAO,OAAO,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-layout",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.35",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
9
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
10
|
-
},
|
|
11
7
|
"peerDependencies": {
|
|
12
8
|
"@citric/core": ">=5.7.0",
|
|
13
9
|
"@citric/icons": ">=5.7.1",
|
|
@@ -37,5 +33,9 @@
|
|
|
37
33
|
},
|
|
38
34
|
"dependencies": {
|
|
39
35
|
"react-toastify": "^9.1.3"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
39
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
40
40
|
}
|
|
41
41
|
}
|
package/src/Layout.tsx
CHANGED
|
@@ -9,7 +9,7 @@ import { MenuContent } from './components/menu/MenuContent'
|
|
|
9
9
|
import { MenuSections } from './components/menu/MenuSections'
|
|
10
10
|
import { MenuProps } from './components/menu/types'
|
|
11
11
|
import { Toaster } from './components/Toaster'
|
|
12
|
-
import { elementIds } from './elements'
|
|
12
|
+
import { elementIds, getLayoutElements } from './elements'
|
|
13
13
|
import './layout.css'
|
|
14
14
|
import { overlay } from './LayoutOverlayManager'
|
|
15
15
|
|
|
@@ -27,24 +27,26 @@ interface RawProps extends WithStyle {
|
|
|
27
27
|
menuContent?: ReactElement,
|
|
28
28
|
header?: ReactElement,
|
|
29
29
|
children?: ReactNode,
|
|
30
|
-
compactMenu?: boolean,
|
|
31
30
|
extra?: ReactNode,
|
|
32
31
|
errorDescriptor?: DescriptionFn,
|
|
33
32
|
onError?: ErrorHandler,
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
export const RawLayout = (
|
|
37
|
-
{ menuSections, menuContent, header,
|
|
36
|
+
{ menuSections, menuContent, header, children,
|
|
38
37
|
extra, errorDescriptor, onError, className, style }:
|
|
39
38
|
RawProps,
|
|
40
39
|
) => {
|
|
41
40
|
// @ts-ignore
|
|
42
41
|
const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
|
|
42
|
+
const { layout } = getLayoutElements()
|
|
43
|
+
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
|
|
44
|
+
|
|
43
45
|
const classes = [
|
|
44
|
-
menuContent ? 'menu-content-visible' : undefined,
|
|
45
|
-
compactMenu ? 'menu-compact' : undefined,
|
|
46
|
+
menuContent && !isCompactedOnlyIcons? 'menu-content-visible' : undefined,
|
|
46
47
|
menuSections ? undefined : 'no-menu-sections',
|
|
47
48
|
className,
|
|
49
|
+
isCompactedOnlyIcons ? 'menu-compact' : undefined,
|
|
48
50
|
]
|
|
49
51
|
|
|
50
52
|
useEffect(() => {
|
|
@@ -90,7 +92,6 @@ export const Layout = ({ menu, header, children, extra, errorDescriptor, onError
|
|
|
90
92
|
? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
|
|
91
93
|
: undefined
|
|
92
94
|
}
|
|
93
|
-
compactMenu={menu.compact}
|
|
94
95
|
errorDescriptor={errorDescriptor}
|
|
95
96
|
onError={onError}
|
|
96
97
|
extra={extra}
|