@antscorp/antsomi-ui 1.3.7-beta.3 → 1.3.7-beta.31

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

@@ -0,0 +1,93 @@
+import { useCallback } from 'react';
+/**
+ * Custom hook to handle keyboard navigation for tree menu
+ * Implements ARIA-compliant keyboard interaction patterns
+ */
+export const useKeyboardNavigation = (props) => {
+    const { visibleItems, focusId, expandedKeys, normalizeTreeItems, setFocusId, handleExpandItems, handleCollapseItems, handleSelectItem, handleToggleExpandItem, findNextFocusableItem, findFirstFocusableItem, findLastFocusableItem, onClick, } = props;
+    const handleKeyDown = useCallback((e) => {
+        if (visibleItems.length === 0)
+            return;
+        e.preventDefault();
+        const currentFocusIndex = visibleItems.findIndex(item => item.id === focusId);
+        if (currentFocusIndex === -1) {
+            const firstFocusableIndex = findFirstFocusableItem();
+            setFocusId(visibleItems[firstFocusableIndex]?.id ?? null);
+            return;
+        }
+        const currentFocusItem = visibleItems[currentFocusIndex];
+        switch (e.key) {
+            case 'ArrowDown': {
+                const nextFocusIndex = findNextFocusableItem(currentFocusIndex, 'next');
+                setFocusId(visibleItems[nextFocusIndex].id);
+                break;
+            }
+            case 'ArrowUp': {
+                const nextFocusIndex = findNextFocusableItem(currentFocusIndex, 'prev');
+                setFocusId(visibleItems[nextFocusIndex].id);
+                break;
+            }
+            case 'ArrowRight': {
+                if (currentFocusItem.childIds.length > 0 && !expandedKeys.has(currentFocusItem.id)) {
+                    handleExpandItems([currentFocusItem]);
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                if (currentFocusItem.childIds.length > 0 && expandedKeys.has(currentFocusItem.id)) {
+                    handleCollapseItems([currentFocusItem]);
+                }
+                else if (currentFocusItem?.parentId) {
+                    // Find parent and ensure it's focusable
+                    const parentItem = normalizeTreeItems.get(currentFocusItem.parentId);
+                    if (parentItem && !parentItem.data.displayOnly) {
+                        setFocusId(currentFocusItem.parentId);
+                    }
+                }
+                break;
+            }
+            case 'Home': {
+                const firstFocusableIndex = findFirstFocusableItem();
+                setFocusId(visibleItems[firstFocusableIndex].id);
+                break;
+            }
+            case 'End': {
+                const lastFocusableIndex = findLastFocusableItem();
+                setFocusId(visibleItems[lastFocusableIndex].id);
+                break;
+            }
+            case 'Enter': {
+                if (currentFocusItem && !currentFocusItem.data.displayOnly) {
+                    handleSelectItem(currentFocusItem);
+                    if (currentFocusItem.childIds.length > 0) {
+                        handleToggleExpandItem(currentFocusItem);
+                    }
+                    onClick?.({
+                        item: currentFocusItem.data,
+                        elKey: 'item',
+                    });
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [
+        visibleItems,
+        focusId,
+        expandedKeys,
+        normalizeTreeItems,
+        setFocusId,
+        handleExpandItems,
+        handleCollapseItems,
+        handleSelectItem,
+        handleToggleExpandItem,
+        findNextFocusableItem,
+        findFirstFocusableItem,
+        findLastFocusableItem,
+        onClick,
+    ]);
+    return {
+        handleKeyDown,
+    };
+};

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;
     }
 
@@ -84,8 +84,18 @@ export const MenuItemRoot = styled.li `
       }
     }
 
-    &:focus: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}) {
+    &.${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};
     }
   }
@@ -101,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

@@ -22,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,6 +29,7 @@ export declare const CLS: {
         readonly disabled: string;
         readonly selected: string;
         readonly expanded: string;
+        readonly focused: string;
         readonly selectedDescendant: string;
         readonly displayOnly: string;
     };

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

@@ -37,6 +37,7 @@ 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'),
     },

package/es/components/organism/ActivityTimeline/ActivityTimeline.js

@@ -9,7 +9,7 @@ import { translate, translations } from '@antscorp/antsomi-locales';
 import { isEmpty } from 'lodash';
 import { differenceInMonths, formatUTCDateTZ, startOfMonth, subMonths, } from '@antscorp/antsomi-ui/es/utils/date';
 import { getPortalTimeZone } from '@antscorp/antsomi-ui/es/utils/portal';
-import { EmptyData } from '../../molecules';
+import { EmptyData } from '../../molecules/EmptyData';
 import clsx from 'clsx';
 export const ActivityTimeline = (props) => {
     const { timelines = [], isLoading = false, title = translate(translations._BLOCK_TIMELINE_CUS), timezone = getPortalTimeZone(), objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, className, } = props;
@@ -84,10 +84,10 @@ export const ActivityTimeline = (props) => {
                         lastRef(el);
                     }
                 };
-                if (item.data.totalActivityCount === 1) {
+                if (item.data?.totalActivityCount === 1) {
                     result.push(_jsx(ItemEvent, { ref: setRef, keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
                 }
-                else if (item.data.totalActivityCount > 1) {
+                else if (item.data?.totalActivityCount > 1) {
                     result.push(_jsx(ItemGroupEvent, { ref: setRef, keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
                 }
             });

package/es/components/organism/ActivityTimeline/constants.d.ts

@@ -210,7 +210,7 @@ export declare const MAP_LIST_INFO_EVENT: {
     readonly 'view page': {
         readonly eventType: "view page";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -353,7 +353,7 @@ export declare const MAP_LIST_INFO_EVENT: {
     readonly 'view pageview': {
         readonly eventType: "view pageview";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -366,7 +366,7 @@ export declare const MAP_LIST_INFO_EVENT: {
     readonly 'view screenview': {
         readonly eventType: "view screenview";
         readonly iconCode: "";
-        readonly translateCode: "_EVENT_VIEW_SCREEN";
+        readonly translateCode: "_EVENT_VIEW_SCREEN_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -690,7 +690,7 @@ export declare const DATA_EVENT: {
     } | {
         readonly eventType: "view page";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -822,7 +822,7 @@ export declare const DATA_EVENT: {
     } | {
         readonly eventType: "view pageview";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -834,7 +834,7 @@ export declare const DATA_EVENT: {
     } | {
         readonly eventType: "view screenview";
         readonly iconCode: "";
-        readonly translateCode: "_EVENT_VIEW_SCREEN";
+        readonly translateCode: "_EVENT_VIEW_SCREEN_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -1164,7 +1164,7 @@ export declare const DATA_EVENT: {
         readonly 'view page': {
             readonly eventType: "view page";
             readonly iconCode: "_EVENT_VIEW_PAGE";
-            readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+            readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
             readonly showSlideImageAndPrice: false;
             readonly showQuantity: false;
             readonly showRevenue: false;
@@ -1307,7 +1307,7 @@ export declare const DATA_EVENT: {
         readonly 'view pageview': {
             readonly eventType: "view pageview";
             readonly iconCode: "_EVENT_VIEW_PAGE";
-            readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+            readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
             readonly showSlideImageAndPrice: false;
             readonly showQuantity: false;
             readonly showRevenue: false;
@@ -1320,7 +1320,7 @@ export declare const DATA_EVENT: {
         readonly 'view screenview': {
             readonly eventType: "view screenview";
             readonly iconCode: "";
-            readonly translateCode: "_EVENT_VIEW_SCREEN";
+            readonly translateCode: "_EVENT_VIEW_SCREEN_NEW";
             readonly showSlideImageAndPrice: false;
             readonly showQuantity: false;
             readonly showRevenue: false;

package/es/components/organism/ActivityTimeline/constants.js

@@ -224,7 +224,7 @@ export const MAP_LIST_INFO_EVENT = {
     'view page': {
         eventType: 'view page',
         iconCode: '_EVENT_VIEW_PAGE',
-        translateCode: '_EVENT_DES_VIEW_PAGE',
+        translateCode: '_EVENT_DES_VIEW_PAGE_NEW',
         showSlideImageAndPrice: false,
         showQuantity: false,
         showRevenue: false,
@@ -367,7 +367,7 @@ export const MAP_LIST_INFO_EVENT = {
     'view pageview': {
         eventType: 'view pageview',
         iconCode: '_EVENT_VIEW_PAGE',
-        translateCode: '_EVENT_DES_VIEW_PAGE',
+        translateCode: '_EVENT_DES_VIEW_PAGE_NEW',
         showSlideImageAndPrice: false,
         showQuantity: false,
         showRevenue: false,
@@ -380,7 +380,7 @@ export const MAP_LIST_INFO_EVENT = {
     'view screenview': {
         eventType: 'view screenview',
         iconCode: '',
-        translateCode: '_EVENT_VIEW_SCREEN',
+        translateCode: '_EVENT_VIEW_SCREEN_NEW',
         showSlideImageAndPrice: false,
         showQuantity: false,
         showRevenue: false,