@antscorp/antsomi-ui 2.0.110 → 2.0.112

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

@@ -32,7 +32,7 @@ export const MenuItemRoot = styled.li `
     align-items: center;
     overflow: hidden;
 
-    &:focus {
+    &.${CLS.Item.focused} {
       outline: none;
     }
 
@@ -74,8 +74,28 @@ export const MenuItemRoot = styled.li `
     .toString('rgb')};
     }
 
-    &:focus:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}),
-    &:hover:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}) {
+    &.${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};
     }
   }
@@ -91,4 +111,5 @@ export const VirtualizedMenuContainer = styled((VariableSizeList)) `
 `;
 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';

package/es/components/organism/TextEditor/TextEditor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type TextEditorProviderRefHandler } from './provider';
+import { type TextEditorProps, type TextEditorRef, type TextEditorWithProviderRef } from './types';
+export declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & {
+    colors?: string[] | undefined;
+    onChangeColors?: ((colors: string[]) => void) | undefined;
+} & React.RefAttributes<TextEditorWithProviderRef>> & {
+    Provider: React.ForwardRefExoticComponent<import("./provider").TextEditorProviderProps & React.RefAttributes<TextEditorProviderRefHandler>>;
+    Internal: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<TextEditorRef>>>;
+};