@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

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

@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react';
+import { ItemType, VirtualizedMenuProps } from '../../types';
+type ItemProps = Partial<{
+    item: ItemType;
+    expandIcon: VirtualizedMenuProps['expandIcon'];
+}> & ComponentProps<'div'>;
+export declare const Item: React.MemoExoticComponent<(props: ItemProps) => React.JSX.Element>;
+export {};

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

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+import { Typography } from '../../../../atoms/Typography';
+import { Icon } from '../../../../atoms/Icon';
+import { MenuItemRoot } from '../../styled';
+import clsx from 'clsx';
+export const Item = memo((props) => {
+    var _a;
+    const { className, style, item, expandIcon, onClick } = props;
+    const handleOnClick = (e) => {
+        if (!onClick || (item === null || item === void 0 ? void 0 : item.disabled))
+            return;
+        onClick(e);
+    };
+    const renderLabel = () => {
+        if (typeof (item === null || item === void 0 ? void 0 : item.label) === 'string') {
+            return React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, item.label);
+        }
+        return item === null || item === void 0 ? void 0 : item.label;
+    };
+    return (React.createElement(MenuItemRoot, { className: clsx({
+            'item-disabled': item === null || item === void 0 ? void 0 : item.disabled,
+        }, className), style: style, onClick: handleOnClick },
+        React.createElement("div", { className: "item-label" }, renderLabel()),
+        !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "item-actions" }, expandIcon || React.createElement(Icon, { type: "icon-ants-expand-more" })))));
+});

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

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

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MenuInlineProps } from '../../types';
+export declare const MenuInline: (props: MenuInlineProps) => React.JSX.Element;

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

@@ -0,0 +1,112 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VirtualizedMenuContainer } from '../../styled';
+import { INLINE_INDENT, INLINE_PADDING, ITEM_SIZE, ITEM_SPACING, MODE } from '../../config';
+import { getFlattenItems } from '../../utils';
+import { Item } from '../Item';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+const innerElementType = forwardRef((_a, ref) => {
+    var { style } = _a, rest = __rest(_a, ["style"]);
+    return React.createElement("div", Object.assign({ 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());
+    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    useDeepCompareEffect(() => {
+        if (!openKeysProp)
+            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) => {
+        var _a;
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.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) => {
+        var _a;
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const itemKey = item.key;
+        const newOpenKeys = new Set(openKeys);
+        newOpenKeys.add(itemKey);
+        setOpenKeys(newOpenKeys);
+    }, [openKeys]);
+    const handleClickItem = useCallback((item, idx) => () => {
+        var _a;
+        const { key } = item;
+        const isOpen = openKeys.has(key);
+        const hasChilren = !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+        if (hasChilren && isOpen) {
+            handleCollapseItem(item);
+        }
+        if (hasChilren && !isOpen) {
+            handleExpandItem(item);
+        }
+        if (selectable && !hasChilren && !selectedKeys.has(key)) {
+            setSelectedKeys(new Set([item.key]));
+        }
+        if (onClick) {
+            onClick({ item, pathKey: flattenItems[idx].pathKey });
+        }
+    }, [
+        selectable,
+        flattenItems,
+        handleCollapseItem,
+        handleExpandItem,
+        onClick,
+        openKeys,
+        selectedKeys,
+    ]);
+    const renderItem = useCallback((args) => {
+        const { index, style } = args;
+        const item = flattenItems[index];
+        const indentSize = ((item.level || 0) - 1) * inlineIndent;
+        const itemStyle = Object.assign(Object.assign({}, style), { paddingLeft: indentSize + inlinePadding, paddingRight: inlinePadding, top: Number(style.top) + itemSpacing, height: Number(style.height) - itemSpacing });
+        return (React.createElement(Item, { className: clsx({
+                'item-selected': selectedKeys.has(item.key),
+                'item-expanded': openKeys.has(item.key),
+            }, item.className), onClick: handleClickItem(item, index), style: itemStyle, item: item }));
+    }, [
+        flattenItems,
+        handleClickItem,
+        inlinePadding,
+        inlineIndent,
+        itemSpacing,
+        selectedKeys,
+        openKeys,
+    ]);
+    // console.log('render');
+    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { MenuInline } from './MenuInline';
+export { Item } from './Item';

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

@@ -0,0 +1,2 @@
+export { MenuInline } from './MenuInline';
+export { Item } from './Item';

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

@@ -0,0 +1,12 @@
+export declare const MODE: {
+    readonly Inline: "inline";
+};
+export declare const ACTION_TYPES: {
+    readonly init: "init";
+    readonly reset: "reset";
+    readonly toggleExpand: "toggleExpand";
+};
+export declare const INLINE_PADDING = 10;
+export declare const INLINE_INDENT = 10;
+export declare const ITEM_SPACING: number;
+export declare const ITEM_SIZE: number;

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

@@ -0,0 +1,12 @@
+var _a, _b, _c, _d, _e;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const MODE = { Inline: 'inline' };
+export const ACTION_TYPES = {
+    init: 'init',
+    reset: 'reset',
+    toggleExpand: 'toggleExpand',
+};
+export const INLINE_PADDING = 10;
+export const INLINE_INDENT = 10;
+export const ITEM_SPACING = parseFloat(((_c = (_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemMarginBlock) === null || _c === void 0 ? void 0 : _c.toString()) || '10');
+export const ITEM_SIZE = ((_e = (_d = THEME.components) === null || _d === void 0 ? void 0 : _d.Menu) === null || _e === void 0 ? void 0 : _e.itemHeight) || 35;

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

@@ -0,0 +1,2 @@
+export { VirtualizedMenu } from './VirtualizedMenu';
+export { type VirtualizedMenuProps } from './types';

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

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

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

@@ -0,0 +1,4 @@
+import { VariableSizeList } from 'react-window';
+export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItemRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VirtualizedMenuContainer: import("styled-components").StyledComponent<typeof VariableSizeList, any, {}, never>;

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

@@ -0,0 +1,69 @@
+var _a, _b, _c, _d, _e, _f, _g, _h;
+import styled from 'styled-components';
+import { VariableSizeList } from 'react-window';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
+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-shirnk: 0;
+  }
+
+  .title-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export const MenuItemRoot = styled.div `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border-radius: ${(_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemBorderRadius}px;
+
+  > .item-label {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  > .item-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.item-disabled {
+    color: ${(_d = (_c = THEME.components) === null || _c === void 0 ? void 0 : _c.Menu) === null || _d === void 0 ? void 0 : _d.itemDisabledColor};
+    cursor: not-allowed;
+  }
+
+  &.item-selected {
+    background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Menu) === null || _f === void 0 ? void 0 : _f.itemActiveBg};
+  }
+
+  &.item-expanded {
+    > .item-actions {
+      > i[type='icon-ants-expand-more'] {
+        rotate: 180deg;
+        transition: rotate 2s;
+      }
+    }
+  }
+
+  &:hover:not(.item-disabled, .item-selected) {
+    background-color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Menu) === null || _h === void 0 ? void 0 : _h.itemHoverBg};
+  }
+`;
+export const VirtualizedMenuContainer = styled(VariableSizeList) `
+  font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSize}px;
+  scrollbar-gutter: stable;
+`;

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ItemType, PathKey } from './types';
+export declare const getFlattenItems: (args: {
+    items: ItemType[];
+}) => ({
+    key: string;
+} & Partial<{
+    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/molecules/VirtualizedMenu/utils.js

@@ -0,0 +1,17 @@
+export const getFlattenItems = (args) => {
+    const { items } = args;
+    const result = [];
+    function recursively(items, level, pathKey, parent) {
+        items.forEach((item, idx) => {
+            const currentPathKey = [...pathKey, idx, item.key.toString()];
+            result.push(Object.assign(Object.assign({}, item), { level, pathKey: currentPathKey, parent }));
+            if (item.children && item.children.length > 0) {
+                recursively(item.children, level + 1, currentPathKey, item);
+            }
+        });
+    }
+    if (items.length) {
+        recursively(items, 1, [], null);
+    }
+    return result;
+};

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

@@ -1,11 +1,12 @@
+export { AccountSelection, AccountListing, useAccountSelection } from './AccountSelection';
 export { Cascader } from './Cascader';
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';
 export { Modal } from './Modal';
 export { Select } from './Select';
+export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
-export { ChatBox } from './ChatBox';
+export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
-export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';
 export { ColorPicker } from './ColorPicker';
@@ -15,6 +16,8 @@ export { RadioGroup } from './RadioGroup';
 export { InputSearch } from './InputSearch';
 export { UploadImage } from './UploadImage';
 export { IconSelection } from './IconSelection';
+export { ImageEditor as ImageResize } from './ImageEditor';
+export { ImageResizeTuiEditor } from './ImageResizeTuiEditor';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';
@@ -24,27 +27,57 @@ export { TreeSelect } from './TreeSelect';
 export { Card } from './Card';
 export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
+export { HeaderV2, type HeaderV2Props } from './HeaderV2';
 export { SettingWrapperPopover } from './SettingWrapperPopover';
 export { FontWeightSelect } from './FontWeightSelect';
 export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
-export { ThumbnailCard } from './ThumbnailCard';
 export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
 export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
+export { InputNumber as InputNumberWithLabel } from './InputNumber';
+export * from './SelectMulti';
+export * from './SelectEventAttribute';
+export * from './DatePickerV2';
+export { ModalSelect } from './ModalSelect';
+export { EditableName } from './EditableName';
+export { VirtualizedMenu } from './VirtualizedMenu';
+export { SearchPopover, PopoverAddField, PopoverSelect } from './SearchPopover';
+export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
+export { RequestAccess } from './RequestAccess';
+export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
+export * from './DrawerDetail';
+export * from './ThumbnailCard';
+export * from './ProcessLoading';
+export * from './Tree';
+export * from './MatchAnySelect';
+export * from './ApplyPopupContent';
+export * from './AccessDenied';
+export * from './Tabs';
 export { EditorScript } from './EditorScript';
-export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
+export { EditorTab } from './EditorTab';
+export { SelectAccount } from './SelectAccount';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';
 export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';
 export type { IResizeGridProps, TCell, TGrid } from './ResizeGrid';
 export type { ModalProps } from './ModalV2';
-export type { ThumbnailCardProps } from './ThumbnailCard';
 export type { TemplateValueOptions } from './TemplateSaveAs';
+export type { ImageResizeHandle } from './ImageEditor';
+export type { SelectProps as SelectV2Props } from './SelectV2';
+export type { InputNumberProps as InputNumberWithLabelProps } from './InputNumber';
+export type { ModalSelectProps } from './ModalSelect';
+export type { EditableNameHandle } from './EditableName';
+export type { AccountListingHandle, AccountSelectionProps } from './AccountSelection';
+export type { VirtualizedMenuProps } from './VirtualizedMenu';
+export type { SearchPopoverProps, PopoverAddFieldProps } from './SearchPopover';
+export type { InputDropdownProps } from './Dropdown';
+export type { SelectProps } from './Select';
+export type { EditorTabItem } from './EditorTab';

package/es/components/molecules/index.js

@@ -1,11 +1,12 @@
+export { AccountSelection, AccountListing, useAccountSelection } from './AccountSelection';
 export { Cascader } from './Cascader';
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';
 export { Modal } from './Modal';
 export { Select } from './Select';
+export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
-export { ChatBox } from './ChatBox';
+export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
-export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';
 export { ColorPicker } from './ColorPicker';
@@ -15,6 +16,8 @@ export { RadioGroup } from './RadioGroup';
 export { InputSearch } from './InputSearch';
 export { UploadImage } from './UploadImage';
 export { IconSelection } from './IconSelection';
+export { ImageEditor as ImageResize } from './ImageEditor';
+export { ImageResizeTuiEditor } from './ImageResizeTuiEditor';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';
@@ -24,19 +27,39 @@ export { TreeSelect } from './TreeSelect';
 export { Card } from './Card';
 export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
+export { HeaderV2 } from './HeaderV2';
 export { SettingWrapperPopover } from './SettingWrapperPopover';
 export { FontWeightSelect } from './FontWeightSelect';
 export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
-export { ThumbnailCard } from './ThumbnailCard';
 export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
 export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
+export { InputNumber as InputNumberWithLabel } from './InputNumber';
+export * from './SelectMulti';
+export * from './SelectEventAttribute';
+export * from './DatePickerV2';
+export { ModalSelect } from './ModalSelect';
+export { EditableName } from './EditableName';
+export { VirtualizedMenu } from './VirtualizedMenu';
+export { SearchPopover, PopoverAddField, PopoverSelect } from './SearchPopover';
+export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
+export { RequestAccess } from './RequestAccess';
+export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
+export * from './DrawerDetail';
+export * from './ThumbnailCard';
+export * from './ProcessLoading';
+export * from './Tree';
+export * from './MatchAnySelect';
+export * from './ApplyPopupContent';
+export * from './AccessDenied';
+export * from './Tabs';
 export { EditorScript } from './EditorScript';
-export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
+export { EditorTab } from './EditorTab';
+export { SelectAccount } from './SelectAccount';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type AccountSettingProps } from './components/AccountSetting';
+export interface AccountProfileProps extends Omit<AccountSettingProps, 'setDrawerHeader'> {
+    open: boolean;
+    onClose: () => void;
+}
+export declare const AccountProfile: React.FC<AccountProfileProps>;

package/es/components/organism/AccountProfile/AccountProfile.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { DrawerDetail, Icon } from '@antscorp/antsomi-ui/es/components';
+import { AccountSetting } from './components/AccountSetting';
+export const AccountProfile = props => {
+    const { open, onClose } = props;
+    const [drawerHeader, setDrawerHeader] = useState(null);
+    return (React.createElement(DrawerDetail, { open: open, closable: false, name: "drawer-account-profile", destroyOnClose: true, menuProps: {
+            items: [
+                {
+                    icon: React.createElement(Icon, { type: "icon-ants-pencil" }),
+                    label: 'Settings',
+                    key: 'settings',
+                },
+            ],
+            selectedKeys: ['settings'],
+        }, onClose: onClose, headerProps: {
+            showBorderBottom: true,
+            children: drawerHeader,
+        } },
+        React.createElement(AccountSetting, Object.assign({}, props, { setDrawerHeader: setDrawerHeader }))));
+};

package/es/components/organism/AccountProfile/components/AccountSetting/AccountSetting.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './styles.scss';
+import type { AccountSettingProps } from './types';
+export { type AccountSettingProps };
+export declare const AccountSetting: React.FC<AccountSettingProps>;