@uipath/apollo-react 3.54.0-pr354.1b1c99f → 3.54.0-pr354.41fe7f5
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 +55 -52
- package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.js +56 -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,28 +249,38 @@ 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;
|
|
283
285
|
case 'Enter':
|
|
284
286
|
if (activeIndex >= 0) {
|
|
@@ -304,17 +306,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
304
306
|
handleBackTransition();
|
|
305
307
|
}
|
|
306
308
|
break;
|
|
309
|
+
case 'Tab':
|
|
310
|
+
e.preventDefault();
|
|
311
|
+
if (e.shiftKey) navigateUp();
|
|
312
|
+
else navigateDown();
|
|
313
|
+
break;
|
|
307
314
|
case 'Home':
|
|
308
315
|
{
|
|
316
|
+
if (-1 === activeIndex) break;
|
|
309
317
|
e.preventDefault();
|
|
310
|
-
const firstIndex = getFirstSelectableIndex();
|
|
318
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
311
319
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
312
320
|
break;
|
|
313
321
|
}
|
|
314
322
|
case 'End':
|
|
315
323
|
{
|
|
324
|
+
if (-1 === activeIndex) break;
|
|
316
325
|
e.preventDefault();
|
|
317
|
-
const lastIndex = getLastSelectableIndex();
|
|
326
|
+
const lastIndex = getLastSelectableIndex(renderedItems);
|
|
318
327
|
if (-1 !== lastIndex) navigateToIndex(lastIndex);
|
|
319
328
|
break;
|
|
320
329
|
}
|
|
@@ -322,14 +331,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
322
331
|
}, [
|
|
323
332
|
isTransitioning,
|
|
324
333
|
activeIndex,
|
|
325
|
-
renderedItems,
|
|
326
334
|
navigationStack.canGoBack,
|
|
327
335
|
navigateToIndex,
|
|
328
336
|
handleItemSelect,
|
|
329
|
-
handleBackTransition
|
|
330
|
-
getNextSelectableIndex,
|
|
331
|
-
getFirstSelectableIndex,
|
|
332
|
-
getLastSelectableIndex
|
|
337
|
+
handleBackTransition
|
|
333
338
|
]);
|
|
334
339
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
335
340
|
const handleKeyDown = (e)=>{
|
|
@@ -360,10 +365,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
360
365
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
361
366
|
ref: containerRef,
|
|
362
367
|
"data-testid": "toolbox-container",
|
|
363
|
-
tabIndex: 0,
|
|
364
|
-
role: "application",
|
|
365
|
-
"aria-activedescendant": activeDescendantId,
|
|
366
|
-
"aria-label": currentParentItem?.name || title,
|
|
367
368
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
|
|
368
369
|
px: 20,
|
|
369
370
|
py: 12,
|
|
@@ -382,21 +383,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
382
383
|
clear: clearSearch,
|
|
383
384
|
placeholder: "Search",
|
|
384
385
|
inputRef: searchInputRef,
|
|
385
|
-
onNavigationKeyDown: handleNavigationKeyDown
|
|
386
|
+
onNavigationKeyDown: handleNavigationKeyDown,
|
|
387
|
+
activeDescendantId: activeDescendantId
|
|
386
388
|
}),
|
|
387
389
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
|
|
388
390
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
|
|
389
391
|
entering: isTransitioning,
|
|
390
392
|
direction: animationDirection,
|
|
391
393
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
|
|
394
|
+
ref: listViewRef,
|
|
392
395
|
isLoading: childrenLoading || searchLoading || loading,
|
|
393
396
|
items: displayedItems,
|
|
394
397
|
activeIndex: activeIndex,
|
|
395
398
|
listRef: listRef,
|
|
396
399
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
397
|
-
enableSections: !isSearching,
|
|
398
400
|
onItemClick: handleItemSelect,
|
|
399
|
-
onItemHover: onItemHover
|
|
401
|
+
onItemHover: onItemHover,
|
|
402
|
+
enableSections: !isSearching
|
|
400
403
|
})
|
|
401
404
|
})
|
|
402
405
|
})
|
|
@@ -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,2CA0ZjB"}
|
|
@@ -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,28 +221,38 @@ 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;
|
|
255
257
|
case 'Enter':
|
|
256
258
|
if (activeIndex >= 0) {
|
|
@@ -276,17 +278,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
276
278
|
handleBackTransition();
|
|
277
279
|
}
|
|
278
280
|
break;
|
|
281
|
+
case 'Tab':
|
|
282
|
+
e.preventDefault();
|
|
283
|
+
if (e.shiftKey) navigateUp();
|
|
284
|
+
else navigateDown();
|
|
285
|
+
break;
|
|
279
286
|
case 'Home':
|
|
280
287
|
{
|
|
288
|
+
if (-1 === activeIndex) break;
|
|
281
289
|
e.preventDefault();
|
|
282
|
-
const firstIndex = getFirstSelectableIndex();
|
|
290
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
283
291
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
284
292
|
break;
|
|
285
293
|
}
|
|
286
294
|
case 'End':
|
|
287
295
|
{
|
|
296
|
+
if (-1 === activeIndex) break;
|
|
288
297
|
e.preventDefault();
|
|
289
|
-
const lastIndex = getLastSelectableIndex();
|
|
298
|
+
const lastIndex = getLastSelectableIndex(renderedItems);
|
|
290
299
|
if (-1 !== lastIndex) navigateToIndex(lastIndex);
|
|
291
300
|
break;
|
|
292
301
|
}
|
|
@@ -294,14 +303,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
294
303
|
}, [
|
|
295
304
|
isTransitioning,
|
|
296
305
|
activeIndex,
|
|
297
|
-
renderedItems,
|
|
298
306
|
navigationStack.canGoBack,
|
|
299
307
|
navigateToIndex,
|
|
300
308
|
handleItemSelect,
|
|
301
|
-
handleBackTransition
|
|
302
|
-
getNextSelectableIndex,
|
|
303
|
-
getFirstSelectableIndex,
|
|
304
|
-
getLastSelectableIndex
|
|
309
|
+
handleBackTransition
|
|
305
310
|
]);
|
|
306
311
|
useEffect(()=>{
|
|
307
312
|
const handleKeyDown = (e)=>{
|
|
@@ -332,10 +337,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
332
337
|
return /*#__PURE__*/ jsx("div", {
|
|
333
338
|
ref: containerRef,
|
|
334
339
|
"data-testid": "toolbox-container",
|
|
335
|
-
tabIndex: 0,
|
|
336
|
-
role: "application",
|
|
337
|
-
"aria-activedescendant": activeDescendantId,
|
|
338
|
-
"aria-label": currentParentItem?.name || title,
|
|
339
340
|
children: /*#__PURE__*/ jsxs(Column, {
|
|
340
341
|
px: 20,
|
|
341
342
|
py: 12,
|
|
@@ -354,21 +355,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
354
355
|
clear: clearSearch,
|
|
355
356
|
placeholder: "Search",
|
|
356
357
|
inputRef: searchInputRef,
|
|
357
|
-
onNavigationKeyDown: handleNavigationKeyDown
|
|
358
|
+
onNavigationKeyDown: handleNavigationKeyDown,
|
|
359
|
+
activeDescendantId: activeDescendantId
|
|
358
360
|
}),
|
|
359
361
|
/*#__PURE__*/ jsx(AnimatedContainer, {
|
|
360
362
|
children: /*#__PURE__*/ jsx(AnimatedContent, {
|
|
361
363
|
entering: isTransitioning,
|
|
362
364
|
direction: animationDirection,
|
|
363
365
|
children: /*#__PURE__*/ jsx(ListView, {
|
|
366
|
+
ref: listViewRef,
|
|
364
367
|
isLoading: childrenLoading || searchLoading || loading,
|
|
365
368
|
items: displayedItems,
|
|
366
369
|
activeIndex: activeIndex,
|
|
367
370
|
listRef: listRef,
|
|
368
371
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
369
|
-
enableSections: !isSearching,
|
|
370
372
|
onItemClick: handleItemSelect,
|
|
371
|
-
onItemHover: onItemHover
|
|
373
|
+
onItemHover: onItemHover,
|
|
374
|
+
enableSections: !isSearching
|
|
372
375
|
})
|
|
373
376
|
})
|
|
374
377
|
})
|