@uipath/apollo-react 3.54.0-pr354.029fc6a → 3.54.0-pr354.0df89c3

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 (14) hide show
  1. package/dist/canvas/components/AddNodePanel/AddNodePanel.cjs +1 -1
  2. package/dist/canvas/components/AddNodePanel/AddNodePanel.js +1 -1
  3. package/dist/canvas/components/Toolbox/ListView.cjs +10 -1
  4. package/dist/canvas/components/Toolbox/ListView.d.ts +6 -1
  5. package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
  6. package/dist/canvas/components/Toolbox/ListView.js +11 -2
  7. package/dist/canvas/components/Toolbox/SearchBox.cjs +6 -2
  8. package/dist/canvas/components/Toolbox/SearchBox.d.ts +1 -0
  9. package/dist/canvas/components/Toolbox/SearchBox.d.ts.map +1 -1
  10. package/dist/canvas/components/Toolbox/SearchBox.js +6 -2
  11. package/dist/canvas/components/Toolbox/Toolbox.cjs +55 -57
  12. package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
  13. package/dist/canvas/components/Toolbox/Toolbox.js +56 -58
  14. package/package.json +1 -1
package/dist/canvas/components/AddNodePanel/AddNodePanel.cjs CHANGED
@@ -81,7 +81,7 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObje
81
81
  ]);
82
82
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_focus_lock_default(), {
83
83
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
84
- title: title ?? 'Add Node',
84
+ title: title ?? 'Add node',
85
85
  initialItems: nodeListOptions,
86
86
  loading: loading,
87
87
  onItemSelect: handleNodeListItemSelect,
package/dist/canvas/components/AddNodePanel/AddNodePanel.js CHANGED
@@ -43,7 +43,7 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, on
43
43
  ]);
44
44
  return /*#__PURE__*/ jsx(react_focus_lock, {
45
45
  children: /*#__PURE__*/ jsx(Toolbox, {
46
- title: title ?? 'Add Node',
46
+ title: title ?? 'Add node',
47
47
  initialItems: nodeListOptions,
48
48
  loading: loading,
49
49
  onItemSelect: handleNodeListItemSelect,
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,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 === [
package/dist/canvas/components/Toolbox/ListView.d.ts CHANGED
@@ -31,6 +31,9 @@ export interface ListViewRowProps<T extends ListItem> {
31
31
  onItemClick: (item: T) => void;
32
32
  onItemHover?: (item: T) => void;
33
33
  }
34
+ export interface ListViewHandle<T extends ListItem = ListItem> {
35
+ renderedItems: RenderItem<T>[];
36
+ }
34
37
  interface ListViewProps<T extends ListItem> {
35
38
  items: T[];
36
39
  activeIndex?: number;
@@ -42,6 +45,8 @@ interface ListViewProps<T extends ListItem> {
42
45
  isLoading?: boolean;
43
46
  enableSections?: boolean;
44
47
  }
45
- export declare const ListView: import("react").MemoExoticComponent<(<T extends ListItem>({ items, activeIndex, listRef, onItemClick, onItemHover, emptyStateMessage, emptyStateIcon, isLoading, enableSections, }: ListViewProps<T>) => import("react/jsx-runtime").JSX.Element)>;
48
+ export declare const ListView: <T extends ListItem>(props: ListViewProps<T> & {
49
+ ref?: React.Ref<ListViewHandle<T>>;
50
+ }) => React.ReactElement | null;
46
51
  export {};
47
52
  //# sourceMappingURL=ListView.d.ts.map
package/dist/canvas/components/Toolbox/ListView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAIzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA+GD,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,wCAA0B,CAAC,SAAS,QAAQ,4HAU9D,aAAa,CAAC,CAAC,CAAC,8CAiDjB,CAAC"}
1
+ {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAIzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;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,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 };
package/dist/canvas/components/Toolbox/SearchBox.cjs CHANGED
@@ -31,7 +31,7 @@ const index_cjs_namespaceObject = require("../../utils/index.cjs");
31
31
  const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
32
32
  const external_react_namespaceObject = require("react");
33
33
  const external_SearchBox_styles_cjs_namespaceObject = require("./SearchBox.styles.cjs");
34
- const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
34
+ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
35
35
  const internalRef = (0, external_react_namespaceObject.useRef)(null);
36
36
  const inputRef = externalInputRef ?? internalRef;
37
37
  (0, external_react_namespaceObject.useEffect)(()=>{
@@ -59,11 +59,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
59
59
  ref: inputRef,
60
60
  autoComplete: "off",
61
61
  type: "text",
62
+ role: "combobox",
63
+ "aria-controls": "toolbox-listbox",
64
+ "aria-expanded": true,
62
65
  className: "searchbox-input",
63
66
  placeholder: placeholder,
64
67
  value: value,
65
68
  onChange: (e)=>onChange(e.target.value),
66
- onKeyDown: onNavigationKeyDown
69
+ onKeyDown: onNavigationKeyDown,
70
+ "aria-activedescendant": activeDescendantId
67
71
  }),
68
72
  value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
69
73
  type: "button",
package/dist/canvas/components/Toolbox/SearchBox.d.ts CHANGED
@@ -5,6 +5,7 @@ interface SearchBoxProps {
5
5
  placeholder?: string;
6
6
  inputRef?: React.RefObject<HTMLInputElement | null>;
7
7
  onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
8
+ activeDescendantId?: string;
8
9
  }
9
10
  export declare const SearchBox: import("react").NamedExoticComponent<SearchBoxProps>;
10
11
  export {};
package/dist/canvas/components/Toolbox/SearchBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,SAAS,sDA2CpB,CAAC"}
1
+ {"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,sDAgDpB,CAAC"}
package/dist/canvas/components/Toolbox/SearchBox.js CHANGED
@@ -3,7 +3,7 @@ import { cx } from "../../utils/index.js";
3
3
  import { ApIcon } from "../../../material/components/index.js";
4
4
  import { memo, useEffect, useRef } from "react";
5
5
  import { StyledSearchForm } from "./SearchBox.styles.js";
6
- const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
6
+ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
7
7
  const internalRef = useRef(null);
8
8
  const inputRef = externalInputRef ?? internalRef;
9
9
  useEffect(()=>{
@@ -31,11 +31,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
31
31
  ref: inputRef,
32
32
  autoComplete: "off",
33
33
  type: "text",
34
+ role: "combobox",
35
+ "aria-controls": "toolbox-listbox",
36
+ "aria-expanded": true,
34
37
  className: "searchbox-input",
35
38
  placeholder: placeholder,
36
39
  value: value,
37
40
  onChange: (e)=>onChange(e.target.value),
38
- onKeyDown: onNavigationKeyDown
41
+ onKeyDown: onNavigationKeyDown,
42
+ "aria-activedescendant": activeDescendantId
39
43
  }),
40
44
  value && /*#__PURE__*/ jsx("button", {
41
45
  type: "button",
package/dist/canvas/components/Toolbox/Toolbox.cjs CHANGED
@@ -53,6 +53,22 @@ function findItemById(items, id) {
53
53
  }
54
54
  return null;
55
55
  }
56
+ function getNextSelectableIndex(renderedItems, currentIndex, direction) {
57
+ let next = currentIndex + direction;
58
+ while(next >= 0 && next < renderedItems.length){
59
+ if (renderedItems[next]?.type === 'item') return next;
60
+ next += direction;
61
+ }
62
+ return -1;
63
+ }
64
+ function getFirstSelectableIndex(renderedItems) {
65
+ for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
66
+ return -1;
67
+ }
68
+ function getLastSelectableIndex(renderedItems) {
69
+ for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
70
+ return -1;
71
+ }
56
72
  function searchLeafItems(items, query) {
57
73
  const results = [];
58
74
  for (const item of items)if ('function' != typeof item.children) {
@@ -78,6 +94,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
78
94
  const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
79
95
  const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
80
96
  const listRef = (0, external_react_window_namespaceObject.useListRef)(null);
97
+ const listViewRef = (0, external_react_namespaceObject.useRef)(null);
81
98
  const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
82
99
  const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
83
100
  search
@@ -88,32 +105,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
88
105
  searchedItems,
89
106
  items
90
107
  ]);
91
- const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>(0, external_ListView_cjs_namespaceObject.buildRenderedItems)(displayedItems, !isSearching), [
92
- displayedItems,
93
- isSearching
94
- ]);
95
- const getNextSelectableIndex = (0, external_react_namespaceObject.useCallback)((currentIndex, direction)=>{
96
- let next = currentIndex + direction;
97
- while(next >= 0 && next < renderedItems.length){
98
- if (renderedItems[next]?.type === 'item') return next;
99
- next += direction;
100
- }
101
- return -1;
102
- }, [
103
- renderedItems
104
- ]);
105
- const getFirstSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
106
- for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
107
- return -1;
108
- }, [
109
- renderedItems
110
- ]);
111
- const getLastSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
112
- for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
113
- return -1;
114
- }, [
115
- renderedItems
116
- ]);
117
108
  const startTransition = (0, external_react_namespaceObject.useCallback)((direction)=>{
118
109
  if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
119
110
  setIsTransitioning(true);
@@ -124,7 +115,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
124
115
  }, []);
125
116
  const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
126
117
  setActiveIndex(index);
127
- if (index >= 0) listRef.current?.scrollToRow({
118
+ if (-1 === index) return void searchInputRef.current?.focus();
119
+ listRef.current?.scrollToRow({
128
120
  index,
129
121
  align: 'auto'
130
122
  });
@@ -257,31 +249,38 @@ 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;
268
- const input = searchInputRef.current;
269
- const cursorAtStart = input ? 0 === input.selectionStart && 0 === input.selectionEnd : true;
270
- const cursorAtEnd = input ? input.selectionStart === input.value.length && input.selectionEnd === input.value.length : true;
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
+ };
271
276
  switch(e.key){
272
277
  case 'ArrowDown':
273
278
  e.preventDefault();
274
- if (-1 === activeIndex) {
275
- const firstIndex = getFirstSelectableIndex();
276
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
277
- } else {
278
- const nextIndex = getNextSelectableIndex(activeIndex, 1);
279
- if (-1 !== nextIndex) navigateToIndex(nextIndex);
280
- }
279
+ navigateDown();
281
280
  break;
282
281
  case 'ArrowUp':
283
282
  e.preventDefault();
284
- activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
283
+ navigateUp();
285
284
  break;
286
285
  case 'Enter':
287
286
  if (activeIndex >= 0) {
@@ -293,7 +292,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
293
292
  }
294
293
  break;
295
294
  case 'ArrowRight':
296
- if (!cursorAtEnd) break;
297
295
  if (activeIndex >= 0) {
298
296
  const renderItem = renderedItems[activeIndex];
299
297
  if (renderItem?.type === 'item' && renderItem.item.children) {
@@ -303,23 +301,29 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
303
301
  }
304
302
  break;
305
303
  case 'ArrowLeft':
306
- if (!cursorAtStart) break;
307
304
  if (activeIndex >= 0 && navigationStack.canGoBack) {
308
305
  e.preventDefault();
309
306
  handleBackTransition();
310
307
  }
311
308
  break;
309
+ case 'Tab':
310
+ e.preventDefault();
311
+ if (e.shiftKey) navigateUp();
312
+ else navigateDown();
313
+ break;
312
314
  case 'Home':
313
315
  {
316
+ if (-1 === activeIndex) break;
314
317
  e.preventDefault();
315
- const firstIndex = getFirstSelectableIndex();
318
+ const firstIndex = getFirstSelectableIndex(renderedItems);
316
319
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
317
320
  break;
318
321
  }
319
322
  case 'End':
320
323
  {
324
+ if (-1 === activeIndex) break;
321
325
  e.preventDefault();
322
- const lastIndex = getLastSelectableIndex();
326
+ const lastIndex = getLastSelectableIndex(renderedItems);
323
327
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
324
328
  break;
325
329
  }
@@ -327,14 +331,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
327
331
  }, [
328
332
  isTransitioning,
329
333
  activeIndex,
330
- renderedItems,
331
334
  navigationStack.canGoBack,
332
335
  navigateToIndex,
333
336
  handleItemSelect,
334
- handleBackTransition,
335
- getNextSelectableIndex,
336
- getFirstSelectableIndex,
337
- getLastSelectableIndex
337
+ handleBackTransition
338
338
  ]);
339
339
  (0, external_react_namespaceObject.useEffect)(()=>{
340
340
  const handleKeyDown = (e)=>{
@@ -365,10 +365,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
365
365
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
366
366
  ref: containerRef,
367
367
  "data-testid": "toolbox-container",
368
- tabIndex: 0,
369
- role: "application",
370
- "aria-activedescendant": activeDescendantId,
371
- "aria-label": currentParentItem?.name || title,
372
368
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
373
369
  px: 20,
374
370
  py: 12,
@@ -387,21 +383,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
387
383
  clear: clearSearch,
388
384
  placeholder: "Search",
389
385
  inputRef: searchInputRef,
390
- onNavigationKeyDown: handleNavigationKeyDown
386
+ onNavigationKeyDown: handleNavigationKeyDown,
387
+ activeDescendantId: activeDescendantId
391
388
  }),
392
389
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
393
390
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
394
391
  entering: isTransitioning,
395
392
  direction: animationDirection,
396
393
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
394
+ ref: listViewRef,
397
395
  isLoading: childrenLoading || searchLoading || loading,
398
396
  items: displayedItems,
399
397
  activeIndex: activeIndex,
400
398
  listRef: listRef,
401
399
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
402
- enableSections: !isSearching,
403
400
  onItemClick: handleItemSelect,
404
- onItemHover: onItemHover
401
+ onItemHover: onItemHover,
402
+ enableSections: !isSearching
405
403
  })
406
404
  })
407
405
  })
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,2CA2ajB"}
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,2CA0ZjB"}
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,31 +221,38 @@ 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;
240
- const input = searchInputRef.current;
241
- const cursorAtStart = input ? 0 === input.selectionStart && 0 === input.selectionEnd : true;
242
- const cursorAtEnd = input ? input.selectionStart === input.value.length && input.selectionEnd === input.value.length : true;
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
+ };
243
248
  switch(e.key){
244
249
  case 'ArrowDown':
245
250
  e.preventDefault();
246
- if (-1 === activeIndex) {
247
- const firstIndex = getFirstSelectableIndex();
248
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
249
- } else {
250
- const nextIndex = getNextSelectableIndex(activeIndex, 1);
251
- if (-1 !== nextIndex) navigateToIndex(nextIndex);
252
- }
251
+ navigateDown();
253
252
  break;
254
253
  case 'ArrowUp':
255
254
  e.preventDefault();
256
- activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
255
+ navigateUp();
257
256
  break;
258
257
  case 'Enter':
259
258
  if (activeIndex >= 0) {
@@ -265,7 +264,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
265
264
  }
266
265
  break;
267
266
  case 'ArrowRight':
268
- if (!cursorAtEnd) break;
269
267
  if (activeIndex >= 0) {
270
268
  const renderItem = renderedItems[activeIndex];
271
269
  if (renderItem?.type === 'item' && renderItem.item.children) {
@@ -275,23 +273,29 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
275
273
  }
276
274
  break;
277
275
  case 'ArrowLeft':
278
- if (!cursorAtStart) break;
279
276
  if (activeIndex >= 0 && navigationStack.canGoBack) {
280
277
  e.preventDefault();
281
278
  handleBackTransition();
282
279
  }
283
280
  break;
281
+ case 'Tab':
282
+ e.preventDefault();
283
+ if (e.shiftKey) navigateUp();
284
+ else navigateDown();
285
+ break;
284
286
  case 'Home':
285
287
  {
288
+ if (-1 === activeIndex) break;
286
289
  e.preventDefault();
287
- const firstIndex = getFirstSelectableIndex();
290
+ const firstIndex = getFirstSelectableIndex(renderedItems);
288
291
  if (-1 !== firstIndex) navigateToIndex(firstIndex);
289
292
  break;
290
293
  }
291
294
  case 'End':
292
295
  {
296
+ if (-1 === activeIndex) break;
293
297
  e.preventDefault();
294
- const lastIndex = getLastSelectableIndex();
298
+ const lastIndex = getLastSelectableIndex(renderedItems);
295
299
  if (-1 !== lastIndex) navigateToIndex(lastIndex);
296
300
  break;
297
301
  }
@@ -299,14 +303,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
299
303
  }, [
300
304
  isTransitioning,
301
305
  activeIndex,
302
- renderedItems,
303
306
  navigationStack.canGoBack,
304
307
  navigateToIndex,
305
308
  handleItemSelect,
306
- handleBackTransition,
307
- getNextSelectableIndex,
308
- getFirstSelectableIndex,
309
- getLastSelectableIndex
309
+ handleBackTransition
310
310
  ]);
311
311
  useEffect(()=>{
312
312
  const handleKeyDown = (e)=>{
@@ -337,10 +337,6 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
337
337
  return /*#__PURE__*/ jsx("div", {
338
338
  ref: containerRef,
339
339
  "data-testid": "toolbox-container",
340
- tabIndex: 0,
341
- role: "application",
342
- "aria-activedescendant": activeDescendantId,
343
- "aria-label": currentParentItem?.name || title,
344
340
  children: /*#__PURE__*/ jsxs(Column, {
345
341
  px: 20,
346
342
  py: 12,
@@ -359,21 +355,23 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
359
355
  clear: clearSearch,
360
356
  placeholder: "Search",
361
357
  inputRef: searchInputRef,
362
- onNavigationKeyDown: handleNavigationKeyDown
358
+ onNavigationKeyDown: handleNavigationKeyDown,
359
+ activeDescendantId: activeDescendantId
363
360
  }),
364
361
  /*#__PURE__*/ jsx(AnimatedContainer, {
365
362
  children: /*#__PURE__*/ jsx(AnimatedContent, {
366
363
  entering: isTransitioning,
367
364
  direction: animationDirection,
368
365
  children: /*#__PURE__*/ jsx(ListView, {
366
+ ref: listViewRef,
369
367
  isLoading: childrenLoading || searchLoading || loading,
370
368
  items: displayedItems,
371
369
  activeIndex: activeIndex,
372
370
  listRef: listRef,
373
371
  emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
374
- enableSections: !isSearching,
375
372
  onItemClick: handleItemSelect,
376
- onItemHover: onItemHover
373
+ onItemHover: onItemHover,
374
+ enableSections: !isSearching
377
375
  })
378
376
  })
379
377
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.54.0-pr354.029fc6a",
3
+ "version": "3.54.0-pr354.0df89c3",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",