@uipath/apollo-react 3.54.0-pr354.1b1c99f → 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.
Files changed (12) hide show
  1. package/dist/canvas/components/Toolbox/ListView.cjs +9 -1
  2. package/dist/canvas/components/Toolbox/ListView.d.ts +6 -1
  3. package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
  4. package/dist/canvas/components/Toolbox/ListView.js +10 -2
  5. package/dist/canvas/components/Toolbox/SearchBox.cjs +6 -2
  6. package/dist/canvas/components/Toolbox/SearchBox.d.ts +1 -0
  7. package/dist/canvas/components/Toolbox/SearchBox.d.ts.map +1 -1
  8. package/dist/canvas/components/Toolbox/SearchBox.js +6 -2
  9. package/dist/canvas/components/Toolbox/Toolbox.cjs +35 -47
  10. package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
  11. package/dist/canvas/components/Toolbox/Toolbox.js +36 -48
  12. package/package.json +1 -1
package/dist/canvas/components/Toolbox/ListView.cjs CHANGED
@@ -168,12 +168,17 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
168
168
  ]
169
169
  });
170
170
  });
171
- const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }) {
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,6 +228,8 @@ 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, {
231
+ id: "toolbox-listbox",
232
+ role: "listbox",
226
233
  listRef: listRef,
227
234
  rowProps: rowProps,
228
235
  rowComponent: ListViewRow,
@@ -231,6 +238,7 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
231
238
  overscanCount: 20
232
239
  });
233
240
  });
241
+ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
234
242
  exports.ListView = __webpack_exports__.ListView;
235
243
  exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
236
244
  for(var __rspack_i in __webpack_exports__)if (-1 === [
package/dist/canvas/components/Toolbox/ListView.d.ts CHANGED
@@ -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: import("react").MemoExoticComponent<(<T extends ListItem>({ items, activeIndex, listRef, onItemClick, onItemHover, emptyStateMessage, emptyStateIcon, isLoading, enableSections, }: ListViewProps<T>) => import("react/jsx-runtime").JSX.Element)>;
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
package/dist/canvas/components/Toolbox/ListView.d.ts.map CHANGED
@@ -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;AAED,eAAO,MAAM,QAAQ,wCAA0B,CAAC,SAAS,QAAQ,4HAU9D,aAAa,CAAC,CAAC,CAAC,8CAiDjB,CAAC"}
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"}
package/dist/canvas/components/Toolbox/ListView.js CHANGED
@@ -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 ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }) {
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,6 +199,8 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
194
199
  ]
195
200
  });
196
201
  return /*#__PURE__*/ jsx(StyledList, {
202
+ id: "toolbox-listbox",
203
+ role: "listbox",
197
204
  listRef: listRef,
198
205
  rowProps: rowProps,
199
206
  rowComponent: ListViewRow,
@@ -202,4 +209,5 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
202
209
  overscanCount: 20
203
210
  });
204
211
  });
212
+ const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
205
213
  export { ListView_ListView as ListView, buildRenderedItems };
package/dist/canvas/components/Toolbox/SearchBox.cjs CHANGED
@@ -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",
package/dist/canvas/components/Toolbox/SearchBox.d.ts CHANGED
@@ -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 {};
package/dist/canvas/components/Toolbox/SearchBox.d.ts.map CHANGED
@@ -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;CACxD;AAED,eAAO,MAAM,SAAS,sDA2CpB,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"}
package/dist/canvas/components/Toolbox/SearchBox.js CHANGED
@@ -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",
package/dist/canvas/components/Toolbox/Toolbox.cjs CHANGED
@@ -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 (index >= 0) listRef.current?.scrollToRow({
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) {
@@ -306,15 +298,17 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
306
298
  break;
307
299
  case 'Home':
308
300
  {
301
+ if (-1 === activeIndex) break;
309
302
  e.preventDefault();
310
- const firstIndex = getFirstSelectableIndex();
303
+ const firstIndex = getFirstSelectableIndex(renderedItems);
311
304
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
312
305
  break;
313
306
  }
314
307
  case 'End':
315
308
  {
309
+ if (-1 === activeIndex) break;
316
310
  e.preventDefault();
317
- const lastIndex = getLastSelectableIndex();
311
+ const lastIndex = getLastSelectableIndex(renderedItems);
318
312
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
319
313
  break;
320
314
  }
@@ -322,14 +316,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
322
316
  }, [
323
317
  isTransitioning,
324
318
  activeIndex,
325
- renderedItems,
326
319
  navigationStack.canGoBack,
327
320
  navigateToIndex,
328
321
  handleItemSelect,
329
- handleBackTransition,
330
- getNextSelectableIndex,
331
- getFirstSelectableIndex,
332
- getLastSelectableIndex
322
+ handleBackTransition
333
323
  ]);
334
324
  (0, external_react_namespaceObject.useEffect)(()=>{
335
325
  const handleKeyDown = (e)=>{
@@ -360,10 +350,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
360
350
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
361
351
  ref: containerRef,
362
352
  "data-testid": "toolbox-container",
363
- tabIndex: 0,
364
- role: "application",
365
- "aria-activedescendant": activeDescendantId,
366
- "aria-label": currentParentItem?.name || title,
367
353
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
368
354
  px: 20,
369
355
  py: 12,
@@ -382,21 +368,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
382
368
  clear: clearSearch,
383
369
  placeholder: "Search",
384
370
  inputRef: searchInputRef,
385
- onNavigationKeyDown: handleNavigationKeyDown
371
+ onNavigationKeyDown: handleNavigationKeyDown,
372
+ activeDescendantId: activeDescendantId
386
373
  }),
387
374
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
388
375
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
389
376
  entering: isTransitioning,
390
377
  direction: animationDirection,
391
378
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
379
+ ref: listViewRef,
392
380
  isLoading: childrenLoading || searchLoading || loading,
393
381
  items: displayedItems,
394
382
  activeIndex: activeIndex,
395
383
  listRef: listRef,
396
384
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
397
- enableSections: !isSearching,
398
385
  onItemClick: handleItemSelect,
399
- onItemHover: onItemHover
386
+ onItemHover: onItemHover,
387
+ enableSections: !isSearching
400
388
  })
401
389
  })
402
390
  })
package/dist/canvas/components/Toolbox/Toolbox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCzE,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;AAoBD,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,2CAkajB"}
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"}
package/dist/canvas/components/Toolbox/Toolbox.js CHANGED
@@ -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, buildRenderedItems } from "./ListView.js";
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 (index >= 0) listRef.current?.scrollToRow({
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) {
@@ -278,15 +270,17 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
278
270
  break;
279
271
  case 'Home':
280
272
  {
273
+ if (-1 === activeIndex) break;
281
274
  e.preventDefault();
282
- const firstIndex = getFirstSelectableIndex();
275
+ const firstIndex = getFirstSelectableIndex(renderedItems);
283
276
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
284
277
  break;
285
278
  }
286
279
  case 'End':
287
280
  {
281
+ if (-1 === activeIndex) break;
288
282
  e.preventDefault();
289
- const lastIndex = getLastSelectableIndex();
283
+ const lastIndex = getLastSelectableIndex(renderedItems);
290
284
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
291
285
  break;
292
286
  }
@@ -294,14 +288,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
294
288
  }, [
295
289
  isTransitioning,
296
290
  activeIndex,
297
- renderedItems,
298
291
  navigationStack.canGoBack,
299
292
  navigateToIndex,
300
293
  handleItemSelect,
301
- handleBackTransition,
302
- getNextSelectableIndex,
303
- getFirstSelectableIndex,
304
- getLastSelectableIndex
294
+ handleBackTransition
305
295
  ]);
306
296
  useEffect(()=>{
307
297
  const handleKeyDown = (e)=>{
@@ -332,10 +322,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
332
322
  return /*#__PURE__*/ jsx("div", {
333
323
  ref: containerRef,
334
324
  "data-testid": "toolbox-container",
335
- tabIndex: 0,
336
- role: "application",
337
- "aria-activedescendant": activeDescendantId,
338
- "aria-label": currentParentItem?.name || title,
339
325
  children: /*#__PURE__*/ jsxs(Column, {
340
326
  px: 20,
341
327
  py: 12,
@@ -354,21 +340,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
354
340
  clear: clearSearch,
355
341
  placeholder: "Search",
356
342
  inputRef: searchInputRef,
357
- onNavigationKeyDown: handleNavigationKeyDown
343
+ onNavigationKeyDown: handleNavigationKeyDown,
344
+ activeDescendantId: activeDescendantId
358
345
  }),
359
346
  /*#__PURE__*/ jsx(AnimatedContainer, {
360
347
  children: /*#__PURE__*/ jsx(AnimatedContent, {
361
348
  entering: isTransitioning,
362
349
  direction: animationDirection,
363
350
  children: /*#__PURE__*/ jsx(ListView, {
351
+ ref: listViewRef,
364
352
  isLoading: childrenLoading || searchLoading || loading,
365
353
  items: displayedItems,
366
354
  activeIndex: activeIndex,
367
355
  listRef: listRef,
368
356
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
369
- enableSections: !isSearching,
370
357
  onItemClick: handleItemSelect,
371
- onItemHover: onItemHover
358
+ onItemHover: onItemHover,
359
+ enableSections: !isSearching
372
360
  })
373
361
  })
374
362
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.54.0-pr354.1b1c99f",
3
+ "version": "3.54.0-pr354.6f6f261",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",