@uipath/apollo-react 3.54.0-pr354.c2317cc → 3.54.0-pr354.f799733

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 -2
  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 -3
  5. package/dist/canvas/components/Toolbox/ListView.styles.cjs +1 -1
  6. package/dist/canvas/components/Toolbox/ListView.styles.js +1 -1
  7. package/dist/canvas/components/Toolbox/SearchBox.cjs +3 -3
  8. package/dist/canvas/components/Toolbox/SearchBox.js +3 -3
  9. package/dist/canvas/components/Toolbox/Toolbox.cjs +49 -47
  10. package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
  11. package/dist/canvas/components/Toolbox/Toolbox.js +50 -48
  12. package/package.json +1 -1
package/dist/canvas/components/Toolbox/ListView.cjs CHANGED
@@ -107,6 +107,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
107
107
  const isActive = index === activeIndex;
108
108
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_ListView_styles_cjs_namespaceObject.ListItemButton, {
109
109
  ...ariaAttributes,
110
+ tabIndex: -1,
110
111
  id: `toolbox-item-${item.id}`,
111
112
  role: "option",
112
113
  "aria-selected": isActive,
@@ -168,12 +169,17 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
168
169
  ]
169
170
  });
170
171
  });
171
- const 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
+ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
172
173
  const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
173
174
  const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
174
175
  items,
175
176
  enableSections
176
177
  ]);
178
+ (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
179
+ renderedItems
180
+ }), [
181
+ renderedItems
182
+ ]);
177
183
  const rowProps = (0, external_react_namespaceObject.useMemo)(()=>({
178
184
  renderedItems,
179
185
  activeIndex,
@@ -223,9 +229,9 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
223
229
  ]
224
230
  });
225
231
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
226
- listRef: listRef,
227
232
  id: "toolbox-listbox",
228
233
  role: "listbox",
234
+ listRef: listRef,
229
235
  rowProps: rowProps,
230
236
  rowComponent: ListViewRow,
231
237
  rowCount: renderedItems.length,
@@ -233,6 +239,7 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
233
239
  overscanCount: 20
234
240
  });
235
241
  });
242
+ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
236
243
  exports.ListView = __webpack_exports__.ListView;
237
244
  exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
238
245
  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,8CAmDjB,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;AAgHD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAsED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
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) {
@@ -78,6 +78,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
78
78
  const isActive = index === activeIndex;
79
79
  return /*#__PURE__*/ jsxs(ListItemButton, {
80
80
  ...ariaAttributes,
81
+ tabIndex: -1,
81
82
  id: `toolbox-item-${item.id}`,
82
83
  role: "option",
83
84
  "aria-selected": isActive,
@@ -139,12 +140,17 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
139
140
  ]
140
141
  });
141
142
  });
142
- const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }) {
143
+ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
143
144
  const { isDarkMode } = useCanvasTheme();
144
145
  const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
145
146
  items,
146
147
  enableSections
147
148
  ]);
149
+ useImperativeHandle(ref, ()=>({
150
+ renderedItems
151
+ }), [
152
+ renderedItems
153
+ ]);
148
154
  const rowProps = useMemo(()=>({
149
155
  renderedItems,
150
156
  activeIndex,
@@ -194,9 +200,9 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
194
200
  ]
195
201
  });
196
202
  return /*#__PURE__*/ jsx(StyledList, {
197
- listRef: listRef,
198
203
  id: "toolbox-listbox",
199
204
  role: "listbox",
205
+ listRef: listRef,
200
206
  rowProps: rowProps,
201
207
  rowComponent: ListViewRow,
202
208
  rowCount: renderedItems.length,
@@ -204,4 +210,5 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
204
210
  overscanCount: 20
205
211
  });
206
212
  });
213
+ const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
207
214
  export { ListView_ListView as ListView, buildRenderedItems };
package/dist/canvas/components/Toolbox/ListView.styles.cjs CHANGED
@@ -74,7 +74,7 @@ const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
74
74
  }
75
75
 
76
76
  &.active {
77
- outline: 1px solid var(--uix-canvas-border);
77
+ outline: 1px solid var(--uix-canvas-primary);
78
78
  outline-offset: -1px;
79
79
  }
80
80
  `;
package/dist/canvas/components/Toolbox/ListView.styles.js CHANGED
@@ -33,7 +33,7 @@ const ListItemButton = styled(motion.button)`
33
33
  }
34
34
 
35
35
  &.active {
36
- outline: 1px solid var(--uix-canvas-border);
36
+ outline: 1px solid var(--uix-canvas-primary);
37
37
  outline-offset: -1px;
38
38
  }
39
39
  `;
package/dist/canvas/components/Toolbox/SearchBox.cjs CHANGED
@@ -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-activedescendant": activeDescendantId,
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",
package/dist/canvas/components/Toolbox/SearchBox.js CHANGED
@@ -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-activedescendant": activeDescendantId,
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",
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,34 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
257
249
  ]);
258
250
  const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
259
251
  if (activeIndex < 0) return;
260
- const renderItem = renderedItems[activeIndex];
252
+ const renderItem = listViewRef.current?.renderedItems[activeIndex];
261
253
  if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
262
254
  }, [
263
- activeIndex,
264
- renderedItems
255
+ activeIndex
265
256
  ]);
266
257
  const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
267
258
  if (isTransitioning) return;
259
+ const renderedItems = listViewRef.current?.renderedItems ?? [];
260
+ const navigateDown = ()=>{
261
+ if (-1 === activeIndex) {
262
+ const firstIndex = getFirstSelectableIndex(renderedItems);
263
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
264
+ } else {
265
+ const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
266
+ if (-1 !== nextIndex) navigateToIndex(nextIndex);
267
+ }
268
+ };
269
+ const navigateUp = ()=>{
270
+ activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
271
+ };
268
272
  switch(e.key){
269
273
  case 'ArrowDown':
270
274
  e.preventDefault();
271
- if (-1 === activeIndex) {
272
- const firstIndex = getFirstSelectableIndex();
273
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
274
- } else {
275
- const nextIndex = getNextSelectableIndex(activeIndex, 1);
276
- if (-1 !== nextIndex) navigateToIndex(nextIndex);
277
- }
275
+ navigateDown();
278
276
  break;
279
277
  case 'ArrowUp':
280
278
  e.preventDefault();
281
- activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
279
+ navigateUp();
282
280
  break;
283
281
  case 'Enter':
284
282
  if (activeIndex >= 0) {
@@ -304,17 +302,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
304
302
  handleBackTransition();
305
303
  }
306
304
  break;
305
+ case 'Tab':
306
+ e.preventDefault();
307
+ if (e.shiftKey) navigateUp();
308
+ else navigateDown();
309
+ break;
307
310
  case 'Home':
308
311
  {
312
+ if (-1 === activeIndex) break;
309
313
  e.preventDefault();
310
- const firstIndex = getFirstSelectableIndex();
314
+ const firstIndex = getFirstSelectableIndex(renderedItems);
311
315
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
312
316
  break;
313
317
  }
314
318
  case 'End':
315
319
  {
320
+ if (-1 === activeIndex) break;
316
321
  e.preventDefault();
317
- const lastIndex = getLastSelectableIndex();
322
+ const lastIndex = getLastSelectableIndex(renderedItems);
318
323
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
319
324
  break;
320
325
  }
@@ -322,14 +327,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
322
327
  }, [
323
328
  isTransitioning,
324
329
  activeIndex,
325
- renderedItems,
326
330
  navigationStack.canGoBack,
327
331
  navigateToIndex,
328
332
  handleItemSelect,
329
- handleBackTransition,
330
- getNextSelectableIndex,
331
- getFirstSelectableIndex,
332
- getLastSelectableIndex
333
+ handleBackTransition
333
334
  ]);
334
335
  (0, external_react_namespaceObject.useEffect)(()=>{
335
336
  const handleKeyDown = (e)=>{
@@ -386,14 +387,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
386
387
  entering: isTransitioning,
387
388
  direction: animationDirection,
388
389
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
390
+ ref: listViewRef,
389
391
  isLoading: childrenLoading || searchLoading || loading,
390
392
  items: displayedItems,
391
393
  activeIndex: activeIndex,
392
394
  listRef: listRef,
393
395
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
394
- enableSections: !isSearching,
395
396
  onItemClick: handleItemSelect,
396
- onItemHover: onItemHover
397
+ onItemHover: onItemHover,
398
+ enableSections: !isSearching
397
399
  })
398
400
  })
399
401
  })
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,2CA2ZjB"}
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,2CAqZjB"}
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,34 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
229
221
  ]);
230
222
  const activeDescendantId = useMemo(()=>{
231
223
  if (activeIndex < 0) return;
232
- const renderItem = renderedItems[activeIndex];
224
+ const renderItem = listViewRef.current?.renderedItems[activeIndex];
233
225
  if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
234
226
  }, [
235
- activeIndex,
236
- renderedItems
227
+ activeIndex
237
228
  ]);
238
229
  const handleNavigationKeyDown = useCallback((e)=>{
239
230
  if (isTransitioning) return;
231
+ const renderedItems = listViewRef.current?.renderedItems ?? [];
232
+ const navigateDown = ()=>{
233
+ if (-1 === activeIndex) {
234
+ const firstIndex = getFirstSelectableIndex(renderedItems);
235
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
236
+ } else {
237
+ const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
238
+ if (-1 !== nextIndex) navigateToIndex(nextIndex);
239
+ }
240
+ };
241
+ const navigateUp = ()=>{
242
+ activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
243
+ };
240
244
  switch(e.key){
241
245
  case 'ArrowDown':
242
246
  e.preventDefault();
243
- if (-1 === activeIndex) {
244
- const firstIndex = getFirstSelectableIndex();
245
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
246
- } else {
247
- const nextIndex = getNextSelectableIndex(activeIndex, 1);
248
- if (-1 !== nextIndex) navigateToIndex(nextIndex);
249
- }
247
+ navigateDown();
250
248
  break;
251
249
  case 'ArrowUp':
252
250
  e.preventDefault();
253
- activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
251
+ navigateUp();
254
252
  break;
255
253
  case 'Enter':
256
254
  if (activeIndex >= 0) {
@@ -276,17 +274,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
276
274
  handleBackTransition();
277
275
  }
278
276
  break;
277
+ case 'Tab':
278
+ e.preventDefault();
279
+ if (e.shiftKey) navigateUp();
280
+ else navigateDown();
281
+ break;
279
282
  case 'Home':
280
283
  {
284
+ if (-1 === activeIndex) break;
281
285
  e.preventDefault();
282
- const firstIndex = getFirstSelectableIndex();
286
+ const firstIndex = getFirstSelectableIndex(renderedItems);
283
287
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
284
288
  break;
285
289
  }
286
290
  case 'End':
287
291
  {
292
+ if (-1 === activeIndex) break;
288
293
  e.preventDefault();
289
- const lastIndex = getLastSelectableIndex();
294
+ const lastIndex = getLastSelectableIndex(renderedItems);
290
295
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
291
296
  break;
292
297
  }
@@ -294,14 +299,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
294
299
  }, [
295
300
  isTransitioning,
296
301
  activeIndex,
297
- renderedItems,
298
302
  navigationStack.canGoBack,
299
303
  navigateToIndex,
300
304
  handleItemSelect,
301
- handleBackTransition,
302
- getNextSelectableIndex,
303
- getFirstSelectableIndex,
304
- getLastSelectableIndex
305
+ handleBackTransition
305
306
  ]);
306
307
  useEffect(()=>{
307
308
  const handleKeyDown = (e)=>{
@@ -358,14 +359,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
358
359
  entering: isTransitioning,
359
360
  direction: animationDirection,
360
361
  children: /*#__PURE__*/ jsx(ListView, {
362
+ ref: listViewRef,
361
363
  isLoading: childrenLoading || searchLoading || loading,
362
364
  items: displayedItems,
363
365
  activeIndex: activeIndex,
364
366
  listRef: listRef,
365
367
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
366
- enableSections: !isSearching,
367
368
  onItemClick: handleItemSelect,
368
- onItemHover: onItemHover
369
+ onItemHover: onItemHover,
370
+ enableSections: !isSearching
369
371
  })
370
372
  })
371
373
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.54.0-pr354.c2317cc",
3
+ "version": "3.54.0-pr354.f799733",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",