@uipath/apollo-react 3.58.0 → 3.58.2

package/dist/canvas/components/StageNode/DraggableTask.cjs

@@ -127,8 +127,11 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                         taskExecution?.status && (taskExecution.message ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
                             content: taskExecution.message,
                             placement: "top",
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
-                                status: taskExecution.status
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
+                                size: "small",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
+                                    status: taskExecution.status
+                                })
                             })
                         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
                             status: taskExecution.status
@@ -229,7 +232,6 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         status: taskExecution?.status,
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
-        isMenuOpen: isMenuOpen,
         onClick: handleClick,
         ...contextMenuItems.length > 0 && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/DraggableTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAsEpF,CAAC;AAqHH,eAAO,MAAM,aAAa,0KAxGvB,kBAAkB,6CAwGoC,CAAC"}
+{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAoHH,eAAO,MAAM,aAAa,0KAvGvB,kBAAkB,6CAuGoC,CAAC"}

package/dist/canvas/components/StageNode/DraggableTask.js

@@ -3,7 +3,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
-import { ApBadge, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
+import { ApBadge, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { INDENTATION_WIDTH, StageTask, StageTaskDragPlaceholder, StageTaskDragPlaceholderWrapper, StageTaskIcon, StageTaskRetryDuration, StageTaskWrapper } from "./StageNode.styles.js";
@@ -98,8 +98,11 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging })=>/*
                         taskExecution?.status && (taskExecution.message ? /*#__PURE__*/ jsx(ApTooltip, {
                             content: taskExecution.message,
                             placement: "top",
-                            children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
-                                status: taskExecution.status
+                            children: /*#__PURE__*/ jsx(ApIconButton, {
+                                size: "small",
+                                children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
+                                    status: taskExecution.status
+                                })
                             })
                         }) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
                             status: taskExecution.status
@@ -200,7 +203,6 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         status: taskExecution?.status,
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
-        isMenuOpen: isMenuOpen,
         onClick: handleClick,
         ...contextMenuItems.length > 0 && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/StageNode.stories.cjs

@@ -309,6 +309,50 @@ const Default = {
                             }
                         }))
                 }
+            },
+            {
+                id: '2',
+                type: 'stage',
+                position: {
+                    x: 752,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    onReplaceTaskFromToolbox: ()=>{},
+                    stageDetails: {
+                        label: 'Validation - Failed',
+                        isReadOnly: true,
+                        tasks: [
+                            [
+                                {
+                                    id: '1',
+                                    label: 'Data Validation',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
+                                }
+                            ],
+                            [
+                                {
+                                    id: '2',
+                                    label: 'Compliance Check',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
+                                }
+                            ]
+                        ]
+                    },
+                    execution: {
+                        stageStatus: {
+                            label: 'error message',
+                            status: 'Failed'
+                        },
+                        taskStatus: {
+                            2: {
+                                status: 'Failed',
+                                message: 'Compliance requirements not met'
+                            }
+                        }
+                    }
+                }
             }
         ]
     },

package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAiJF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}
+{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAwFrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAiJF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}

package/dist/canvas/components/StageNode/StageNode.stories.js

@@ -273,6 +273,50 @@ const Default = {
                             }
                         }))
                 }
+            },
+            {
+                id: '2',
+                type: 'stage',
+                position: {
+                    x: 752,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    onReplaceTaskFromToolbox: ()=>{},
+                    stageDetails: {
+                        label: 'Validation - Failed',
+                        isReadOnly: true,
+                        tasks: [
+                            [
+                                {
+                                    id: '1',
+                                    label: 'Data Validation',
+                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
+                                }
+                            ],
+                            [
+                                {
+                                    id: '2',
+                                    label: 'Compliance Check',
+                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
+                                }
+                            ]
+                        ]
+                    },
+                    execution: {
+                        stageStatus: {
+                            label: 'error message',
+                            status: 'Failed'
+                        },
+                        taskStatus: {
+                            2: {
+                                status: 'Failed',
+                                message: 'Compliance requirements not met'
+                            }
+                        }
+                    }
+                }
             }
         ]
     },

package/dist/canvas/components/StageNode/StageNode.styles.cjs

@@ -203,10 +203,6 @@ const StageTask = styled_default().div`
   height: ${({ isDragEnabled })=>isDragEnabled ? '100%' : 'auto'};
 
   .task-menu-icon-button {
-    display: ${({ isMenuOpen })=>isMenuOpen ? 'flex' : 'none'};
-  }
-
-  &:hover .task-menu-icon-button {
     display: flex;
   }
 

package/dist/canvas/components/StageNode/StageNode.styles.d.ts

@@ -67,7 +67,6 @@ export declare const StageTask: import("@emotion/styled").StyledComponent<{
     selected?: boolean;
     isParallel?: boolean;
     isDragEnabled?: boolean;
-    isMenuOpen?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StageTaskIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/canvas/components/StageNode/StageNode.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,mBAAmB,QAAuD,CAAC;AAExF,eAAO,MAAM,cAAc;;;;eACd,OAAO;aACT,WAAW;YACZ,MAAM;yGAqDf,CAAC;AAEF,eAAO,MAAM,WAAW;;;;kBAA8B,OAAO;yGAS5D,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;gBAA4B,OAAO;yGAKlE,CAAC;AAEF,eAAO,MAAM,eAAe;;;;gBACd,OAAO;2BACI,OAAO;YACtB,MAAM;kHAsBf,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAQxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;iBAA6B,OAAO;yGAM9D,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAa9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;iBAA6B,OAAO;yGAKhE,CAAC;AAEF,eAAO,MAAM,SAAS;;;;aACX,WAAW;eACT,OAAO;iBACL,OAAO;oBACJ,OAAO;iBACV,OAAO;yGAiErB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAYzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aAAyB,SAAS,GAAG,MAAM,GAAG,OAAO;yGAoBvF,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;yGAG3C,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;uBAAmC,OAAO;yGAW9E,CAAC"}
+{"version":3,"file":"StageNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,mBAAmB,QAAuD,CAAC;AAExF,eAAO,MAAM,cAAc;;;;eACd,OAAO;aACT,WAAW;YACZ,MAAM;yGAqDf,CAAC;AAEF,eAAO,MAAM,WAAW;;;;kBAA8B,OAAO;yGAS5D,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;gBAA4B,OAAO;yGAKlE,CAAC;AAEF,eAAO,MAAM,eAAe;;;;gBACd,OAAO;2BACI,OAAO;YACtB,MAAM;kHAsBf,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAQxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;iBAA6B,OAAO;yGAM9D,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAa9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;iBAA6B,OAAO;yGAKhE,CAAC;AAEF,eAAO,MAAM,SAAS;;;;aACX,WAAW;eACT,OAAO;iBACL,OAAO;oBACJ,OAAO;yGA6DxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAYzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aAAyB,SAAS,GAAG,MAAM,GAAG,OAAO;yGAoBvF,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;yGAG3C,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;uBAAmC,OAAO;yGAW9E,CAAC"}

package/dist/canvas/components/StageNode/StageNode.styles.js

@@ -147,10 +147,6 @@ const StageTask = styled.div`
   height: ${({ isDragEnabled })=>isDragEnabled ? '100%' : 'auto'};
 
   .task-menu-icon-button {
-    display: ${({ isMenuOpen })=>isMenuOpen ? 'flex' : 'none'};
-  }
-
-  &:hover .task-menu-icon-button {
     display: flex;
   }
 

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

@@ -79,7 +79,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
     ]);
     const handleButtonClick = (0, external_react_namespaceObject.useCallback)(()=>{
         const clickTarget = renderedItems[index];
-        if (clickTarget?.type === 'item') onItemClick(clickTarget.item);
+        if (clickTarget?.type === 'item') onItemClick(clickTarget.item, index);
     }, [
         onItemClick,
         renderedItems,

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

@@ -28,7 +28,7 @@ export interface ListViewRowProps<T extends ListItem> {
     activeIndex: number;
     isLoading?: boolean;
     isDarkMode?: boolean;
-    onItemClick: (item: T) => void;
+    onItemClick: (item: T, index: number) => void;
     onItemHover?: (item: T) => void;
 }
 export interface ListViewHandle<T extends ListItem = ListItem> {
@@ -38,7 +38,7 @@ interface ListViewProps<T extends ListItem> {
     items: T[];
     activeIndex?: number;
     listRef?: React.RefObject<ListImperativeAPI | null>;
-    onItemClick: (item: T) => void;
+    onItemClick: (item: T, index: number) => void;
     onItemHover?: (item: T) => void;
     emptyStateMessage?: string;
     emptyStateIcon?: string;

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

@@ -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;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"}
+{"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,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,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,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,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

@@ -50,7 +50,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
     ]);
     const handleButtonClick = useCallback(()=>{
         const clickTarget = renderedItems[index];
-        if (clickTarget?.type === 'item') onItemClick(clickTarget.item);
+        if (clickTarget?.type === 'item') onItemClick(clickTarget.item, index);
     }, [
         onItemClick,
         renderedItems,

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

@@ -31,7 +31,7 @@ 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...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
+const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, clearButtonRef, onNavigationKeyDown, navigateToFirstItem, activeDescendantId }) {
     const internalRef = (0, external_react_namespaceObject.useRef)(null);
     const inputRef = externalInputRef ?? internalRef;
     (0, external_react_namespaceObject.useEffect)(()=>{
@@ -39,6 +39,13 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
     }, [
         inputRef
     ]);
+    const handleClearButtonKeyDown = (e)=>{
+        if ('Tab' === e.key) {
+            e.preventDefault();
+            inputRef.current?.focus();
+            if (!e.shiftKey) navigateToFirstItem?.();
+        }
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_styles_cjs_namespaceObject.StyledSearchForm, {
         autoComplete: "off",
         className: "searchbox-form",
@@ -70,9 +77,11 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
                     "aria-activedescendant": activeDescendantId
                 }),
                 value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                    ref: clearButtonRef,
                     type: "button",
                     className: "searchbox-clear",
                     onClick: clear,
+                    onKeyDown: handleClearButtonKeyDown,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
                         name: "close",
                         size: "16px"

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

@@ -4,7 +4,9 @@ interface SearchBoxProps {
     clear: () => void;
     placeholder?: string;
     inputRef?: React.RefObject<HTMLInputElement | null>;
+    clearButtonRef?: React.RefObject<HTMLButtonElement | null>;
     onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
+    navigateToFirstItem?: () => void;
     activeDescendantId?: string;
 }
 export declare const SearchBox: import("react").NamedExoticComponent<SearchBoxProps>;

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

@@ -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;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,sDAgDpB,CAAC"}
+{"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,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC3D,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,sDAmEpB,CAAC"}

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

@@ -3,7 +3,7 @@ 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...', inputRef: externalInputRef, onNavigationKeyDown, activeDescendantId }) {
+const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, clearButtonRef, onNavigationKeyDown, navigateToFirstItem, activeDescendantId }) {
     const internalRef = useRef(null);
     const inputRef = externalInputRef ?? internalRef;
     useEffect(()=>{
@@ -11,6 +11,13 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
     }, [
         inputRef
     ]);
+    const handleClearButtonKeyDown = (e)=>{
+        if ('Tab' === e.key) {
+            e.preventDefault();
+            inputRef.current?.focus();
+            if (!e.shiftKey) navigateToFirstItem?.();
+        }
+    };
     return /*#__PURE__*/ jsx(StyledSearchForm, {
         autoComplete: "off",
         className: "searchbox-form",
@@ -42,9 +49,11 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
                     "aria-activedescendant": activeDescendantId
                 }),
                 value && /*#__PURE__*/ jsx("button", {
+                    ref: clearButtonRef,
                     type: "button",
                     className: "searchbox-clear",
                     onClick: clear,
+                    onKeyDown: handleClearButtonKeyDown,
                     children: /*#__PURE__*/ jsx(ApIcon, {
                         name: "close",
                         size: "16px"

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

@@ -98,6 +98,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const listRef = (0, external_react_window_namespaceObject.useListRef)(null);
     const listViewRef = (0, external_react_namespaceObject.useRef)(null);
     const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
+    const clearButtonRef = (0, external_react_namespaceObject.useRef)(null);
     const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
         search
     ]);
@@ -117,21 +118,32 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, []);
     const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
         setActiveIndex(index);
-        if (index === SEARCH_BAR_INDEX) return void searchInputRef.current?.focus();
-        listRef.current?.scrollToRow({
-            index,
-            align: 'auto'
+        searchInputRef.current?.focus();
+        if (index !== SEARCH_BAR_INDEX) requestAnimationFrame(()=>{
+            listRef.current?.scrollToRow({
+                index,
+                align: 'auto'
+            });
         });
     }, [
         listRef
     ]);
+    const navigateToFirstItem = (0, external_react_namespaceObject.useCallback)(()=>{
+        const renderedItems = listViewRef.current?.renderedItems ?? [];
+        const firstIndex = getFirstSelectableIndex(renderedItems);
+        if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+    }, [
+        navigateToIndex
+    ]);
     const clearSearch = (0, external_react_namespaceObject.useCallback)(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
-        setActiveIndex(SEARCH_BAR_INDEX);
-    }, []);
+        navigateToIndex(SEARCH_BAR_INDEX);
+    }, [
+        navigateToIndex
+    ]);
     const handleSearch = (0, external_react_namespaceObject.useCallback)(async (query)=>{
         if (!query.trim()) {
             setSearchLoading(false);
@@ -162,30 +174,35 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = (0, external_react_namespaceObject.useCallback)(()=>{
         startTransition('back');
-        setActiveIndex(SEARCH_BAR_INDEX);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
             setCurrentParentItem(previousState.data.parentItem);
         }
-        if (isSearching) clearSearch();
+        setSearch('');
+        setSearchedItems([]);
+        setSearchLoading(false);
+        setIsSearchingInitialItems(true);
+        const restoredIndex = previousState?.data.activeIndex ?? SEARCH_BAR_INDEX;
+        navigateToIndex(restoredIndex);
         onBack?.();
     }, [
         navigationStack,
-        isSearching,
         onBack,
-        clearSearch,
-        startTransition
+        startTransition,
+        navigateToIndex
     ]);
-    const handleItemSelect = (0, external_react_namespaceObject.useCallback)(async (item)=>{
+    const handleItemSelect = (0, external_react_namespaceObject.useCallback)(async (item, index)=>{
         if (!item.children) return void onItemSelect(item);
         setChildrenLoading(true);
         const nestedItems = 'function' == typeof item.children ? await item.children(item.id, item.name) : item.children;
+        const savedIndex = isSearching ? SEARCH_BAR_INDEX : index ?? activeIndex;
         navigationStack.push({
             title: currentParentItem?.name || title,
             data: {
                 items,
-                parentItem: currentParentItem
+                parentItem: currentParentItem,
+                activeIndex: savedIndex
             }
         });
         setItems(nestedItems);
@@ -199,6 +216,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         currentParentItem,
         title,
         items,
+        activeIndex,
+        isSearching,
         clearSearch,
         startTransition,
         onItemSelect
@@ -221,7 +240,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 ...stackItem,
                 data: {
                     items: newInitialItems,
-                    parentItem: null
+                    parentItem: null,
+                    activeIndex: stackItem.data.activeIndex
                 }
             };
             const updatedParentItem = findItemById(newInitialItems, stackItem.data.parentItem.id);
@@ -231,7 +251,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 ...stackItem,
                 data: {
                     items: updatedItems,
-                    parentItem: updatedParentItem
+                    parentItem: updatedParentItem,
+                    activeIndex: stackItem.data.activeIndex
                 }
             };
         });
@@ -260,16 +281,11 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         if (isTransitioning) return;
         const renderedItems = listViewRef.current?.renderedItems ?? [];
         const navigateDown = ()=>{
-            if (activeIndex === SEARCH_BAR_INDEX) {
-                const firstIndex = getFirstSelectableIndex(renderedItems);
-                if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
-            } else {
+            if (activeIndex === SEARCH_BAR_INDEX) navigateToFirstItem();
+            else {
                 const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 'down');
                 if (nextIndex !== SEARCH_BAR_INDEX) navigateToIndex(nextIndex);
-                else {
-                    const firstIndex = getFirstSelectableIndex(renderedItems);
-                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
-                }
+                else navigateToFirstItem();
             }
         };
         const navigateUp = ()=>{
@@ -284,9 +300,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 e.preventDefault();
                 navigateUp();
                 break;
+            case ' ':
             case 'Enter':
                 {
-                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    if (activeIndex === SEARCH_BAR_INDEX) return;
                     const renderItem = renderedItems[activeIndex];
                     if (renderItem?.type === 'item') {
                         e.preventDefault();
@@ -309,18 +326,20 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 handleBackTransition();
                 break;
             case 'Tab':
+                if (activeIndex === SEARCH_BAR_INDEX && search.length > 0 && !e.shiftKey) break;
                 e.preventDefault();
-                if (e.shiftKey) navigateUp();
-                else navigateDown();
+                if (activeIndex === SEARCH_BAR_INDEX && e.shiftKey) break;
+                if (e.shiftKey) {
+                    navigateUp();
+                    const nextUp = getNextSelectableIndex(renderedItems, activeIndex, 'up');
+                    if (nextUp === SEARCH_BAR_INDEX && search.length > 0) clearButtonRef.current?.focus();
+                } else navigateDown();
                 break;
             case 'Home':
-                {
-                    if (activeIndex === SEARCH_BAR_INDEX) break;
-                    e.preventDefault();
-                    const firstIndex = getFirstSelectableIndex(renderedItems);
-                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
-                    break;
-                }
+                if (activeIndex === SEARCH_BAR_INDEX) break;
+                e.preventDefault();
+                navigateToFirstItem();
+                break;
             case 'End':
                 {
                     if (activeIndex === SEARCH_BAR_INDEX) break;
@@ -336,6 +355,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         activeIndex,
         navigationStack.canGoBack,
         navigateToIndex,
+        navigateToFirstItem,
         handleItemSelect,
         handleBackTransition
     ]);
@@ -386,7 +406,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                     clear: clearSearch,
                     placeholder: "Search",
                     inputRef: searchInputRef,
+                    clearButtonRef: clearButtonRef,
                     onNavigationKeyDown: handleNavigationKeyDown,
+                    navigateToFirstItem: navigateToFirstItem,
                     activeDescendantId: activeDescendantId
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {

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

@@ -1 +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;AAwC3F,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;AAgDD,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,2CAsZjB"}
+{"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;AAwC3F,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;AAgDD,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,2CAocjB"}

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

@@ -70,6 +70,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const listRef = useListRef(null);
     const listViewRef = useRef(null);
     const searchInputRef = useRef(null);
+    const clearButtonRef = useRef(null);
     const isSearching = useMemo(()=>search.length > 0, [
         search
     ]);
@@ -89,21 +90,32 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, []);
     const navigateToIndex = useCallback((index)=>{
         setActiveIndex(index);
-        if (index === SEARCH_BAR_INDEX) return void searchInputRef.current?.focus();
-        listRef.current?.scrollToRow({
-            index,
-            align: 'auto'
+        searchInputRef.current?.focus();
+        if (index !== SEARCH_BAR_INDEX) requestAnimationFrame(()=>{
+            listRef.current?.scrollToRow({
+                index,
+                align: 'auto'
+            });
         });
     }, [
         listRef
     ]);
+    const navigateToFirstItem = useCallback(()=>{
+        const renderedItems = listViewRef.current?.renderedItems ?? [];
+        const firstIndex = getFirstSelectableIndex(renderedItems);
+        if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+    }, [
+        navigateToIndex
+    ]);
     const clearSearch = useCallback(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
-        setActiveIndex(SEARCH_BAR_INDEX);
-    }, []);
+        navigateToIndex(SEARCH_BAR_INDEX);
+    }, [
+        navigateToIndex
+    ]);
     const handleSearch = useCallback(async (query)=>{
         if (!query.trim()) {
             setSearchLoading(false);
@@ -134,30 +146,35 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = useCallback(()=>{
         startTransition('back');
-        setActiveIndex(SEARCH_BAR_INDEX);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
             setCurrentParentItem(previousState.data.parentItem);
         }
-        if (isSearching) clearSearch();
+        setSearch('');
+        setSearchedItems([]);
+        setSearchLoading(false);
+        setIsSearchingInitialItems(true);
+        const restoredIndex = previousState?.data.activeIndex ?? SEARCH_BAR_INDEX;
+        navigateToIndex(restoredIndex);
         onBack?.();
     }, [
         navigationStack,
-        isSearching,
         onBack,
-        clearSearch,
-        startTransition
+        startTransition,
+        navigateToIndex
     ]);
-    const handleItemSelect = useCallback(async (item)=>{
+    const handleItemSelect = useCallback(async (item, index)=>{
         if (!item.children) return void onItemSelect(item);
         setChildrenLoading(true);
         const nestedItems = 'function' == typeof item.children ? await item.children(item.id, item.name) : item.children;
+        const savedIndex = isSearching ? SEARCH_BAR_INDEX : index ?? activeIndex;
         navigationStack.push({
             title: currentParentItem?.name || title,
             data: {
                 items,
-                parentItem: currentParentItem
+                parentItem: currentParentItem,
+                activeIndex: savedIndex
             }
         });
         setItems(nestedItems);
@@ -171,6 +188,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         currentParentItem,
         title,
         items,
+        activeIndex,
+        isSearching,
         clearSearch,
         startTransition,
         onItemSelect
@@ -193,7 +212,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 ...stackItem,
                 data: {
                     items: newInitialItems,
-                    parentItem: null
+                    parentItem: null,
+                    activeIndex: stackItem.data.activeIndex
                 }
             };
             const updatedParentItem = findItemById(newInitialItems, stackItem.data.parentItem.id);
@@ -203,7 +223,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 ...stackItem,
                 data: {
                     items: updatedItems,
-                    parentItem: updatedParentItem
+                    parentItem: updatedParentItem,
+                    activeIndex: stackItem.data.activeIndex
                 }
             };
         });
@@ -232,16 +253,11 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         if (isTransitioning) return;
         const renderedItems = listViewRef.current?.renderedItems ?? [];
         const navigateDown = ()=>{
-            if (activeIndex === SEARCH_BAR_INDEX) {
-                const firstIndex = getFirstSelectableIndex(renderedItems);
-                if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
-            } else {
+            if (activeIndex === SEARCH_BAR_INDEX) navigateToFirstItem();
+            else {
                 const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 'down');
                 if (nextIndex !== SEARCH_BAR_INDEX) navigateToIndex(nextIndex);
-                else {
-                    const firstIndex = getFirstSelectableIndex(renderedItems);
-                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
-                }
+                else navigateToFirstItem();
             }
         };
         const navigateUp = ()=>{
@@ -256,9 +272,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 e.preventDefault();
                 navigateUp();
                 break;
+            case ' ':
             case 'Enter':
                 {
-                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    if (activeIndex === SEARCH_BAR_INDEX) return;
                     const renderItem = renderedItems[activeIndex];
                     if (renderItem?.type === 'item') {
                         e.preventDefault();
@@ -281,18 +298,20 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 handleBackTransition();
                 break;
             case 'Tab':
+                if (activeIndex === SEARCH_BAR_INDEX && search.length > 0 && !e.shiftKey) break;
                 e.preventDefault();
-                if (e.shiftKey) navigateUp();
-                else navigateDown();
+                if (activeIndex === SEARCH_BAR_INDEX && e.shiftKey) break;
+                if (e.shiftKey) {
+                    navigateUp();
+                    const nextUp = getNextSelectableIndex(renderedItems, activeIndex, 'up');
+                    if (nextUp === SEARCH_BAR_INDEX && search.length > 0) clearButtonRef.current?.focus();
+                } else navigateDown();
                 break;
             case 'Home':
-                {
-                    if (activeIndex === SEARCH_BAR_INDEX) break;
-                    e.preventDefault();
-                    const firstIndex = getFirstSelectableIndex(renderedItems);
-                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
-                    break;
-                }
+                if (activeIndex === SEARCH_BAR_INDEX) break;
+                e.preventDefault();
+                navigateToFirstItem();
+                break;
             case 'End':
                 {
                     if (activeIndex === SEARCH_BAR_INDEX) break;
@@ -308,6 +327,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         activeIndex,
         navigationStack.canGoBack,
         navigateToIndex,
+        navigateToFirstItem,
         handleItemSelect,
         handleBackTransition
     ]);
@@ -358,7 +378,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                     clear: clearSearch,
                     placeholder: "Search",
                     inputRef: searchInputRef,
+                    clearButtonRef: clearButtonRef,
                     onNavigationKeyDown: handleNavigationKeyDown,
+                    navigateToFirstItem: navigateToFirstItem,
                     activeDescendantId: activeDescendantId
                 }),
                 /*#__PURE__*/ jsx(AnimatedContainer, {

package/dist/core/tokens/css/theme-variables.css

@@ -1,6 +1,6 @@
 @import "./variables.css";
 
-body.light, .light {
+body.light, .apollo-design.light {
   --color-background: #ffffff;
   --color-background-secondary: #f4f5f7;
   --color-background-inverse: #182027;
@@ -125,7 +125,7 @@ body.light, .light {
   color-scheme: light;
 }
 
-body.light-hc, .light-hc {
+body.light-hc, .apollo-design.light-hc {
   --color-background: #ffffff;
   --color-background-secondary: #f4f5f7;
   --color-background-inverse: #182027;
@@ -250,7 +250,7 @@ body.light-hc, .light-hc {
   color-scheme: light;
 }
 
-body.dark, .dark {
+body.dark, .apollo-design.dark {
   --color-background: #182027;
   --color-background-secondary: #273139;
   --color-background-inverse: #f8f9fa;
@@ -375,7 +375,7 @@ body.dark, .dark {
   color-scheme: dark;
 }
 
-body.dark-hc, .dark-hc {
+body.dark-hc, .apollo-design.dark-hc {
   --color-background: #182027;
   --color-background-secondary: #273139;
   --color-background-inverse: #f8f9fa;

package/dist/core/tokens/scss/theme-variables.scss

@@ -1,6 +1,6 @@
 @import "./variables";
 
-body.light, .light {
+body.light, .apollo-design.light {
   --color-background: #{$color-background-light};
   --color-background-secondary: #{$color-background-secondary-light};
   --color-background-inverse: #{$color-background-inverse-light};
@@ -125,7 +125,7 @@ body.light, .light {
   color-scheme: light;
 }
 
-body.light-hc, .light-hc {
+body.light-hc, .apollo-design.light-hc {
   --color-background: #{$color-background-light-hc};
   --color-background-secondary: #{$color-background-secondary-light-hc};
   --color-background-inverse: #{$color-background-inverse-light-hc};
@@ -250,7 +250,7 @@ body.light-hc, .light-hc {
   color-scheme: light;
 }
 
-body.dark, .dark {
+body.dark, .apollo-design.dark {
   --color-background: #{$color-background-dark};
   --color-background-secondary: #{$color-background-secondary-dark};
   --color-background-inverse: #{$color-background-inverse-dark};
@@ -375,7 +375,7 @@ body.dark, .dark {
   color-scheme: dark;
 }
 
-body.dark-hc, .dark-hc {
+body.dark-hc, .apollo-design.dark-hc {
   --color-background: #{$color-background-dark-hc};
   --color-background-secondary: #{$color-background-secondary-dark-hc};
   --color-background-inverse: #{$color-background-inverse-dark-hc};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.58.0",
+  "version": "3.58.2",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -200,8 +200,8 @@
     "use-sync-external-store": "^1.2.0",
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
-    "@uipath/apollo-core": "5.7.3",
-    "@uipath/apollo-wind": "1.2.0"
+    "@uipath/apollo-core": "5.7.4",
+    "@uipath/apollo-wind": "1.2.1"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",