@antscorp/antsomi-ui 1.3.5-beta.815 → 1.3.5-beta.816

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

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

@@ -1,3 +1,19 @@
 import React from 'react';
-import { VirtualizedMenuProps } from './types';
-export declare const VirtualizedMenu: (props: VirtualizedMenuProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
+    items: import("./types").ItemType[];
+    inlineIndent: number;
+    expandIcon: React.ReactNode;
+    inlinePadding: number;
+    itemSpacing: number;
+    selectable: boolean;
+    className: string;
+    itemSize: number;
+    selected: string[];
+    expanded: string[];
+    onClick: (args: {
+        item: import("./types").ItemType;
+        pathKey: import("./types").PathKey;
+    }) => void;
+}> & Partial<{
+    mode: "inline";
+}> & React.RefAttributes<import("./types").VirtualizedMenuBaseHandle>>;

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

@@ -1,16 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { MODE } from './config';
 import { MenuInline } from './components';
-export const VirtualizedMenu = (props) => {
+export const VirtualizedMenu = forwardRef((props, ref) => {
     const { mode = MODE.Inline } = props;
     let content = null;
     switch (mode) {
         case MODE.Inline: {
-            content = _jsx(MenuInline, { ...props });
+            content = _jsx(MenuInline, { ...props, ref: ref });
             break;
         }
         default:
             break;
     }
     return content;
-};
+});

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

@@ -1,2 +1,20 @@
-import { MenuInlineProps } from '../../types';
-export declare const MenuInline: (props: MenuInlineProps) => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { ItemType } from '../../types';
+export declare const MenuInline: React.ForwardRefExoticComponent<Partial<{
+    items: ItemType[];
+    inlineIndent: number;
+    expandIcon: React.ReactNode;
+    inlinePadding: number;
+    itemSpacing: number;
+    selectable: boolean;
+    className: string;
+    itemSize: number;
+    selected: string[];
+    expanded: string[];
+    onClick: (args: {
+        item: ItemType;
+        pathKey: import("../../types").PathKey;
+    }) => void;
+}> & Partial<{
+    mode: "inline";
+}> & React.RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState, } from 'react';
 import clsx from 'clsx';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VirtualizedMenuContainer } from '../../styled';
@@ -8,74 +8,79 @@ import { getFlattenItems } from '../../utils';
 import { Item } from '../Item';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 const innerElementType = forwardRef(({ style, ...rest }, ref) => _jsx("div", { ref: ref, style: style, ...rest }));
-export const MenuInline = (props) => {
-    const { items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, selectable = false, className, } = props;
-    const [openKeys, setOpenKeys] = useState(new Set());
+export const MenuInline = forwardRef((props, ref) => {
+    const { items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, onClick, selectable = false, className, expanded: expandedProp = [], selected: selectedProp = [], } = props;
+    const [expandedKeys, setExpandedKeys] = useState(new Set());
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     useDeepCompareEffect(() => {
-        if (!openKeysProp)
+        if (!selectedProp)
             return;
-        setOpenKeys(new Set(openKeysProp));
-    }, [openKeysProp]);
-    const flattenItems = useMemo(() => {
-        const result = getFlattenItems({ items });
-        return result.filter(item => {
-            const isRootItem = item.level === 1;
-            const isParentExpand = item.parent && openKeys.has(String(item.parent.key));
-            return isRootItem || isParentExpand;
-        });
-    }, [items, openKeys]);
-    const handleCollapseItem = useCallback((item) => {
-        if (!item.children?.length)
-            return;
-        const newOpenKeys = new Set(openKeys);
-        newOpenKeys.delete(item.key);
-        if (item.children) {
-            getFlattenItems({ items: item.children }).forEach(childrenItem => {
-                const childrenKey = childrenItem.key;
-                if (newOpenKeys.has(childrenKey)) {
-                    newOpenKeys.delete(childrenKey);
-                }
-            });
-        }
-        setOpenKeys(newOpenKeys);
-    }, [openKeys]);
-    const handleExpandItem = useCallback((item) => {
-        if (!item.children?.length)
+        setSelectedKeys(new Set(selectedProp));
+    }, [selectedProp]);
+    useDeepCompareEffect(() => {
+        if (!expandedProp)
             return;
-        const itemKey = item.key;
-        const newOpenKeys = new Set(openKeys);
-        newOpenKeys.add(itemKey);
-        setOpenKeys(newOpenKeys);
-    }, [openKeys]);
+        setExpandedKeys(new Set(expandedProp));
+    }, [expandedProp]);
+    const flattenItems = useMemo(() => getFlattenItems({ items }), [items]);
+    const visibleItems = useMemo(() => flattenItems.filter(item => {
+        const isRootItem = item.level === 1;
+        const isParentExpand = item.parent && expandedKeys.has(String(item.parent.key));
+        return isRootItem || isParentExpand;
+    }), [flattenItems, expandedKeys]);
+    const handleCollapseItems = useCallback((items) => {
+        const newOpenKeys = new Set(expandedKeys);
+        getFlattenItems({ items }).forEach(i => {
+            const { key } = i;
+            if (expandedKeys.has(key)) {
+                newOpenKeys.delete(key);
+            }
+        });
+        setExpandedKeys(newOpenKeys);
+    }, [expandedKeys]);
+    const handleExpandItems = useCallback((items) => {
+        const updatedExpandedKeys = new Set(expandedKeys);
+        items.forEach(item => {
+            if (!item.children?.length)
+                return;
+            updatedExpandedKeys.add(item.key);
+        });
+        setExpandedKeys(updatedExpandedKeys);
+    }, [expandedKeys]);
+    useImperativeHandle(ref, () => ({
+        expandAll: () => {
+            handleExpandItems(flattenItems);
+        },
+    }));
     const handleClickItem = useCallback((item, idx) => () => {
         const { key } = item;
-        const isOpen = openKeys.has(key);
+        const isOpen = expandedKeys.has(key);
         const hasChilren = !!item.children?.length;
         if (hasChilren && isOpen) {
-            handleCollapseItem(item);
+            handleCollapseItems([item]);
         }
         if (hasChilren && !isOpen) {
-            handleExpandItem(item);
+            handleExpandItems([item]);
         }
         if (selectable && !hasChilren && !selectedKeys.has(key)) {
             setSelectedKeys(new Set([item.key]));
         }
-        if (onClick) {
-            onClick({ item, pathKey: flattenItems[idx].pathKey });
-        }
+        onClick?.({
+            item,
+            pathKey: visibleItems[idx].pathKey,
+        });
     }, [
+        expandedKeys,
         selectable,
-        flattenItems,
-        handleCollapseItem,
-        handleExpandItem,
-        onClick,
-        openKeys,
+        visibleItems,
         selectedKeys,
+        onClick,
+        handleCollapseItems,
+        handleExpandItems,
     ]);
     const renderItem = useCallback((args) => {
         const { index, style } = args;
-        const item = flattenItems[index];
+        const item = visibleItems[index];
         const indentSize = ((item.level || 0) - 1) * inlineIndent;
         const itemStyle = {
             ...style,
@@ -86,17 +91,16 @@ export const MenuInline = (props) => {
         };
         return (_jsx(Item, { className: clsx({
                 'item-selected': selectedKeys.has(item.key),
-                'item-expanded': openKeys.has(item.key),
+                'item-expanded': expandedKeys.has(item.key),
             }, item.className), onClick: handleClickItem(item, index), style: itemStyle, item: item }));
     }, [
-        flattenItems,
-        handleClickItem,
+        visibleItems,
         inlinePadding,
         inlineIndent,
         itemSpacing,
         selectedKeys,
-        openKeys,
+        expandedKeys,
+        handleClickItem,
     ]);
-    // console.log('render');
-    return (_jsx(AutoSizer, { children: autoSize => (_jsx(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, useIsScrolling: true, children: renderItem })) }));
-};
+    return (_jsx(AutoSizer, { children: autoSize => (_jsx(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: visibleItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, useIsScrolling: true, children: renderItem })) }));
+});

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

@@ -1,29 +1,40 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { MODE } from './config';
+export type Mode = (typeof MODE)[keyof typeof MODE];
+export type ItemKey = string;
 export type ItemType = {
-    key: string;
+    key: ItemKey;
 } & Partial<{
+    className: string;
     scrollingLabel: string;
     label: ReactNode;
     children: ItemType[];
     disabled: boolean;
-}> & Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
-export type VirtualizedMenuProps = Partial<{
+}>;
+type VirtualizedMenuBaseProps = Partial<{
     items: ItemType[];
-    mode: (typeof MODE)[keyof typeof MODE];
-    expandIcon: ReactNode;
     inlineIndent: number;
+    expandIcon: ReactNode;
     inlinePadding: number;
     itemSpacing: number;
+    selectable: boolean;
+    className: string;
     itemSize: number;
-    openKeys: string[];
-    selectedKeys: string[];
+    selected: string[];
+    expanded: string[];
     onClick: (args: {
         item: ItemType;
         pathKey: PathKey;
     }) => void;
-    className: string;
-    selectable: boolean;
 }>;
+export type VirtualizedMenuBaseHandle = {
+    expandAll: () => void;
+};
 export type PathKey = (string | number)[];
-export type MenuInlineProps = Omit<VirtualizedMenuProps, 'mode'>;
+export type MenuInlineHandle = VirtualizedMenuBaseHandle;
+export type MenuInlineProps = VirtualizedMenuBaseProps & Partial<{
+    mode: typeof MODE.Inline;
+}>;
+export type VirtualizedMenuHandle = MenuInlineHandle;
+export type VirtualizedMenuProps = MenuInlineProps;
+export {};

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

@@ -5,11 +5,12 @@ export declare const getFlattenItems: (args: {
 }) => ({
     key: string;
 } & Partial<{
+    className: string;
     scrollingLabel: string;
     label: import("react").ReactNode;
     children: ItemType[];
     disabled: boolean;
-}> & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
+}> & {
     level: number;
     pathKey: PathKey;
     parent: ItemType | null;

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.815",
+  "version": "1.3.5-beta.816",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",