@antscorp/antsomi-ui 2.0.86-text-editor-beta.5 → 2.0.86

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

@@ -1,24 +1,14 @@
 import React from 'react';
-import { ItemType, MenuInlineProps } from '../../types';
+import { ItemType, MenuInlineProps, SerializedItemType } from '../../types';
 import { ListChildComponentProps } from 'react-window';
-import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
 export type MemoryData = {
     itemSpacing: number;
     inlineIndent: number;
     inlinePadding: number;
+    items: SerializedItemType[];
     selectedKeys: Set<string>;
     expandedKeys: Set<string>;
-    items: NormalizedNode<ItemType & {
-        ref: (el: HTMLLIElement) => void;
-    }>[];
-    normalizeTreeItems: Map<string, NormalizedNode<ItemType>>;
     action: MenuInlineProps['action'];
-    focusId: string | null;
-    onClick: (args: {
-        item: NormalizedNode<ItemType>;
-        index: number;
-        elKey: 'item' | 'item-expand-el';
-        domEvent: React.MouseEvent;
-    }) => void;
+    onClick: (item: ItemType, index: number) => void;
 };
 export declare const Item: React.MemoExoticComponent<(props: ListChildComponentProps<MemoryData>) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useEffect, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
 import { Typography } from '../../../../atoms/Typography';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
@@ -8,18 +8,11 @@ import { isEmpty } from 'lodash';
 import { CLS } from '../../utils';
 import { ExpandMoreIcon } from '@antscorp/antsomi-ui/es/components/icons';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-import { isDescendant } from '@antscorp/antsomi-ui/es/utils/tree';
 export const Item = memo((props) => {
     const { style = {}, data, index = 0 } = props;
-    const { inlineIndent, itemSpacing, inlinePadding, items, selectedKeys, expandedKeys, normalizeTreeItems, action, focusId, onClick, } = data || {};
-    const itemRef = useRef(null);
+    const { inlineIndent, itemSpacing, inlinePadding, items, selectedKeys, expandedKeys, action, onClick, } = data || {};
     const item = items[index];
-    const hasChildren = !isEmpty(item.data.children);
-    const isFocused = item.id === focusId;
-    const expanded = hasChildren && expandedKeys.has(item.data.key);
-    const selected = selectedKeys.has(item.data.key);
-    const disabled = item.data?.disabled;
-    const indentSize = item.level * inlineIndent;
+    const indentSize = ((item.level || 0) - 1) * inlineIndent;
     const itemStyle = {
         ...style,
         paddingLeft: indentSize + inlinePadding,
@@ -28,50 +21,29 @@ export const Item = memo((props) => {
         height: index === 0 ? Number(style.height) : Number(style.height) - itemSpacing,
     };
     const itemClassName = clsx(CLS.Item.default, {
-        [CLS.Item.selected]: selected,
-        [CLS.Item.expanded]: expanded,
-        [CLS.Item.disabled]: disabled,
-    }, item.data.className);
-    const handleItemRef = useCallback((el) => {
-        if (!el)
+        [CLS.Item.selected]: selectedKeys.has(item.key),
+        [CLS.Item.expanded]: expandedKeys.has(item.key),
+        [CLS.Item.disabled]: item?.disabled,
+    }, item.className);
+    const handleOnClick = () => {
+        if (!onClick || item?.disabled)
             return;
-        itemRef.current = el;
-        item.data.ref(el);
-    }, [item.data]);
-    const handleOnClick = (event, elKey) => {
-        if (!onClick || disabled)
-            return;
-        onClick({ item, index, elKey, domEvent: event });
+        onClick(item, index);
+    };
+    const renderLabel = () => {
+        if (typeof item?.label === 'string') {
+            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: item.label });
+        }
+        return item?.label;
     };
-    const labelContent = typeof item.data?.label === 'string' ? (_jsx(Typography.Text, { ellipsis: {
-            tooltip: {
-                destroyTooltipOnHide: true,
-            },
-        }, children: item.data.label })) : (item.data?.label);
-    const expandEl = (_jsx(ExpandMoreIcon, { size: 20, "aria-hidden": "true", color: globalToken?.colorIcon, className: CLS.IconExpand.default, onClick: e => {
-            e.stopPropagation();
-            handleOnClick(e, 'item-expand-el');
-        } }));
-    let actionContent = hasChildren ? _jsx("div", { className: CLS.ItemAction.default, children: expandEl }) : null;
-    if (action) {
-        actionContent = (_jsx("div", { className: CLS.ItemAction.default, children: typeof action === 'function' ? (action(item.data, { expandEl })) : (_jsxs(_Fragment, { children: [expandEl, action] })) }));
-    }
-    const isSelectedDescendant = useMemo(() => {
-        let result = false;
-        for (const selectedKey of selectedKeys) {
-            if (result)
-                break;
-            result = isDescendant(item.id, selectedKey, normalizeTreeItems);
+    const renderAction = () => {
+        if (action) {
+            return (_jsx("div", { className: CLS.ItemAction.default, children: typeof action === 'function' ? action(item) : action }));
         }
-        return result;
-    }, [item.id, normalizeTreeItems, selectedKeys]);
-    const className = clsx(itemClassName, {
-        [CLS.Item.selectedDescendant]: isSelectedDescendant,
-    });
-    useEffect(() => {
-        if (isFocused) {
-            itemRef.current?.focus({ preventScroll: true });
+        if (!isEmpty(item.children)) {
+            return (_jsx("div", { className: CLS.ItemAction.default, children: _jsx(ExpandMoreIcon, { color: globalToken?.colorIcon, size: 20, className: CLS.IconExpand.default }) }));
         }
-    }, [isFocused]);
-    return (_jsxs(MenuItemRoot, { ref: handleItemRef, role: "treeitem", tabIndex: isFocused ? 0 : -1, "aria-selected": selected, "aria-disabled": disabled, "aria-expanded": expanded, "aria-level": item.level, "aria-posinset": index + 1, "aria-setsize": items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
+        return null;
+    };
+    return (_jsxs(MenuItemRoot, { className: itemClassName, style: itemStyle, onClick: handleOnClick, children: [_jsx("div", { className: CLS.ItemLabel.default, children: renderLabel() }), renderAction()] }));
 }, areEqual);

package/es/components/molecules/VirtualizedMenu/components/Item/index.d.ts

@@ -1 +1 @@
-export { Item, type MemoryData } from './Item';
+export { Item } from './Item';

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

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

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

@@ -1,121 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState, useCallback, useRef, memo, } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useState, } 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, getFlattenItems, 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';
-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 = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, selectable = false, action, className, onClick, } = props;
-    const [focusId, setFocusId] = useState(null);
+const innerElementType = forwardRef(({ style, ...rest }, ref) => _jsx("div", { ref: ref, style: style, ...rest }));
+const MenuInlineInner = (props, ref) => {
+    const { items: itemsProp = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, selectable = false, expanded: expandedProp = [], selected: selectedProp = [], action, className, onClick, } = props;
     const [expandedKeys, setExpandedKeys] = useState(new Set());
     const [selectedKeys, setSelectedKeys] = useState(new Set());
-    const listRef = useRef(null);
-    const itemRefs = useRef(new Map());
-    const [{ items: normalizeTreeItems, rootItemIds }, setTreeState] = useState({
-        items: new Map(),
-        rootItemIds: new Set(),
-    });
-    // 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]);
+    const [flattenItems, setFlattenItems] = useState([]);
     useDeepCompareEffect(() => {
         setSelectedKeys(new Set(selectedProp));
     }, [selectedProp]);
@@ -123,185 +19,54 @@ const MenuInlineInner = forwardRef((props, ref) => {
         setExpandedKeys(new Set(expandedProp));
     }, [expandedProp]);
     useEffect(() => {
-        setTreeState(serializeItems({
-            items: itemsProp,
-        }));
+        setFlattenItems(getFlattenItems({ 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');
+    const visibleItems = flattenItems.filter(item => {
+        const isRootItem = item.level === 1;
+        const isParentExpand = item.parent && expandedKeys.has(String(item.parent.key));
+        return isRootItem || isParentExpand;
+    });
+    const handleCollapseItems = (items) => {
+        const newOpenKeys = new Set(expandedKeys);
+        getFlattenItems({ items }).forEach(i => {
+            const { key } = i;
+            if (expandedKeys.has(key)) {
+                newOpenKeys.delete(key);
             }
-        }
-    }, [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]);
+        setExpandedKeys(newOpenKeys);
+    };
+    const handleExpandItems = (items) => {
+        const updatedExpandedKeys = new Set(expandedKeys);
+        items.forEach(item => {
+            if (!item.children?.length)
+                return;
+            updatedExpandedKeys.add(item.key);
+        });
+        setExpandedKeys(updatedExpandedKeys);
+    };
     useImperativeHandle(ref, () => ({
         expandAll: () => {
-            handleExpandItems(rootNodes, Infinity);
+            handleExpandItems(flattenItems);
         },
     }));
-    const handleSelectItem = useCallback((item) => {
-        const { key } = item.data;
-        if (!selectable || selectedKeys.has(key))
-            return;
-        setSelectedKeys(new Set([key]));
-    }, [selectable, selectedKeys]);
-    const handleToggleExpandItem = useCallback((item) => {
-        const { key } = item.data;
-        const isExpanded = expandedKeys.has(key);
-        if (isExpanded) {
+    const handleClickItem = (item, idx) => {
+        const { key } = item;
+        const isOpen = expandedKeys.has(key);
+        const hasChilren = !!item.children?.length;
+        if (hasChilren && isOpen) {
             handleCollapseItems([item]);
         }
-        else {
+        if (hasChilren && !isOpen) {
             handleExpandItems([item]);
         }
-    }, [expandedKeys, handleCollapseItems, handleExpandItems]);
-    const handleClickItem = useCallback((args) => {
-        const { item, elKey, domEvent } = args;
-        const node = normalizeTreeItems.get(item.id);
-        if (!node)
-            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]);
-    const handleKeyDown = useCallback((e) => {
-        if (visibleItems.length === 0)
-            return;
-        e.preventDefault();
-        const currentFocusIndex = visibleItems.findIndex(item => item.id === focusId);
-        if (currentFocusIndex === -1) {
-            setFocusId(visibleItems[0]?.id ?? null);
-            return;
-        }
-        const currentFocusItem = visibleItems[currentFocusIndex];
-        switch (e.key) {
-            case 'ArrowDown': {
-                const nextFocusIndex = Math.min(visibleItems.length - 1, currentFocusIndex + 1);
-                setFocusId(visibleItems[nextFocusIndex].id);
-                break;
-            }
-            case 'ArrowUp': {
-                const nextFocusIndex = Math.max(0, currentFocusIndex - 1);
-                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) {
-                    setFocusId(currentFocusItem.parentId);
-                }
-                break;
-            }
-            case 'Home': {
-                setFocusId(visibleItems[0].id);
-                break;
-            }
-            case 'End': {
-                setFocusId(visibleItems[visibleItems.length - 1].id);
-                break;
-            }
-            case 'Enter': {
-                if (currentFocusItem) {
-                    handleSelectItem(currentFocusItem);
-                    if (currentFocusItem.childIds.length > 0) {
-                        handleToggleExpandItem(currentFocusItem);
-                    }
-                    onClick?.({
-                        item: currentFocusItem.data,
-                        elKey: 'item',
-                    });
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    }, [
-        visibleItems,
-        focusId,
-        expandedKeys,
-        onClick,
-        handleExpandItems,
-        handleCollapseItems,
-        handleSelectItem,
-        handleToggleExpandItem,
-    ]);
-    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) {
-            setFocusId(visibleItems.at(0)?.id || null);
+        if (selectable && !hasChilren && !selectedKeys.has(key)) {
+            setSelectedKeys(new Set([item.key]));
         }
+        onClick?.({
+            item,
+            pathKey: visibleItems[idx].pathKey,
+        });
     };
     const itemData = {
         itemSpacing,
@@ -310,17 +75,9 @@ const MenuInlineInner = forwardRef((props, ref) => {
         selectedKeys,
         expandedKeys,
         action,
-        focusId,
-        normalizeTreeItems,
-        items: visibleItems.map(item => ({
-            ...item,
-            data: {
-                ...item.data,
-                ref: el => itemRefs.current.set(item.id, el),
-            },
-        })),
+        items: visibleItems,
         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 })) }));
-});
-export const MenuInline = memo(MenuInlineInner);
+    return (_jsx(StyledAutoSizer, { className: clsx(CLS.Root.default, className), children: autoSize => (_jsx(VirtualizedMenuContainer, { 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 = React.forwardRef(MenuInlineInner);

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

@@ -1,2 +1 @@
-// export { MenuInline } from './MenuInline';
 export { MenuInline } from './MenuInline';

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

@@ -3,7 +3,7 @@ import { VariableSizeList } from 'react-window';
 import { MemoryData } from './components/Item/Item';
 import AutoSizer from 'react-virtualized-auto-sizer';
 export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MenuItemRoot: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const MenuItemRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const VirtualizedMenuContainer: import("styled-components").StyledComponent<{
     new (props: import("react-window").VariableSizeListProps<MemoryData>): VariableSizeList<MemoryData>;
     new (props: import("react-window").VariableSizeListProps<MemoryData>, context: any): VariableSizeList<MemoryData>;

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

@@ -3,7 +3,6 @@ import { VariableSizeList } from 'react-window';
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { CLS } from './utils';
-import tinycolor from 'tinycolor2';
 export const MenuItemWrapper = styled.div `
   width: 100%;
   height: 100%;
@@ -16,7 +15,7 @@ export const MenuItemWrapper = styled.div `
 
   .icon-expand {
     font-size: 14px;
-    flex-shrink: 0;
+    flex-shirnk: 0;
   }
 
   .title-wrapper {
@@ -25,23 +24,17 @@ export const MenuItemWrapper = styled.div `
     white-space: nowrap;
   }
 `;
-export const MenuItemRoot = styled.li `
+export const MenuItemRoot = styled.div `
   &.${CLS.Item.default} {
     cursor: pointer;
     display: flex;
     align-items: center;
     overflow: hidden;
-
-    &:focus {
-      outline: none;
-    }
+    border-radius: ${THEME.components?.Menu?.itemBorderRadius}px;
 
     > .${CLS.ItemLabel.default} {
-      display: flex;
       flex: 1;
       overflow: hidden;
-      align-self: stretch;
-      align-items: center;
     }
 
     > .${CLS.ItemAction.default} {
@@ -68,14 +61,7 @@ export const MenuItemRoot = styled.li `
       }
     }
 
-    &.${CLS.Item.selectedDescendant} {
-      background-color: ${tinycolor(THEME.components?.Menu?.itemActiveBg)
-    .lighten(4)
-    .toString('rgb')};
-    }
-
-    &:focus:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}),
-    &:hover:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}) {
+    &:hover:not(.${CLS.Item.disabled}, .${CLS.Item.selected}) {
       background-color: ${THEME.components?.Menu?.itemHoverBg};
     }
   }
@@ -83,11 +69,6 @@ export const MenuItemRoot = styled.li `
 export const VirtualizedMenuContainer = styled((VariableSizeList)) `
   font-size: ${globalToken?.fontSize}px;
   scrollbar-gutter: stable;
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
 `;
 export const StyledAutoSizer = styled(AutoSizer) `
   flex: 1;

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

@@ -11,6 +11,11 @@ export type ItemType = {
     errorMessage?: string | undefined;
     disabled?: boolean;
 };
+export type SerializedItemType = ItemType & {
+    level: number;
+    pathKey: PathKey;
+    parent: ItemType | null;
+};
 type VirtualizedMenuBaseProps = Partial<{
     items: ItemType[];
     inlineIndent: number;
@@ -19,20 +24,18 @@ type VirtualizedMenuBaseProps = Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string | string[];
+    selected: string[];
     expanded: string[];
     onClick: (args: {
         item: ItemType;
-        domEvent?: React.MouseEvent;
-        elKey: 'item' | 'item-expand-el';
+        pathKey: PathKey;
     }) => void;
-    action: React.ReactNode | ((item: ItemType, others: {
-        expandEl: React.ReactNode;
-    }) => React.ReactNode);
+    action: React.ReactNode | ((item: ItemType) => React.ReactNode);
 }>;
 export type VirtualizedMenuBaseHandle = {
     expandAll: () => void;
 };
+export type PathKey = (string | number)[];
 export type MenuInlineHandle = VirtualizedMenuBaseHandle;
 export type MenuInlineProps = VirtualizedMenuBaseProps & {
     mode?: typeof MODE.Inline;