@antscorp/antsomi-ui 1.3.6-beta.3 → 1.3.6-beta.5

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/CodeStructure/CodeStructure.d.ts

@@ -7,5 +7,26 @@ interface CodeStructureProps {
         isError: boolean;
     }) => void;
 }
+/**
+ * Component to configure the code structure for a pool rule.
+ *
+ * The component contains a form with fields for:
+ * - Prefix
+ * - Infix (character type, number of digits, number of letters, capitalization, character order)
+ * - Suffix
+ * - Separator
+ * - Quantity (number of codes per time)
+ * - Refill interval (manual or automatic)
+ * - Refill threshold (number of codes remaining)
+ * - Refill unit (codes or percent)
+ *
+ * The form also displays a preview of the generated code sample.
+ *
+ * The component calls the `onChange` callback with the updated form values and an `isError` flag
+ * indicating whether the form is valid or not.
+ *
+ * @param {CodeStructureProps} props The component props.
+ * @returns {React.ReactElement} The rendered component.
+ */
 export declare const CodeStructure: React.FC<CodeStructureProps>;
 export {};

package/es/components/molecules/CodeStructure/CodeStructure.js

@@ -4,17 +4,39 @@ import { useEffect } from 'react';
 import { Form, InputNumber, Radio, Select, Typography, Flex, Input, Row, Col } from 'antd';
 import { useImmer } from 'use-immer';
 import { translate, translations } from '@antscorp/antsomi-locales';
+import { isEmpty } from 'lodash';
 // Utils
 import { calculateTotalCodes, generateCodeWithPrefixAndSuffix, generateRandomCodeWithConfig, } from './utils';
 // Types
 import { CapitalizationType, CharacterOrderType, CharacterType, RefillType, RefillUnitType, SeparatorType, } from './type';
 // Constants
 import { CAPITALIZATION_OPTIONS, CHARACTER_ORDER_OPTIONS, CHARACTER_TYPE_OPTIONS, REFILL_UNIT_OPTIONS, SEPARATOR_OPTIONS, } from './constants';
-import { CodeStructureWrapper } from './styled';
+import { BlockAbsolute, CodeStructureWrapper } from './styled';
 import { useDebouncedCallbackV2 } from '@antscorp/antsomi-ui/es/hooks';
 const { Title } = Typography;
+/**
+ * Component to configure the code structure for a pool rule.
+ *
+ * The component contains a form with fields for:
+ * - Prefix
+ * - Infix (character type, number of digits, number of letters, capitalization, character order)
+ * - Suffix
+ * - Separator
+ * - Quantity (number of codes per time)
+ * - Refill interval (manual or automatic)
+ * - Refill threshold (number of codes remaining)
+ * - Refill unit (codes or percent)
+ *
+ * The form also displays a preview of the generated code sample.
+ *
+ * The component calls the `onChange` callback with the updated form values and an `isError` flag
+ * indicating whether the form is valid or not.
+ *
+ * @param {CodeStructureProps} props The component props.
+ * @returns {React.ReactElement} The rendered component.
+ */
 export const CodeStructure = ({ initialData, onChange }) => {
-    const { characterType = CharacterType.DIGIT_AND_LETTERS, digitalNumbers = 2, alphabetLetters = 3, capitalization = CapitalizationType.UPPERCASE, characterOrder = CharacterOrderType.RANDOM, separator = SeparatorType.UNDERSCORE, quantity = 1, suffix = '', refillInterval = RefillType.MANUAL, prefix = '', refillThreshold = 10, refillUnit = RefillUnitType.CODES, } = initialData;
+    const { characterType = CharacterType.DIGIT_AND_LETTERS, digitalNumbers = 2, alphabetLetters = 3, capitalization = CapitalizationType.UPPERCASE, characterOrder = CharacterOrderType.RANDOM, separator = SeparatorType.UNDERSCORE, quantity = 50, suffix = '', refillInterval = RefillType.MANUAL, prefix = '', refillThreshold = 10, refillUnit = RefillUnitType.CODES, } = initialData;
     const [form] = Form.useForm();
     const [state, setState] = useImmer({
         codeSample: '',
@@ -42,7 +64,7 @@ export const CodeStructure = ({ initialData, onChange }) => {
             draft.codeWithPrefixAndSuffix = value;
         });
     };
-    const debouncedOnChange = useDebouncedCallbackV2(onChange, 350);
+    const debouncedOnChange = useDebouncedCallbackV2(onChange, 700);
     const updateFormValues = async (fieldKeyChange, isError) => {
         // Get all values from the form
         const allValues = form.getFieldsValue();
@@ -110,28 +132,32 @@ export const CodeStructure = ({ initialData, onChange }) => {
                 updateFormValues(fieldKeyChange, isValidate);
             }, children: [_jsx(Title, { level: 5, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE, 'Code Structure') }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_PREFIX, 'Prefix'), name: "prefix", children: _jsx(Input, { placeholder: "", style: {
                             maxWidth: 465,
-                        } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_INFIX, 'Infix') }), _jsx(Col, { span: 16, offset: 0, children: _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE, 'Character Type') }) }), _jsx(Form.Item, { name: "characterType", children: _jsx(Radio.Group, { options: CHARACTER_TYPE_OPTIONS }) })] }) })] }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "digitalNumbers", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG_NO, 'digital numbers') })] }) }) }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "alphabetLetters", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET_NO, 'alphabet letters') })] }) }) }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP, 'Letters Capitalization') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "capitalization", children: _jsx(Radio.Group, { options: CAPITALIZATION_OPTIONS }) })] }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER, 'Character Order') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "characterOrder", children: _jsx(Radio.Group, { options: CHARACTER_ORDER_OPTIONS }) })] }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SUFFIX, 'Suffix'), name: "suffix", children: _jsx(Input, { placeholder: "", style: {
+                        } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_INFIX, 'Infix') }), _jsx(Col, { span: 16, offset: 0, children: _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE, 'Character Type') }) }), _jsx(Form.Item, { name: "characterType", children: _jsx(Radio.Group, { options: CHARACTER_TYPE_OPTIONS }) })] }) })] }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", style: {
+                                position: 'relative',
+                            }, children: [_jsx(Form.Item, { name: "digitalNumbers", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx(BlockAbsolute, { children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG_NO, 'digital numbers') })] }) }) }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", style: {
+                                position: 'relative',
+                            }, children: [_jsx(Form.Item, { name: "alphabetLetters", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx(BlockAbsolute, { children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET_NO, 'alphabet letters') })] }) }) }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP, 'Letters Capitalization') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "capitalization", children: _jsx(Radio.Group, { options: CAPITALIZATION_OPTIONS }) })] }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER, 'Character Order') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "characterOrder", children: _jsx(Radio.Group, { options: CHARACTER_ORDER_OPTIONS }) })] }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SUFFIX, 'Suffix'), name: "suffix", children: _jsx(Input, { placeholder: "", style: {
                             maxWidth: 465,
-                        } }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '180px' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, children: _jsxs(Flex, { justify: "start", align: "center", gap: 5, children: [translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_QUANTITY, 'Quantity'), ' ', _jsx("span", { style: { color: 'red' }, children: "*" })] }) }), _jsx(Col, { children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { required: true, name: "quantity", rules: [{ required: true }], children: _jsx(InputNumber, { min: 1, max: 10000 }) }), _jsx("div", { style: { marginBottom: '15px' }, children: "code(s) per time" })] }) })] }), _jsxs(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: ["Maximum of ", _jsx("b", { children: maxCodes.toLocaleString() }), " codes (sample", ' ', generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')), ") to be generated"] }), _jsx(Title, { level: 5, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(Radio, { value: "manual", children: "Manual refill only" }), _jsx(Radio, { value: "auto", children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Typography.Text, { style: { whiteSpace: 'nowrap' }, children: "Add codes when less than" }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ getFieldValue }) => {
+                        } }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '180px' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, children: _jsxs(Flex, { justify: "start", align: "center", gap: 5, children: [translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_QUANTITY, 'Quantity'), ' ', _jsx("span", { style: { color: 'red' }, children: "*" })] }) }), _jsx(Col, { children: _jsxs(Flex, { gap: 10, align: "center", style: { position: 'relative' }, children: [_jsx(Form.Item, { required: true, name: "quantity", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 10000 }) }), _jsx(BlockAbsolute, { left: 100, children: "code(s) per time" })] }) })] }), _jsxs(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: ["Maximum of ", _jsx("b", { children: maxCodes.toLocaleString() }), " codes (sample", ' ', generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')), ") to be generated"] }), _jsx(Title, { level: 5, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, onChange: e => {
+                            if (e.target.value === 'manual' && isEmpty(form.getFieldValue('refillThreshold'))) {
+                                form.setFieldsValue({ refillThreshold: 10 });
+                                form.validateFields(['refillThreshold']);
+                            }
+                        }, children: [_jsx(Radio, { value: "manual", children: "Manual refill only" }), _jsx(Radio, { value: "auto", children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Typography.Text, { style: { whiteSpace: 'nowrap' }, children: "Add codes when less than" }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ getFieldValue }) => {
                                                 const refillUnit = getFieldValue('refillUnit');
                                                 return (_jsx(Form.Item, { name: "refillThreshold", noStyle: true, rules: [
                                                         { required: true, message: '' },
                                                         {
                                                             validator: (_, value) => {
                                                                 if (refillUnit === RefillUnitType.PERCENT) {
-                                                                    if (value < 1 || value > 100) {
-                                                                        return Promise.reject(new Error(''));
-                                                                    }
-                                                                }
-                                                                else if (refillUnit === RefillUnitType.CODES) {
-                                                                    if (value < 0) {
-                                                                        return Promise.reject(new Error(''));
+                                                                    if (value > 100) {
+                                                                        form.setFieldsValue({ refillThreshold: 100 });
                                                                     }
                                                                 }
                                                                 return Promise.resolve();
                                                             },
                                                         },
-                                                    ], children: _jsx(InputNumber, { min: refillUnit === RefillUnitType.CODES ? 0 : 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' } }) }));
+                                                    ], children: _jsx(InputNumber, { min: 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' } }) }));
                                             } }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: () => (_jsx(Form.Item, { name: "refillUnit", noStyle: true, rules: [
                                                     { required: true, message: '' },
                                                     {

package/es/components/molecules/CodeStructure/constants.js

@@ -29,10 +29,10 @@ export const CAPITALIZATION_OPTIONS = [
         value: CapitalizationType.LOWERCASE,
         label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_LOW, 'lowercase'),
     },
-    {
-        value: CapitalizationType.TITLE_CASE,
-        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_TITL, 'Title case'),
-    },
+    // {
+    //   value: CapitalizationType.TITLE_CASE,
+    //   label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_TITL, 'Title case'),
+    // },
 ];
 export const CHARACTER_ORDER_OPTIONS = [
     {

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

@@ -1 +1,4 @@
 export declare const CodeStructureWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BlockAbsolute: import("styled-components").StyledComponent<"div", any, {
+    left?: number | undefined;
+}, never>;

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

@@ -1,2 +1,8 @@
 import styled from 'styled-components';
 export const CodeStructureWrapper = styled.div ``;
+export const BlockAbsolute = styled.div `
+  position: absolute;
+  left: ${p => p.left || 50}px;
+  white-space: nowrap;
+  margin-bottom: 15px;
+`;

package/es/components/molecules/CodeStructure/type.d.ts

@@ -10,8 +10,7 @@ export declare enum CharacterOrderType {
 }
 export declare enum CapitalizationType {
     UPPERCASE = "upper",
-    LOWERCASE = "lower",
-    TITLE_CASE = "title"
+    LOWERCASE = "lower"
 }
 export declare enum SeparatorType {
     HYPHEN = "hyphen",

package/es/components/molecules/CodeStructure/type.js

@@ -14,7 +14,6 @@ export var CapitalizationType;
 (function (CapitalizationType) {
     CapitalizationType["UPPERCASE"] = "upper";
     CapitalizationType["LOWERCASE"] = "lower";
-    CapitalizationType["TITLE_CASE"] = "title";
 })(CapitalizationType || (CapitalizationType = {}));
 export var SeparatorType;
 (function (SeparatorType) {

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

@@ -18,9 +18,9 @@ export const generateRandomCodeWithConfig = ({ characterType, digitalNumbers, al
     else if (capitalization === CapitalizationType.LOWERCASE) {
         letterPart = letterPart.toLowerCase();
     }
-    else if (capitalization === CapitalizationType.TITLE_CASE && letterPart.length > 0) {
-        letterPart = letterPart.charAt(0).toUpperCase() + letterPart.slice(1).toLowerCase();
-    }
+    // } else if (capitalization === CapitalizationType.TITLE_CASE && letterPart.length > 0) {
+    //   letterPart = letterPart.charAt(0).toUpperCase() + letterPart.slice(1).toLowerCase();
+    // }
     // Order characters
     let finalCode = '';
     if (characterOrder === CharacterOrderType.RANDOM) {

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

@@ -0,0 +1,2 @@
+import { EditingListProps } from './types';
+export declare const EditingListV2: (props: EditingListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Suspense } from '../../atoms';
+import { ListItem, LazyComponent } from './components';
+const { Popover } = LazyComponent;
+export const EditingListV2 = (props) => {
+    const { isLoading = false, addButtonLabel = 'Add', options = [], selected = [], removable = true, popupPlacement = 'right', className, onChange, } = props;
+    const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
+    // const isSelectAll = selectedOptions.length === options.length;
+    const handleRemove = (removedKey) => {
+        const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
+        onChange?.(selectedKeys);
+    };
+    return (_jsxs("div", { className: className, children: [_jsx(ListItem, { isLoading: isLoading, selectOptions: selectedOptions, removable: removable, onClickRemove: handleRemove }), !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { placement: popupPlacement, options: options, selected: selected, addButtonLabel: addButtonLabel, onChange: onChange }) }))] }));
+};

package/es/components/molecules/EditingListV2/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/EditingListV2/components/Action/Action.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseIcon } 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(CloseIcon, { className: CLS.RemoveButton.default, size: 20, color: globalToken?.bw8, onClick: onClickRemove }));
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Option } from '../../types';
+type ListProps = {
+    isLoading: boolean;
+    selectOptions: Option[];
+    removable?: boolean;
+    onClickRemove?: (key: string) => void;
+};
+export declare const ListItem: (props: ListProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spin, Typography } from '../../../../atoms';
+import { isEmpty } from 'lodash';
+import { CLS } from '../../utils';
+import { List } from 'antd';
+import { CloseIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { useState } from 'react';
+export const ListItem = (props) => {
+    const { isLoading, selectOptions, onClickRemove, removable } = props;
+    const [hover, setHover] = useState('');
+    const renderLabel = (label) => {
+        if (typeof label === 'string') {
+            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: label });
+        }
+        return label;
+    };
+    const items = selectOptions.map(opt => ({
+        className: CLS.ListItem.default,
+        key: opt.key,
+        label: renderLabel(opt.label),
+    }));
+    if (isLoading) {
+        return _jsx(Spin, { indicatorSize: 24 });
+    }
+    if (isEmpty(selectOptions)) {
+        return;
+    }
+    return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(List.Item, { style: {
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid #B8CFE6',
+                borderRadius: '4px',
+                padding: '10px',
+                marginBottom: '10px',
+                minHeight: '40px',
+            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, ' ', hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { flexShrink: 0 }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })) }));
+};

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <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: {
+    placement?: "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "left" | "right" | "bottom" | "top" | "bottomLeft" | "topLeft" | "topRight" | "bottomRight" | undefined;
+    options: import("../types").Option[];
+    selected: string[];
+    addButtonLabel: import("react").ReactNode;
+    onChange?: ((selected: string[]) => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;

package/es/components/molecules/EditingListV2/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/EditingListV2/components/Popover/Popover.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Option } from '../../types';
+type PopoverProps = {
+    placement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    options: Option[];
+    selected: string[];
+    addButtonLabel: React.ReactNode;
+    onChange?: (selected: string[]) => void;
+};
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { AddIcon } from '../../../../icons';
+import { PopoverAddField } from '../../../SearchPopover';
+export const Popover = (props) => {
+    const { options, selected, addButtonLabel, onChange, placement } = props;
+    return (_jsx(_Fragment, { children: _jsx(PopoverAddField, { style: { margin: 0 }, fields: options, placement: placement, selected: selected, 
+            // onApply={value =>
+            //   updateUnsubscribeSetting([
+            //     {
+            //       fieldPath: 'settings.unsubscribePreferences.preferenceListIds',
+            //       data: value as unknown as string,
+            //     },
+            //   ])
+            // }
+            onApply: onChange, children: _jsxs(Button, { type: "text", children: [_jsx(AddIcon, { size: 14 }), addButtonLabel] }) }) }));
+};

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

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

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

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

package/es/components/molecules/EditingListV2/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/EditingListV2/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/EditingListV2/components/Search/index.d.ts

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

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

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

package/es/components/molecules/EditingListV2/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/EditingListV2/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/EditingListV2/components/Title/index.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+export { ListItem } 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/EditingListV2/components/index.js

@@ -0,0 +1,6 @@
+export { ListItem } 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/EditingListV2/index.d.ts

@@ -0,0 +1,2 @@
+export { EditingListV2 } from './EditingList';
+export type { EditingListProps } from './types';

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

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

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

@@ -0,0 +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 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/EditingListV2/styled.js

@@ -0,0 +1,38 @@
+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: auto; */
+  /* height: auto; */
+
+  .${CLS.ListItem.default} {
+    .${CLS.RemoveButton.default} {
+      flex-shrink: 0;
+      display: none;
+    }
+
+    &:hover {
+      .${CLS.RemoveButton.default} {
+        display: block;
+      }
+    }
+  }
+`;
+export const StyledAddBtn = styled(Flex) `
+  color: ${globalToken?.colorPrimary};
+  cursor: pointer;
+  font-weight: bold;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  width: fit-content;
+`;
+export const AmountSelected = styled(Typography.Text) `
+  &.antsomi-typography {
+    font-size: 11px;
+  }
+`;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type Option = {
+    key: string;
+    label: React.ReactNode;
+    search?: string;
+};
+export type EditingListProps = {
+    popupPlacement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    addButtonLabel?: string;
+    options?: Option[];
+    selected?: string[];
+    showNum?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    emptyDescription?: string;
+    removable?: boolean;
+    onChange?: (selected: string[]) => void;
+};

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

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

package/es/components/molecules/EditingListV2/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/EditingListV2/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

@@ -113,11 +113,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": calDefaultListHeightInPopover({
+    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, placement: "bottomLeft", ...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: {
+                    }), 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'], open: open, inputSearchProps: {
             ...restInputSearchProps,
             value: search,
             onAfterChange: handleOnSearch,

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

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

package/es/components/molecules/index.js

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

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.6-beta.003",
+  "version": "1.3.6-beta.005",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",