@uipath/apollo-react 3.54.0-pr354.9b2638b → 3.54.0-pr354.c2317cc

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 (11) hide show
  1. package/dist/canvas/components/Toolbox/ListView.cjs +5 -1
  2. package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
  3. package/dist/canvas/components/Toolbox/ListView.js +5 -1
  4. package/dist/canvas/components/Toolbox/SearchBox.cjs +6 -10
  5. package/dist/canvas/components/Toolbox/SearchBox.d.ts +2 -1
  6. package/dist/canvas/components/Toolbox/SearchBox.d.ts.map +1 -1
  7. package/dist/canvas/components/Toolbox/SearchBox.js +7 -11
  8. package/dist/canvas/components/Toolbox/Toolbox.cjs +81 -69
  9. package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
  10. package/dist/canvas/components/Toolbox/Toolbox.js +81 -69
  11. package/package.json +3 -3
package/dist/canvas/components/Toolbox/ListView.cjs CHANGED
@@ -107,11 +107,13 @@ 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
+ id: `toolbox-item-${item.id}`,
111
+ role: "option",
112
+ "aria-selected": isActive,
110
113
  style: buttonStyle,
111
114
  onClick: handleButtonClick,
112
115
  onHoverStart: handleButtonHover,
113
116
  className: `${isLoading ? 'loading' : ''} ${isActive ? 'active' : ''}`,
114
- "data-active": isActive || void 0,
115
117
  disabled: isLoading,
116
118
  children: [
117
119
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(IconContainerMemoized, {
@@ -222,6 +224,8 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
222
224
  });
223
225
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
224
226
  listRef: listRef,
227
+ id: "toolbox-listbox",
228
+ role: "listbox",
225
229
  rowProps: rowProps,
226
230
  rowComponent: ListViewRow,
227
231
  rowCount: renderedItems.length,
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,CAiCjB;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;AA6GD,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,wCAA0B,CAAC,SAAS,QAAQ,4HAU9D,aAAa,CAAC,CAAC,CAAC,8CAiDjB,CAAC"}
1
+ {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAIzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA+GD,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"}
package/dist/canvas/components/Toolbox/ListView.js CHANGED
@@ -78,11 +78,13 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
78
78
  const isActive = index === activeIndex;
79
79
  return /*#__PURE__*/ jsxs(ListItemButton, {
80
80
  ...ariaAttributes,
81
+ id: `toolbox-item-${item.id}`,
82
+ role: "option",
83
+ "aria-selected": isActive,
81
84
  style: buttonStyle,
82
85
  onClick: handleButtonClick,
83
86
  onHoverStart: handleButtonHover,
84
87
  className: `${isLoading ? 'loading' : ''} ${isActive ? 'active' : ''}`,
85
- "data-active": isActive || void 0,
86
88
  disabled: isLoading,
87
89
  children: [
88
90
  /*#__PURE__*/ jsxs(IconContainerMemoized, {
@@ -193,6 +195,8 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1,
193
195
  });
194
196
  return /*#__PURE__*/ jsx(StyledList, {
195
197
  listRef: listRef,
198
+ id: "toolbox-listbox",
199
+ role: "listbox",
196
200
  rowProps: rowProps,
197
201
  rowComponent: ListViewRow,
198
202
  rowCount: renderedItems.length,
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, onArrowDown }) {
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)(()=>{
@@ -39,14 +39,6 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
39
39
  }, [
40
40
  inputRef
41
41
  ]);
42
- const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
43
- if ('ArrowDown' === e.key) {
44
- e.preventDefault();
45
- onArrowDown?.();
46
- }
47
- }, [
48
- onArrowDown
49
- ]);
50
42
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_styles_cjs_namespaceObject.StyledSearchForm, {
51
43
  autoComplete: "off",
52
44
  className: "searchbox-form",
@@ -67,11 +59,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
67
59
  ref: inputRef,
68
60
  autoComplete: "off",
69
61
  type: "text",
62
+ role: "combobox",
63
+ "aria-expanded": true,
64
+ "aria-controls": "toolbox-listbox",
65
+ "aria-activedescendant": activeDescendantId,
70
66
  className: "searchbox-input",
71
67
  placeholder: placeholder,
72
68
  value: value,
73
69
  onChange: (e)=>onChange(e.target.value),
74
- onKeyDown: handleKeyDown
70
+ onKeyDown: onNavigationKeyDown
75
71
  }),
76
72
  value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
77
73
  type: "button",
package/dist/canvas/components/Toolbox/SearchBox.d.ts CHANGED
@@ -4,7 +4,8 @@ interface SearchBoxProps {
4
4
  clear: () => void;
5
5
  placeholder?: string;
6
6
  inputRef?: React.RefObject<HTMLInputElement | null>;
7
- onArrowDown?: () => void;
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,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS,sDAqDpB,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
@@ -1,9 +1,9 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { cx } from "../../utils/index.js";
3
3
  import { ApIcon } from "../../../material/components/index.js";
4
- import { memo, useCallback, useEffect, useRef } from "react";
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, onArrowDown }) {
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(()=>{
@@ -11,14 +11,6 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
11
11
  }, [
12
12
  inputRef
13
13
  ]);
14
- const handleKeyDown = useCallback((e)=>{
15
- if ('ArrowDown' === e.key) {
16
- e.preventDefault();
17
- onArrowDown?.();
18
- }
19
- }, [
20
- onArrowDown
21
- ]);
22
14
  return /*#__PURE__*/ jsx(StyledSearchForm, {
23
15
  autoComplete: "off",
24
16
  className: "searchbox-form",
@@ -39,11 +31,15 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
39
31
  ref: inputRef,
40
32
  autoComplete: "off",
41
33
  type: "text",
34
+ role: "combobox",
35
+ "aria-expanded": true,
36
+ "aria-controls": "toolbox-listbox",
37
+ "aria-activedescendant": activeDescendantId,
42
38
  className: "searchbox-input",
43
39
  placeholder: placeholder,
44
40
  value: value,
45
41
  onChange: (e)=>onChange(e.target.value),
46
- onKeyDown: handleKeyDown
42
+ onKeyDown: onNavigationKeyDown
47
43
  }),
48
44
  value && /*#__PURE__*/ jsx("button", {
49
45
  type: "button",
package/dist/canvas/components/Toolbox/Toolbox.cjs CHANGED
@@ -124,8 +124,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
124
124
  }, []);
125
125
  const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
126
126
  setActiveIndex(index);
127
- if (-1 === index) setTimeout(()=>searchInputRef.current?.focus(), 0);
128
- else listRef.current?.scrollToRow({
127
+ if (index >= 0) listRef.current?.scrollToRow({
129
128
  index,
130
129
  align: 'auto'
131
130
  });
@@ -256,70 +255,90 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
256
255
  }, [
257
256
  items
258
257
  ]);
259
- const handleSearchArrowDown = (0, external_react_namespaceObject.useCallback)(()=>{
260
- if (isTransitioning || 0 === renderedItems.length) return;
261
- const firstIndex = getFirstSelectableIndex();
262
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
258
+ const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
259
+ if (activeIndex < 0) return;
260
+ const renderItem = renderedItems[activeIndex];
261
+ if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
263
262
  }, [
264
- isTransitioning,
265
- renderedItems.length,
266
- getFirstSelectableIndex,
267
- navigateToIndex
263
+ activeIndex,
264
+ renderedItems
268
265
  ]);
269
- (0, external_react_namespaceObject.useEffect)(()=>{
270
- const handleKeyDown = (e)=>{
271
- if ('Escape' === e.key) {
272
- if (isSearching) {
273
- searchIdRef.current += 1;
274
- startTransition('back');
275
- clearSearch();
276
- } else if (navigationStack.canGoBack) handleBackTransition();
277
- else onClose();
278
- return;
279
- }
280
- if (isTransitioning) return;
281
- const isSearchFocused = document.activeElement === searchInputRef.current;
282
- if (isSearchFocused) return;
283
- switch(e.key){
284
- case 'ArrowDown':
285
- {
266
+ const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
267
+ if (isTransitioning) return;
268
+ switch(e.key){
269
+ case 'ArrowDown':
270
+ 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
+ }
278
+ break;
279
+ case 'ArrowUp':
280
+ e.preventDefault();
281
+ activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
282
+ break;
283
+ case 'Enter':
284
+ if (activeIndex >= 0) {
285
+ const renderItem = renderedItems[activeIndex];
286
+ if (renderItem?.type === 'item') {
286
287
  e.preventDefault();
287
- const nextIndex = getNextSelectableIndex(activeIndex, 1);
288
- if (-1 !== nextIndex) navigateToIndex(nextIndex);
289
- break;
288
+ handleItemSelect(renderItem.item);
290
289
  }
291
- case 'ArrowUp':
292
- e.preventDefault();
293
- if (activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1)) navigateToIndex(-1);
294
- else {
295
- const prevIndex = getNextSelectableIndex(activeIndex, -1);
296
- navigateToIndex(prevIndex);
290
+ }
291
+ break;
292
+ case 'ArrowRight':
293
+ if (activeIndex >= 0) {
294
+ const renderItem = renderedItems[activeIndex];
295
+ if (renderItem?.type === 'item' && renderItem.item.children) {
296
+ e.preventDefault();
297
+ handleItemSelect(renderItem.item);
297
298
  }
299
+ }
300
+ break;
301
+ case 'ArrowLeft':
302
+ if (activeIndex >= 0 && navigationStack.canGoBack) {
303
+ e.preventDefault();
304
+ handleBackTransition();
305
+ }
306
+ break;
307
+ case 'Home':
308
+ {
309
+ e.preventDefault();
310
+ const firstIndex = getFirstSelectableIndex();
311
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
298
312
  break;
299
- case 'Enter':
300
- if (activeIndex >= 0) {
301
- const renderItem = renderedItems[activeIndex];
302
- if (renderItem?.type === 'item') {
303
- e.preventDefault();
304
- handleItemSelect(renderItem.item);
305
- }
306
- }
313
+ }
314
+ case 'End':
315
+ {
316
+ e.preventDefault();
317
+ const lastIndex = getLastSelectableIndex();
318
+ if (-1 !== lastIndex) navigateToIndex(lastIndex);
307
319
  break;
308
- case 'Home':
309
- {
310
- e.preventDefault();
311
- const firstIndex = getFirstSelectableIndex();
312
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
313
- break;
314
- }
315
- case 'End':
316
- {
317
- e.preventDefault();
318
- const lastIndex = getLastSelectableIndex();
319
- if (-1 !== lastIndex) navigateToIndex(lastIndex);
320
- break;
321
- }
322
- }
320
+ }
321
+ }
322
+ }, [
323
+ isTransitioning,
324
+ activeIndex,
325
+ renderedItems,
326
+ navigationStack.canGoBack,
327
+ navigateToIndex,
328
+ handleItemSelect,
329
+ handleBackTransition,
330
+ getNextSelectableIndex,
331
+ getFirstSelectableIndex,
332
+ getLastSelectableIndex
333
+ ]);
334
+ (0, external_react_namespaceObject.useEffect)(()=>{
335
+ const handleKeyDown = (e)=>{
336
+ if ('Escape' === e.key) if (isSearching) {
337
+ searchIdRef.current += 1;
338
+ startTransition('back');
339
+ clearSearch();
340
+ } else if (navigationStack.canGoBack) handleBackTransition();
341
+ else onClose();
323
342
  };
324
343
  const handleClickOutside = (e)=>{
325
344
  if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
@@ -332,19 +351,11 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
332
351
  };
333
352
  }, [
334
353
  isSearching,
335
- isTransitioning,
336
- activeIndex,
337
- renderedItems,
338
354
  navigationStack.canGoBack,
339
355
  onClose,
340
356
  clearSearch,
341
357
  startTransition,
342
- handleBackTransition,
343
- handleItemSelect,
344
- navigateToIndex,
345
- getNextSelectableIndex,
346
- getFirstSelectableIndex,
347
- getLastSelectableIndex
358
+ handleBackTransition
348
359
  ]);
349
360
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
350
361
  ref: containerRef,
@@ -367,7 +378,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
367
378
  clear: clearSearch,
368
379
  placeholder: "Search",
369
380
  inputRef: searchInputRef,
370
- onArrowDown: handleSearchArrowDown
381
+ onNavigationKeyDown: handleNavigationKeyDown,
382
+ activeDescendantId: activeDescendantId
371
383
  }),
372
384
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
373
385
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
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,2CA0YjB"}
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"}
package/dist/canvas/components/Toolbox/Toolbox.js CHANGED
@@ -96,8 +96,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
96
96
  }, []);
97
97
  const navigateToIndex = useCallback((index)=>{
98
98
  setActiveIndex(index);
99
- if (-1 === index) setTimeout(()=>searchInputRef.current?.focus(), 0);
100
- else listRef.current?.scrollToRow({
99
+ if (index >= 0) listRef.current?.scrollToRow({
101
100
  index,
102
101
  align: 'auto'
103
102
  });
@@ -228,70 +227,90 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
228
227
  }, [
229
228
  items
230
229
  ]);
231
- const handleSearchArrowDown = useCallback(()=>{
232
- if (isTransitioning || 0 === renderedItems.length) return;
233
- const firstIndex = getFirstSelectableIndex();
234
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
230
+ const activeDescendantId = useMemo(()=>{
231
+ if (activeIndex < 0) return;
232
+ const renderItem = renderedItems[activeIndex];
233
+ if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
235
234
  }, [
236
- isTransitioning,
237
- renderedItems.length,
238
- getFirstSelectableIndex,
239
- navigateToIndex
235
+ activeIndex,
236
+ renderedItems
240
237
  ]);
241
- useEffect(()=>{
242
- const handleKeyDown = (e)=>{
243
- if ('Escape' === e.key) {
244
- if (isSearching) {
245
- searchIdRef.current += 1;
246
- startTransition('back');
247
- clearSearch();
248
- } else if (navigationStack.canGoBack) handleBackTransition();
249
- else onClose();
250
- return;
251
- }
252
- if (isTransitioning) return;
253
- const isSearchFocused = document.activeElement === searchInputRef.current;
254
- if (isSearchFocused) return;
255
- switch(e.key){
256
- case 'ArrowDown':
257
- {
238
+ const handleNavigationKeyDown = useCallback((e)=>{
239
+ if (isTransitioning) return;
240
+ switch(e.key){
241
+ case 'ArrowDown':
242
+ 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
+ }
250
+ break;
251
+ case 'ArrowUp':
252
+ e.preventDefault();
253
+ activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
254
+ break;
255
+ case 'Enter':
256
+ if (activeIndex >= 0) {
257
+ const renderItem = renderedItems[activeIndex];
258
+ if (renderItem?.type === 'item') {
258
259
  e.preventDefault();
259
- const nextIndex = getNextSelectableIndex(activeIndex, 1);
260
- if (-1 !== nextIndex) navigateToIndex(nextIndex);
261
- break;
260
+ handleItemSelect(renderItem.item);
262
261
  }
263
- case 'ArrowUp':
264
- e.preventDefault();
265
- if (activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1)) navigateToIndex(-1);
266
- else {
267
- const prevIndex = getNextSelectableIndex(activeIndex, -1);
268
- navigateToIndex(prevIndex);
262
+ }
263
+ break;
264
+ case 'ArrowRight':
265
+ if (activeIndex >= 0) {
266
+ const renderItem = renderedItems[activeIndex];
267
+ if (renderItem?.type === 'item' && renderItem.item.children) {
268
+ e.preventDefault();
269
+ handleItemSelect(renderItem.item);
269
270
  }
271
+ }
272
+ break;
273
+ case 'ArrowLeft':
274
+ if (activeIndex >= 0 && navigationStack.canGoBack) {
275
+ e.preventDefault();
276
+ handleBackTransition();
277
+ }
278
+ break;
279
+ case 'Home':
280
+ {
281
+ e.preventDefault();
282
+ const firstIndex = getFirstSelectableIndex();
283
+ if (-1 !== firstIndex) navigateToIndex(firstIndex);
270
284
  break;
271
- case 'Enter':
272
- if (activeIndex >= 0) {
273
- const renderItem = renderedItems[activeIndex];
274
- if (renderItem?.type === 'item') {
275
- e.preventDefault();
276
- handleItemSelect(renderItem.item);
277
- }
278
- }
285
+ }
286
+ case 'End':
287
+ {
288
+ e.preventDefault();
289
+ const lastIndex = getLastSelectableIndex();
290
+ if (-1 !== lastIndex) navigateToIndex(lastIndex);
279
291
  break;
280
- case 'Home':
281
- {
282
- e.preventDefault();
283
- const firstIndex = getFirstSelectableIndex();
284
- if (-1 !== firstIndex) navigateToIndex(firstIndex);
285
- break;
286
- }
287
- case 'End':
288
- {
289
- e.preventDefault();
290
- const lastIndex = getLastSelectableIndex();
291
- if (-1 !== lastIndex) navigateToIndex(lastIndex);
292
- break;
293
- }
294
- }
292
+ }
293
+ }
294
+ }, [
295
+ isTransitioning,
296
+ activeIndex,
297
+ renderedItems,
298
+ navigationStack.canGoBack,
299
+ navigateToIndex,
300
+ handleItemSelect,
301
+ handleBackTransition,
302
+ getNextSelectableIndex,
303
+ getFirstSelectableIndex,
304
+ getLastSelectableIndex
305
+ ]);
306
+ useEffect(()=>{
307
+ const handleKeyDown = (e)=>{
308
+ if ('Escape' === e.key) if (isSearching) {
309
+ searchIdRef.current += 1;
310
+ startTransition('back');
311
+ clearSearch();
312
+ } else if (navigationStack.canGoBack) handleBackTransition();
313
+ else onClose();
295
314
  };
296
315
  const handleClickOutside = (e)=>{
297
316
  if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
@@ -304,19 +323,11 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
304
323
  };
305
324
  }, [
306
325
  isSearching,
307
- isTransitioning,
308
- activeIndex,
309
- renderedItems,
310
326
  navigationStack.canGoBack,
311
327
  onClose,
312
328
  clearSearch,
313
329
  startTransition,
314
- handleBackTransition,
315
- handleItemSelect,
316
- navigateToIndex,
317
- getNextSelectableIndex,
318
- getFirstSelectableIndex,
319
- getLastSelectableIndex
330
+ handleBackTransition
320
331
  ]);
321
332
  return /*#__PURE__*/ jsx("div", {
322
333
  ref: containerRef,
@@ -339,7 +350,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
339
350
  clear: clearSearch,
340
351
  placeholder: "Search",
341
352
  inputRef: searchInputRef,
342
- onArrowDown: handleSearchArrowDown
353
+ onNavigationKeyDown: handleNavigationKeyDown,
354
+ activeDescendantId: activeDescendantId
343
355
  }),
344
356
  /*#__PURE__*/ jsx(AnimatedContainer, {
345
357
  children: /*#__PURE__*/ jsx(AnimatedContent, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.54.0-pr354.9b2638b",
3
+ "version": "3.54.0-pr354.c2317cc",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",
@@ -200,8 +200,8 @@
200
200
  "use-sync-external-store": "^1.2.0",
201
201
  "zod": "^4.3.5",
202
202
  "zustand": "^5.0.9",
203
- "@uipath/apollo-wind": "0.15.0",
204
- "@uipath/apollo-core": "5.7.1"
203
+ "@uipath/apollo-core": "5.7.1",
204
+ "@uipath/apollo-wind": "0.15.0"
205
205
  },
206
206
  "devDependencies": {
207
207
  "@lingui/cli": "^5.6.1",