@antscorp/antsomi-ui 2.0.109 → 2.0.111

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

@@ -0,0 +1,24 @@
+import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { ItemType } from '../../../types';
+export interface UseTreeStateReturn {
+    normalizeTreeItems: Map<string, NormalizedNode<ItemType>>;
+    rootItemIds: Set<string>;
+    rootNodes: NormalizedNode<ItemType>[];
+    expandedKeys: Set<string>;
+    selectedKeys: Set<string>;
+    handleExpandItems: (items: NormalizedNode<ItemType>[], deep?: number) => void;
+    handleCollapseItems: (items: NormalizedNode<ItemType>[]) => void;
+    handleToggleExpandItem: (item: NormalizedNode<ItemType>) => void;
+    handleSelectItem: (item: NormalizedNode<ItemType>) => void;
+    expandAll: () => void;
+}
+export interface UseTreeStateProps {
+    items: ItemType[];
+    expanded: string[];
+    selected: string | string[];
+    selectable: boolean;
+}
+/**
+ * Custom hook to manage tree state including expansion, selection, and normalization
+ */
+export declare const useTreeState: (props: UseTreeStateProps) => UseTreeStateReturn;

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

@@ -0,0 +1,94 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { findNodes, getChildrenRecursively, } from '@antscorp/antsomi-ui/es/utils/tree';
+import { serializeItems } from '../../../utils';
+/**
+ * Custom hook to manage tree state including expansion, selection, and normalization
+ */
+export const useTreeState = (props) => {
+    const { items: itemsProp, expanded: expandedProp, selected: selectedProp, selectable } = 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(),
+    });
+    // Sync external selectedProp with internal state
+    useDeepCompareEffect(() => {
+        setSelectedKeys(new Set(selectedProp));
+    }, [selectedProp]);
+    // Sync external expandedProp with internal state
+    useDeepCompareEffect(() => {
+        setExpandedKeys(new Set(expandedProp));
+    }, [expandedProp]);
+    // Serialize items into normalized tree structure
+    useEffect(() => {
+        setTreeState(serializeItems({
+            items: itemsProp,
+        }));
+    }, [itemsProp]);
+    // Compute root nodes
+    const rootNodes = useMemo(() => findNodes(node => rootItemIds.has(node.id), normalizeTreeItems), [normalizeTreeItems, rootItemIds]);
+    // Handler to collapse items
+    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;
+        });
+    }, []);
+    // Handler to expand items with optional deep expansion
+    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]);
+    // Handler to toggle expansion state of an item
+    const handleToggleExpandItem = useCallback((item) => {
+        const { key } = item.data;
+        const isExpanded = expandedKeys.has(key);
+        if (isExpanded) {
+            handleCollapseItems([item]);
+        }
+        else {
+            handleExpandItems([item]);
+        }
+    }, [expandedKeys, handleCollapseItems, handleExpandItems]);
+    // Handler to select an item
+    const handleSelectItem = useCallback((item) => {
+        const { key } = item.data;
+        if (!selectable || selectedKeys.has(key) || item.data.displayOnly)
+            return;
+        setSelectedKeys(new Set([key]));
+    }, [selectable, selectedKeys]);
+    // Handler to expand all items
+    const expandAll = useCallback(() => {
+        handleExpandItems(rootNodes, Infinity);
+    }, [handleExpandItems, rootNodes]);
+    return {
+        normalizeTreeItems,
+        rootItemIds,
+        rootNodes,
+        expandedKeys,
+        selectedKeys,
+        handleExpandItems,
+        handleCollapseItems,
+        handleToggleExpandItem,
+        handleSelectItem,
+        expandAll,
+    };
+};

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

@@ -0,0 +1,7 @@
+import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { ItemType } from '../../../types';
+/**
+ * Custom hook to compute and optimize visible items in a tree structure
+ * Automatically selects the best strategy based on tree characteristics
+ */
+export declare const useVisibleItems: (normalizeTreeItems: Map<string, NormalizedNode<ItemType>>, rootItemIds: Set<string>, expandedKeys: Set<string>) => NormalizedNode<ItemType>[];

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

@@ -0,0 +1,132 @@
+import { useMemo, useEffect } from 'react';
+import { getPathToNode } from '@antscorp/antsomi-ui/es/utils/tree';
+/**
+ * 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;
+};
+/**
+ * Custom hook to compute and optimize visible items in a tree structure
+ * Automatically selects the best strategy based on tree characteristics
+ */
+export const useVisibleItems = (normalizeTreeItems, rootItemIds, expandedKeys) => {
+    // Cache for path calculations to avoid redundant work
+    const pathCache = useMemo(() => new Map(), []);
+    // Clear path cache when tree structure changes
+    useEffect(() => {
+        pathCache.clear();
+    }, [normalizeTreeItems, pathCache]);
+    // Optimized visible items calculation with strategy selection
+    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]);
+    return visibleItems;
+};

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

@@ -4,91 +4,112 @@ 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%;
-  display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  padding: 5px;
-  align-items: center;
-  overflow: hidden;
-
-  .icon-expand {
-    font-size: 14px;
-    flex-shrink: 0;
-  }
-
-  .title-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+export const MenuItemWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 5px;
+  align-items: center;
+  overflow: hidden;
+
+  .icon-expand {
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+
+  .title-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
-export const MenuItemRoot = styled.li `
-  &.${CLS.Item.default} {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    &:focus {
-      outline: none;
-    }
-
-    > .${CLS.ItemLabel.default} {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-      align-self: stretch;
-      align-items: center;
-    }
-
-    > .${CLS.ItemAction.default} {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &.${CLS.Item.disabled} {
-      color: ${THEME.components?.Menu?.itemDisabledColor};
-      cursor: not-allowed;
-    }
-
-    &.${CLS.Item.selected} {
-      background-color: ${THEME.components?.Menu?.itemActiveBg};
-    }
-
-    &.${CLS.Item.expanded} {
-      > .${CLS.ItemAction.default} {
-        > .${CLS.IconExpand.default} {
-          rotate: 180deg;
-          transition: rotate 0.4s;
-        }
-      }
-    }
-
-    &.${CLS.Item.selectedDescendant} {
+export const MenuItemRoot = styled.li `
+  &.${CLS.Item.default} {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    &.${CLS.Item.focused} {
+      outline: none;
+    }
+
+    > .${CLS.ItemLabel.default} {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      align-self: stretch;
+      align-items: center;
+    }
+
+    > .${CLS.ItemAction.default} {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.${CLS.Item.disabled} {
+      color: ${THEME.components?.Menu?.itemDisabledColor};
+      cursor: not-allowed;
+    }
+
+    &.${CLS.Item.selected} {
+      background-color: ${THEME.components?.Menu?.itemActiveBg};
+    }
+
+    &.${CLS.Item.expanded} {
+      > .${CLS.ItemAction.default} {
+        > .${CLS.IconExpand.default} {
+          rotate: 180deg;
+          transition: rotate 0.4s;
+        }
+      }
+    }
+
+    &.${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}) {
-      background-color: ${THEME.components?.Menu?.itemHoverBg};
-    }
-  }
+    .toString('rgb')};
+    }
+
+    &.${CLS.Item.displayOnly} {
+      cursor: default;
+      color: ${THEME.components?.Menu?.itemColor || globalToken?.colorText};
+
+      &:focus,
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &.${CLS.Item.focused}:not(
+        .${CLS.Item.disabled},
+          .${CLS.Item.selected},
+          .${CLS.Item.selectedDescendant},
+          .${CLS.Item.displayOnly}
+      ),
+    &:hover:not(
+        .${CLS.Item.disabled},
+          .${CLS.Item.selected},
+          .${CLS.Item.selectedDescendant},
+          .${CLS.Item.displayOnly}
+      ) {
+      background-color: ${THEME.components?.Menu?.itemHoverBg};
+    }
+  }
 `;
-export const VirtualizedMenuContainer = styled((VariableSizeList)) `
-  font-size: ${globalToken?.fontSize}px;
-  scrollbar-gutter: stable;
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
+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;
+export const StyledAutoSizer = styled(AutoSizer) `
+  flex: 1;
+  outline: none;
 `;

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

@@ -11,6 +11,7 @@ export type ItemType = {
     children?: ItemType[];
     errorMessage?: string | undefined;
     disabled?: boolean;
+    displayOnly?: boolean;
 };
 type VirtualizedMenuBaseProps = Partial<{
     items: ItemType[];
@@ -21,6 +22,7 @@ type VirtualizedMenuBaseProps = Partial<{
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: ItemType;

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

@@ -29,7 +29,9 @@ export declare const CLS: {
         readonly disabled: string;
         readonly selected: string;
         readonly expanded: string;
+        readonly focused: string;
         readonly selectedDescendant: string;
+        readonly displayOnly: string;
     };
 };
 export declare const getItemSize: ((itemSize?: number, itemSpacing?: number) => (index: number) => number) & import("lodash").MemoizedFunction;

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

@@ -37,7 +37,9 @@ export const CLS = {
         disabled: componentCls('item-disabled'),
         selected: componentCls('item-selected'),
         expanded: componentCls('item-expanded'),
+        focused: componentCls('item-focused'),
         selectedDescendant: componentCls('item-selected-descendant'),
+        displayOnly: componentCls('item-display-only'),
     },
 };
 export const getItemSize = memoize((itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING) => (index) => {

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

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

package/es/components/molecules/index.js

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

package/es/components/molecules/index.scss

@@ -0,0 +1 @@
+@use './FontSizeInput';