@uipath/apollo-react 3.54.0-pr354.782b44c → 3.54.0-pr354.b1724d5

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 +1 -8
  2. package/dist/canvas/components/Toolbox/ListView.d.ts +1 -6
  3. package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
  4. package/dist/canvas/components/Toolbox/ListView.js +2 -9
  5. package/dist/canvas/components/Toolbox/SearchBox.cjs +2 -3
  6. package/dist/canvas/components/Toolbox/SearchBox.d.ts +0 -1
  7. package/dist/canvas/components/Toolbox/SearchBox.d.ts.map +1 -1
  8. package/dist/canvas/components/Toolbox/SearchBox.js +2 -3
  9. package/dist/canvas/components/Toolbox/Toolbox.cjs +47 -35
  10. package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
  11. package/dist/canvas/components/Toolbox/Toolbox.js +48 -36
  12. package/package.json +1 -1
package/dist/canvas/components/Toolbox/ListView.cjs CHANGED
@@ -168,17 +168,12 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
168
168
  ]
169
169
  });
170
170
  });
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) {
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 }) {
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
- ]);
182
177
  const rowProps = (0, external_react_namespaceObject.useMemo)(()=>({
183
178
  renderedItems,
184
179
  activeIndex,
@@ -228,7 +223,6 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
228
223
  ]
229
224
  });
230
225
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
231
- role: "listbox",
232
226
  listRef: listRef,
233
227
  rowProps: rowProps,
234
228
  rowComponent: ListViewRow,
@@ -237,7 +231,6 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
237
231
  overscanCount: 20
238
232
  });
239
233
  });
240
- const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
241
234
  exports.ListView = __webpack_exports__.ListView;
242
235
  exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
243
236
  for(var __rspack_i in __webpack_exports__)if (-1 === [
package/dist/canvas/components/Toolbox/ListView.d.ts CHANGED
@@ -31,9 +31,6 @@ 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
- }
37
34
  interface ListViewProps<T extends ListItem> {
38
35
  items: T[];
39
36
  activeIndex?: number;
@@ -45,8 +42,6 @@ interface ListViewProps<T extends ListItem> {
45
42
  isLoading?: boolean;
46
43
  enableSections?: boolean;
47
44
  }
48
- export declare const ListView: <T extends ListItem>(props: ListViewProps<T> & {
49
- ref?: React.Ref<ListViewHandle<T>>;
50
- }) => React.ReactElement | null;
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)>;
51
46
  export {};
52
47
  //# 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,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;AAqED,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"}
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"}
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 { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
7
+ import { memo, useCallback, 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,17 +139,12 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
139
139
  ]
140
140
  });
141
141
  });
142
- const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
142
+ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }) {
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
- ]);
153
148
  const rowProps = useMemo(()=>({
154
149
  renderedItems,
155
150
  activeIndex,
@@ -199,7 +194,6 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
199
194
  ]
200
195
  });
201
196
  return /*#__PURE__*/ jsx(StyledList, {
202
- role: "listbox",
203
197
  listRef: listRef,
204
198
  rowProps: rowProps,
205
199
  rowComponent: ListViewRow,
@@ -208,5 +202,4 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
208
202
  overscanCount: 20
209
203
  });
210
204
  });
211
- const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
212
205
  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, activeDescendantId }) {
34
+ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
35
35
  const internalRef = (0, external_react_namespaceObject.useRef)(null);
36
36
  const inputRef = externalInputRef ?? internalRef;
37
37
  (0, external_react_namespaceObject.useEffect)(()=>{
@@ -63,8 +63,7 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
63
63
  placeholder: placeholder,
64
64
  value: value,
65
65
  onChange: (e)=>onChange(e.target.value),
66
- onKeyDown: onNavigationKeyDown,
67
- "aria-activedescendant": activeDescendantId
66
+ onKeyDown: onNavigationKeyDown
68
67
  }),
69
68
  value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
70
69
  type: "button",
package/dist/canvas/components/Toolbox/SearchBox.d.ts CHANGED
@@ -5,7 +5,6 @@ interface SearchBoxProps {
5
5
  placeholder?: string;
6
6
  inputRef?: React.RefObject<HTMLInputElement | null>;
7
7
  onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
8
- activeDescendantId?: string;
9
8
  }
10
9
  export declare const SearchBox: import("react").NamedExoticComponent<SearchBoxProps>;
11
10
  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;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,sDA6CpB,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;CACxD;AAED,eAAO,MAAM,SAAS,sDA2CpB,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, activeDescendantId }) {
6
+ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
7
7
  const internalRef = useRef(null);
8
8
  const inputRef = externalInputRef ?? internalRef;
9
9
  useEffect(()=>{
@@ -35,8 +35,7 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
35
35
  placeholder: placeholder,
36
36
  value: value,
37
37
  onChange: (e)=>onChange(e.target.value),
38
- onKeyDown: onNavigationKeyDown,
39
- "aria-activedescendant": activeDescendantId
38
+ onKeyDown: onNavigationKeyDown
40
39
  }),
41
40
  value && /*#__PURE__*/ jsx("button", {
42
41
  type: "button",
package/dist/canvas/components/Toolbox/Toolbox.cjs CHANGED
@@ -53,22 +53,6 @@ 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
- }
72
56
  function searchLeafItems(items, query) {
73
57
  const results = [];
74
58
  for (const item of items)if ('function' != typeof item.children) {
@@ -94,7 +78,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
94
78
  const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
95
79
  const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
96
80
  const listRef = (0, external_react_window_namespaceObject.useListRef)(null);
97
- const listViewRef = (0, external_react_namespaceObject.useRef)(null);
98
81
  const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
99
82
  const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
100
83
  search
@@ -105,6 +88,32 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
105
88
  searchedItems,
106
89
  items
107
90
  ]);
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
+ ]);
108
117
  const startTransition = (0, external_react_namespaceObject.useCallback)((direction)=>{
109
118
  if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
110
119
  setIsTransitioning(true);
@@ -115,8 +124,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
115
124
  }, []);
116
125
  const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
117
126
  setActiveIndex(index);
118
- if (-1 === index) return void searchInputRef.current?.focus();
119
- listRef.current?.scrollToRow({
127
+ if (index >= 0) listRef.current?.scrollToRow({
120
128
  index,
121
129
  align: 'auto'
122
130
  });
@@ -249,28 +257,28 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
249
257
  ]);
250
258
  const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
251
259
  if (activeIndex < 0) return;
252
- const renderItem = listViewRef.current?.renderedItems[activeIndex];
260
+ const renderItem = renderedItems[activeIndex];
253
261
  if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
254
262
  }, [
255
- activeIndex
263
+ activeIndex,
264
+ renderedItems
256
265
  ]);
257
266
  const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
258
267
  if (isTransitioning) return;
259
- const renderedItems = listViewRef.current?.renderedItems ?? [];
260
268
  switch(e.key){
261
269
  case 'ArrowDown':
262
270
  e.preventDefault();
263
271
  if (-1 === activeIndex) {
264
- const firstIndex = getFirstSelectableIndex(renderedItems);
272
+ const firstIndex = getFirstSelectableIndex();
265
273
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
266
274
  } else {
267
- const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
275
+ const nextIndex = getNextSelectableIndex(activeIndex, 1);
268
276
  if (-1 !== nextIndex) navigateToIndex(nextIndex);
269
277
  }
270
278
  break;
271
279
  case 'ArrowUp':
272
280
  e.preventDefault();
273
- activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
281
+ activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
274
282
  break;
275
283
  case 'Enter':
276
284
  if (activeIndex >= 0) {
@@ -298,17 +306,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
298
306
  break;
299
307
  case 'Home':
300
308
  {
301
- if (-1 === activeIndex) break;
302
309
  e.preventDefault();
303
- const firstIndex = getFirstSelectableIndex(renderedItems);
310
+ const firstIndex = getFirstSelectableIndex();
304
311
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
305
312
  break;
306
313
  }
307
314
  case 'End':
308
315
  {
309
- if (-1 === activeIndex) break;
310
316
  e.preventDefault();
311
- const lastIndex = getLastSelectableIndex(renderedItems);
317
+ const lastIndex = getLastSelectableIndex();
312
318
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
313
319
  break;
314
320
  }
@@ -316,10 +322,14 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
316
322
  }, [
317
323
  isTransitioning,
318
324
  activeIndex,
325
+ renderedItems,
319
326
  navigationStack.canGoBack,
320
327
  navigateToIndex,
321
328
  handleItemSelect,
322
- handleBackTransition
329
+ handleBackTransition,
330
+ getNextSelectableIndex,
331
+ getFirstSelectableIndex,
332
+ getLastSelectableIndex
323
333
  ]);
324
334
  (0, external_react_namespaceObject.useEffect)(()=>{
325
335
  const handleKeyDown = (e)=>{
@@ -350,6 +360,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
350
360
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
351
361
  ref: containerRef,
352
362
  "data-testid": "toolbox-container",
363
+ tabIndex: 0,
364
+ role: "application",
365
+ "aria-activedescendant": activeDescendantId,
366
+ "aria-label": currentParentItem?.name || title,
353
367
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
354
368
  px: 20,
355
369
  py: 12,
@@ -368,23 +382,21 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
368
382
  clear: clearSearch,
369
383
  placeholder: "Search",
370
384
  inputRef: searchInputRef,
371
- onNavigationKeyDown: handleNavigationKeyDown,
372
- activeDescendantId: activeDescendantId
385
+ onNavigationKeyDown: handleNavigationKeyDown
373
386
  }),
374
387
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
375
388
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
376
389
  entering: isTransitioning,
377
390
  direction: animationDirection,
378
391
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
379
- ref: listViewRef,
380
392
  isLoading: childrenLoading || searchLoading || loading,
381
393
  items: displayedItems,
382
394
  activeIndex: activeIndex,
383
395
  listRef: listRef,
384
396
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
397
+ enableSections: !isSearching,
385
398
  onItemClick: handleItemSelect,
386
- onItemHover: onItemHover,
387
- enableSections: !isSearching
399
+ onItemHover: onItemHover
388
400
  })
389
401
  })
390
402
  })
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,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"}
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"}
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 } from "./ListView.js";
7
+ import { ListView, buildRenderedItems } 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,22 +25,6 @@ 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
- }
44
28
  function searchLeafItems(items, query) {
45
29
  const results = [];
46
30
  for (const item of items)if ('function' != typeof item.children) {
@@ -66,7 +50,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
66
50
  const searchIdRef = useRef(0);
67
51
  const initialItemsRef = useRef(initialItems);
68
52
  const listRef = useListRef(null);
69
- const listViewRef = useRef(null);
70
53
  const searchInputRef = useRef(null);
71
54
  const isSearching = useMemo(()=>search.length > 0, [
72
55
  search
@@ -77,6 +60,32 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
77
60
  searchedItems,
78
61
  items
79
62
  ]);
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
+ ]);
80
89
  const startTransition = useCallback((direction)=>{
81
90
  if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
82
91
  setIsTransitioning(true);
@@ -87,8 +96,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
87
96
  }, []);
88
97
  const navigateToIndex = useCallback((index)=>{
89
98
  setActiveIndex(index);
90
- if (-1 === index) return void searchInputRef.current?.focus();
91
- listRef.current?.scrollToRow({
99
+ if (index >= 0) listRef.current?.scrollToRow({
92
100
  index,
93
101
  align: 'auto'
94
102
  });
@@ -221,28 +229,28 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
221
229
  ]);
222
230
  const activeDescendantId = useMemo(()=>{
223
231
  if (activeIndex < 0) return;
224
- const renderItem = listViewRef.current?.renderedItems[activeIndex];
232
+ const renderItem = renderedItems[activeIndex];
225
233
  if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
226
234
  }, [
227
- activeIndex
235
+ activeIndex,
236
+ renderedItems
228
237
  ]);
229
238
  const handleNavigationKeyDown = useCallback((e)=>{
230
239
  if (isTransitioning) return;
231
- const renderedItems = listViewRef.current?.renderedItems ?? [];
232
240
  switch(e.key){
233
241
  case 'ArrowDown':
234
242
  e.preventDefault();
235
243
  if (-1 === activeIndex) {
236
- const firstIndex = getFirstSelectableIndex(renderedItems);
244
+ const firstIndex = getFirstSelectableIndex();
237
245
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
238
246
  } else {
239
- const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
247
+ const nextIndex = getNextSelectableIndex(activeIndex, 1);
240
248
  if (-1 !== nextIndex) navigateToIndex(nextIndex);
241
249
  }
242
250
  break;
243
251
  case 'ArrowUp':
244
252
  e.preventDefault();
245
- activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
253
+ activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
246
254
  break;
247
255
  case 'Enter':
248
256
  if (activeIndex >= 0) {
@@ -270,17 +278,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
270
278
  break;
271
279
  case 'Home':
272
280
  {
273
- if (-1 === activeIndex) break;
274
281
  e.preventDefault();
275
- const firstIndex = getFirstSelectableIndex(renderedItems);
282
+ const firstIndex = getFirstSelectableIndex();
276
283
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
277
284
  break;
278
285
  }
279
286
  case 'End':
280
287
  {
281
- if (-1 === activeIndex) break;
282
288
  e.preventDefault();
283
- const lastIndex = getLastSelectableIndex(renderedItems);
289
+ const lastIndex = getLastSelectableIndex();
284
290
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
285
291
  break;
286
292
  }
@@ -288,10 +294,14 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
288
294
  }, [
289
295
  isTransitioning,
290
296
  activeIndex,
297
+ renderedItems,
291
298
  navigationStack.canGoBack,
292
299
  navigateToIndex,
293
300
  handleItemSelect,
294
- handleBackTransition
301
+ handleBackTransition,
302
+ getNextSelectableIndex,
303
+ getFirstSelectableIndex,
304
+ getLastSelectableIndex
295
305
  ]);
296
306
  useEffect(()=>{
297
307
  const handleKeyDown = (e)=>{
@@ -322,6 +332,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
322
332
  return /*#__PURE__*/ jsx("div", {
323
333
  ref: containerRef,
324
334
  "data-testid": "toolbox-container",
335
+ tabIndex: 0,
336
+ role: "application",
337
+ "aria-activedescendant": activeDescendantId,
338
+ "aria-label": currentParentItem?.name || title,
325
339
  children: /*#__PURE__*/ jsxs(Column, {
326
340
  px: 20,
327
341
  py: 12,
@@ -340,23 +354,21 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
340
354
  clear: clearSearch,
341
355
  placeholder: "Search",
342
356
  inputRef: searchInputRef,
343
- onNavigationKeyDown: handleNavigationKeyDown,
344
- activeDescendantId: activeDescendantId
357
+ onNavigationKeyDown: handleNavigationKeyDown
345
358
  }),
346
359
  /*#__PURE__*/ jsx(AnimatedContainer, {
347
360
  children: /*#__PURE__*/ jsx(AnimatedContent, {
348
361
  entering: isTransitioning,
349
362
  direction: animationDirection,
350
363
  children: /*#__PURE__*/ jsx(ListView, {
351
- ref: listViewRef,
352
364
  isLoading: childrenLoading || searchLoading || loading,
353
365
  items: displayedItems,
354
366
  activeIndex: activeIndex,
355
367
  listRef: listRef,
356
368
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
369
+ enableSections: !isSearching,
357
370
  onItemClick: handleItemSelect,
358
- onItemHover: onItemHover,
359
- enableSections: !isSearching
371
+ onItemHover: onItemHover
360
372
  })
361
373
  })
362
374
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.54.0-pr354.782b44c",
3
+ "version": "3.54.0-pr354.b1724d5",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",