npm - @uipath/apollo-react - Versions diffs - 3.53.0-pr349.8a75b3d → 3.54.0-pr354.029fc6a - Mend

@uipath/apollo-react 3.53.0-pr349.8a75b3d → 3.54.0-pr354.029fc6a

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 (18) hide show

package/dist/canvas/components/AddNodePanel/AddNodePanel.cjs CHANGED Viewed

@@ -1,5 +1,14 @@
 "use strict";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -28,6 +37,8 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
+const external_react_focus_lock_namespaceObject = require("react-focus-lock");
+var external_react_focus_lock_default = /*#__PURE__*/ __webpack_require__.n(external_react_focus_lock_namespaceObject);
 const index_cjs_namespaceObject = require("../../core/index.cjs");
 const external_hooks_index_cjs_namespaceObject = require("../../hooks/index.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
@@ -68,14 +79,16 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObje
     }, [
         onNodeSelect
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
-        title: title ?? 'Add Node',
-        initialItems: nodeListOptions,
-        loading: loading,
-        onItemSelect: handleNodeListItemSelect,
-        onSearch: handleSearch,
-        onClose: onClose,
-        onItemHover: onNodeHover
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_focus_lock_default(), {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
+            title: title ?? 'Add Node',
+            initialItems: nodeListOptions,
+            loading: loading,
+            onItemSelect: handleNodeListItemSelect,
+            onSearch: handleSearch,
+            onClose: onClose,
+            onItemHover: onNodeHover
+        })
     });
 });
 exports.AddNodePanel = __webpack_exports__.AddNodePanel;

package/dist/canvas/components/AddNodePanel/AddNodePanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,~~yDA2EvB~~,CAAC"}
1	+ {"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,yDA6EvB,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodePanel.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useCallback, useMemo } from "react";
+import react_focus_lock from "react-focus-lock";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { usePreviewNode } from "../../hooks/index.js";
 import { Toolbox } from "../Toolbox/index.js";
@@ -40,14 +41,16 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, on
     }, [
         onNodeSelect
     ]);
-    return /*#__PURE__*/ jsx(Toolbox, {
-        title: title ?? 'Add Node',
-        initialItems: nodeListOptions,
-        loading: loading,
-        onItemSelect: handleNodeListItemSelect,
-        onSearch: handleSearch,
-        onClose: onClose,
-        onItemHover: onNodeHover
+    return /*#__PURE__*/ jsx(react_focus_lock, {
+        children: /*#__PURE__*/ jsx(Toolbox, {
+            title: title ?? 'Add Node',
+            initialItems: nodeListOptions,
+            loading: loading,
+            onItemSelect: handleNodeListItemSelect,
+            onSearch: handleSearch,
+            onClose: onClose,
+            onItemHover: onNodeHover
+        })
     });
 });
 export { AddNodePanel_AddNodePanel as AddNodePanel };

package/dist/canvas/components/Toolbox/ListView.cjs CHANGED Viewed

@@ -24,7 +24,8 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    ListView: ()=>ListView_ListView
+    ListView: ()=>ListView_ListView,
+    buildRenderedItems: ()=>buildRenderedItems
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
@@ -35,8 +36,37 @@ const components_index_cjs_namespaceObject = require("../../../material/componen
 const external_react_namespaceObject = require("react");
 const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
 const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
+function buildRenderedItems(items, enableSections) {
+    const result = [];
+    if (0 === items.length) return result;
+    if (!enableSections) {
+        for (const item of items)result.push({
+            type: 'item',
+            item
+        });
+        return result;
+    }
+    const [itemsWithSection, itemsWithoutSection] = (0, external_utils_index_cjs_namespaceObject.partition)(items, (item)=>!!item.section);
+    for (const item of itemsWithoutSection)result.push({
+        type: 'item',
+        item
+    });
+    if (0 === itemsWithSection.length) return result;
+    const sections = Array.from(new Set(itemsWithSection.map((item)=>item.section)));
+    for (const section of sections){
+        result.push({
+            type: 'section',
+            sectionName: section
+        });
+        for (const item of itemsWithSection.filter((item)=>item.section === section))result.push({
+            type: 'item',
+            item
+        });
+    }
+    return result;
+}
 const IconContainerMemoized = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(external_ListView_styles_cjs_namespaceObject.IconContainer);
-const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ index, style, ariaAttributes, renderedItems, isLoading, isDarkMode, onItemClick, onItemHover })=>{
+const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ index, style, ariaAttributes, renderedItems, activeIndex, isLoading, isDarkMode, onItemClick, onItemHover })=>{
     const renderItem = renderedItems[index];
     const buttonStyle = (0, external_react_namespaceObject.useMemo)(()=>({
             ...style,
@@ -74,12 +104,16 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
     });
     const item = renderItem.item;
     const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
+    const isActive = index === activeIndex;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_ListView_styles_cjs_namespaceObject.ListItemButton, {
         ...ariaAttributes,
+        id: `toolbox-item-${item.id}`,
+        role: "option",
+        "aria-selected": isActive,
         style: buttonStyle,
         onClick: handleButtonClick,
         onHoverStart: handleButtonHover,
-        className: isLoading ? 'loading' : '',
+        className: `${isLoading ? 'loading' : ''} ${isActive ? 'active' : ''}`,
         disabled: isLoading,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(IconContainerMemoized, {
@@ -134,48 +168,22 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
         ]
     });
 });
-const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ items, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }) {
+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 }) {
     const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
-    const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>{
-        const result = [];
-        if (0 === items.length) return result;
-        if (!enableSections) {
-            for (const item of items)result.push({
-                type: 'item',
-                item
-            });
-            return result;
-        }
-        const [itemsWithSection, itemsWithoutSection] = (0, external_utils_index_cjs_namespaceObject.partition)(items, (item)=>!!item.section);
-        for (const item of itemsWithoutSection)result.push({
-            type: 'item',
-            item
-        });
-        if (0 === itemsWithSection.length) return result;
-        const sections = Array.from(new Set(itemsWithSection.map((item)=>item.section)));
-        for (const section of sections){
-            result.push({
-                type: 'section',
-                sectionName: section
-            });
-            for (const item of itemsWithSection.filter((item)=>item.section === section))result.push({
-                type: 'item',
-                item
-            });
-        }
-        return result;
-    }, [
+    const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
         items,
         enableSections
     ]);
     const rowProps = (0, external_react_namespaceObject.useMemo)(()=>({
             renderedItems,
+            activeIndex,
             isLoading,
             isDarkMode,
             onItemClick,
             onItemHover
         }), [
         renderedItems,
+        activeIndex,
         isLoading,
         isDarkMode,
         onItemClick,
@@ -215,6 +223,7 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
         ]
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
+        listRef: listRef,
         rowProps: rowProps,
         rowComponent: ListViewRow,
         rowCount: renderedItems.length,
@@ -223,8 +232,10 @@ const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)
     });
 });
 exports.ListView = __webpack_exports__.ListView;
+exports.buildRenderedItems = __webpack_exports__.buildRenderedItems;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "ListView"
+    "ListView",
+    "buildRenderedItems"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/Toolbox/ListView.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { ListImperativeAPI } from 'react-window';
 export interface ListItemIcon {
     name?: string;
     url?: string;
@@ -14,15 +15,17 @@ export type ListItem<T = any> = {
     colorDark?: string;
     children?: ListItem<T>[] | ((id: string, name: string) => Promise<ListItem<T>[]>);
 };
-type RenderItem<T extends ListItem> = {
+export type RenderItem<T extends ListItem> = {
     type: 'section';
     sectionName: string;
 } | {
     type: 'item';
     item: T;
 };
+export declare function buildRenderedItems<T extends ListItem>(items: T[], enableSections: boolean): RenderItem<T>[];
 export interface ListViewRowProps<T extends ListItem> {
     renderedItems: RenderItem<T>[];
+    activeIndex: number;
     isLoading?: boolean;
     isDarkMode?: boolean;
     onItemClick: (item: T) => void;
@@ -30,6 +33,8 @@ export interface ListViewRowProps<T extends ListItem> {
 }
 interface ListViewProps<T extends ListItem> {
     items: T[];
+    activeIndex?: number;
+    listRef?: React.RefObject<ListImperativeAPI | null>;
     onItemClick: (item: T) => void;
     onItemHover?: (item: T) => void;
     emptyStateMessage?: string;
@@ -37,6 +42,6 @@ interface ListViewProps<T extends ListItem> {
     isLoading?: boolean;
     enableSections?: boolean;
 }
-export declare const ListView: import("react").MemoExoticComponent<(<T extends ListItem>({ items, onItemClick, onItemHover, emptyStateMessage, emptyStateIcon, isLoading, enableSections, }: ListViewProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+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)>;
 export {};
 //# sourceMappingURL=ListView.d.ts.map

package/dist/canvas/components/Toolbox/ListView.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"~~AAUA~~,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,~~KAAK~~,UAAU,CAAC,CAAC,SAAS,QAAQ,~~IAC9B~~;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,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,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;~~AAyGD~~,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,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,~~sGAQ9D~~,aAAa,CAAC,CAAC,CAAC,~~8CAkFjB~~,CAAC"}
1	+ {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAIzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA+GD,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,wCAA0B,CAAC,SAAS,QAAQ,4HAU9D,aAAa,CAAC,CAAC,CAAC,8CAiDjB,CAAC"}

package/dist/canvas/components/Toolbox/ListView.js CHANGED Viewed

@@ -7,8 +7,37 @@ import { ApIcon, ApTooltip } from "../../../material/components/index.js";
 import { memo, useCallback, useMemo } from "react";
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
 import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
+function buildRenderedItems(items, enableSections) {
+    const result = [];
+    if (0 === items.length) return result;
+    if (!enableSections) {
+        for (const item of items)result.push({
+            type: 'item',
+            item
+        });
+        return result;
+    }
+    const [itemsWithSection, itemsWithoutSection] = partition(items, (item)=>!!item.section);
+    for (const item of itemsWithoutSection)result.push({
+        type: 'item',
+        item
+    });
+    if (0 === itemsWithSection.length) return result;
+    const sections = Array.from(new Set(itemsWithSection.map((item)=>item.section)));
+    for (const section of sections){
+        result.push({
+            type: 'section',
+            sectionName: section
+        });
+        for (const item of itemsWithSection.filter((item)=>item.section === section))result.push({
+            type: 'item',
+            item
+        });
+    }
+    return result;
+}
 const IconContainerMemoized = /*#__PURE__*/ memo(IconContainer);
-const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, renderedItems, isLoading, isDarkMode, onItemClick, onItemHover })=>{
+const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, renderedItems, activeIndex, isLoading, isDarkMode, onItemClick, onItemHover })=>{
     const renderItem = renderedItems[index];
     const buttonStyle = useMemo(()=>({
             ...style,
@@ -46,12 +75,16 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
     });
     const item = renderItem.item;
     const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
+    const isActive = index === activeIndex;
     return /*#__PURE__*/ jsxs(ListItemButton, {
         ...ariaAttributes,
+        id: `toolbox-item-${item.id}`,
+        role: "option",
+        "aria-selected": isActive,
         style: buttonStyle,
         onClick: handleButtonClick,
         onHoverStart: handleButtonHover,
-        className: isLoading ? 'loading' : '',
+        className: `${isLoading ? 'loading' : ''} ${isActive ? 'active' : ''}`,
         disabled: isLoading,
         children: [
             /*#__PURE__*/ jsxs(IconContainerMemoized, {
@@ -106,48 +139,22 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         ]
     });
 });
-const ListView_ListView = /*#__PURE__*/ memo(function({ items, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }) {
+const ListView_ListView = /*#__PURE__*/ memo(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }) {
     const { isDarkMode } = useCanvasTheme();
-    const renderedItems = useMemo(()=>{
-        const result = [];
-        if (0 === items.length) return result;
-        if (!enableSections) {
-            for (const item of items)result.push({
-                type: 'item',
-                item
-            });
-            return result;
-        }
-        const [itemsWithSection, itemsWithoutSection] = partition(items, (item)=>!!item.section);
-        for (const item of itemsWithoutSection)result.push({
-            type: 'item',
-            item
-        });
-        if (0 === itemsWithSection.length) return result;
-        const sections = Array.from(new Set(itemsWithSection.map((item)=>item.section)));
-        for (const section of sections){
-            result.push({
-                type: 'section',
-                sectionName: section
-            });
-            for (const item of itemsWithSection.filter((item)=>item.section === section))result.push({
-                type: 'item',
-                item
-            });
-        }
-        return result;
-    }, [
+    const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
         items,
         enableSections
     ]);
     const rowProps = useMemo(()=>({
             renderedItems,
+            activeIndex,
             isLoading,
             isDarkMode,
             onItemClick,
             onItemHover
         }), [
         renderedItems,
+        activeIndex,
         isLoading,
         isDarkMode,
         onItemClick,
@@ -187,6 +194,7 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, onItemClick, onIt
         ]
     });
     return /*#__PURE__*/ jsx(StyledList, {
+        listRef: listRef,
         rowProps: rowProps,
         rowComponent: ListViewRow,
         rowCount: renderedItems.length,
@@ -194,4 +202,4 @@ const ListView_ListView = /*#__PURE__*/ memo(function({ items, onItemClick, onIt
         overscanCount: 20
     });
 });
-export { ListView_ListView as ListView };
+export { ListView_ListView as ListView, buildRenderedItems };

package/dist/canvas/components/Toolbox/ListView.styles.cjs CHANGED Viewed

@@ -68,9 +68,15 @@ const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
   width: 100%;
   transition: all 0.15s ease;
-  &:hover {
+  &:hover,
+  &.active {
     background: var(--uix-canvas-background-hover);
   }
+  &.active {
+    outline: 1px solid var(--uix-canvas-primary);
+    outline-offset: -1px;
+  }
 `;
 const IconContainer = styled_default().div`
   width: 32px;

package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;~~UAe1B~~,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}
1	+ {"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UAqB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}

package/dist/canvas/components/Toolbox/ListView.styles.js CHANGED Viewed

@@ -27,9 +27,15 @@ const ListItemButton = styled(motion.button)`
   width: 100%;
   transition: all 0.15s ease;
-  &:hover {
+  &:hover,
+  &.active {
     background: var(--uix-canvas-background-hover);
   }
+  &.active {
+    outline: 1px solid var(--uix-canvas-primary);
+    outline-offset: -1px;
+  }
 `;
 const IconContainer = styled.div`
   width: 32px;

package/dist/canvas/components/Toolbox/SearchBox.cjs CHANGED Viewed

@@ -31,11 +31,14 @@ const index_cjs_namespaceObject = require("../../utils/index.cjs");
 const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
 const external_SearchBox_styles_cjs_namespaceObject = require("./SearchBox.styles.cjs");
-const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...' }) {
-    const inputRef = (0, external_react_namespaceObject.useRef)(null);
+const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
+    const internalRef = (0, external_react_namespaceObject.useRef)(null);
+    const inputRef = externalInputRef ?? internalRef;
     (0, external_react_namespaceObject.useEffect)(()=>{
         inputRef.current?.focus();
-    }, []);
+    }, [
+        inputRef
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_styles_cjs_namespaceObject.StyledSearchForm, {
         autoComplete: "off",
         className: "searchbox-form",
@@ -59,7 +62,8 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
                     className: "searchbox-input",
                     placeholder: placeholder,
                     value: value,
-                    onChange: (e)=>onChange(e.target.value)
+                    onChange: (e)=>onChange(e.target.value),
+                    onKeyDown: onNavigationKeyDown
                 }),
                 value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                     type: "button",

package/dist/canvas/components/Toolbox/SearchBox.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ interface SearchBoxProps {
     onChange: (value: string) => void;
     clear: () => void;
     placeholder?: string;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+    onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
 }
 export declare const SearchBox: import("react").NamedExoticComponent<SearchBoxProps>;
 export {};

package/dist/canvas/components/Toolbox/SearchBox.d.ts.map CHANGED Viewed

	@@ -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;~~CACtB~~;AAED,eAAO,MAAM,SAAS,~~sDAuCpB~~,CAAC"}
1	+ {"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,SAAS,sDA2CpB,CAAC"}

package/dist/canvas/components/Toolbox/SearchBox.js CHANGED Viewed

@@ -3,11 +3,14 @@ import { cx } from "../../utils/index.js";
 import { ApIcon } from "../../../material/components/index.js";
 import { memo, useEffect, useRef } from "react";
 import { StyledSearchForm } from "./SearchBox.styles.js";
-const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...' }) {
-    const inputRef = useRef(null);
+const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, onNavigationKeyDown }) {
+    const internalRef = useRef(null);
+    const inputRef = externalInputRef ?? internalRef;
     useEffect(()=>{
         inputRef.current?.focus();
-    }, []);
+    }, [
+        inputRef
+    ]);
     return /*#__PURE__*/ jsx(StyledSearchForm, {
         autoComplete: "off",
         className: "searchbox-form",
@@ -31,7 +34,8 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
                     className: "searchbox-input",
                     placeholder: placeholder,
                     value: value,
-                    onChange: (e)=>onChange(e.target.value)
+                    onChange: (e)=>onChange(e.target.value),
+                    onKeyDown: onNavigationKeyDown
                 }),
                 value && /*#__PURE__*/ jsx("button", {
                     type: "button",

package/dist/canvas/components/Toolbox/Toolbox.cjs CHANGED Viewed

@@ -30,6 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../hooks/index.cjs");
 const external_layouts_index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const external_react_namespaceObject = require("react");
+const external_react_window_namespaceObject = require("react-window");
 const external_Header_cjs_namespaceObject = require("./Header.cjs");
 const external_ListView_cjs_namespaceObject = require("./ListView.cjs");
 const external_SearchBox_cjs_namespaceObject = require("./SearchBox.cjs");
@@ -71,13 +72,48 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const [isTransitioning, setIsTransitioning] = (0, external_react_namespaceObject.useState)(false);
     const [animationDirection, setAnimationDirection] = (0, external_react_namespaceObject.useState)('forward');
     const navigationStack = (0, index_cjs_namespaceObject.useNavigationStack)();
+    const [activeIndex, setActiveIndex] = (0, external_react_namespaceObject.useState)(-1);
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const transitionTimeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
     const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
     const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
+    const listRef = (0, external_react_window_namespaceObject.useListRef)(null);
+    const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
     const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
         search
     ]);
+    const displayedItems = (0, external_react_namespaceObject.useMemo)(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
+        isSearching,
+        isSearchingInitialItems,
+        searchedItems,
+        items
+    ]);
+    const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>(0, external_ListView_cjs_namespaceObject.buildRenderedItems)(displayedItems, !isSearching), [
+        displayedItems,
+        isSearching
+    ]);
+    const getNextSelectableIndex = (0, external_react_namespaceObject.useCallback)((currentIndex, direction)=>{
+        let next = currentIndex + direction;
+        while(next >= 0 && next < renderedItems.length){
+            if (renderedItems[next]?.type === 'item') return next;
+            next += direction;
+        }
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getFirstSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
+        for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getLastSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
+        for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
     const startTransition = (0, external_react_namespaceObject.useCallback)((direction)=>{
         if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
         setIsTransitioning(true);
@@ -86,11 +122,21 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             setIsTransitioning(false);
         }, TRANSITION_DURATION);
     }, []);
+    const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
+        setActiveIndex(index);
+        if (index >= 0) listRef.current?.scrollToRow({
+            index,
+            align: 'auto'
+        });
+    }, [
+        listRef
+    ]);
     const clearSearch = (0, external_react_namespaceObject.useCallback)(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
+        setActiveIndex(-1);
     }, []);
     const handleSearch = (0, external_react_namespaceObject.useCallback)(async (query)=>{
         if (!query.trim()) {
@@ -101,6 +147,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             return;
         }
         setSearch(query);
+        setActiveIndex(-1);
         searchIdRef.current += 1;
         const currentRequestId = searchIdRef.current;
         setSearchLoading(true);
@@ -121,6 +168,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = (0, external_react_namespaceObject.useCallback)(()=>{
         startTransition('back');
+        setActiveIndex(-1);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
@@ -149,6 +197,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         setItems(nestedItems);
         setCurrentParentItem(item);
         clearSearch();
+        setActiveIndex(-1);
         startTransition('forward');
         setChildrenLoading(false);
     }, [
@@ -206,6 +255,87 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, [
         items
     ]);
+    const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (activeIndex < 0) return;
+        const renderItem = renderedItems[activeIndex];
+        if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
+    }, [
+        activeIndex,
+        renderedItems
+    ]);
+    const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if (isTransitioning) return;
+        const input = searchInputRef.current;
+        const cursorAtStart = input ? 0 === input.selectionStart && 0 === input.selectionEnd : true;
+        const cursorAtEnd = input ? input.selectionStart === input.value.length && input.selectionEnd === input.value.length : true;
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                if (-1 === activeIndex) {
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                } else {
+                    const nextIndex = getNextSelectableIndex(activeIndex, 1);
+                    if (-1 !== nextIndex) navigateToIndex(nextIndex);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
+                break;
+            case 'Enter':
+                if (activeIndex >= 0) {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item') {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                }
+                break;
+            case 'ArrowRight':
+                if (!cursorAtEnd) break;
+                if (activeIndex >= 0) {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item' && renderItem.item.children) {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                }
+                break;
+            case 'ArrowLeft':
+                if (!cursorAtStart) break;
+                if (activeIndex >= 0 && navigationStack.canGoBack) {
+                    e.preventDefault();
+                    handleBackTransition();
+                }
+                break;
+            case 'Home':
+                {
+                    e.preventDefault();
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                    break;
+                }
+            case 'End':
+                {
+                    e.preventDefault();
+                    const lastIndex = getLastSelectableIndex();
+                    if (-1 !== lastIndex) navigateToIndex(lastIndex);
+                    break;
+                }
+        }
+    }, [
+        isTransitioning,
+        activeIndex,
+        renderedItems,
+        navigationStack.canGoBack,
+        navigateToIndex,
+        handleItemSelect,
+        handleBackTransition,
+        getNextSelectableIndex,
+        getFirstSelectableIndex,
+        getLastSelectableIndex
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const handleKeyDown = (e)=>{
             if ('Escape' === e.key) if (isSearching) {
@@ -235,6 +365,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: containerRef,
         "data-testid": "toolbox-container",
+        tabIndex: 0,
+        role: "application",
+        "aria-activedescendant": activeDescendantId,
+        "aria-label": currentParentItem?.name || title,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
             px: 20,
             py: 12,
@@ -251,7 +385,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                     value: search,
                     onChange: handleSearch,
                     clear: clearSearch,
-                    placeholder: "Search"
+                    placeholder: "Search",
+                    inputRef: searchInputRef,
+                    onNavigationKeyDown: handleNavigationKeyDown
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
@@ -259,7 +395,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                         direction: animationDirection,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
                             isLoading: childrenLoading || searchLoading || loading,
-                            items: isSearching && !isSearchingInitialItems ? searchedItems : items,
+                            items: displayedItems,
+                            activeIndex: activeIndex,
+                            listRef: listRef,
                             emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
                             enableSections: !isSearching,
                             onItemClick: handleItemSelect,

package/dist/canvas/components/Toolbox/Toolbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,~~EAAE~~,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;~~AAuCrD~~,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,~~2CAoQjB~~"}
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"}

package/dist/canvas/components/Toolbox/Toolbox.js CHANGED Viewed

@@ -2,8 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useNavigationStack } from "../../hooks/index.js";
 import { Column } from "../../layouts/index.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useListRef } from "react-window";
 import { Header } from "./Header.js";
-import { ListView } from "./ListView.js";
+import { ListView, buildRenderedItems } from "./ListView.js";
 import { SearchBox } from "./SearchBox.js";
 import { AnimatedContainer, AnimatedContent } from "./Toolbox.styles.js";
 const TRANSITION_DURATION = 150;
@@ -43,13 +44,48 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const [isTransitioning, setIsTransitioning] = useState(false);
     const [animationDirection, setAnimationDirection] = useState('forward');
     const navigationStack = useNavigationStack();
+    const [activeIndex, setActiveIndex] = useState(-1);
     const containerRef = useRef(null);
     const transitionTimeoutRef = useRef(void 0);
     const searchIdRef = useRef(0);
     const initialItemsRef = useRef(initialItems);
+    const listRef = useListRef(null);
+    const searchInputRef = useRef(null);
     const isSearching = useMemo(()=>search.length > 0, [
         search
     ]);
+    const displayedItems = useMemo(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
+        isSearching,
+        isSearchingInitialItems,
+        searchedItems,
+        items
+    ]);
+    const renderedItems = useMemo(()=>buildRenderedItems(displayedItems, !isSearching), [
+        displayedItems,
+        isSearching
+    ]);
+    const getNextSelectableIndex = useCallback((currentIndex, direction)=>{
+        let next = currentIndex + direction;
+        while(next >= 0 && next < renderedItems.length){
+            if (renderedItems[next]?.type === 'item') return next;
+            next += direction;
+        }
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getFirstSelectableIndex = useCallback(()=>{
+        for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getLastSelectableIndex = useCallback(()=>{
+        for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
     const startTransition = useCallback((direction)=>{
         if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
         setIsTransitioning(true);
@@ -58,11 +94,21 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             setIsTransitioning(false);
         }, TRANSITION_DURATION);
     }, []);
+    const navigateToIndex = useCallback((index)=>{
+        setActiveIndex(index);
+        if (index >= 0) listRef.current?.scrollToRow({
+            index,
+            align: 'auto'
+        });
+    }, [
+        listRef
+    ]);
     const clearSearch = useCallback(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
+        setActiveIndex(-1);
     }, []);
     const handleSearch = useCallback(async (query)=>{
         if (!query.trim()) {
@@ -73,6 +119,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             return;
         }
         setSearch(query);
+        setActiveIndex(-1);
         searchIdRef.current += 1;
         const currentRequestId = searchIdRef.current;
         setSearchLoading(true);
@@ -93,6 +140,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = useCallback(()=>{
         startTransition('back');
+        setActiveIndex(-1);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
@@ -121,6 +169,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         setItems(nestedItems);
         setCurrentParentItem(item);
         clearSearch();
+        setActiveIndex(-1);
         startTransition('forward');
         setChildrenLoading(false);
     }, [
@@ -178,6 +227,87 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, [
         items
     ]);
+    const activeDescendantId = useMemo(()=>{
+        if (activeIndex < 0) return;
+        const renderItem = renderedItems[activeIndex];
+        if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
+    }, [
+        activeIndex,
+        renderedItems
+    ]);
+    const handleNavigationKeyDown = useCallback((e)=>{
+        if (isTransitioning) return;
+        const input = searchInputRef.current;
+        const cursorAtStart = input ? 0 === input.selectionStart && 0 === input.selectionEnd : true;
+        const cursorAtEnd = input ? input.selectionStart === input.value.length && input.selectionEnd === input.value.length : true;
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                if (-1 === activeIndex) {
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                } else {
+                    const nextIndex = getNextSelectableIndex(activeIndex, 1);
+                    if (-1 !== nextIndex) navigateToIndex(nextIndex);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
+                break;
+            case 'Enter':
+                if (activeIndex >= 0) {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item') {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                }
+                break;
+            case 'ArrowRight':
+                if (!cursorAtEnd) break;
+                if (activeIndex >= 0) {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item' && renderItem.item.children) {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                }
+                break;
+            case 'ArrowLeft':
+                if (!cursorAtStart) break;
+                if (activeIndex >= 0 && navigationStack.canGoBack) {
+                    e.preventDefault();
+                    handleBackTransition();
+                }
+                break;
+            case 'Home':
+                {
+                    e.preventDefault();
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                    break;
+                }
+            case 'End':
+                {
+                    e.preventDefault();
+                    const lastIndex = getLastSelectableIndex();
+                    if (-1 !== lastIndex) navigateToIndex(lastIndex);
+                    break;
+                }
+        }
+    }, [
+        isTransitioning,
+        activeIndex,
+        renderedItems,
+        navigationStack.canGoBack,
+        navigateToIndex,
+        handleItemSelect,
+        handleBackTransition,
+        getNextSelectableIndex,
+        getFirstSelectableIndex,
+        getLastSelectableIndex
+    ]);
     useEffect(()=>{
         const handleKeyDown = (e)=>{
             if ('Escape' === e.key) if (isSearching) {
@@ -207,6 +337,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
         "data-testid": "toolbox-container",
+        tabIndex: 0,
+        role: "application",
+        "aria-activedescendant": activeDescendantId,
+        "aria-label": currentParentItem?.name || title,
         children: /*#__PURE__*/ jsxs(Column, {
             px: 20,
             py: 12,
@@ -223,7 +357,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                     value: search,
                     onChange: handleSearch,
                     clear: clearSearch,
-                    placeholder: "Search"
+                    placeholder: "Search",
+                    inputRef: searchInputRef,
+                    onNavigationKeyDown: handleNavigationKeyDown
                 }),
                 /*#__PURE__*/ jsx(AnimatedContainer, {
                     children: /*#__PURE__*/ jsx(AnimatedContent, {
@@ -231,7 +367,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                         direction: animationDirection,
                         children: /*#__PURE__*/ jsx(ListView, {
                             isLoading: childrenLoading || searchLoading || loading,
-                            items: isSearching && !isSearchingInitialItems ? searchedItems : items,
+                            items: displayedItems,
+                            activeIndex: activeIndex,
+                            listRef: listRef,
                             emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
                             enableSections: !isSearching,
                             onItemClick: handleItemSelect,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.53.0-pr349.8a75b3d",
+  "version": "3.54.0-pr354.029fc6a",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -201,7 +201,7 @@
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
     "@uipath/apollo-core": "5.7.1",
-    "@uipath/apollo-wind": "0.14.0"
+    "@uipath/apollo-wind": "0.15.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",