@antscorp/antsomi-ui 2.0.81 → 2.0.83-text-editor-beta.1

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

@@ -1,14 +1,15 @@
 import React from 'react';
-import { ItemType, MenuInlineProps, SerializedItemType } from '../../types';
+import { ItemType, MenuInlineProps } 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[];
+    items: NormalizedNode<ItemType>[];
     selectedKeys: Set<string>;
     expandedKeys: Set<string>;
     action: MenuInlineProps['action'];
-    onClick: (item: ItemType, index: number) => void;
+    onClick: (item: NormalizedNode<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

@@ -12,7 +12,11 @@ export const Item = memo((props) => {
     const { style = {}, data, index = 0 } = props;
     const { inlineIndent, itemSpacing, inlinePadding, items, selectedKeys, expandedKeys, action, onClick, } = data || {};
     const item = items[index];
-    const indentSize = ((item.level || 0) - 1) * inlineIndent;
+    const hasChildren = !isEmpty(item.data.children);
+    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 itemStyle = {
         ...style,
         paddingLeft: indentSize + inlinePadding,
@@ -21,29 +25,27 @@ export const Item = memo((props) => {
         height: index === 0 ? Number(style.height) : Number(style.height) - itemSpacing,
     };
     const itemClassName = clsx(CLS.Item.default, {
-        [CLS.Item.selected]: selectedKeys.has(item.key),
-        [CLS.Item.expanded]: expandedKeys.has(item.key),
-        [CLS.Item.disabled]: item?.disabled,
-    }, item.className);
+        [CLS.Item.selected]: selected,
+        [CLS.Item.expanded]: expanded,
+        [CLS.Item.disabled]: disabled,
+    }, item.data.className);
     const handleOnClick = () => {
-        if (!onClick || item?.disabled)
+        if (!onClick || disabled)
             return;
         onClick(item, index);
     };
-    const renderLabel = () => {
-        if (typeof item?.label === 'string') {
-            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: item.label });
-        }
-        return item?.label;
-    };
-    const renderAction = () => {
-        if (action) {
-            return (_jsx("div", { className: CLS.ItemAction.default, children: typeof action === 'function' ? action(item) : action }));
-        }
-        if (!isEmpty(item.children)) {
-            return (_jsx("div", { className: CLS.ItemAction.default, children: _jsx(ExpandMoreIcon, { color: globalToken?.colorIcon, size: 20, className: CLS.IconExpand.default }) }));
-        }
-        return null;
-    };
-    return (_jsxs(MenuItemRoot, { className: itemClassName, style: itemStyle, onClick: handleOnClick, children: [_jsx("div", { className: CLS.ItemLabel.default, children: renderLabel() }), renderAction()] }));
+    let labelContent = item.data?.label;
+    let actionContent = null;
+    if (typeof item.data?.label === 'string') {
+        labelContent = (_jsx(Typography.Text, { ellipsis: {
+                tooltip: true,
+            }, children: item.data.label }));
+    }
+    if (action) {
+        actionContent = (_jsx("div", { className: CLS.ItemAction.default, children: typeof action === 'function' ? action(item.data) : action }));
+    }
+    if (hasChildren) {
+        actionContent = (_jsx("div", { className: CLS.ItemAction.default, children: _jsx(ExpandMoreIcon, { color: globalToken?.colorIcon, size: 20, className: CLS.IconExpand.default, "aria-hidden": "true" }) }));
+    }
+    return (_jsxs(MenuItemRoot, { role: "treeitem", "aria-selected": selected, "aria-disabled": disabled, "aria-expanded": expanded, "aria-level": item.level, "aria-posinset": index + 1, "aria-setsize": items.length, className: itemClassName, style: itemStyle, onClick: handleOnClick, children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
 }, areEqual);

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

@@ -8,11 +8,10 @@ export declare const MenuInline: React.ForwardRefExoticComponent<Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string[];
+    selected: string | string[];
     expanded: string[];
     onClick: (args: {
         item: ItemType;
-        pathKey: import("../../types").PathKey;
     }) => void;
     action: React.ReactNode | ((item: ItemType) => React.ReactNode);
 }> & {

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

@@ -1,17 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, useImperativeHandle, useState, } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState, } from 'react';
 import { StyledAutoSizer, VirtualizedMenuContainer } from '../../styled';
 import { INLINE_INDENT, INLINE_PADDING, ITEM_SIZE, ITEM_SPACING } from '../../config';
-import { CLS, getFlattenItems, getItemSize } from '../../utils';
+import { CLS, serializeItems, getItemSize } from '../../utils';
 import { Item } from '../Item';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 import clsx from 'clsx';
-const innerElementType = forwardRef(({ style, ...rest }, ref) => _jsx("div", { ref: ref, style: style, ...rest }));
+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 })));
 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 [flattenItems, setFlattenItems] = useState([]);
+    const [{ items: normalizeTreeItems, rootItemIds }, setTreeState] = useState({
+        items: new Map(),
+        rootItemIds: new Set(),
+    });
+    const rootNodes = useMemo(() => findNodes(node => rootItemIds.has(node.id), normalizeTreeItems), [normalizeTreeItems, rootItemIds]);
+    // console.log({ selectedKeys, setSelectedKeys });
     useDeepCompareEffect(() => {
         setSelectedKeys(new Set(selectedProp));
     }, [selectedProp]);
@@ -19,54 +25,76 @@ const MenuInlineInner = (props, ref) => {
         setExpandedKeys(new Set(expandedProp));
     }, [expandedProp]);
     useEffect(() => {
-        setFlattenItems(getFlattenItems({ items: itemsProp }));
+        setTreeState(serializeItems({
+            items: itemsProp,
+        }));
     }, [itemsProp]);
-    const visibleItems = flattenItems.filter(item => {
-        const isRootItem = item.level === 1;
-        const isParentExpand = item.parent && expandedKeys.has(String(item.parent.key));
-        return isRootItem || isParentExpand;
-    });
+    const visibleItems = useMemo(() => Array.from(normalizeTreeItems.values()).filter(item => {
+        const isRootItem = item.level === 0;
+        const allParentExpanded = item.parentId &&
+            getPathToNode(item.parentId, normalizeTreeItems).every(v => expandedKeys.has(v.id));
+        return isRootItem || allParentExpanded;
+    }), [expandedKeys, normalizeTreeItems]);
+    // console.log({
+    //   normalizeTreeItems,
+    //   rootItemIds,
+    //   expandedKeys,
+    //   selectedKeys,
+    //   visibleItems,
+    // });
     const handleCollapseItems = (items) => {
         const newOpenKeys = new Set(expandedKeys);
-        getFlattenItems({ items }).forEach(i => {
-            const { key } = i;
-            if (expandedKeys.has(key)) {
-                newOpenKeys.delete(key);
+        items.forEach(({ data }) => {
+            if (expandedKeys.has(data.key)) {
+                newOpenKeys.delete(data.key);
             }
         });
         setExpandedKeys(newOpenKeys);
     };
-    const handleExpandItems = (items) => {
+    const handleExpandItems = (items, deep = 0) => {
         const updatedExpandedKeys = new Set(expandedKeys);
         items.forEach(item => {
-            if (!item.children?.length)
-                return;
-            updatedExpandedKeys.add(item.key);
+            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));
+                }
+            }
         });
         setExpandedKeys(updatedExpandedKeys);
     };
     useImperativeHandle(ref, () => ({
         expandAll: () => {
-            handleExpandItems(flattenItems);
+            handleExpandItems(rootNodes, Infinity);
         },
     }));
-    const handleClickItem = (item, idx) => {
-        const { key } = item;
-        const isOpen = expandedKeys.has(key);
-        const hasChilren = !!item.children?.length;
-        if (hasChilren && isOpen) {
+    const handleSelectItem = (item) => {
+        const { key } = item.data;
+        if (!selectable || selectedKeys.has(key))
+            return;
+        setSelectedKeys(new Set([key]));
+    };
+    const handleToggleExpandItem = (item) => {
+        const { key } = item.data;
+        const isExpanded = expandedKeys.has(key);
+        if (isExpanded) {
             handleCollapseItems([item]);
         }
-        if (hasChilren && !isOpen) {
+        else {
             handleExpandItems([item]);
         }
-        if (selectable && !hasChilren && !selectedKeys.has(key)) {
-            setSelectedKeys(new Set([item.key]));
+    };
+    const handleClickItem = (item) => {
+        const node = normalizeTreeItems.get(item.id);
+        if (!node)
+            return;
+        const hasChilren = node.childIds.length > 0;
+        handleSelectItem(node);
+        if (hasChilren) {
+            handleToggleExpandItem(node);
         }
-        onClick?.({
-            item,
-            pathKey: visibleItems[idx].pathKey,
-        });
+        onClick?.({ item: node.data });
     };
     const itemData = {
         itemSpacing,

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ItemType } from '../../types';
+export declare const MenuInline: React.ForwardRefExoticComponent<Partial<{
+    items: ItemType[];
+    inlineIndent: number;
+    inlinePadding: number;
+    itemSpacing: number;
+    selectable: boolean;
+    className: string;
+    itemSize: number;
+    selected: string | string[];
+    expanded: string[];
+    onClick: (args: {
+        item: ItemType;
+    }) => void;
+    action: React.ReactNode | ((item: ItemType) => React.ReactNode);
+}> & {
+    mode?: "inline" | undefined;
+} & React.RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>;

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

@@ -0,0 +1,233 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState, useCallback, } 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 { 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 = (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 [{ 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]);
+    useDeepCompareEffect(() => {
+        setSelectedKeys(new Set(selectedProp));
+    }, [selectedProp]);
+    useDeepCompareEffect(() => {
+        setExpandedKeys(new Set(expandedProp));
+    }, [expandedProp]);
+    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;
+        });
+    }, []);
+    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))
+            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((item) => {
+        const node = normalizeTreeItems.get(item.id);
+        if (!node)
+            return;
+        const hasChilren = node.childIds.length > 0;
+        handleSelectItem(node);
+        if (hasChilren) {
+            handleToggleExpandItem(node);
+        }
+        onClick?.({ item: node.data });
+    }, [normalizeTreeItems, handleSelectItem, handleToggleExpandItem, onClick]);
+    const itemData = useMemo(() => ({
+        itemSpacing,
+        inlineIndent,
+        inlinePadding,
+        selectedKeys,
+        expandedKeys,
+        action,
+        items: visibleItems,
+        onClick: handleClickItem,
+    }), [
+        itemSpacing,
+        inlineIndent,
+        inlinePadding,
+        selectedKeys,
+        expandedKeys,
+        action,
+        visibleItems,
+        handleClickItem,
+    ]);
+    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.d.ts

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

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

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

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<"div", any, {}, never>;
+export declare const MenuItemRoot: import("styled-components").StyledComponent<"li", 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

@@ -15,7 +15,7 @@ export const MenuItemWrapper = styled.div `
 
   .icon-expand {
     font-size: 14px;
-    flex-shirnk: 0;
+    flex-shrink: 0;
   }
 
   .title-wrapper {
@@ -24,17 +24,20 @@ export const MenuItemWrapper = styled.div `
     white-space: nowrap;
   }
 `;
-export const MenuItemRoot = styled.div `
+export const MenuItemRoot = styled.li `
   &.${CLS.Item.default} {
     cursor: pointer;
     display: flex;
     align-items: center;
     overflow: hidden;
-    border-radius: ${THEME.components?.Menu?.itemBorderRadius}px;
+    // 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} {
@@ -69,6 +72,11 @@ export const MenuItemRoot = styled.div `
 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,11 +11,6 @@ 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;
@@ -24,18 +19,16 @@ type VirtualizedMenuBaseProps = Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string[];
+    selected: string | string[];
     expanded: string[];
     onClick: (args: {
         item: ItemType;
-        pathKey: PathKey;
     }) => void;
     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;

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

@@ -1,8 +1,10 @@
 /// <reference types="lodash" />
-import { ItemType, SerializedItemType } from './types';
-export declare const getFlattenItems: (args: {
+import { ItemType } from './types';
+import { NormalizedTreeState } from '@antscorp/antsomi-ui/es/utils/tree';
+export declare const itemToTreeNode: (item: ItemType) => any;
+export declare const serializeItems: (args: {
     items: ItemType[];
-}) => SerializedItemType[];
+}) => NormalizedTreeState<ItemType>;
 export declare const CLS: {
     readonly Root: {
         readonly default: string;
@@ -29,5 +31,5 @@ export declare const CLS: {
         readonly expanded: string;
     };
 };
-export declare const getItemSize: ((itemSize: number, itemSpacing: number) => (index: number) => number) & import("lodash").MemoizedFunction;
-export declare const calInlineListSize: (itemLength: number, itemSize: number, itemSpacing: number) => number;
+export declare const getItemSize: ((itemSize?: number, itemSpacing?: number) => (index: number) => number) & import("lodash").MemoizedFunction;
+export declare const calInlineListSize: (itemLength: number, itemSize?: number, itemSpacing?: number) => number;

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

@@ -1,22 +1,16 @@
 import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
-import { COMPONENT_NAME, MODE } from './config';
+import { COMPONENT_NAME, ITEM_SIZE, ITEM_SPACING, MODE } from './config';
 import { memoize } from 'lodash';
-export const getFlattenItems = (args) => {
+import { normalizeTreeData } from '@antscorp/antsomi-ui/es/utils/tree';
+export const itemToTreeNode = (item) => ({
+    id: item.key,
+    data: item,
+    children: item.children?.map(itemToTreeNode),
+});
+export const serializeItems = (args) => {
     const { items } = args;
-    const result = [];
-    function recursively(items, level, pathKey, parent) {
-        items.forEach((item, idx) => {
-            const currentPathKey = [...pathKey, idx, item.key.toString()];
-            result.push({ ...item, level, pathKey: currentPathKey, parent });
-            if (item.children && item.children.length > 0) {
-                recursively(item.children, level + 1, currentPathKey, item);
-            }
-        });
-    }
-    if (items.length) {
-        recursively(items, 1, [], null);
-    }
-    return result;
+    const nodes = items.map(itemToTreeNode);
+    return normalizeTreeData(nodes);
 };
 const componentCls = antsomiClsx(COMPONENT_NAME);
 export const CLS = {
@@ -45,13 +39,13 @@ export const CLS = {
         expanded: componentCls('item-expanded'),
     },
 };
-export const getItemSize = memoize((itemSize, itemSpacing) => (index) => {
+export const getItemSize = memoize((itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING) => (index) => {
     if (index === 0) {
         return itemSize;
     }
     return itemSize + itemSpacing;
 });
-export const calInlineListSize = (itemLength, itemSize, itemSpacing) => {
+export const calInlineListSize = (itemLength, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING) => {
     let result = 0;
     const calItemSize = getItemSize(itemSize, itemSpacing);
     for (let i = 0; i < itemLength; i++) {

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

@@ -67,6 +67,7 @@ export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
 export * from './CodeStructure';
+export * from './FontSizeInput';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';