@uipath/apollo-react 3.54.0-pr354.1b1c99f → 3.54.0-pr354.32975d0

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.
@@ -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,6 +229,8 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
223
229
  ]
224
230
  });
225
231
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
232
+ id: "toolbox-listbox",
233
+ role: "listbox",
226
234
  listRef: listRef,
227
235
  rowProps: rowProps,
228
236
  rowComponent: ListViewRow,
@@ -231,6 +239,7 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
231
239
  overscanCount: 20
232
240
  });
233
241
  });
242
+ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
234
243
  exports.ListView = __webpack_exports__.ListView;
235
244
  exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
236
245
  for(var __rspack_i in __webpack_exports__)if (-1 === [
@@ -31,6 +31,9 @@ export interface ListViewRowProps<T extends ListItem> {
31
31
  onItemClick: (item: T) => void;
32
32
  onItemHover?: (item: T) => void;
33
33
  }
34
+ export interface ListViewHandle<T extends ListItem = ListItem> {
35
+ renderedItems: RenderItem<T>[];
36
+ }
34
37
  interface ListViewProps<T extends ListItem> {
35
38
  items: T[];
36
39
  activeIndex?: number;
@@ -42,6 +45,8 @@ interface ListViewProps<T extends ListItem> {
42
45
  isLoading?: boolean;
43
46
  enableSections?: boolean;
44
47
  }
45
- export declare const ListView: 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
@@ -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;AAgHD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAsED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
@@ -4,7 +4,7 @@ import { Column } from "../../layouts/index.js";
4
4
  import { NodeIcon, partition } from "../../utils/index.js";
5
5
  import { ApSkeleton, ApTypography } from "../../../material/index.js";
6
6
  import { ApIcon, ApTooltip } from "../../../material/components/index.js";
7
- import { memo, useCallback, useMemo } from "react";
7
+ import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
8
8
  import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
9
9
  import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
10
10
  function buildRenderedItems(items, enableSections) {
@@ -78,6 +78,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
78
78
  const isActive = index === activeIndex;
79
79
  return /*#__PURE__*/ jsxs(ListItemButton, {
80
80
  ...ariaAttributes,
81
+ tabIndex: -1,
81
82
  id: `toolbox-item-${item.id}`,
82
83
  role: "option",
83
84
  "aria-selected": isActive,
@@ -139,12 +140,17 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
139
140
  ]
140
141
  });
141
142
  });
142
- const 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,6 +200,8 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
194
200
  ]
195
201
  });
196
202
  return /*#__PURE__*/ jsx(StyledList, {
203
+ id: "toolbox-listbox",
204
+ role: "listbox",
197
205
  listRef: listRef,
198
206
  rowProps: rowProps,
199
207
  rowComponent: ListViewRow,
@@ -202,4 +210,5 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
202
210
  overscanCount: 20
203
211
  });
204
212
  });
213
+ const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
205
214
  export { ListView_ListView as ListView, buildRenderedItems };
@@ -31,7 +31,7 @@ const index_cjs_namespaceObject = require("../../utils/index.cjs");
31
31
  const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
32
32
  const external_react_namespaceObject = require("react");
33
33
  const external_SearchBox_styles_cjs_namespaceObject = require("./SearchBox.styles.cjs");
34
- const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
34
+ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
35
35
  const internalRef = (0, external_react_namespaceObject.useRef)(null);
36
36
  const inputRef = externalInputRef ?? internalRef;
37
37
  (0, external_react_namespaceObject.useEffect)(()=>{
@@ -59,11 +59,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
59
59
  ref: inputRef,
60
60
  autoComplete: "off",
61
61
  type: "text",
62
+ role: "combobox",
63
+ "aria-controls": "toolbox-listbox",
64
+ "aria-expanded": true,
62
65
  className: "searchbox-input",
63
66
  placeholder: placeholder,
64
67
  value: value,
65
68
  onChange: (e)=>onChange(e.target.value),
66
- onKeyDown: onNavigationKeyDown
69
+ onKeyDown: onNavigationKeyDown,
70
+ "aria-activedescendant": activeDescendantId
67
71
  }),
68
72
  value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
69
73
  type: "button",
@@ -5,6 +5,7 @@ interface SearchBoxProps {
5
5
  placeholder?: string;
6
6
  inputRef?: React.RefObject<HTMLInputElement | null>;
7
7
  onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
8
+ activeDescendantId?: string;
8
9
  }
9
10
  export declare const SearchBox: import("react").NamedExoticComponent<SearchBoxProps>;
10
11
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;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"}
@@ -3,7 +3,7 @@ import { cx } from "../../utils/index.js";
3
3
  import { ApIcon } from "../../../material/components/index.js";
4
4
  import { memo, useEffect, useRef } from "react";
5
5
  import { StyledSearchForm } from "./SearchBox.styles.js";
6
- const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
6
+ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
7
7
  const internalRef = useRef(null);
8
8
  const inputRef = externalInputRef ?? internalRef;
9
9
  useEffect(()=>{
@@ -31,11 +31,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
31
31
  ref: inputRef,
32
32
  autoComplete: "off",
33
33
  type: "text",
34
+ role: "combobox",
35
+ "aria-controls": "toolbox-listbox",
36
+ "aria-expanded": true,
34
37
  className: "searchbox-input",
35
38
  placeholder: placeholder,
36
39
  value: value,
37
40
  onChange: (e)=>onChange(e.target.value),
38
- onKeyDown: onNavigationKeyDown
41
+ onKeyDown: onNavigationKeyDown,
42
+ "aria-activedescendant": activeDescendantId
39
43
  }),
40
44
  value && /*#__PURE__*/ jsx("button", {
41
45
  type: "button",
@@ -53,6 +53,22 @@ function findItemById(items, id) {
53
53
  }
54
54
  return null;
55
55
  }
56
+ function getNextSelectableIndex(renderedItems, currentIndex, direction) {
57
+ let next = currentIndex + direction;
58
+ while(next >= 0 && next < renderedItems.length){
59
+ if (renderedItems[next]?.type === 'item') return next;
60
+ next += direction;
61
+ }
62
+ return -1;
63
+ }
64
+ function getFirstSelectableIndex(renderedItems) {
65
+ for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
66
+ return -1;
67
+ }
68
+ function getLastSelectableIndex(renderedItems) {
69
+ for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
70
+ return -1;
71
+ }
56
72
  function searchLeafItems(items, query) {
57
73
  const results = [];
58
74
  for (const item of items)if ('function' != typeof item.children) {
@@ -78,6 +94,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
78
94
  const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
79
95
  const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
80
96
  const listRef = (0, external_react_window_namespaceObject.useListRef)(null);
97
+ const listViewRef = (0, external_react_namespaceObject.useRef)(null);
81
98
  const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
82
99
  const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
83
100
  search
@@ -88,32 +105,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
88
105
  searchedItems,
89
106
  items
90
107
  ]);
91
- const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>(0, external_ListView_cjs_namespaceObject.buildRenderedItems)(displayedItems, !isSearching), [
92
- displayedItems,
93
- isSearching
94
- ]);
95
- const getNextSelectableIndex = (0, external_react_namespaceObject.useCallback)((currentIndex, direction)=>{
96
- let next = currentIndex + direction;
97
- while(next >= 0 && next < renderedItems.length){
98
- if (renderedItems[next]?.type === 'item') return next;
99
- next += direction;
100
- }
101
- return -1;
102
- }, [
103
- renderedItems
104
- ]);
105
- const getFirstSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
106
- for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
107
- return -1;
108
- }, [
109
- renderedItems
110
- ]);
111
- const getLastSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
112
- for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
113
- return -1;
114
- }, [
115
- renderedItems
116
- ]);
117
108
  const startTransition = (0, external_react_namespaceObject.useCallback)((direction)=>{
118
109
  if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
119
110
  setIsTransitioning(true);
@@ -124,7 +115,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
124
115
  }, []);
125
116
  const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
126
117
  setActiveIndex(index);
127
- if (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,29 +249,40 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
257
249
  ]);
258
250
  const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
259
251
  if (activeIndex < 0) return;
260
- const renderItem = renderedItems[activeIndex];
252
+ const renderItem = listViewRef.current?.renderedItems[activeIndex];
261
253
  if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
262
254
  }, [
263
- activeIndex,
264
- renderedItems
255
+ activeIndex
265
256
  ]);
266
257
  const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
267
258
  if (isTransitioning) return;
259
+ const renderedItems = listViewRef.current?.renderedItems ?? [];
260
+ const navigateDown = ()=>{
261
+ if (-1 === activeIndex) {
262
+ const firstIndex = getFirstSelectableIndex(renderedItems);
263
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
264
+ } else {
265
+ const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
266
+ if (-1 !== nextIndex) navigateToIndex(nextIndex);
267
+ else {
268
+ const firstIndex = getFirstSelectableIndex(renderedItems);
269
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
270
+ }
271
+ }
272
+ };
273
+ const navigateUp = ()=>{
274
+ activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
275
+ };
268
276
  switch(e.key){
269
277
  case 'ArrowDown':
270
278
  e.preventDefault();
271
- 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
- }
279
+ navigateDown();
278
280
  break;
279
281
  case 'ArrowUp':
280
282
  e.preventDefault();
281
- activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
283
+ navigateUp();
282
284
  break;
285
+ case 'Space':
283
286
  case 'Enter':
284
287
  if (activeIndex >= 0) {
285
288
  const renderItem = renderedItems[activeIndex];
@@ -304,17 +307,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
304
307
  handleBackTransition();
305
308
  }
306
309
  break;
310
+ case 'Tab':
311
+ e.preventDefault();
312
+ if (e.shiftKey) navigateUp();
313
+ else navigateDown();
314
+ break;
307
315
  case 'Home':
308
316
  {
317
+ if (-1 === activeIndex) break;
309
318
  e.preventDefault();
310
- const firstIndex = getFirstSelectableIndex();
319
+ const firstIndex = getFirstSelectableIndex(renderedItems);
311
320
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
312
321
  break;
313
322
  }
314
323
  case 'End':
315
324
  {
325
+ if (-1 === activeIndex) break;
316
326
  e.preventDefault();
317
- const lastIndex = getLastSelectableIndex();
327
+ const lastIndex = getLastSelectableIndex(renderedItems);
318
328
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
319
329
  break;
320
330
  }
@@ -322,14 +332,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
322
332
  }, [
323
333
  isTransitioning,
324
334
  activeIndex,
325
- renderedItems,
326
335
  navigationStack.canGoBack,
327
336
  navigateToIndex,
328
337
  handleItemSelect,
329
- handleBackTransition,
330
- getNextSelectableIndex,
331
- getFirstSelectableIndex,
332
- getLastSelectableIndex
338
+ handleBackTransition
333
339
  ]);
334
340
  (0, external_react_namespaceObject.useEffect)(()=>{
335
341
  const handleKeyDown = (e)=>{
@@ -360,10 +366,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
360
366
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
361
367
  ref: containerRef,
362
368
  "data-testid": "toolbox-container",
363
- tabIndex: 0,
364
- role: "application",
365
- "aria-activedescendant": activeDescendantId,
366
- "aria-label": currentParentItem?.name || title,
367
369
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
368
370
  px: 20,
369
371
  py: 12,
@@ -382,21 +384,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
382
384
  clear: clearSearch,
383
385
  placeholder: "Search",
384
386
  inputRef: searchInputRef,
385
- onNavigationKeyDown: handleNavigationKeyDown
387
+ onNavigationKeyDown: handleNavigationKeyDown,
388
+ activeDescendantId: activeDescendantId
386
389
  }),
387
390
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
388
391
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
389
392
  entering: isTransitioning,
390
393
  direction: animationDirection,
391
394
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
395
+ ref: listViewRef,
392
396
  isLoading: childrenLoading || searchLoading || loading,
393
397
  items: displayedItems,
394
398
  activeIndex: activeIndex,
395
399
  listRef: listRef,
396
400
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
397
- enableSections: !isSearching,
398
401
  onItemClick: handleItemSelect,
399
- onItemHover: onItemHover
402
+ onItemHover: onItemHover,
403
+ enableSections: !isSearching
400
404
  })
401
405
  })
402
406
  })
@@ -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,2CA2ZjB"}
@@ -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,29 +221,40 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
229
221
  ]);
230
222
  const activeDescendantId = useMemo(()=>{
231
223
  if (activeIndex < 0) return;
232
- const renderItem = renderedItems[activeIndex];
224
+ const renderItem = listViewRef.current?.renderedItems[activeIndex];
233
225
  if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
234
226
  }, [
235
- activeIndex,
236
- renderedItems
227
+ activeIndex
237
228
  ]);
238
229
  const handleNavigationKeyDown = useCallback((e)=>{
239
230
  if (isTransitioning) return;
231
+ const renderedItems = listViewRef.current?.renderedItems ?? [];
232
+ const navigateDown = ()=>{
233
+ if (-1 === activeIndex) {
234
+ const firstIndex = getFirstSelectableIndex(renderedItems);
235
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
236
+ } else {
237
+ const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 1);
238
+ if (-1 !== nextIndex) navigateToIndex(nextIndex);
239
+ else {
240
+ const firstIndex = getFirstSelectableIndex(renderedItems);
241
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
242
+ }
243
+ }
244
+ };
245
+ const navigateUp = ()=>{
246
+ activeIndex <= 0 || -1 === getNextSelectableIndex(renderedItems, activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, -1));
247
+ };
240
248
  switch(e.key){
241
249
  case 'ArrowDown':
242
250
  e.preventDefault();
243
- 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
- }
251
+ navigateDown();
250
252
  break;
251
253
  case 'ArrowUp':
252
254
  e.preventDefault();
253
- activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
255
+ navigateUp();
254
256
  break;
257
+ case 'Space':
255
258
  case 'Enter':
256
259
  if (activeIndex >= 0) {
257
260
  const renderItem = renderedItems[activeIndex];
@@ -276,17 +279,24 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
276
279
  handleBackTransition();
277
280
  }
278
281
  break;
282
+ case 'Tab':
283
+ e.preventDefault();
284
+ if (e.shiftKey) navigateUp();
285
+ else navigateDown();
286
+ break;
279
287
  case 'Home':
280
288
  {
289
+ if (-1 === activeIndex) break;
281
290
  e.preventDefault();
282
- const firstIndex = getFirstSelectableIndex();
291
+ const firstIndex = getFirstSelectableIndex(renderedItems);
283
292
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
284
293
  break;
285
294
  }
286
295
  case 'End':
287
296
  {
297
+ if (-1 === activeIndex) break;
288
298
  e.preventDefault();
289
- const lastIndex = getLastSelectableIndex();
299
+ const lastIndex = getLastSelectableIndex(renderedItems);
290
300
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
291
301
  break;
292
302
  }
@@ -294,14 +304,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
294
304
  }, [
295
305
  isTransitioning,
296
306
  activeIndex,
297
- renderedItems,
298
307
  navigationStack.canGoBack,
299
308
  navigateToIndex,
300
309
  handleItemSelect,
301
- handleBackTransition,
302
- getNextSelectableIndex,
303
- getFirstSelectableIndex,
304
- getLastSelectableIndex
310
+ handleBackTransition
305
311
  ]);
306
312
  useEffect(()=>{
307
313
  const handleKeyDown = (e)=>{
@@ -332,10 +338,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
332
338
  return /*#__PURE__*/ jsx("div", {
333
339
  ref: containerRef,
334
340
  "data-testid": "toolbox-container",
335
- tabIndex: 0,
336
- role: "application",
337
- "aria-activedescendant": activeDescendantId,
338
- "aria-label": currentParentItem?.name || title,
339
341
  children: /*#__PURE__*/ jsxs(Column, {
340
342
  px: 20,
341
343
  py: 12,
@@ -354,21 +356,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
354
356
  clear: clearSearch,
355
357
  placeholder: "Search",
356
358
  inputRef: searchInputRef,
357
- onNavigationKeyDown: handleNavigationKeyDown
359
+ onNavigationKeyDown: handleNavigationKeyDown,
360
+ activeDescendantId: activeDescendantId
358
361
  }),
359
362
  /*#__PURE__*/ jsx(AnimatedContainer, {
360
363
  children: /*#__PURE__*/ jsx(AnimatedContent, {
361
364
  entering: isTransitioning,
362
365
  direction: animationDirection,
363
366
  children: /*#__PURE__*/ jsx(ListView, {
367
+ ref: listViewRef,
364
368
  isLoading: childrenLoading || searchLoading || loading,
365
369
  items: displayedItems,
366
370
  activeIndex: activeIndex,
367
371
  listRef: listRef,
368
372
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
369
- enableSections: !isSearching,
370
373
  onItemClick: handleItemSelect,
371
- onItemHover: onItemHover
374
+ onItemHover: onItemHover,
375
+ enableSections: !isSearching
372
376
  })
373
377
  })
374
378
  })
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.32975d0",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",