@antscorp/antsomi-ui 1.3.5-beta.859 → 1.3.5-beta.860

package/es/components/atoms/Suspense/Suspense.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type SuspenseProps = {} & React.SuspenseProps;
+export declare const Suspense: (props: SuspenseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/atoms/Suspense/Suspense.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Spin } from '../Spin';
+export const Suspense = (props) => {
+    const { children, ...rest } = props;
+    return (_jsx(React.Suspense, { fallback: _jsx(Spin, { indicatorSize: 20 }), ...rest, children: children }));
+};

package/es/components/atoms/Suspense/index.d.ts

@@ -0,0 +1 @@
+export { Suspense } from './Suspense';

package/es/components/atoms/Suspense/index.js

@@ -0,0 +1 @@
+export { Suspense } from './Suspense';

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

@@ -32,6 +32,7 @@ export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
 export { Image } from './Image';
 export { IconField } from './IconField';
+export { Suspense } from './Suspense';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';

package/es/components/atoms/index.js

@@ -32,6 +32,7 @@ export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
 export { Image } from './Image';
 export { IconField } from './IconField';
+export { Suspense } from './Suspense';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';

package/es/components/molecules/EditingList/EditingList.js

@@ -1,21 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-import { Flex, Typography } from 'antd';
-import { EditingListRoot, AmountSelected, StyledAddBtn, StyledSelectedItem, StyledListWrapper, } from './styled';
+import { EditingListRoot } from './styled';
 import { useMemo, useState } from 'react';
-import { InputSearch } from '../InputSearch';
-import { PopoverSelect, defaultSearch as defaultPopoverSelectSearch } from '../SearchPopover';
-import { AddIcon, DeleteRemoveTrashIcon } from '../../icons';
-import { Spin } from '../../atoms';
+import { defaultSearch as defaultPopoverSelectSearch } from '../SearchPopover';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
-import { EmptyData } from '../EmptyData';
-import { translate, translations } from '@antscorp/antsomi-locales';
 import clsx from 'clsx';
-import { isEmpty } from 'lodash';
-import { VirtualizedMenu } from '../VirtualizedMenu';
-const CLASSNAME_PREFIX = 'antsomi-editing-list';
+import { Suspense } from '../../atoms';
+import { Action, List, Search, LazyComponent } from './components';
+import { CLS } from './utils';
+const { Popover, Title } = LazyComponent;
 export const EditingList = (props) => {
-    const { isLoading = false, addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, onChange, emptyDescription, } = props;
+    const { isLoading = false, addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, emptyDescription, onChange, } = props;
     const [search, setSearch] = useState('');
     const debounceSearch = useDebounce(search);
     const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
@@ -25,24 +19,5 @@ export const EditingList = (props) => {
         const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
         onChange?.(selectedKeys);
     };
-    const renderLabel = (label) => {
-        if (typeof label === 'string') {
-            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: label });
-        }
-        return label;
-    };
-    const renderList = () => {
-        if (isLoading) {
-            return _jsx(Spin, { indicatorSize: 24 });
-        }
-        if (isEmpty(filterdOptions)) {
-            return (_jsx(EmptyData, { showIcon: false, description: emptyDescription || translate(translations.noData).toString() }));
-        }
-        const items = filterdOptions.map(opt => ({
-            key: opt.key,
-            label: (_jsxs(StyledSelectedItem, { align: "center", justify: "space-between", gap: 8, className: `${CLASSNAME_PREFIX}-item`, children: [renderLabel(opt.label), removable && (_jsx(DeleteRemoveTrashIcon, { className: `${CLASSNAME_PREFIX}-remove-btn`, size: 20, color: globalToken?.bw8, onClick: () => handleRemove(opt.key) }))] })),
-        }));
-        return (_jsx(StyledListWrapper, { className: `${CLASSNAME_PREFIX}-wrapper`, children: _jsx(VirtualizedMenu, { className: `${CLASSNAME_PREFIX}-virtualized-list`, items: items }) }));
-    };
-    return (_jsxs(EditingListRoot, { className: clsx(className, CLASSNAME_PREFIX), vertical: true, gap: 8, children: [title && (_jsxs(Flex, { className: `${CLASSNAME_PREFIX}-title`, align: "center", gap: 8, children: [_jsx(Typography.Text, { strong: true, children: title }), showNum && (_jsxs(AmountSelected, { children: ["(", selectedOptions.length, "/", options.length, ")"] }))] })), _jsx(InputSearch, { className: `${CLASSNAME_PREFIX}-search`, placeholder: "Search...", onChange: e => setSearch(e.target.value) }), renderList(), !isSelectAll && !isLoading && (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, children: _jsxs(StyledAddBtn, { className: `${CLASSNAME_PREFIX}-add-btn`, role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }))] }));
+    return (_jsxs(EditingListRoot, { className: clsx(CLS.Root.default, className), vertical: true, gap: 8, children: [title && (_jsx(Suspense, { children: _jsx(Title, { showNum: showNum, title: title, selectedAmount: selected.length, optionAmount: options.length }) })), _jsx(Search, { onChange: e => setSearch(e.target.value) }), _jsx(List, { isLoading: isLoading, filterdOptions: filterdOptions, emptyDescription: emptyDescription, renderAction: key => (_jsx(Action, { removable: removable, onClickRemove: () => handleRemove(key) })) }), !isSelectAll && !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { options: options, selected: selected, addBtnLabel: addBtnLabel, onChange: onChange }) }))] }));
 };

package/es/components/molecules/EditingList/components/Action/Action.d.ts

@@ -0,0 +1,6 @@
+type ActionProps = {
+    removable: boolean;
+    onClickRemove: () => void;
+};
+export declare const Action: (props: ActionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/es/components/molecules/EditingList/components/Action/Action.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DeleteRemoveTrashIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { CLS } from '../../utils';
+export const Action = (props) => {
+    const { removable, onClickRemove } = props;
+    if (!removable)
+        return null;
+    return (_jsx(DeleteRemoveTrashIcon, { className: CLS.RemoveButton.default, size: 20, color: globalToken?.bw8, onClick: onClickRemove }));
+};

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

@@ -0,0 +1 @@
+export { Action } from './Action';

package/es/components/molecules/EditingList/components/Action/index.js

@@ -0,0 +1 @@
+export { Action } from './Action';

package/es/components/molecules/EditingList/components/List/List.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Option } from '../../types';
+type ListProps = {
+    isLoading: boolean;
+    filterdOptions: Option[];
+    emptyDescription?: string;
+    renderAction: (key: string) => React.ReactNode;
+};
+export declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingList/components/List/List.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VirtualizedMenu } from '../../../VirtualizedMenu';
+import { StyledListWrapper } from '../../styled';
+import { Spin, Typography } from '../../../../atoms';
+import { isEmpty } from 'lodash';
+import { EmptyData } from '../../../EmptyData';
+import { translate, translations } from '@antscorp/antsomi-locales';
+import { CLS } from '../../utils';
+export const List = (props) => {
+    const { renderAction, isLoading, filterdOptions, emptyDescription } = props;
+    const renderLabel = (label) => {
+        if (typeof label === 'string') {
+            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: label });
+        }
+        return label;
+    };
+    const items = filterdOptions.map(opt => ({
+        className: CLS.ListItem.default,
+        key: opt.key,
+        label: renderLabel(opt.label),
+    }));
+    if (isLoading) {
+        return _jsx(Spin, { indicatorSize: 24 });
+    }
+    if (isEmpty(filterdOptions)) {
+        return (_jsx(EmptyData, { showIcon: false, description: emptyDescription || translate(translations.noData).toString() }));
+    }
+    return (_jsx(StyledListWrapper, { className: CLS.ListWapper.default, children: _jsx(VirtualizedMenu, { className: CLS.List.default, items: items, action: ({ key }) => renderAction(key) }) }));
+};

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

@@ -0,0 +1 @@
+export { List } from './List';

package/es/components/molecules/EditingList/components/List/index.js

@@ -0,0 +1 @@
+export { List } from './List';

package/es/components/molecules/EditingList/components/Loadable.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const Title: import("react").LazyExoticComponent<(props: {
+    title: import("react").ReactNode;
+    showNum: boolean;
+    selectedAmount?: number | undefined;
+    optionAmount?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const Popover: import("react").LazyExoticComponent<(props: {
+    options: import("../types").Option[];
+    selected: string[];
+    addBtnLabel: import("react").ReactNode;
+    onChange?: ((selected: string[]) => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;

package/es/components/molecules/EditingList/components/Loadable.js

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+export const Title = lazy(() => import('./Title').then(module => ({ default: module.Title })));
+export const Popover = lazy(() => import('./Popover').then(module => ({ default: module.Popover })));

package/es/components/molecules/EditingList/components/Popover/Popover.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Option } from '../../types';
+type PopoverProps = {
+    options: Option[];
+    selected: string[];
+    addBtnLabel: React.ReactNode;
+    onChange?: (selected: string[]) => void;
+};
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingList/components/Popover/Popover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddIcon } from '../../../../icons';
+import { PopoverSelect } from '../../../SearchPopover';
+import { StyledAddBtn } from '../../styled';
+import { CLS } from '../../utils';
+export const Popover = (props) => {
+    const { options, selected, addBtnLabel, onChange } = props;
+    return (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, children: _jsxs(StyledAddBtn, { className: CLS.AddButton.default, role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }));
+};

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

@@ -0,0 +1 @@
+export { Popover } from './Popover';

package/es/components/molecules/EditingList/components/Popover/index.js

@@ -0,0 +1 @@
+export { Popover } from './Popover';

package/es/components/molecules/EditingList/components/Search/Search.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+type SearchProps = {} & React.ComponentProps<'input'>;
+export declare const Search: (props: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingList/components/Search/Search.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { InputSearch } from '../../../InputSearch';
+import { CLS } from '../../utils';
+export const Search = (props) => {
+    const { className, placeholder, onChange } = props;
+    return (_jsx(InputSearch, { className: clsx(CLS.Search, className), placeholder: placeholder || 'Search...', onChange: onChange }));
+};

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

@@ -0,0 +1 @@
+export { Search } from './Search';

package/es/components/molecules/EditingList/components/Search/index.js

@@ -0,0 +1 @@
+export { Search } from './Search';

package/es/components/molecules/EditingList/components/Title/Title.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type TitleProps = {
+    title: React.ReactNode;
+    showNum: boolean;
+    selectedAmount?: number;
+    optionAmount?: number;
+};
+export declare const Title: (props: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingList/components/Title/Title.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Flex, Typography } from 'antd';
+import { AmountSelected } from '../../styled';
+import { CLS } from '../../utils';
+export const Title = (props) => {
+    const { title, showNum } = props;
+    const renderSelectedAmount = () => {
+        if (!showNum)
+            return null;
+        const { optionAmount, selectedAmount } = props;
+        if (!optionAmount || !selectedAmount)
+            return null;
+        return (_jsxs(AmountSelected, { children: ["(", selectedAmount, "/", optionAmount, ")"] }));
+    };
+    return (_jsxs(Flex, { className: CLS.Title.default, align: "center", gap: 8, children: [_jsx(Typography.Text, { strong: true, children: title }), renderSelectedAmount()] }));
+};

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

@@ -0,0 +1 @@
+export { Title } from './Title';

package/es/components/molecules/EditingList/components/Title/index.js

@@ -0,0 +1 @@
+export { Title } from './Title';

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

@@ -0,0 +1,6 @@
+export { List } from './List';
+export { Action } from './Action';
+export { Search } from './Search';
+export { Popover } from './Popover';
+export { Title } from './Title';
+export * as LazyComponent from './Loadable';

package/es/components/molecules/EditingList/components/index.js

@@ -0,0 +1,6 @@
+export { List } from './List';
+export { Action } from './Action';
+export { Search } from './Search';
+export { Popover } from './Popover';
+export { Title } from './Title';
+export * as LazyComponent from './Loadable';

package/es/components/molecules/EditingList/styled.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 export declare const EditingListRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSelectedItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const StyledAddBtn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const AmountSelected: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

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

@@ -1,15 +1,24 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { Flex, Typography } from 'antd';
 import styled from 'styled-components';
+import { CLS } from './utils';
 export const EditingListRoot = styled(Flex) `
   height: 100%;
 `;
 export const StyledListWrapper = styled.div `
   flex: 1;
-`;
-export const StyledSelectedItem = styled(Flex) `
-  > svg {
-    flex-shrink: 0;
+
+  .${CLS.ListItem.default} {
+    .${CLS.RemoveButton.default} {
+      flex-shrink: 0;
+      display: none;
+    }
+
+    &:hover {
+      .${CLS.RemoveButton.default} {
+        display: block;
+      }
+    }
   }
 `;
 export const StyledAddBtn = styled(Flex) `

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

@@ -1,17 +1,18 @@
 /// <reference types="react" />
+export type Option = {
+    key: string;
+    label: React.ReactNode;
+    search?: string;
+};
 export type EditingListProps = {
     title?: React.ReactNode;
     addBtnLabel?: string;
-    options?: {
-        key: string;
-        label: React.ReactNode;
-        search?: string;
-    }[];
+    options?: Option[];
     selected?: string[];
     showNum?: boolean;
-    removable?: boolean;
     className?: string;
-    onChange?: (selected: string[]) => void;
     isLoading?: boolean;
     emptyDescription?: string;
+    removable?: boolean;
+    onChange?: (selected: string[]) => void;
 };

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

@@ -0,0 +1,27 @@
+export declare const componentCls: (className: string) => string;
+export declare const CLS: {
+    readonly Root: {
+        readonly default: string;
+    };
+    readonly Title: {
+        readonly default: string;
+    };
+    readonly Search: {
+        readonly default: string;
+    };
+    readonly RemoveButton: {
+        readonly default: string;
+    };
+    readonly AddButton: {
+        readonly default: string;
+    };
+    readonly ListWapper: {
+        readonly default: string;
+    };
+    readonly List: {
+        readonly default: string;
+    };
+    readonly ListItem: {
+        readonly default: string;
+    };
+};

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

@@ -0,0 +1,28 @@
+import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
+export const componentCls = antsomiClsx('editing-list');
+export const CLS = {
+    Root: {
+        default: componentCls('root'),
+    },
+    Title: {
+        default: componentCls('title'),
+    },
+    Search: {
+        default: componentCls('search'),
+    },
+    RemoveButton: {
+        default: componentCls('remove-btn'),
+    },
+    AddButton: {
+        default: componentCls('add-btn'),
+    },
+    ListWapper: {
+        default: componentCls('selected-list-wrapper'),
+    },
+    List: {
+        default: componentCls('selected-list'),
+    },
+    ListItem: {
+        default: componentCls('selected-list-item'),
+    },
+};

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -7,8 +7,8 @@ import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
 import { EmptyData } from '../../../EmptyData';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-import { defaultSearch } from '../../utils';
-import { VirtualizedMenu, calListHeight } from '../../../VirtualizedMenu';
+import { calDefaultListHeightInPopover, defaultSearch } from '../../utils';
+import { VirtualizedMenu } from '../../../VirtualizedMenu';
 import { ITEM_SIZE, ITEM_SPACING } from '../../../VirtualizedMenu/config';
 const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
@@ -111,7 +111,11 @@ export const PopoverSelect = (props) => {
         key: opt.key,
         label: (_jsx(Checkbox, { onChange: e => handleToggleField(opt, e.target.checked), checked: selectedKeys.has(opt.key), children: renderCheckBoxLabel(opt) })),
     }));
-    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calListHeight(itemSize + itemSpacing, filteredOptions.length), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: {
+    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calDefaultListHeightInPopover({
+                        listLength: filteredOptions.length,
+                        itemSize,
+                        itemSpacing,
+                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: {
             ...restInputSearchProps,
             value: search,
             onAfterChange: handleOnSearch,

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

@@ -1,2 +1,7 @@
 import { Option } from './types';
 export declare const defaultSearch: (opt: Option, search: string) => boolean;
+export declare const calDefaultListHeightInPopover: (params: {
+    listLength: number;
+    itemSize: number;
+    itemSpacing: number;
+}) => number;

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

@@ -1,4 +1,6 @@
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { calInlineListSize } from '../VirtualizedMenu/utils';
+import { min } from 'lodash';
 export const defaultSearch = (opt, search) => {
     let text = opt.key;
     if (typeof opt.label === 'string') {
@@ -9,3 +11,9 @@ export const defaultSearch = (opt, search) => {
     }
     return searchStringQuery(text, search);
 };
+export const calDefaultListHeightInPopover = (params) => {
+    const { listLength, itemSpacing, itemSize } = params;
+    const DEFAULT_NUM_ITEM_SHOWED = 6;
+    const itemLength = min([DEFAULT_NUM_ITEM_SHOWED, listLength]);
+    return calInlineListSize(itemLength || 0, itemSize, itemSpacing);
+};

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

@@ -2,7 +2,6 @@ import React from 'react';
 export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     items: import("./types").ItemType[];
     inlineIndent: number;
-    expandIcon: React.ReactNode;
     inlinePadding: number;
     itemSpacing: number;
     selectable: boolean;
@@ -14,6 +13,7 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
         item: import("./types").ItemType;
         pathKey: import("./types").PathKey;
     }) => void;
-}> & Partial<{
-    mode: "inline";
-}> & React.RefAttributes<import("./types").VirtualizedMenuBaseHandle>>;
+    action: React.ReactNode | ((item: import("./types").ItemType) => React.ReactNode);
+}> & {
+    mode?: "inline" | undefined;
+} & React.RefAttributes<import("./types").VirtualizedMenuBaseHandle>>;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { MODE } from './config';
 import { MenuInline } from './components';
-export const VirtualizedMenu = forwardRef((props, ref) => {
+const VirtualizedMenuInner = (props, ref) => {
     const { mode = MODE.Inline } = props;
     let content = null;
     switch (mode) {
@@ -14,4 +14,5 @@ export const VirtualizedMenu = forwardRef((props, ref) => {
             break;
     }
     return content;
-});
+};
+export const VirtualizedMenu = forwardRef(VirtualizedMenuInner);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ItemType, SerializedItemType } from '../../types';
+import { ItemType, MenuInlineProps, SerializedItemType } from '../../types';
 import { ListChildComponentProps } from 'react-window';
 export type MemoryData = {
     itemSpacing: number;
@@ -8,6 +8,7 @@ export type MemoryData = {
     items: SerializedItemType[];
     selectedKeys: Set<string>;
     expandedKeys: Set<string>;
+    action: MenuInlineProps['action'];
     onClick: (item: 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

@@ -1,25 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
 import { Typography } from '../../../../atoms/Typography';
-import { Icon } from '../../../../atoms/Icon';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
 import { areEqual } from 'react-window';
+import { isEmpty } from 'lodash';
+import { CLS } from '../../utils';
+import { ExpandMoreIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const Item = memo((props) => {
     const { style = {}, data, index = 0 } = props;
-    const { inlineIndent, itemSpacing, inlinePadding, items, selectedKeys, expandedKeys, onClick } = data || {};
+    const { inlineIndent, itemSpacing, inlinePadding, items, selectedKeys, expandedKeys, action, onClick, } = data || {};
     const item = items[index];
     const indentSize = ((item.level || 0) - 1) * inlineIndent;
     const itemStyle = {
         ...style,
         paddingLeft: indentSize + inlinePadding,
         paddingRight: inlinePadding,
-        top: Number(style.top) + itemSpacing,
-        height: Number(style.height) - itemSpacing,
+        top: index === 0 ? Number(style.top) : Number(style.top) + itemSpacing,
+        height: index === 0 ? Number(style.height) : Number(style.height) - itemSpacing,
     };
-    const className = clsx({
-        'item-selected': selectedKeys.has(item.key),
-        'item-expanded': expandedKeys.has(item.key),
+    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);
     const handleOnClick = () => {
         if (!onClick || item?.disabled)
@@ -32,7 +36,14 @@ export const Item = memo((props) => {
         }
         return item?.label;
     };
-    return (_jsxs(MenuItemRoot, { className: clsx({
-            'item-disabled': item?.disabled,
-        }, className), style: itemStyle, onClick: handleOnClick, children: [_jsx("div", { className: "item-label", children: renderLabel() }), !!item?.children?.length && (_jsx("div", { className: "item-actions", children: _jsx(Icon, { type: "icon-ants-expand-more" }) }))] }));
+    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()] }));
 }, areEqual);

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { ItemType } from '../../types';
-export declare const MenuInline: import("react").ForwardRefExoticComponent<Partial<{
+export declare const MenuInline: React.ForwardRefExoticComponent<Partial<{
     items: ItemType[];
     inlineIndent: number;
-    expandIcon: import("react").ReactNode;
     inlinePadding: number;
     itemSpacing: number;
     selectable: boolean;
@@ -15,6 +14,7 @@ export declare const MenuInline: import("react").ForwardRefExoticComponent<Parti
         item: ItemType;
         pathKey: import("../../types").PathKey;
     }) => void;
-}> & Partial<{
-    mode: "inline";
-}> & import("react").RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>;
+    action: React.ReactNode | ((item: ItemType) => React.ReactNode);
+}> & {
+    mode?: "inline" | undefined;
+} & React.RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>;