@antscorp/antsomi-ui 1.3.5-beta.71 → 1.3.5-beta.710

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const MatchesAnyWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const TextButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const GroupSelectButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const StyledTree: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree/Tree").TreeProps<T> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("rc-tree").default<import("rc-tree/lib/interface").DataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("rc-tree/lib/interface").DataNode>>;
+    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("rc-tree").default<import("rc-tree/lib/interface").DataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+} & {
+    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("rc-tree").default<import("rc-tree/lib/interface").DataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+    Standard: import("react").FC<import("antd/es/tree/Tree").TreeProps<import("rc-tree/lib/interface").DataNode>>;
+}, any, {}, never>;
+export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>, any, {}, never>;
+export declare const ExtraValueLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -0,0 +1,262 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Button, Flex, Input, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Tree } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { EXTRA_VALUE_SHIFT_WIDTH, EXTRA_VALUE_WIDTH } from './constants';
+const { borderRadius, bw3, bw6, blue, blue1, colorPrimary, colorError } = globalToken || {};
+export const MatchesAnyWrapper = styled(Flex) `
+  width: 100%;
+  height: 550px;
+
+  .matches-any {
+    &__header {
+      display: flex;
+      align-items: center;
+      height: 50px;
+      box-sizing: border-box;
+      padding: 0px 15px;
+      border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+      gap: 10px;
+
+      .antsomi-search-input {
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+    }
+
+    &__section {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      position: relative;
+      width: 50%;
+      height: 100%;
+
+      &--left {
+        border-right: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+      }
+    }
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      gap: 10px;
+      position: relative;
+      height: 100%;
+      padding: 10px 15px;
+
+      .antsomi-spin-nested-loading {
+        height: 100%;
+
+        .antsomi-spin-container {
+          height: 100%;
+        }
+      }
+    }
+
+    &__footer {
+      flex-shrink: 0;
+      padding: 15px;
+      box-sizing: border-box;
+      border-top: 1px solid ${bw3};
+    }
+  }
+
+  .antsomi-tree {
+    .antsomi-tree-list-holder-inner {
+      /* gap: 5px; */
+    }
+
+    .antsomi-tree-treenode {
+      width: 100%;
+      padding: 0px;
+      transition: all 300ms;
+      padding-bottom: 5px;
+
+      .antsomi-tree-switcher {
+        width: 20px;
+        &.antsomi-tree-switcher-noop {
+          display: none;
+        }
+      }
+
+      .antsomi-tree-node-content-wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0 5px;
+
+        .antsomi-tree-title {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 10px;
+
+          .title-content {
+            padding: 5px 0px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+
+            > .left-content {
+              width: 100%;
+              overflow: auto;
+            }
+
+            .sub-title {
+              font-size: 11px;
+            }
+
+            .extra-value-content {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: ${EXTRA_VALUE_WIDTH}px;
+            }
+
+            &.extra-value {
+              width: calc(100% - ${EXTRA_VALUE_SHIFT_WIDTH}px);
+            }
+          }
+        }
+      }
+
+      .antsomi-tree-switcher:not(.antsomi-tree-switcher-noop) ~ .antsomi-tree-node-content-wrapper {
+        padding-left: 0;
+      }
+
+      .antsomi-tree-switcher.antsomi-tree-switcher-noop ~ .antsomi-tree-node-content-wrapper {
+        &:hover {
+          background-color: ${blue};
+
+          .select-button {
+            opacity: 1;
+          }
+        }
+      }
+
+      .antsomi-tree-indent-unit {
+        width: 15px !important;
+      }
+
+      &.antsomi-tree-treenode-disabled {
+        .antsomi-typography {
+          color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw6} !important;
+        }
+
+        .select-button {
+          display: none;
+        }
+      }
+
+      &:not(:has(span.antsomi-tree-switcher-noop)) {
+        border-radius: ${borderRadius}px;
+
+        .antsomi-tree-node-content-wrapper {
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+        }
+
+        .antsomi-tree-switcher {
+          border-top-left-radius: ${borderRadius}px;
+          border-bottom-left-radius: ${borderRadius}px;
+        }
+
+        &:hover {
+          .antsomi-tree-switcher,
+          .antsomi-tree-node-content-wrapper {
+            background-color: ${blue};
+          }
+
+          .select-button {
+            opacity: 1;
+          }
+        }
+      }
+
+      &.error-node {
+        .antsomi-tree-node-content-wrapper {
+          border-color: ${colorError};
+          border-width: 1px;
+          border-style: solid;
+        }
+
+        &:not(:has(span.antsomi-tree-switcher-noop)) {
+          .antsomi-tree-node-content-wrapper {
+            border-left-width: 0px;
+          }
+
+          .antsomi-tree-switcher {
+            border-color: ${colorError};
+            border-width: 1px;
+            border-right-width: 0;
+            border-style: solid;
+          }
+        }
+      }
+
+      &.load-more-node {
+        overflow: hidden;
+        height: 0px !important;
+        padding: 0px !important;
+      }
+    }
+  }
+
+  .empty-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const TextButton = styled(Typography.Text) `
+  color: ${colorPrimary} !important;
+  font-weight: 500;
+  cursor: pointer;
+
+  ${props => props.disabled &&
+    css `
+      color: ${bw6} !important;
+      pointer-events: none;
+    `}
+`;
+export const GroupSelectButton = styled(Button) `
+  gap: 4px !important;
+  .group-name {
+    font-weight: normal !important;
+  }
+`;
+export const ActionButton = styled(Flex) `
+  height: 16px;
+  width: 16px;
+  opacity: 0;
+  transition: all 300ms;
+
+  i {
+    color: ${colorPrimary};
+    transform: rotate(90deg);
+  }
+`;
+export const StyledTree = styled(Tree) ``;
+export const TextArea = styled(Input.TextArea) `
+  &.antsomi-input-borderless {
+    border: 1px solid ${blue1} !important;
+    border-radius: ${borderRadius}px;
+  }
+`;
+export const ExtraValueLabel = styled.div `
+  width: ${EXTRA_VALUE_WIDTH}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const ItemStatus = styled(Flex) ``;

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

@@ -0,0 +1,69 @@
+import { TreeDataNode } from 'antd';
+import { ReactNode } from 'react';
+import type { EmptyDataProps, SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
+import type { FlexProps, PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopoverSelectProps } from '../SearchPopover/types';
+export type MatchesAnyItem<TItem = any> = TreeDataNode & {
+    /**  Addition title of the item. */
+    subTitle?: string;
+    /** Indicates whether the item is extended */
+    isExtendValue?: boolean;
+    /** An array of children items. */
+    children?: MatchesAnyItem<TItem>[];
+    /** An error message */
+    error?: string;
+} & TItem;
+export type GroupSelectProps = PopoverSelectProps & {
+    /** Name of the group select to be displayed */
+    name?: string;
+};
+export type RenderExtraValue<TItem = any> = {
+    key: keyof MatchesAnyItem<TItem>;
+    label: string;
+    render?: (item: MatchesAnyItem<TItem>) => ReactNode | ReactNode;
+};
+export type CustomItemRenders<TItem> = {
+    title?: (item: MatchesAnyItem<TItem>) => ReactNode;
+    subTitle?: (item: MatchesAnyItem<TItem>) => ReactNode;
+    error?: (item: MatchesAnyItem<TItem>) => ReactNode;
+};
+export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'onChange'> {
+    /** The name of object to be displayed in Popover */
+    objectName?: string;
+    /** Indicates whether show the extend value button */
+    showExtendValue?: boolean;
+    /** An array of items. */
+    items?: MatchesAnyItem<TItem>[];
+    /** An array of selected items. */
+    selectedItems?: MatchesAnyItem<TItem>[];
+    /** Selected Tree Data serve for case items not load complete for showing fully displayed selected items */
+    selectedTreeData?: MatchesAnyItem<TItem>[];
+    /** The properties of the group select */
+    groupSelectProps?: GroupSelectProps;
+    /** An array of render extra values */
+    renderExtraValues?: RenderExtraValue<TItem>[];
+    /** Custom item renders */
+    customItemRenders?: CustomItemRenders<TItem>;
+    /** Popover Props */
+    popoverProps?: Partial<PopoverProps>;
+    /** Empty UI for list items */
+    listEmptyProps?: EmptyDataProps;
+    /** Empty UI for selected list items */
+    selectedListEmptyProps?: EmptyDataProps;
+    /** Callback function that is called when the selected items change. */
+    onChange?: (selectedItems: MatchesAnyItem<TItem>[], selectedTreeData?: MatchesAnyItem<TItem>[]) => void;
+    /** Callback function that is called when the search value changes */
+    onChangeSearch?: (searchValue: string) => void;
+    /** Callback function that is called when the user scroll */
+    onLoadMore?: () => void;
+}
+export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData'> {
+    /**
+     * Callback function that is called when the apply action is triggered.
+     *
+     * @param selectedItems - The array of selected items.
+     */
+    onApply?: (selectedItems: MatchesAnyItem<TItem>[], selectedTreeData?: MatchesAnyItem<TItem>[]) => void;
+    /** Callback function that is called when the cancel action is triggered. */
+    onCancel?: () => void;
+}

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

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

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

@@ -0,0 +1,2 @@
+import { MatchesAnyItem } from './types';
+export declare const getSelectedTreeData: (items: MatchesAnyItem<any>[], selectedItems: MatchesAnyItem<any>[], selectedTreeData?: MatchesAnyItem<any>[]) => any;

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

@@ -0,0 +1,42 @@
+// Libraries
+import deepmerge from 'deepmerge';
+// Utils
+import { flatTree } from '@antscorp/antsomi-ui/es/utils';
+const customMergeTreeData = (key) => (target, source) => {
+    const merged = target.map(item => {
+        const found = source.find(s => s[key] === item[key]);
+        if (found) {
+            return deepmerge(found, item, { arrayMerge: customMergeTreeData(key) });
+        }
+        return item;
+    });
+    const newItems = source.filter(s => !target.some(t => t[key] === s[key]));
+    return [...merged, ...newItems];
+};
+export const getSelectedTreeData = (items, selectedItems, selectedTreeData = []) => {
+    const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
+    const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
+    const serializeTreeData = (list) => {
+        var _a;
+        return ((_a = list
+            .filter(item => {
+            /**
+             * Checks if the given item or any of its descendants are selected.
+             *
+             * If the item has children, it flattens the children tree structure and checks if any node is selected.
+             * If the item does not have children, it directly checks if the item is in the selected items list.
+             *
+             */
+            const isSelected = item.children
+                ? flatTree(item.children, 'children').some(item => notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key))
+                : notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key);
+            return isSelected;
+        })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), (item.children && {
+            children: serializeTreeData(item.children),
+        }))))) || [];
+    };
+    const mergeItems = deepmerge(selectedTreeData || [], items || [], {
+        arrayMerge: customMergeTreeData('key'),
+    });
+    return serializeTreeData(mergeItems).concat(extendValueSelectedItems);
+};

package/es/components/molecules/Modal/Modal.js

@@ -7,16 +7,19 @@ import { StyledModal, WrapperSpin } from './styled';
 export const OriginalModal = memo(props => {
     // Props
     const { loading } = props;
-    return (React.createElement(StyledModal, Object.assign({}, Object.assign(Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }), footer: (React.createElement(React.Fragment, null,
+    return (React.createElement(StyledModal, Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }),
+        footer: (React.createElement(React.Fragment, null,
             React.createElement(Button, Object.assign({ type: "primary", onClick: props.onOk }, props.okButtonProps), props.okText ? props.okText : 'OK'),
-            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))), modalRender: node => loading ? (React.createElement(WrapperSpin, null,
-            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props), { maskClosable: loading ? false : props.maskClosable })),
+            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))),
+        modalRender: node => loading ? (React.createElement(WrapperSpin, null,
+            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props, { maskClosable: loading ? false : props.maskClosable }),
         props.header || null,
         props.children || null));
 });
 OriginalModal.displayName = 'OriginalModal';
 export const Modal = OriginalModal;
 Modal.confirm = (props) => StyledModal.confirm(Object.assign({ cancelText: 'Cancel' }, props));
+Modal.useModal = StyledModal.useModal;
 Modal.success = StyledModal.success;
 Modal.info = StyledModal.info;
 Modal.error = StyledModal.error;

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

@@ -23,8 +23,9 @@ export const StyledModal = styled(AntdModal) `
       }
     }
     .antsomi-modal-header {
-      padding: 20px;
+      padding: 15px;
       padding-bottom: 0;
+      margin-bottom: 0;
       border-style: 0px;
 
       ${props => (props.headerStyle ? JSToCSS(props.headerStyle) : '')}
@@ -35,13 +36,14 @@ export const StyledModal = styled(AntdModal) `
     : ''}
     }
     .antsomi-modal-body {
-      padding: 20px;
+      padding: 15px;
     }
     .antsomi-modal-footer {
       display: flex;
       align-items: center;
-      padding-left: 20px;
-      padding-right: 20px;
+      padding-left: 15px;
+      padding-right: 15px;
+      margin-top: 0px;
 
       ${p => p.rightFooter
     ? css `

package/es/components/molecules/ModalSelect/Card.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CardProps } from 'antd';
+import { CardDefinationProps, CardRecommendedProps } from './types';
+export declare const Card: (props: CardProps) => React.JSX.Element;
+export declare const CardDefination: (props: CardDefinationProps) => React.JSX.Element;
+export declare const CardRecommended: (props: CardRecommendedProps) => React.JSX.Element;

package/es/components/molecules/ModalSelect/Card.js

@@ -0,0 +1,57 @@
+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, { useEffect, useRef, useState } from 'react';
+import { CardDefinationContainer, CardRecommendedContainer, RecommendItem, StyledCard, } from './styled';
+import { Tooltip, Typography } from 'antd';
+import clsx from 'clsx';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { Text, Paragraph } = Typography;
+export const Card = (props) => {
+    const { children, bordered = false } = props, rest = __rest(props, ["children", "bordered"]);
+    return (React.createElement(StyledCard, Object.assign({ bordered: bordered }, rest), children));
+};
+export const CardDefination = (props) => {
+    const refreshKey = useRef(0);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [expandable, setExpandable] = useState(true);
+    const { title, description, descriptionEllipsis = {} } = props;
+    useEffect(() => {
+        if (!expandable) {
+            setExpandable(true);
+        }
+    }, [expandable]);
+    const handleCollapse = () => {
+        refreshKey.current += 1;
+        setExpandable(false);
+    };
+    return (React.createElement(CardDefinationContainer, null,
+        title && React.createElement(Text, { className: "title" }, title),
+        description && (React.createElement(Paragraph, { key: refreshKey.current, ellipsis: Object.assign(Object.assign({ rows: 3, tooltip: true, symbol: 'View more' }, descriptionEllipsis), { expandable, onExpand: () => setIsExpanded(true) }), className: "description" },
+            description,
+            isExpanded && (React.createElement("span", { className: "antsomi-typography-collapse", onClick: handleCollapse }, "View less"))))));
+};
+export const CardRecommended = (props) => {
+    const { title, recomendations = [] } = props;
+    return (React.createElement(CardRecommendedContainer, null,
+        title && React.createElement(Text, { className: "title" }, title),
+        React.createElement("div", { className: "recomendations" }, recomendations.map(i => {
+            const { description, className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
+            const item = (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
+            if (typeof description === 'string') {
+                return (React.createElement(Tooltip, { title: description, placement: "top" }, item));
+            }
+            if (description) {
+                return React.createElement(Tooltip, Object.assign({}, description), item);
+            }
+            return item;
+        }))));
+};

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

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

package/es/components/molecules/ModalSelect/ModalSelect.js

@@ -0,0 +1,56 @@
+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, { useCallback, useEffect, useState } from 'react';
+import { Menu } from 'antd';
+import { StyledModal } from './styled';
+import { isFunction } from 'lodash';
+import clsx from 'clsx';
+export const ModalSelect = (props) => {
+    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk, contentWrapperProps = {} } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk", "contentWrapperProps"]);
+    const [selected, setSelected] = useState(null);
+    const [open, setOpen] = useState(false);
+    const handleSetMenuRef = useCallback((ref) => {
+        var _a;
+        if (!((_a = ref === null || ref === void 0 ? void 0 : ref.menu) === null || _a === void 0 ? void 0 : _a.list))
+            return;
+        if (menuRefProp) {
+            menuRefProp(ref.menu.list);
+        }
+    }, [menuRefProp]);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setSelected(value);
+    }, [value]);
+    useEffect(() => {
+        if (openProp === undefined)
+            return;
+        setOpen(openProp);
+    }, [openProp]);
+    const renderContent = () => {
+        if (!isFunction(content))
+            return null;
+        return content(selected || null);
+    };
+    const handleClickItem = (key) => {
+        setSelected(key);
+        if (onChange)
+            onChange(key);
+    };
+    const handleOk = (e) => {
+        if (onOk)
+            onOk(e, selected);
+    };
+    return (React.createElement(StyledModal, Object.assign({}, rest, { open: open, onOk: handleOk, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: `${okButtonProps.className} ok-btn` }), cancelButtonProps: Object.assign(Object.assign({}, cancelButtonProps), { className: `${cancelButtonProps.className} cancel-btn` }), title: title || 'Select' }),
+        React.createElement(Menu, { ref: handleSetMenuRef, items: options, selectedKeys: [selected || ''], onClick: info => handleClickItem(info.key) }),
+        React.createElement("div", Object.assign({}, contentWrapperProps, { className: clsx(contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className, 'ModalSelect-content') }), renderContent())));
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ModalSelect: {
+    Modal: (props: import("./types").ModalSelectProps) => import("react").JSX.Element;
+    Card: (props: import("antd").CardProps) => import("react").JSX.Element;
+    CardRecommended: (props: import("./types").CardRecommendedProps) => import("react").JSX.Element;
+    CardDefination: (props: import("./types").CardDefinationProps) => import("react").JSX.Element;
+};
+export type { ModalSelectProps } from './types';

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

@@ -0,0 +1,8 @@
+import { ModalSelect as Modal } from './ModalSelect';
+import { Card, CardDefination, CardRecommended } from './Card';
+export const ModalSelect = {
+    Modal,
+    Card,
+    CardRecommended,
+    CardDefination,
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+    useModal: typeof import("antd/es/modal/useModal").default;
+    destroyAll: () => void;
+    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+}, any, {}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("antd/es/card").CardInterface, any, {}, never>;
+export declare const CardDefinationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardRecommendedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecommendItem: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;