@uipath/apollo-react 3.54.0-pr354.17cbb75 → 3.54.0-pr354.6f6f261
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 +8 -2
- 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 +9 -3
- package/dist/canvas/components/Toolbox/ListView.styles.cjs +1 -1
- package/dist/canvas/components/Toolbox/ListView.styles.js +1 -1
- package/dist/canvas/components/Toolbox/SearchBox.cjs +3 -3
- package/dist/canvas/components/Toolbox/SearchBox.js +3 -3
- package/dist/canvas/components/Toolbox/Toolbox.cjs +49 -41
- package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.js +50 -42
- package/package.json +1 -1
|
@@ -168,12 +168,17 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
|
|
|
168
168
|
]
|
|
169
169
|
});
|
|
170
170
|
});
|
|
171
|
-
const
|
|
171
|
+
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
172
|
const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
|
|
173
173
|
const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
|
|
174
174
|
items,
|
|
175
175
|
enableSections
|
|
176
176
|
]);
|
|
177
|
+
(0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
|
|
178
|
+
renderedItems
|
|
179
|
+
}), [
|
|
180
|
+
renderedItems
|
|
181
|
+
]);
|
|
177
182
|
const rowProps = (0, external_react_namespaceObject.useMemo)(()=>({
|
|
178
183
|
renderedItems,
|
|
179
184
|
activeIndex,
|
|
@@ -223,9 +228,9 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
|
|
|
223
228
|
]
|
|
224
229
|
});
|
|
225
230
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
|
|
226
|
-
listRef: listRef,
|
|
227
231
|
id: "toolbox-listbox",
|
|
228
232
|
role: "listbox",
|
|
233
|
+
listRef: listRef,
|
|
229
234
|
rowProps: rowProps,
|
|
230
235
|
rowComponent: ListViewRow,
|
|
231
236
|
rowCount: renderedItems.length,
|
|
@@ -233,6 +238,7 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
|
|
|
233
238
|
overscanCount: 20
|
|
234
239
|
});
|
|
235
240
|
});
|
|
241
|
+
const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
|
|
236
242
|
exports.ListView = __webpack_exports__.ListView;
|
|
237
243
|
exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
|
|
238
244
|
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;AA+GD,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;
|
|
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;AA+GD,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) {
|
|
@@ -139,12 +139,17 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
|
|
|
139
139
|
]
|
|
140
140
|
});
|
|
141
141
|
});
|
|
142
|
-
const
|
|
142
|
+
const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
|
|
143
143
|
const { isDarkMode } = useCanvasTheme();
|
|
144
144
|
const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
|
|
145
145
|
items,
|
|
146
146
|
enableSections
|
|
147
147
|
]);
|
|
148
|
+
useImperativeHandle(ref, ()=>({
|
|
149
|
+
renderedItems
|
|
150
|
+
}), [
|
|
151
|
+
renderedItems
|
|
152
|
+
]);
|
|
148
153
|
const rowProps = useMemo(()=>({
|
|
149
154
|
renderedItems,
|
|
150
155
|
activeIndex,
|
|
@@ -194,9 +199,9 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
|
|
|
194
199
|
]
|
|
195
200
|
});
|
|
196
201
|
return /*#__PURE__*/ jsx(StyledList, {
|
|
197
|
-
listRef: listRef,
|
|
198
202
|
id: "toolbox-listbox",
|
|
199
203
|
role: "listbox",
|
|
204
|
+
listRef: listRef,
|
|
200
205
|
rowProps: rowProps,
|
|
201
206
|
rowComponent: ListViewRow,
|
|
202
207
|
rowCount: renderedItems.length,
|
|
@@ -204,4 +209,5 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
|
|
|
204
209
|
overscanCount: 20
|
|
205
210
|
});
|
|
206
211
|
});
|
|
212
|
+
const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
|
|
207
213
|
export { ListView_ListView as ListView, buildRenderedItems };
|
|
@@ -60,14 +60,14 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
|
|
|
60
60
|
autoComplete: "off",
|
|
61
61
|
type: "text",
|
|
62
62
|
role: "combobox",
|
|
63
|
-
"aria-expanded": true,
|
|
64
63
|
"aria-controls": "toolbox-listbox",
|
|
65
|
-
"aria-
|
|
64
|
+
"aria-expanded": true,
|
|
66
65
|
className: "searchbox-input",
|
|
67
66
|
placeholder: placeholder,
|
|
68
67
|
value: value,
|
|
69
68
|
onChange: (e)=>onChange(e.target.value),
|
|
70
|
-
onKeyDown: onNavigationKeyDown
|
|
69
|
+
onKeyDown: onNavigationKeyDown,
|
|
70
|
+
"aria-activedescendant": activeDescendantId
|
|
71
71
|
}),
|
|
72
72
|
value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
73
73
|
type: "button",
|
|
@@ -32,14 +32,14 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
|
|
|
32
32
|
autoComplete: "off",
|
|
33
33
|
type: "text",
|
|
34
34
|
role: "combobox",
|
|
35
|
-
"aria-expanded": true,
|
|
36
35
|
"aria-controls": "toolbox-listbox",
|
|
37
|
-
"aria-
|
|
36
|
+
"aria-expanded": true,
|
|
38
37
|
className: "searchbox-input",
|
|
39
38
|
placeholder: placeholder,
|
|
40
39
|
value: value,
|
|
41
40
|
onChange: (e)=>onChange(e.target.value),
|
|
42
|
-
onKeyDown: onNavigationKeyDown
|
|
41
|
+
onKeyDown: onNavigationKeyDown,
|
|
42
|
+
"aria-activedescendant": activeDescendantId
|
|
43
43
|
}),
|
|
44
44
|
value && /*#__PURE__*/ jsx("button", {
|
|
45
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,28 @@ 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 ?? [];
|
|
268
260
|
switch(e.key){
|
|
269
261
|
case 'ArrowDown':
|
|
270
262
|
e.preventDefault();
|
|
271
263
|
if (-1 === activeIndex) {
|
|
272
|
-
const firstIndex = getFirstSelectableIndex();
|
|
264
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
273
265
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
274
266
|
} else {
|
|
275
|
-
const nextIndex = getNextSelectableIndex(activeIndex, 1);
|
|
267
|
+
const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
|
|
276
268
|
if (-1 !== nextIndex) navigateToIndex(nextIndex);
|
|
277
269
|
}
|
|
278
270
|
break;
|
|
279
271
|
case 'ArrowUp':
|
|
280
272
|
e.preventDefault();
|
|
281
|
-
activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
|
|
273
|
+
activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
|
|
282
274
|
break;
|
|
283
275
|
case 'Enter':
|
|
284
276
|
if (activeIndex >= 0) {
|
|
@@ -289,17 +281,34 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
289
281
|
}
|
|
290
282
|
}
|
|
291
283
|
break;
|
|
284
|
+
case 'ArrowRight':
|
|
285
|
+
if (activeIndex >= 0) {
|
|
286
|
+
const renderItem = renderedItems[activeIndex];
|
|
287
|
+
if (renderItem?.type === 'item' && renderItem.item.children) {
|
|
288
|
+
e.preventDefault();
|
|
289
|
+
handleItemSelect(renderItem.item);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
break;
|
|
293
|
+
case 'ArrowLeft':
|
|
294
|
+
if (activeIndex >= 0 && navigationStack.canGoBack) {
|
|
295
|
+
e.preventDefault();
|
|
296
|
+
handleBackTransition();
|
|
297
|
+
}
|
|
298
|
+
break;
|
|
292
299
|
case 'Home':
|
|
293
300
|
{
|
|
301
|
+
if (-1 === activeIndex) break;
|
|
294
302
|
e.preventDefault();
|
|
295
|
-
const firstIndex = getFirstSelectableIndex();
|
|
303
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
296
304
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
297
305
|
break;
|
|
298
306
|
}
|
|
299
307
|
case 'End':
|
|
300
308
|
{
|
|
309
|
+
if (-1 === activeIndex) break;
|
|
301
310
|
e.preventDefault();
|
|
302
|
-
const lastIndex = getLastSelectableIndex();
|
|
311
|
+
const lastIndex = getLastSelectableIndex(renderedItems);
|
|
303
312
|
if (-1 !== lastIndex) navigateToIndex(lastIndex);
|
|
304
313
|
break;
|
|
305
314
|
}
|
|
@@ -307,12 +316,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
307
316
|
}, [
|
|
308
317
|
isTransitioning,
|
|
309
318
|
activeIndex,
|
|
310
|
-
|
|
319
|
+
navigationStack.canGoBack,
|
|
311
320
|
navigateToIndex,
|
|
312
321
|
handleItemSelect,
|
|
313
|
-
|
|
314
|
-
getFirstSelectableIndex,
|
|
315
|
-
getLastSelectableIndex
|
|
322
|
+
handleBackTransition
|
|
316
323
|
]);
|
|
317
324
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
318
325
|
const handleKeyDown = (e)=>{
|
|
@@ -369,14 +376,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
369
376
|
entering: isTransitioning,
|
|
370
377
|
direction: animationDirection,
|
|
371
378
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
|
|
379
|
+
ref: listViewRef,
|
|
372
380
|
isLoading: childrenLoading || searchLoading || loading,
|
|
373
381
|
items: displayedItems,
|
|
374
382
|
activeIndex: activeIndex,
|
|
375
383
|
listRef: listRef,
|
|
376
384
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
377
|
-
enableSections: !isSearching,
|
|
378
385
|
onItemClick: handleItemSelect,
|
|
379
|
-
onItemHover: onItemHover
|
|
386
|
+
onItemHover: onItemHover,
|
|
387
|
+
enableSections: !isSearching
|
|
380
388
|
})
|
|
381
389
|
})
|
|
382
390
|
})
|
|
@@ -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,2CAoYjB"}
|
|
@@ -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,28 @@ 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 ?? [];
|
|
240
232
|
switch(e.key){
|
|
241
233
|
case 'ArrowDown':
|
|
242
234
|
e.preventDefault();
|
|
243
235
|
if (-1 === activeIndex) {
|
|
244
|
-
const firstIndex = getFirstSelectableIndex();
|
|
236
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
245
237
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
246
238
|
} else {
|
|
247
|
-
const nextIndex = getNextSelectableIndex(activeIndex, 1);
|
|
239
|
+
const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
|
|
248
240
|
if (-1 !== nextIndex) navigateToIndex(nextIndex);
|
|
249
241
|
}
|
|
250
242
|
break;
|
|
251
243
|
case 'ArrowUp':
|
|
252
244
|
e.preventDefault();
|
|
253
|
-
activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
|
|
245
|
+
activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
|
|
254
246
|
break;
|
|
255
247
|
case 'Enter':
|
|
256
248
|
if (activeIndex >= 0) {
|
|
@@ -261,17 +253,34 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
261
253
|
}
|
|
262
254
|
}
|
|
263
255
|
break;
|
|
256
|
+
case 'ArrowRight':
|
|
257
|
+
if (activeIndex >= 0) {
|
|
258
|
+
const renderItem = renderedItems[activeIndex];
|
|
259
|
+
if (renderItem?.type === 'item' && renderItem.item.children) {
|
|
260
|
+
e.preventDefault();
|
|
261
|
+
handleItemSelect(renderItem.item);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
break;
|
|
265
|
+
case 'ArrowLeft':
|
|
266
|
+
if (activeIndex >= 0 && navigationStack.canGoBack) {
|
|
267
|
+
e.preventDefault();
|
|
268
|
+
handleBackTransition();
|
|
269
|
+
}
|
|
270
|
+
break;
|
|
264
271
|
case 'Home':
|
|
265
272
|
{
|
|
273
|
+
if (-1 === activeIndex) break;
|
|
266
274
|
e.preventDefault();
|
|
267
|
-
const firstIndex = getFirstSelectableIndex();
|
|
275
|
+
const firstIndex = getFirstSelectableIndex(renderedItems);
|
|
268
276
|
if (-1 !== firstIndex) navigateToIndex(firstIndex);
|
|
269
277
|
break;
|
|
270
278
|
}
|
|
271
279
|
case 'End':
|
|
272
280
|
{
|
|
281
|
+
if (-1 === activeIndex) break;
|
|
273
282
|
e.preventDefault();
|
|
274
|
-
const lastIndex = getLastSelectableIndex();
|
|
283
|
+
const lastIndex = getLastSelectableIndex(renderedItems);
|
|
275
284
|
if (-1 !== lastIndex) navigateToIndex(lastIndex);
|
|
276
285
|
break;
|
|
277
286
|
}
|
|
@@ -279,12 +288,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
279
288
|
}, [
|
|
280
289
|
isTransitioning,
|
|
281
290
|
activeIndex,
|
|
282
|
-
|
|
291
|
+
navigationStack.canGoBack,
|
|
283
292
|
navigateToIndex,
|
|
284
293
|
handleItemSelect,
|
|
285
|
-
|
|
286
|
-
getFirstSelectableIndex,
|
|
287
|
-
getLastSelectableIndex
|
|
294
|
+
handleBackTransition
|
|
288
295
|
]);
|
|
289
296
|
useEffect(()=>{
|
|
290
297
|
const handleKeyDown = (e)=>{
|
|
@@ -341,14 +348,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
341
348
|
entering: isTransitioning,
|
|
342
349
|
direction: animationDirection,
|
|
343
350
|
children: /*#__PURE__*/ jsx(ListView, {
|
|
351
|
+
ref: listViewRef,
|
|
344
352
|
isLoading: childrenLoading || searchLoading || loading,
|
|
345
353
|
items: displayedItems,
|
|
346
354
|
activeIndex: activeIndex,
|
|
347
355
|
listRef: listRef,
|
|
348
356
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
349
|
-
enableSections: !isSearching,
|
|
350
357
|
onItemClick: handleItemSelect,
|
|
351
|
-
onItemHover: onItemHover
|
|
358
|
+
onItemHover: onItemHover,
|
|
359
|
+
enableSections: !isSearching
|
|
352
360
|
})
|
|
353
361
|
})
|
|
354
362
|
})
|