@antscorp/antsomi-ui 1.3.7-beta.24 → 1.3.7-beta.26

package/es/components/molecules/SearchPopover/SearchPopover.js

@@ -5,7 +5,7 @@ import { StyledInput } from './styled';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 import { SearchIcon } from '../../icons';
 export const SearchPopover = props => {
-    const { inputSearchProps = {}, ...popoverProps } = props;
+    const { inputSearchProps = {}, inputSearchRef, ...popoverProps } = props;
     const { overlayClassName, arrow = false, children, content, trigger = ['click'], ...restPopoverProps } = popoverProps;
-    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
+    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { ref: inputSearchRef, placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
 };

package/es/components/molecules/SearchPopover/styled.d.ts

@@ -1 +1,12 @@
-export declare const StyledInput: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+    readonly DefaultInput: import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+        Group: import("react").FC<import("antd/es/input").GroupProps>;
+        Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+        TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    };
+    readonly CustomSearch: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    readonly TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+}, any, {}, never>;

package/es/components/molecules/SearchPopover/styled.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Input } from '../../atoms/Input';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledInput = styled(props => _jsx(Input, { ...props })) `
+export const StyledInput = styled(Input) `
   &.antsomi-input-group-wrapper {
     padding: 8px 10px;
     border-bottom: 1px solid var(--divider-1);

package/es/components/molecules/SearchPopover/types.d.ts

@@ -1,7 +1,7 @@
-import { PopoverProps } from 'antd';
-import { InputProps } from '../../atoms/Input';
+import type { InputRef, PopoverProps } from 'antd';
+import type { InputProps } from '../../atoms/Input';
 import React, { PropsWithChildren } from 'react';
-import { MenuInlineProps } from '../VirtualizedMenu/types';
+import type { MenuInlineProps } from '../VirtualizedMenu/types';
 export type SearchConfig = {
     searchWithKey?: boolean;
 };
@@ -9,6 +9,7 @@ export type SearchPopoverProps = PropsWithChildren<{
     inputSearchProps?: InputProps & {
         searchConfig?: SearchConfig;
     };
+    inputSearchRef?: React.RefObject<InputRef>;
     isAllowEmpty?: boolean;
     noItemContent?: React.ReactNode;
 } & PopoverProps>;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { ItemType } from '../../types';
-export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Partial<{
-    items: ItemType[];
+/// <reference types="react" />
+export declare const MenuInline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Partial<{
+    items: import("../../types").ItemType[];
     inlineIndent: number;
     inlinePadding: number;
     itemSpacing: number;
@@ -12,13 +11,13 @@ export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoti
     focusedKey: string;
     expanded: string[];
     onClick: (args: {
-        item: ItemType;
-        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
+        item: import("../../types").ItemType;
+        domEvent?: import("react").MouseEvent<Element, MouseEvent> | undefined;
         elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: ItemType, others: {
-        expandEl: React.ReactNode;
-    }) => React.ReactNode);
+    action: import("react").ReactNode | ((item: import("../../types").ItemType, others: {
+        expandEl: import("react").ReactNode;
+    }) => import("react").ReactNode);
 }> & {
     mode?: "inline" | undefined;
-} & React.RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;
+} & import("react").RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -1,334 +1,55 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState, useCallback, useRef, memo, } from 'react';
+import { forwardRef, useImperativeHandle, useRef, memo } from 'react';
 import { StyledAutoSizer, VirtualizedMenuContainer } from '../../styled';
 import { INLINE_INDENT, INLINE_PADDING, ITEM_SIZE, ITEM_SPACING } from '../../config';
-import { CLS, serializeItems, getItemSize } from '../../utils';
+import { CLS, getItemSize } from '../../utils';
 import { Item } from '../Item';
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 import clsx from 'clsx';
-import { findNodes, getChildrenRecursively, getPathToNode, } from '@antscorp/antsomi-ui/es/utils/tree';
+import { useTreeState } from './hooks/useTreeState';
+import { useVisibleItems } from './hooks/useVisibleItems';
+import { useFocusManagement } from './hooks/useFocusManagement';
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
+import { useItemInteraction } from './hooks/useItemInteraction';
 const innerElementType = forwardRef(({ style, ...rest }, ref) => (_jsx("ul", { role: "tree", "aria-label": "Virtualized Menu", ref: ref, style: style, ...rest })));
-/**
- * Optimized function to compute visible items using breadth-first traversal
- * instead of filtering all items
- */
-const computeVisibleItemsOptimized = (normalizeTreeItems, rootItemIds, expandedKeys) => {
-    const visibleItems = [];
-    const queue = Array.from(rootItemIds);
-    // Process queue in breadth-first manner
-    let index = 0;
-    while (index < queue.length) {
-        const itemId = queue[index++];
-        const item = normalizeTreeItems.get(itemId);
-        if (!item)
-            continue;
-        visibleItems.push(item);
-        // Add children to queue only if this item is expanded
-        if (expandedKeys.has(item.id) && item.childIds.length > 0) {
-            queue.push(...item.childIds);
-        }
-    }
-    return visibleItems;
-};
-/**
- * Alternative: Path-based optimization with memoization
- * Caches path calculations to avoid redundant work
- */
-const computeVisibleItemsWithPathCache = (normalizeTreeItems, expandedKeys, pathCache) => {
-    const visibleItems = [];
-    for (const item of normalizeTreeItems.values()) {
-        const isRootItem = item.level === 0;
-        if (isRootItem) {
-            visibleItems.push(item);
-            continue;
-        }
-        if (!item.parentId)
-            continue;
-        // Use cached path or compute and cache
-        let pathToParent = pathCache.get(item.parentId);
-        if (!pathToParent) {
-            pathToParent = getPathToNode(item.parentId, normalizeTreeItems);
-            pathCache.set(item.parentId, pathToParent);
-        }
-        // Check if all parents are expanded
-        const allParentExpanded = pathToParent.every(parent => expandedKeys.has(parent.id));
-        if (allParentExpanded) {
-            visibleItems.push(item);
-        }
-    }
-    return visibleItems;
-};
-/**
- * Level-based optimization: Process items level by level
- * More efficient for deep trees with many collapsed branches
- */
-const computeVisibleItemsByLevel = (normalizeTreeItems, rootItemIds, expandedKeys) => {
-    const visibleItems = [];
-    const expandedParents = new Set();
-    // Add root items and track expanded ones
-    for (const rootId of rootItemIds) {
-        const rootItem = normalizeTreeItems.get(rootId);
-        if (rootItem) {
-            visibleItems.push(rootItem);
-            if (expandedKeys.has(rootId)) {
-                expandedParents.add(rootId);
-            }
-        }
-    }
-    // Process each level
-    let currentLevelParents = expandedParents;
-    let currentLevel = 1;
-    while (currentLevelParents.size > 0) {
-        const nextLevelParents = new Set();
-        // Process all items at current level
-        for (const parentId of currentLevelParents) {
-            const parent = normalizeTreeItems.get(parentId);
-            if (!parent)
-                continue;
-            // Add all children of this expanded parent
-            for (const childId of parent.childIds) {
-                const child = normalizeTreeItems.get(childId);
-                if (child && child.level === currentLevel) {
-                    visibleItems.push(child);
-                    // Track if this child is expanded for next level
-                    if (expandedKeys.has(childId)) {
-                        nextLevelParents.add(childId);
-                    }
-                }
-            }
-        }
-        currentLevelParents = nextLevelParents;
-        currentLevel++;
-    }
-    return visibleItems;
-};
 const MenuInlineInner = forwardRef((props, ref) => {
     const { items: itemsProp = [], expanded: expandedProp = [], selected: selectedProp = [], focusedKey, inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, selectable = false, action, className, onClick, } = props;
-    const [focusId, setFocusId] = useState(null);
-    const [expandedKeys, setExpandedKeys] = useState(new Set());
-    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    // Refs for list and items
     const listRef = useRef(null);
     const itemRefs = useRef(new Map());
-    const [{ items: normalizeTreeItems, rootItemIds }, setTreeState] = useState({
-        items: new Map(),
-        rootItemIds: new Set(),
+    const isMouseDownRef = useRef(false);
+    // Tree state management
+    const { normalizeTreeItems, rootItemIds, expandedKeys, selectedKeys, handleExpandItems, handleCollapseItems, handleToggleExpandItem, handleSelectItem, expandAll, } = useTreeState({
+        items: itemsProp,
+        expanded: expandedProp,
+        selected: selectedProp,
+        selectable,
     });
-    // Cache for path calculations to avoid redundant work
-    const pathCache = useMemo(() => new Map(), []);
-    const rootNodes = useMemo(() => findNodes(node => rootItemIds.has(node.id), normalizeTreeItems), [normalizeTreeItems, rootItemIds]);
-    useDeepCompareEffect(() => {
-        setSelectedKeys(new Set(selectedProp));
-    }, [selectedProp]);
-    useDeepCompareEffect(() => {
-        setExpandedKeys(new Set(expandedProp));
-    }, [expandedProp]);
-    // Sync external focusedKey prop with internal focusId state for auto-scrolling
-    useEffect(() => {
-        if (focusedKey !== undefined) {
-            setFocusId(focusedKey);
-        }
-    }, [focusedKey]);
-    useEffect(() => {
-        setTreeState(serializeItems({
-            items: itemsProp,
-        }));
-    }, [itemsProp]);
-    // Clear path cache when tree structure changes
-    useEffect(() => {
-        pathCache.clear();
-    }, [normalizeTreeItems, pathCache]);
-    // Optimized visible items calculation
-    const visibleItems = useMemo(() => {
-        if (normalizeTreeItems.size === 0)
-            return [];
-        // Choose optimization strategy based on tree characteristics
-        const treeDepth = Math.max(...Array.from(normalizeTreeItems.values()).map(item => item.level));
-        const totalItems = normalizeTreeItems.size;
-        const expandedCount = expandedKeys.size;
-        // Strategy selection heuristics:
-        // - For shallow trees with many expanded items: use breadth-first
-        // - For deep trees with few expanded items: use level-based
-        // - For medium trees: use path-cache optimization
-        if (treeDepth <= 3 && expandedCount > totalItems * 0.3) {
-            // Shallow tree with many expanded items
-            return computeVisibleItemsOptimized(normalizeTreeItems, rootItemIds, expandedKeys);
-        }
-        if (treeDepth > 5 && expandedCount < totalItems * 0.2) {
-            // Deep tree with few expanded items
-            return computeVisibleItemsByLevel(normalizeTreeItems, rootItemIds, expandedKeys);
-        }
-        // Medium complexity - use cached path approach
-        return computeVisibleItemsWithPathCache(normalizeTreeItems, expandedKeys, pathCache);
-    }, [expandedKeys, normalizeTreeItems, rootItemIds, pathCache]);
-    const handleCollapseItems = useCallback((items) => {
-        setExpandedKeys(prev => {
-            const newOpenKeys = new Set(prev);
-            items.forEach(({ data }) => {
-                if (prev.has(data.key)) {
-                    newOpenKeys.delete(data.key);
-                }
-            });
-            return newOpenKeys;
-        });
-    }, []);
-    useEffect(() => {
-        if (focusId && listRef.current) {
-            const index = visibleItems.findIndex(item => item.id === focusId);
-            if (index !== -1) {
-                listRef.current.scrollToItem(index, 'auto');
-            }
-        }
-    }, [focusId, visibleItems]);
-    const handleExpandItems = useCallback((items, deep = 0) => {
-        setExpandedKeys(prev => {
-            const updatedExpandedKeys = new Set(prev);
-            items.forEach(item => {
-                const normalizeItem = normalizeTreeItems.get(item.data.key);
-                if (normalizeItem) {
-                    updatedExpandedKeys.add(normalizeItem.id);
-                    if (deep > 0) {
-                        getChildrenRecursively(normalizeItem.id, normalizeTreeItems, normalizeItem.level + deep).forEach(v => updatedExpandedKeys.add(v.id));
-                    }
-                }
-            });
-            return updatedExpandedKeys;
-        });
-    }, [normalizeTreeItems]);
-    useImperativeHandle(ref, () => ({
-        expandAll: () => {
-            handleExpandItems(rootNodes, Infinity);
-        },
-    }));
-    const handleSelectItem = useCallback((item) => {
-        const { key } = item.data;
-        if (!selectable || selectedKeys.has(key) || item.data.displayOnly)
-            return;
-        setSelectedKeys(new Set([key]));
-    }, [selectable, selectedKeys]);
-    const handleToggleExpandItem = useCallback((item) => {
-        const { key } = item.data;
-        const isExpanded = expandedKeys.has(key);
-        if (isExpanded) {
-            handleCollapseItems([item]);
-        }
-        else {
-            handleExpandItems([item]);
-        }
-    }, [expandedKeys, handleCollapseItems, handleExpandItems]);
-    const handleClickItem = useCallback((args) => {
-        const { item, elKey, domEvent } = args;
-        const node = normalizeTreeItems.get(item.id);
-        if (!node || node.data.displayOnly)
-            return;
-        const hasChilren = node.childIds.length > 0;
-        handleSelectItem(node);
-        if (hasChilren) {
-            handleToggleExpandItem(node);
-        }
-        setFocusId(node.id);
-        onClick?.({ item: node.data, elKey, domEvent });
-    }, [normalizeTreeItems, handleSelectItem, handleToggleExpandItem, onClick]);
-    // Helper function to find next focusable item (skip displayOnly items)
-    const findNextFocusableItem = useCallback((startIndex, direction) => {
-        const increment = direction === 'next' ? 1 : -1;
-        let index = startIndex + increment;
-        while (index >= 0 && index < visibleItems.length) {
-            const item = visibleItems[index];
-            if (!item.data.displayOnly) {
-                return index;
-            }
-            index += increment;
-        }
-        return startIndex;
-    }, [visibleItems]);
-    const findFirstFocusableItem = useCallback(() => {
-        for (let i = 0; i < visibleItems.length; i++) {
-            if (!visibleItems[i].data.displayOnly) {
-                return i;
-            }
-        }
-        return 0;
-    }, [visibleItems]);
-    const findLastFocusableItem = useCallback(() => {
-        for (let i = visibleItems.length - 1; i >= 0; i--) {
-            if (!visibleItems[i].data.displayOnly) {
-                return i;
-            }
-        }
-        return visibleItems.length - 1;
-    }, [visibleItems]);
-    const handleKeyDown = useCallback((e) => {
-        if (visibleItems.length === 0)
-            return;
-        e.preventDefault();
-        const currentFocusIndex = visibleItems.findIndex(item => item.id === focusId);
-        if (currentFocusIndex === -1) {
-            const firstFocusableIndex = findFirstFocusableItem();
-            setFocusId(visibleItems[firstFocusableIndex]?.id ?? null);
-            return;
-        }
-        const currentFocusItem = visibleItems[currentFocusIndex];
-        switch (e.key) {
-            case 'ArrowDown': {
-                const nextFocusIndex = findNextFocusableItem(currentFocusIndex, 'next');
-                setFocusId(visibleItems[nextFocusIndex].id);
-                break;
-            }
-            case 'ArrowUp': {
-                const nextFocusIndex = findNextFocusableItem(currentFocusIndex, 'prev');
-                setFocusId(visibleItems[nextFocusIndex].id);
-                break;
-            }
-            case 'ArrowRight': {
-                if (currentFocusItem.childIds.length > 0 && !expandedKeys.has(currentFocusItem.id)) {
-                    handleExpandItems([currentFocusItem]);
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                if (currentFocusItem.childIds.length > 0 && expandedKeys.has(currentFocusItem.id)) {
-                    handleCollapseItems([currentFocusItem]);
-                }
-                else if (currentFocusItem?.parentId) {
-                    // Find parent and ensure it's focusable
-                    const parentItem = normalizeTreeItems.get(currentFocusItem.parentId);
-                    if (parentItem && !parentItem.data.displayOnly) {
-                        setFocusId(currentFocusItem.parentId);
-                    }
-                }
-                break;
-            }
-            case 'Home': {
-                const firstFocusableIndex = findFirstFocusableItem();
-                setFocusId(visibleItems[firstFocusableIndex].id);
-                break;
-            }
-            case 'End': {
-                const lastFocusableIndex = findLastFocusableItem();
-                setFocusId(visibleItems[lastFocusableIndex].id);
-                break;
-            }
-            case 'Enter': {
-                if (currentFocusItem && !currentFocusItem.data.displayOnly) {
-                    handleSelectItem(currentFocusItem);
-                    if (currentFocusItem.childIds.length > 0) {
-                        handleToggleExpandItem(currentFocusItem);
-                    }
-                    onClick?.({
-                        item: currentFocusItem.data,
-                        elKey: 'item',
-                    });
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    }, [
+    // Visible items computation
+    const visibleItems = useVisibleItems(normalizeTreeItems, rootItemIds, expandedKeys);
+    // Focus management
+    const { focusId, setFocusId, findNextFocusableItem, findFirstFocusableItem, findLastFocusableItem, handleFocus, } = useFocusManagement({
+        visibleItems,
+        focusedKey,
+        listRef,
+        itemRefs,
+        isMouseDownRef,
+    });
+    // Item interaction
+    const { handleClickItem, handleMouseDown } = useItemInteraction({
+        normalizeTreeItems,
+        handleSelectItem,
+        handleToggleExpandItem,
+        setFocusId,
+        onClick,
+        isMouseDownRef,
+    });
+    // Keyboard navigation
+    const { handleKeyDown } = useKeyboardNavigation({
         visibleItems,
         focusId,
         expandedKeys,
-        onClick,
+        normalizeTreeItems,
+        setFocusId,
         handleExpandItems,
         handleCollapseItems,
         handleSelectItem,
@@ -336,20 +57,12 @@ const MenuInlineInner = forwardRef((props, ref) => {
         findNextFocusableItem,
         findFirstFocusableItem,
         findLastFocusableItem,
-        normalizeTreeItems,
-    ]);
-    const handleFocus = (e) => {
-        let isClickFont = false;
-        for (const itemEl of itemRefs.current.values()) {
-            if (isClickFont)
-                break;
-            isClickFont = itemEl.isSameNode(e.target) || itemEl.contains(e.target);
-        }
-        if (!isClickFont && !focusId && visibleItems.length > 0) {
-            const firstFocusableIndex = findFirstFocusableItem();
-            setFocusId(visibleItems[firstFocusableIndex]?.id || null);
-        }
-    };
+        onClick,
+    });
+    // Expose expandAll method via ref
+    useImperativeHandle(ref, () => ({
+        expandAll,
+    }));
     const itemData = {
         itemSpacing,
         inlineIndent,
@@ -368,6 +81,6 @@ const MenuInlineInner = forwardRef((props, ref) => {
         })),
         onClick: handleClickItem,
     };
-    return (_jsx(StyledAutoSizer, { className: clsx(CLS.Root.default, className), tabIndex: 0, onFocus: handleFocus, onKeyDown: handleKeyDown, children: autoSize => (_jsx(VirtualizedMenuContainer, { ref: listRef, className: clsx(CLS.MenuInline.default), itemSize: getItemSize(itemSize, itemSpacing), itemCount: visibleItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, itemData: itemData, useIsScrolling: true, children: Item })) }));
+    return (_jsx(StyledAutoSizer, { className: clsx(CLS.Root.default, className), tabIndex: 0, onFocus: handleFocus, onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, children: autoSize => (_jsx(VirtualizedMenuContainer, { ref: listRef, className: clsx(CLS.MenuInline.default), itemSize: getItemSize(itemSize, itemSpacing), itemCount: visibleItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, itemData: itemData, useIsScrolling: true, children: Item })) }));
 });
 export const MenuInline = memo(MenuInlineInner);

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/index.d.ts

@@ -0,0 +1,9 @@
+export { useTreeState } from './useTreeState';
+export type { UseTreeStateReturn, UseTreeStateProps } from './useTreeState';
+export { useVisibleItems } from './useVisibleItems';
+export { useFocusManagement } from './useFocusManagement';
+export type { UseFocusManagementReturn, UseFocusManagementProps } from './useFocusManagement';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export type { UseKeyboardNavigationReturn, UseKeyboardNavigationProps, } from './useKeyboardNavigation';
+export { useItemInteraction } from './useItemInteraction';
+export type { UseItemInteractionReturn, UseItemInteractionProps } from './useItemInteraction';

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/index.js

@@ -0,0 +1,5 @@
+export { useTreeState } from './useTreeState';
+export { useVisibleItems } from './useVisibleItems';
+export { useFocusManagement } from './useFocusManagement';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useItemInteraction } from './useItemInteraction';

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useFocusManagement.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { VariableSizeList } from 'react-window';
+import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { ItemType } from '../../../types';
+export interface UseFocusManagementReturn {
+    focusId: string | null;
+    setFocusId: (id: string | null) => void;
+    findNextFocusableItem: (startIndex: number, direction: 'next' | 'prev') => number;
+    findFirstFocusableItem: () => number;
+    findLastFocusableItem: () => number;
+    handleFocus: (e: React.FocusEvent) => void;
+}
+export interface UseFocusManagementProps {
+    visibleItems: NormalizedNode<ItemType>[];
+    focusedKey?: string;
+    listRef: React.RefObject<VariableSizeList | null>;
+    itemRefs: React.RefObject<Map<string, HTMLLIElement>>;
+    isMouseDownRef: React.MutableRefObject<boolean>;
+}
+/**
+ * Custom hook to manage focus state and navigation for tree items
+ */
+export declare const useFocusManagement: (props: UseFocusManagementProps) => UseFocusManagementReturn;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useFocusManagement.js

@@ -0,0 +1,81 @@
+import { useState, useCallback, useEffect } from 'react';
+/**
+ * Custom hook to manage focus state and navigation for tree items
+ */
+export const useFocusManagement = (props) => {
+    const { visibleItems, focusedKey, listRef, itemRefs, isMouseDownRef } = props;
+    const [focusId, setFocusId] = useState(null);
+    // Sync external focusedKey prop with internal focusId state for auto-scrolling
+    useEffect(() => {
+        if (focusedKey !== undefined) {
+            setFocusId(focusedKey);
+        }
+    }, [focusedKey]);
+    // Auto-scroll to focused item
+    useEffect(() => {
+        if (focusId && listRef.current) {
+            const index = visibleItems.findIndex(item => item.id === focusId);
+            if (index !== -1) {
+                listRef.current.scrollToItem(index, 'auto');
+            }
+        }
+    }, [focusId, visibleItems, listRef]);
+    // Helper function to find next focusable item (skip displayOnly items)
+    const findNextFocusableItem = useCallback((startIndex, direction) => {
+        const increment = direction === 'next' ? 1 : -1;
+        let index = startIndex + increment;
+        while (index >= 0 && index < visibleItems.length) {
+            const item = visibleItems[index];
+            if (!item.data.displayOnly) {
+                return index;
+            }
+            index += increment;
+        }
+        return startIndex;
+    }, [visibleItems]);
+    // Find first focusable item
+    const findFirstFocusableItem = useCallback(() => {
+        for (let i = 0; i < visibleItems.length; i++) {
+            if (!visibleItems[i].data.displayOnly) {
+                return i;
+            }
+        }
+        return 0;
+    }, [visibleItems]);
+    // Find last focusable item
+    const findLastFocusableItem = useCallback(() => {
+        for (let i = visibleItems.length - 1; i >= 0; i--) {
+            if (!visibleItems[i].data.displayOnly) {
+                return i;
+            }
+        }
+        return visibleItems.length - 1;
+    }, [visibleItems]);
+    // Handle focus event with auto-focusing logic
+    const handleFocus = useCallback((e) => {
+        // Skip auto-focusing if user is clicking on menu items
+        if (isMouseDownRef.current) {
+            return;
+        }
+        let isClickFont = false;
+        if (itemRefs.current) {
+            for (const itemEl of itemRefs.current.values()) {
+                if (isClickFont)
+                    break;
+                isClickFont = itemEl.isSameNode(e.target) || itemEl.contains(e.target);
+            }
+        }
+        if (!isClickFont && !focusId && visibleItems.length > 0) {
+            const firstFocusableIndex = findFirstFocusableItem();
+            setFocusId(visibleItems[firstFocusableIndex]?.id || null);
+        }
+    }, [isMouseDownRef, itemRefs, focusId, visibleItems, findFirstFocusableItem]);
+    return {
+        focusId,
+        setFocusId,
+        findNextFocusableItem,
+        findFirstFocusableItem,
+        findLastFocusableItem,
+        handleFocus,
+    };
+};

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useItemInteraction.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { ItemType, MenuInlineProps } from '../../../types';
+export interface UseItemInteractionReturn {
+    handleClickItem: (args: {
+        item: NormalizedNode<ItemType>;
+        elKey: 'item' | 'item-expand-el';
+        domEvent: React.MouseEvent;
+    }) => void;
+    handleMouseDown: () => void;
+}
+export interface UseItemInteractionProps {
+    normalizeTreeItems: Map<string, NormalizedNode<ItemType>>;
+    handleSelectItem: (item: NormalizedNode<ItemType>) => void;
+    handleToggleExpandItem: (item: NormalizedNode<ItemType>) => void;
+    setFocusId: (id: string) => void;
+    onClick?: MenuInlineProps['onClick'];
+    isMouseDownRef: React.MutableRefObject<boolean>;
+}
+/**
+ * Custom hook to handle user interactions with menu items
+ * Manages click events and mouse down state
+ */
+export declare const useItemInteraction: (props: UseItemInteractionProps) => UseItemInteractionReturn;