@uipath/apollo-react 3.54.0-pr354.1b1c99f → 3.54.0-pr354.32975d0
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/canvas/components/Toolbox/ListView.cjs +10 -1
- package/dist/canvas/components/Toolbox/ListView.d.ts +6 -1
- package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/ListView.js +11 -2
- package/dist/canvas/components/Toolbox/SearchBox.cjs +6 -2
- package/dist/canvas/components/Toolbox/SearchBox.d.ts +1 -0
- package/dist/canvas/components/Toolbox/SearchBox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/SearchBox.js +6 -2
- package/dist/canvas/components/Toolbox/Toolbox.cjs +56 -52
- package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.js +57 -53
- package/package.json +1 -1
|
@@ -107,6 +107,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
|
|
|
107
107
|
const isActive = index === activeIndex;
|
|
108
108
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_ListView_styles_cjs_namespaceObject.ListItemButton, {
|
|
109
109
|
...ariaAttributes,
|
|
110
|
+
tabIndex: -1,
|
|
110
111
|
id: `toolbox-item-${item.id}`,
|
|
111
112
|
role: "option",
|
|
112
113
|
"aria-selected": isActive,
|
|
@@ -168,12 +169,17 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
|
|
|
168
169
|
]
|
|
169
170
|
});
|
|
170
171
|
});
|
|
171
|
-
const
|
|
172
|
+
const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
|
|
172
173
|
const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
|
|
173
174
|
const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
|
|
174
175
|
items,
|
|
175
176
|
enableSections
|
|
176
177
|
]);
|
|
178
|
+
(0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
|
|
179
|
+
renderedItems
|
|
180
|
+
}), [
|
|
181
|
+
renderedItems
|
|
182
|
+
]);
|
|
177
183
|
const rowProps = (0, external_react_namespaceObject.useMemo)(()=>({
|
|
178
184
|
renderedItems,
|
|
179
185
|
activeIndex,
|
|
@@ -223,6 +229,8 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
|
|
|
223
229
|
]
|
|
224
230
|
});
|
|
225
231
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
|
|
232
|
+
id: "toolbox-listbox",
|
|
233
|
+
role: "listbox",
|
|
226
234
|
listRef: listRef,
|
|
227
235
|
rowProps: rowProps,
|
|
228
236
|
rowComponent: ListViewRow,
|
|
@@ -231,6 +239,7 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
|
|
|
231
239
|
overscanCount: 20
|
|
232
240
|
});
|
|
233
241
|
});
|
|
242
|
+
const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
|
|
234
243
|
exports.ListView = __webpack_exports__.ListView;
|
|
235
244
|
exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
|
|
236
245
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
@@ -31,6 +31,9 @@ export interface ListViewRowProps<T extends ListItem> {
|
|
|
31
31
|
onItemClick: (item: T) => void;
|
|
32
32
|
onItemHover?: (item: T) => void;
|
|
33
33
|
}
|
|
34
|
+
export interface ListViewHandle<T extends ListItem = ListItem> {
|
|
35
|
+
renderedItems: RenderItem<T>[];
|
|
36
|
+
}
|
|
34
37
|
interface ListViewProps<T extends ListItem> {
|
|
35
38
|
items: T[];
|
|
36
39
|
activeIndex?: number;
|
|
@@ -42,6 +45,8 @@ interface ListViewProps<T extends ListItem> {
|
|
|
42
45
|
isLoading?: boolean;
|
|
43
46
|
enableSections?: boolean;
|
|
44
47
|
}
|
|
45
|
-
export declare const ListView:
|
|
48
|
+
export declare const ListView: <T extends ListItem>(props: ListViewProps<T> & {
|
|
49
|
+
ref?: React.Ref<ListViewHandle<T>>;
|
|
50
|
+
}) => React.ReactElement | null;
|
|
46
51
|
export {};
|
|
47
52
|
//# sourceMappingURL=ListView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAIzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;
|
|
1
|
+
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAIzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AAgHD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAsED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { Column } from "../../layouts/index.js";
|
|
|
4
4
|
import { NodeIcon, partition } from "../../utils/index.js";
|
|
5
5
|
import { ApSkeleton, ApTypography } from "../../../material/index.js";
|
|
6
6
|
import { ApIcon, ApTooltip } from "../../../material/components/index.js";
|
|
7
|
-
import { memo, useCallback, useMemo } from "react";
|
|
7
|
+
import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
|
|
8
8
|
import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
|
|
9
9
|
import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
|
|
10
10
|
function buildRenderedItems(items, enableSections) {
|
|
@@ -78,6 +78,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
|
|
|
78
78
|
const isActive = index === activeIndex;
|
|
79
79
|
return /*#__PURE__*/ jsxs(ListItemButton, {
|
|
80
80
|
...ariaAttributes,
|
|
81
|
+
tabIndex: -1,
|
|
81
82
|
id: `toolbox-item-${item.id}`,
|
|
82
83
|
role: "option",
|
|
83
84
|
"aria-selected": isActive,
|
|
@@ -139,12 +140,17 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
|
|
|
139
140
|
]
|
|
140
141
|
});
|
|
141
142
|
});
|
|
142
|
-
const
|
|
143
|
+
const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
|
|
143
144
|
const { isDarkMode } = useCanvasTheme();
|
|
144
145
|
const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
|
|
145
146
|
items,
|
|
146
147
|
enableSections
|
|
147
148
|
]);
|
|
149
|
+
useImperativeHandle(ref, ()=>({
|
|
150
|
+
renderedItems
|
|
151
|
+
}), [
|
|
152
|
+
renderedItems
|
|
153
|
+
]);
|
|
148
154
|
const rowProps = useMemo(()=>({
|
|
149
155
|
renderedItems,
|
|
150
156
|
activeIndex,
|
|
@@ -194,6 +200,8 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
|
|
|
194
200
|
]
|
|
195
201
|
});
|
|
196
202
|
return /*#__PURE__*/ jsx(StyledList, {
|
|
203
|
+
id: "toolbox-listbox",
|
|
204
|
+
role: "listbox",
|
|
197
205
|
listRef: listRef,
|
|
198
206
|
rowProps: rowProps,
|
|
199
207
|
rowComponent: ListViewRow,
|
|
@@ -202,4 +210,5 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
|
|
|
202
210
|
overscanCount: 20
|
|
203
211
|
});
|
|
204
212
|
});
|
|
213
|
+
const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
|
|
205
214
|
export { ListView_ListView as ListView, buildRenderedItems };
|
|
@@ -31,7 +31,7 @@ const index_cjs_namespaceObject = require("../../utils/index.cjs");
|
|
|
31
31
|
const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
33
33
|
const external_SearchBox_styles_cjs_namespaceObject = require("./SearchBox.styles.cjs");
|
|
34
|
-
const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
|
|
34
|
+
const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
|
|
35
35
|
const internalRef = (0, external_react_namespaceObject.useRef)(null);
|
|
36
36
|
const inputRef = externalInputRef ?? internalRef;
|
|
37
37
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
@@ -59,11 +59,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
|
|
|
59
59
|
ref: inputRef,
|
|
60
60
|
autoComplete: "off",
|
|
61
61
|
type: "text",
|
|
62
|
+
role: "combobox",
|
|
63
|
+
"aria-controls": "toolbox-listbox",
|
|
64
|
+
"aria-expanded": true,
|
|
62
65
|
className: "searchbox-input",
|
|
63
66
|
placeholder: placeholder,
|
|
64
67
|
value: value,
|
|
65
68
|
onChange: (e)=>onChange(e.target.value),
|
|
66
|
-
onKeyDown: onNavigationKeyDown
|
|
69
|
+
onKeyDown: onNavigationKeyDown,
|
|
70
|
+
"aria-activedescendant": activeDescendantId
|
|
67
71
|
}),
|
|
68
72
|
value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
69
73
|
type: "button",
|
|
@@ -5,6 +5,7 @@ interface SearchBoxProps {
|
|
|
5
5
|
placeholder?: string;
|
|
6
6
|
inputRef?: React.RefObject<HTMLInputElement | null>;
|
|
7
7
|
onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
|
|
8
|
+
activeDescendantId?: string;
|
|
8
9
|
}
|
|
9
10
|
export declare const SearchBox: import("react").NamedExoticComponent<SearchBoxProps>;
|
|
10
11
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,sDAgDpB,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { cx } from "../../utils/index.js";
|
|
|
3
3
|
import { ApIcon } from "../../../material/components/index.js";
|
|
4
4
|
import { memo, useEffect, useRef } from "react";
|
|
5
5
|
import { StyledSearchForm } from "./SearchBox.styles.js";
|
|
6
|
-
const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
|
|
6
|
+
const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
|
|
7
7
|
const internalRef = useRef(null);
|
|
8
8
|
const inputRef = externalInputRef ?? internalRef;
|
|
9
9
|
useEffect(()=>{
|
|
@@ -31,11 +31,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
|
|
|
31
31
|
ref: inputRef,
|
|
32
32
|
autoComplete: "off",
|
|
33
33
|
type: "text",
|
|
34
|
+
role: "combobox",
|
|
35
|
+
"aria-controls": "toolbox-listbox",
|
|
36
|
+
"aria-expanded": true,
|
|
34
37
|
className: "searchbox-input",
|
|
35
38
|
placeholder: placeholder,
|
|
36
39
|
value: value,
|
|
37
40
|
onChange: (e)=>onChange(e.target.value),
|
|
38
|
-
onKeyDown: onNavigationKeyDown
|
|
41
|
+
onKeyDown: onNavigationKeyDown,
|
|
42
|
+
"aria-activedescendant": activeDescendantId
|
|
39
43
|
}),
|
|
40
44
|
value && /*#__PURE__*/ jsx("button", {
|
|
41
45
|
type: "button",
|
|
@@ -53,6 +53,22 @@ function findItemById(items, id) {
|
|
|
53
53
|
}
|
|
54
54
|
return null;
|
|
55
55
|
}
|
|
56
|
+
function getNextSelectableIndex(renderedItems, currentIndex, direction) {
|
|
57
|
+
let next = currentIndex + direction;
|
|
58
|
+
while(next >= 0 && next < renderedItems.length){
|
|
59
|
+
if (renderedItems[next]?.type === 'item') return next;
|
|
60
|
+
next += direction;
|
|
61
|
+
}
|
|
62
|
+
return -1;
|
|
63
|
+
}
|
|
64
|
+
function getFirstSelectableIndex(renderedItems) {
|
|
65
|
+
for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
|
|
66
|
+
return -1;
|
|
67
|
+
}
|
|
68
|
+
function getLastSelectableIndex(renderedItems) {
|
|
69
|
+
for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
|
|
70
|
+
return -1;
|
|
71
|
+
}
|
|
56
72
|
function searchLeafItems(items, query) {
|
|
57
73
|
const results = [];
|
|
58
74
|
for (const item of items)if ('function' != typeof item.children) {
|
|
@@ -78,6 +94,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
78
94
|
const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
|
|
79
95
|
const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
|
|
80
96
|
const listRef = (0, external_react_window_namespaceObject.useListRef)(null);
|
|
97
|
+
const listViewRef = (0, external_react_namespaceObject.useRef)(null);
|
|
81
98
|
const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
|
|
82
99
|
const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
|
|
83
100
|
search
|
|
@@ -88,32 +105,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
88
105
|
searchedItems,
|
|
89
106
|
items
|
|
90
107
|
]);
|
|
91
|
-
const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>(0, external_ListView_cjs_namespaceObject.buildRenderedItems)(displayedItems, !isSearching), [
|
|
92
|
-
displayedItems,
|
|
93
|
-
isSearching
|
|
94
|
-
]);
|
|
95
|
-
const getNextSelectableIndex = (0, external_react_namespaceObject.useCallback)((currentIndex, direction)=>{
|
|
96
|
-
let next = currentIndex + direction;
|
|
97
|
-
while(next >= 0 && next < renderedItems.length){
|
|
98
|
-
if (renderedItems[next]?.type === 'item') return next;
|
|
99
|
-
next += direction;
|
|
100
|
-
}
|
|
101
|
-
return -1;
|
|
102
|
-
}, [
|
|
103
|
-
renderedItems
|
|
104
|
-
]);
|
|
105
|
-
const getFirstSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
106
|
-
for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
|
|
107
|
-
return -1;
|
|
108
|
-
}, [
|
|
109
|
-
renderedItems
|
|
110
|
-
]);
|
|
111
|
-
const getLastSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
112
|
-
for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
|
|
113
|
-
return -1;
|
|
114
|
-
}, [
|
|
115
|
-
renderedItems
|
|
116
|
-
]);
|
|
117
108
|
const startTransition = (0, external_react_namespaceObject.useCallback)((direction)=>{
|
|
118
109
|
if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
|
|
119
110
|
setIsTransitioning(true);
|
|
@@ -124,7 +115,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
124
115
|
}, []);
|
|
125
116
|
const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
|
|
126
117
|
setActiveIndex(index);
|
|
127
|
-
if (
|
|
118
|
+
if (-1 === index) return void searchInputRef.current?.focus();
|
|
119
|
+
listRef.current?.scrollToRow({
|
|
128
120
|
index,
|
|
129
121
|
align: 'auto'
|
|
130
122
|
});
|
|
@@ -257,29 +249,40 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
257
249
|
]);
|
|
258
250
|
const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
259
251
|
if (activeIndex < 0) return;
|
|
260
|
-
const renderItem = renderedItems[activeIndex];
|
|
252
|
+
const renderItem = listViewRef.current?.renderedItems[activeIndex];
|
|
261
253
|
if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
|
|
262
254
|
}, [
|
|
263
|
-
activeIndex
|
|
264
|
-
renderedItems
|
|
255
|
+
activeIndex
|
|
265
256
|
]);
|
|
266
257
|
const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
|
|
267
258
|
if (isTransitioning) return;
|
|
259
|
+
const renderedItems = listViewRef.current?.renderedItems ?? [];
|
|
260
|
+
const navigateDown = ()=>{
|
|
261
|
+
if (-1 === activeIndex) {
|
|
262
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
263
|
+
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
264
|
+
} else {
|
|
265
|
+
const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
|
|
266
|
+
if (-1 !== nextIndex) navigateToIndex(nextIndex);
|
|
267
|
+
else {
|
|
268
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
269
|
+
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
};
|
|
273
|
+
const navigateUp = ()=>{
|
|
274
|
+
activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
|
|
275
|
+
};
|
|
268
276
|
switch(e.key){
|
|
269
277
|
case 'ArrowDown':
|
|
270
278
|
e.preventDefault();
|
|
271
|
-
|
|
272
|
-
const firstIndex = getFirstSelectableIndex();
|
|
273
|
-
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
274
|
-
} else {
|
|
275
|
-
const nextIndex = getNextSelectableIndex(activeIndex, 1);
|
|
276
|
-
if (-1 !== nextIndex) navigateToIndex(nextIndex);
|
|
277
|
-
}
|
|
279
|
+
navigateDown();
|
|
278
280
|
break;
|
|
279
281
|
case 'ArrowUp':
|
|
280
282
|
e.preventDefault();
|
|
281
|
-
|
|
283
|
+
navigateUp();
|
|
282
284
|
break;
|
|
285
|
+
case 'Space':
|
|
283
286
|
case 'Enter':
|
|
284
287
|
if (activeIndex >= 0) {
|
|
285
288
|
const renderItem = renderedItems[activeIndex];
|
|
@@ -304,17 +307,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
304
307
|
handleBackTransition();
|
|
305
308
|
}
|
|
306
309
|
break;
|
|
310
|
+
case 'Tab':
|
|
311
|
+
e.preventDefault();
|
|
312
|
+
if (e.shiftKey) navigateUp();
|
|
313
|
+
else navigateDown();
|
|
314
|
+
break;
|
|
307
315
|
case 'Home':
|
|
308
316
|
{
|
|
317
|
+
if (-1 === activeIndex) break;
|
|
309
318
|
e.preventDefault();
|
|
310
|
-
const firstIndex = getFirstSelectableIndex();
|
|
319
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
311
320
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
312
321
|
break;
|
|
313
322
|
}
|
|
314
323
|
case 'End':
|
|
315
324
|
{
|
|
325
|
+
if (-1 === activeIndex) break;
|
|
316
326
|
e.preventDefault();
|
|
317
|
-
const lastIndex = getLastSelectableIndex();
|
|
327
|
+
const lastIndex = getLastSelectableIndex(renderedItems);
|
|
318
328
|
if (-1 !== lastIndex) navigateToIndex(lastIndex);
|
|
319
329
|
break;
|
|
320
330
|
}
|
|
@@ -322,14 +332,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
322
332
|
}, [
|
|
323
333
|
isTransitioning,
|
|
324
334
|
activeIndex,
|
|
325
|
-
renderedItems,
|
|
326
335
|
navigationStack.canGoBack,
|
|
327
336
|
navigateToIndex,
|
|
328
337
|
handleItemSelect,
|
|
329
|
-
handleBackTransition
|
|
330
|
-
getNextSelectableIndex,
|
|
331
|
-
getFirstSelectableIndex,
|
|
332
|
-
getLastSelectableIndex
|
|
338
|
+
handleBackTransition
|
|
333
339
|
]);
|
|
334
340
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
335
341
|
const handleKeyDown = (e)=>{
|
|
@@ -360,10 +366,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
360
366
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
361
367
|
ref: containerRef,
|
|
362
368
|
"data-testid": "toolbox-container",
|
|
363
|
-
tabIndex: 0,
|
|
364
|
-
role: "application",
|
|
365
|
-
"aria-activedescendant": activeDescendantId,
|
|
366
|
-
"aria-label": currentParentItem?.name || title,
|
|
367
369
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
|
|
368
370
|
px: 20,
|
|
369
371
|
py: 12,
|
|
@@ -382,21 +384,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
382
384
|
clear: clearSearch,
|
|
383
385
|
placeholder: "Search",
|
|
384
386
|
inputRef: searchInputRef,
|
|
385
|
-
onNavigationKeyDown: handleNavigationKeyDown
|
|
387
|
+
onNavigationKeyDown: handleNavigationKeyDown,
|
|
388
|
+
activeDescendantId: activeDescendantId
|
|
386
389
|
}),
|
|
387
390
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
|
|
388
391
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
|
|
389
392
|
entering: isTransitioning,
|
|
390
393
|
direction: animationDirection,
|
|
391
394
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
|
|
395
|
+
ref: listViewRef,
|
|
392
396
|
isLoading: childrenLoading || searchLoading || loading,
|
|
393
397
|
items: displayedItems,
|
|
394
398
|
activeIndex: activeIndex,
|
|
395
399
|
listRef: listRef,
|
|
396
400
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
397
|
-
enableSections: !isSearching,
|
|
398
401
|
onItemClick: handleItemSelect,
|
|
399
|
-
onItemHover: onItemHover
|
|
402
|
+
onItemHover: onItemHover,
|
|
403
|
+
enableSections: !isSearching
|
|
400
404
|
})
|
|
401
405
|
})
|
|
402
406
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAKA,OAAO,
|
|
1
|
+
{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAuC3F,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AA+CD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CA2ZjB"}
|
|
@@ -4,7 +4,7 @@ import { Column } from "../../layouts/index.js";
|
|
|
4
4
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
5
5
|
import { useListRef } from "react-window";
|
|
6
6
|
import { Header } from "./Header.js";
|
|
7
|
-
import { ListView
|
|
7
|
+
import { ListView } from "./ListView.js";
|
|
8
8
|
import { SearchBox } from "./SearchBox.js";
|
|
9
9
|
import { AnimatedContainer, AnimatedContent } from "./Toolbox.styles.js";
|
|
10
10
|
const TRANSITION_DURATION = 150;
|
|
@@ -25,6 +25,22 @@ function findItemById(items, id) {
|
|
|
25
25
|
}
|
|
26
26
|
return null;
|
|
27
27
|
}
|
|
28
|
+
function getNextSelectableIndex(renderedItems, currentIndex, direction) {
|
|
29
|
+
let next = currentIndex + direction;
|
|
30
|
+
while(next >= 0 && next < renderedItems.length){
|
|
31
|
+
if (renderedItems[next]?.type === 'item') return next;
|
|
32
|
+
next += direction;
|
|
33
|
+
}
|
|
34
|
+
return -1;
|
|
35
|
+
}
|
|
36
|
+
function getFirstSelectableIndex(renderedItems) {
|
|
37
|
+
for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
|
|
38
|
+
return -1;
|
|
39
|
+
}
|
|
40
|
+
function getLastSelectableIndex(renderedItems) {
|
|
41
|
+
for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
|
|
42
|
+
return -1;
|
|
43
|
+
}
|
|
28
44
|
function searchLeafItems(items, query) {
|
|
29
45
|
const results = [];
|
|
30
46
|
for (const item of items)if ('function' != typeof item.children) {
|
|
@@ -50,6 +66,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
50
66
|
const searchIdRef = useRef(0);
|
|
51
67
|
const initialItemsRef = useRef(initialItems);
|
|
52
68
|
const listRef = useListRef(null);
|
|
69
|
+
const listViewRef = useRef(null);
|
|
53
70
|
const searchInputRef = useRef(null);
|
|
54
71
|
const isSearching = useMemo(()=>search.length > 0, [
|
|
55
72
|
search
|
|
@@ -60,32 +77,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
60
77
|
searchedItems,
|
|
61
78
|
items
|
|
62
79
|
]);
|
|
63
|
-
const renderedItems = useMemo(()=>buildRenderedItems(displayedItems, !isSearching), [
|
|
64
|
-
displayedItems,
|
|
65
|
-
isSearching
|
|
66
|
-
]);
|
|
67
|
-
const getNextSelectableIndex = useCallback((currentIndex, direction)=>{
|
|
68
|
-
let next = currentIndex + direction;
|
|
69
|
-
while(next >= 0 && next < renderedItems.length){
|
|
70
|
-
if (renderedItems[next]?.type === 'item') return next;
|
|
71
|
-
next += direction;
|
|
72
|
-
}
|
|
73
|
-
return -1;
|
|
74
|
-
}, [
|
|
75
|
-
renderedItems
|
|
76
|
-
]);
|
|
77
|
-
const getFirstSelectableIndex = useCallback(()=>{
|
|
78
|
-
for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
|
|
79
|
-
return -1;
|
|
80
|
-
}, [
|
|
81
|
-
renderedItems
|
|
82
|
-
]);
|
|
83
|
-
const getLastSelectableIndex = useCallback(()=>{
|
|
84
|
-
for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
|
|
85
|
-
return -1;
|
|
86
|
-
}, [
|
|
87
|
-
renderedItems
|
|
88
|
-
]);
|
|
89
80
|
const startTransition = useCallback((direction)=>{
|
|
90
81
|
if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
|
|
91
82
|
setIsTransitioning(true);
|
|
@@ -96,7 +87,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
96
87
|
}, []);
|
|
97
88
|
const navigateToIndex = useCallback((index)=>{
|
|
98
89
|
setActiveIndex(index);
|
|
99
|
-
if (
|
|
90
|
+
if (-1 === index) return void searchInputRef.current?.focus();
|
|
91
|
+
listRef.current?.scrollToRow({
|
|
100
92
|
index,
|
|
101
93
|
align: 'auto'
|
|
102
94
|
});
|
|
@@ -229,29 +221,40 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
229
221
|
]);
|
|
230
222
|
const activeDescendantId = useMemo(()=>{
|
|
231
223
|
if (activeIndex < 0) return;
|
|
232
|
-
const renderItem = renderedItems[activeIndex];
|
|
224
|
+
const renderItem = listViewRef.current?.renderedItems[activeIndex];
|
|
233
225
|
if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
|
|
234
226
|
}, [
|
|
235
|
-
activeIndex
|
|
236
|
-
renderedItems
|
|
227
|
+
activeIndex
|
|
237
228
|
]);
|
|
238
229
|
const handleNavigationKeyDown = useCallback((e)=>{
|
|
239
230
|
if (isTransitioning) return;
|
|
231
|
+
const renderedItems = listViewRef.current?.renderedItems ?? [];
|
|
232
|
+
const navigateDown = ()=>{
|
|
233
|
+
if (-1 === activeIndex) {
|
|
234
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
235
|
+
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
236
|
+
} else {
|
|
237
|
+
const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
|
|
238
|
+
if (-1 !== nextIndex) navigateToIndex(nextIndex);
|
|
239
|
+
else {
|
|
240
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
241
|
+
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
const navigateUp = ()=>{
|
|
246
|
+
activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
|
|
247
|
+
};
|
|
240
248
|
switch(e.key){
|
|
241
249
|
case 'ArrowDown':
|
|
242
250
|
e.preventDefault();
|
|
243
|
-
|
|
244
|
-
const firstIndex = getFirstSelectableIndex();
|
|
245
|
-
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
246
|
-
} else {
|
|
247
|
-
const nextIndex = getNextSelectableIndex(activeIndex, 1);
|
|
248
|
-
if (-1 !== nextIndex) navigateToIndex(nextIndex);
|
|
249
|
-
}
|
|
251
|
+
navigateDown();
|
|
250
252
|
break;
|
|
251
253
|
case 'ArrowUp':
|
|
252
254
|
e.preventDefault();
|
|
253
|
-
|
|
255
|
+
navigateUp();
|
|
254
256
|
break;
|
|
257
|
+
case 'Space':
|
|
255
258
|
case 'Enter':
|
|
256
259
|
if (activeIndex >= 0) {
|
|
257
260
|
const renderItem = renderedItems[activeIndex];
|
|
@@ -276,17 +279,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
276
279
|
handleBackTransition();
|
|
277
280
|
}
|
|
278
281
|
break;
|
|
282
|
+
case 'Tab':
|
|
283
|
+
e.preventDefault();
|
|
284
|
+
if (e.shiftKey) navigateUp();
|
|
285
|
+
else navigateDown();
|
|
286
|
+
break;
|
|
279
287
|
case 'Home':
|
|
280
288
|
{
|
|
289
|
+
if (-1 === activeIndex) break;
|
|
281
290
|
e.preventDefault();
|
|
282
|
-
const firstIndex = getFirstSelectableIndex();
|
|
291
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
283
292
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
284
293
|
break;
|
|
285
294
|
}
|
|
286
295
|
case 'End':
|
|
287
296
|
{
|
|
297
|
+
if (-1 === activeIndex) break;
|
|
288
298
|
e.preventDefault();
|
|
289
|
-
const lastIndex = getLastSelectableIndex();
|
|
299
|
+
const lastIndex = getLastSelectableIndex(renderedItems);
|
|
290
300
|
if (-1 !== lastIndex) navigateToIndex(lastIndex);
|
|
291
301
|
break;
|
|
292
302
|
}
|
|
@@ -294,14 +304,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
294
304
|
}, [
|
|
295
305
|
isTransitioning,
|
|
296
306
|
activeIndex,
|
|
297
|
-
renderedItems,
|
|
298
307
|
navigationStack.canGoBack,
|
|
299
308
|
navigateToIndex,
|
|
300
309
|
handleItemSelect,
|
|
301
|
-
handleBackTransition
|
|
302
|
-
getNextSelectableIndex,
|
|
303
|
-
getFirstSelectableIndex,
|
|
304
|
-
getLastSelectableIndex
|
|
310
|
+
handleBackTransition
|
|
305
311
|
]);
|
|
306
312
|
useEffect(()=>{
|
|
307
313
|
const handleKeyDown = (e)=>{
|
|
@@ -332,10 +338,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
332
338
|
return /*#__PURE__*/ jsx("div", {
|
|
333
339
|
ref: containerRef,
|
|
334
340
|
"data-testid": "toolbox-container",
|
|
335
|
-
tabIndex: 0,
|
|
336
|
-
role: "application",
|
|
337
|
-
"aria-activedescendant": activeDescendantId,
|
|
338
|
-
"aria-label": currentParentItem?.name || title,
|
|
339
341
|
children: /*#__PURE__*/ jsxs(Column, {
|
|
340
342
|
px: 20,
|
|
341
343
|
py: 12,
|
|
@@ -354,21 +356,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
354
356
|
clear: clearSearch,
|
|
355
357
|
placeholder: "Search",
|
|
356
358
|
inputRef: searchInputRef,
|
|
357
|
-
onNavigationKeyDown: handleNavigationKeyDown
|
|
359
|
+
onNavigationKeyDown: handleNavigationKeyDown,
|
|
360
|
+
activeDescendantId: activeDescendantId
|
|
358
361
|
}),
|
|
359
362
|
/*#__PURE__*/ jsx(AnimatedContainer, {
|
|
360
363
|
children: /*#__PURE__*/ jsx(AnimatedContent, {
|
|
361
364
|
entering: isTransitioning,
|
|
362
365
|
direction: animationDirection,
|
|
363
366
|
children: /*#__PURE__*/ jsx(ListView, {
|
|
367
|
+
ref: listViewRef,
|
|
364
368
|
isLoading: childrenLoading || searchLoading || loading,
|
|
365
369
|
items: displayedItems,
|
|
366
370
|
activeIndex: activeIndex,
|
|
367
371
|
listRef: listRef,
|
|
368
372
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
369
|
-
enableSections: !isSearching,
|
|
370
373
|
onItemClick: handleItemSelect,
|
|
371
|
-
onItemHover: onItemHover
|
|
374
|
+
onItemHover: onItemHover,
|
|
375
|
+
enableSections: !isSearching
|
|
372
376
|
})
|
|
373
377
|
})
|
|
374
378
|
})
|