@antscorp/antsomi-ui 1.3.6-beta.2 → 1.3.6-beta.20

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

@@ -1,6 +1,5 @@
-/// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
+import { InputProps as AntdInputProps, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -16,20 +15,15 @@ export interface InputProps extends AntdInputProps {
     disableUndo?: boolean;
     withWrapper?: boolean;
 }
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, {}> & {
-    DefaultInput: typeof AntdInput;
-    CustomSearch: typeof SearchInput;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
+    readonly DefaultInput: React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
+        Group: React.FC<import("antd/es/input").GroupProps>;
+        Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
+        TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+    };
+    readonly CustomSearch: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+    readonly TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 };
-declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-export {};

package/es/components/atoms/Input/Input.js

@@ -17,7 +17,7 @@ import { PreviewVisibilityEyeIcon, VisibilityOffEyeIcon } from '../../icons';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = React.forwardRef((props, ref) => {
     // Props
-    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
+    const { debounce = 400, isHideErrMessage = false, withWrapper = true, errorArchive, required, labelColor, isReverseMask, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -79,16 +79,12 @@ const OriginInput = React.forwardRef((props, ref) => {
         return content;
     return _jsx("div", { className: "input__wrapper", children: content });
 });
-OriginInput.defaultProps = {
-    debounce: 400,
-    isHideErrMessage: false,
-    withWrapper: true,
-};
-export const Input = OriginInput;
 const SearchInput = React.forwardRef((props, ref) => (_jsx(OriginInput, { bordered: false, autoFocus: true, suffix: _jsx(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken?.bw8 }), ...props, ref: ref, className: `${props.className} antsomi-search-input` })));
 const PasswordInput = React.forwardRef((props, ref) => (_jsx(AntdInput.Password, { iconRender: visible => visible ? (_jsx(StyledIconWrapper, { type: "text", children: _jsx(PreviewVisibilityEyeIcon, {}) })) : (_jsx(StyledIconWrapper, { type: "text", children: _jsx(VisibilityOffEyeIcon, {}) })), ...props, ref: ref })));
-Input.CustomSearch = SearchInput;
-Input.TextArea = StyledInput.TextArea;
-Input.DefaultInput = AntdInput;
-Input.Password = PasswordInput;
+export const Input = Object.assign(OriginInput, {
+    DefaultInput: AntdInput,
+    CustomSearch: SearchInput,
+    TextArea: StyledInput.TextArea,
+    Password: PasswordInput,
+});
 export const { TextArea } = StyledInput;

package/es/components/atoms/Switch/Switch.js

@@ -3,6 +3,7 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { StyledSwitch } from './styled';
 const Switch = props => {
     const { color = THEME.token?.colorPrimary || '#005eb8', style, ...rest } = props;
-    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': color }, ...rest });
+    const validatedColor = CSS.supports('color', color) ? color : THEME.token?.colorPrimary;
+    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': validatedColor }, ...rest });
 };
 export { Switch };

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -346,6 +346,7 @@ export declare const LazyIcon: {
     TabGroupIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TableIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TableVer2Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    TaskAltIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TextIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ThirdPartyPluginV130Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ThirdPartyPluginV230Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -360,6 +361,7 @@ export declare const LazyIcon: {
     UnblockIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UndoIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Unknown30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    UnsubscribeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UploadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UploadMenuIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UserActivityIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -352,6 +352,7 @@ export const LazyIcon = {
     TabGroupIcon: lazy(() => import('../TabGroupIcon').then(m => ({ default: m.TabGroupIcon }))),
     TableIcon: lazy(() => import('../TableIcon').then(m => ({ default: m.TableIcon }))),
     TableVer2Icon: lazy(() => import('../TableVer2Icon').then(m => ({ default: m.TableVer2Icon }))),
+    TaskAltIcon: lazy(() => import('../TaskAltIcon').then(m => ({ default: m.TaskAltIcon }))),
     TextIcon: lazy(() => import('../TextIcon').then(m => ({ default: m.TextIcon }))),
     ThirdPartyPluginV130Icon: lazy(() => import('../ThirdPartyPluginV130Icon').then(m => ({ default: m.ThirdPartyPluginV130Icon }))),
     ThirdPartyPluginV230Icon: lazy(() => import('../ThirdPartyPluginV230Icon').then(m => ({ default: m.ThirdPartyPluginV230Icon }))),
@@ -366,6 +367,7 @@ export const LazyIcon = {
     UnblockIcon: lazy(() => import('../UnblockIcon').then(m => ({ default: m.UnblockIcon }))),
     UndoIcon: lazy(() => import('../UndoIcon').then(m => ({ default: m.UndoIcon }))),
     Unknown30Icon: lazy(() => import('../Unknown30Icon').then(m => ({ default: m.Unknown30Icon }))),
+    UnsubscribeIcon: lazy(() => import('../UnsubscribeIcon').then(m => ({ default: m.UnsubscribeIcon }))),
     UploadIcon: lazy(() => import('../UploadIcon').then(m => ({ default: m.UploadIcon }))),
     UploadMenuIcon: lazy(() => import('../UploadMenuIcon').then(m => ({ default: m.UploadMenuIcon }))),
     UserActivityIcon: lazy(() => import('../UserActivityIcon').then(m => ({ default: m.UserActivityIcon }))),

package/es/components/icons/TaskAltIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const TaskAltIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/TaskAltIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const TaskAltIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", fill: "currentColor", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q65 0 123 19t107 53l-58 59q-38-24-81-37.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35l65-65q11 32 17 66t6 70q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-56-216L254-466l56-56 114 114 400-401 56 56-456 457Z" }) }));
+});

package/es/components/icons/UnsubscribeIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const UnsubscribeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/UnsubscribeIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const UnsubscribeIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", fill: "currentColor", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M480-440 160-640v400h320q0 21 3 40.5t9 39.5H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v228q-18-9-38.5-15t-41.5-9v-124L480-440Zm0-80 320-200H160l320 200ZM760-40q-83 0-141.5-58.5T560-240q0-83 58.5-141.5T760-440q83 0 141.5 58.5T960-240q0 83-58.5 141.5T760-40ZM640-220h240v-40H640v40Zm-480-20v-480 480Z" }) }));
+});

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

@@ -342,6 +342,7 @@ export { SystemRunningIcon } from './SystemRunningIcon';
 export { TabGroupIcon } from './TabGroupIcon';
 export { TableIcon } from './TableIcon';
 export { TableVer2Icon } from './TableVer2Icon';
+export { TaskAltIcon } from './TaskAltIcon';
 export { TextIcon } from './TextIcon';
 export { ThirdPartyPluginV130Icon } from './ThirdPartyPluginV130Icon';
 export { ThirdPartyPluginV230Icon } from './ThirdPartyPluginV230Icon';
@@ -356,6 +357,7 @@ export { TipsIdeaLight30Icon } from './TipsIdeaLight30Icon';
 export { UnblockIcon } from './UnblockIcon';
 export { UndoIcon } from './UndoIcon';
 export { Unknown30Icon } from './Unknown30Icon';
+export { UnsubscribeIcon } from './UnsubscribeIcon';
 export { UploadIcon } from './UploadIcon';
 export { UploadMenuIcon } from './UploadMenuIcon';
 export { UserActivityIcon } from './UserActivityIcon';

package/es/components/icons/index.js

@@ -342,6 +342,7 @@ export { SystemRunningIcon } from './SystemRunningIcon';
 export { TabGroupIcon } from './TabGroupIcon';
 export { TableIcon } from './TableIcon';
 export { TableVer2Icon } from './TableVer2Icon';
+export { TaskAltIcon } from './TaskAltIcon';
 export { TextIcon } from './TextIcon';
 export { ThirdPartyPluginV130Icon } from './ThirdPartyPluginV130Icon';
 export { ThirdPartyPluginV230Icon } from './ThirdPartyPluginV230Icon';
@@ -356,6 +357,7 @@ export { TipsIdeaLight30Icon } from './TipsIdeaLight30Icon';
 export { UnblockIcon } from './UnblockIcon';
 export { UndoIcon } from './UndoIcon';
 export { Unknown30Icon } from './Unknown30Icon';
+export { UnsubscribeIcon } from './UnsubscribeIcon';
 export { UploadIcon } from './UploadIcon';
 export { UploadMenuIcon } from './UploadMenuIcon';
 export { UserActivityIcon } from './UserActivityIcon';

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

@@ -1,11 +1,32 @@
 import React from 'react';
 import { CodeStructureData } from './type';
 interface CodeStructureProps {
-    initialData: CodeStructureData;
+    initialData: Partial<CodeStructureData>;
     onChange: ({ data, isError }: {
-        data: CodeStructureData;
+        data: Partial<CodeStructureData>;
         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

@@ -1,20 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import { useEffect } from 'react';
+import { memo, 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;
-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;
+/**
+ * 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 = memo(({ initialData, onChange }) => {
+    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, 400);
     const updateFormValues = async (fieldKeyChange, isError) => {
         // Get all values from the form
         const allValues = form.getFieldsValue();
@@ -67,14 +89,38 @@ export const CodeStructure = ({ initialData, onChange }) => {
             totalPredicted = total;
             setMaxCodes(total);
         }
+        let codeSampleTmp = codeSample;
         if (isRelevantChangeCodeKey) {
-            setCodeSample(generateRandomCodeWithConfig(form.getFieldsValue()));
+            codeSampleTmp = generateRandomCodeWithConfig(form.getFieldsValue());
+            setCodeSample(codeSampleTmp);
         }
         if (isChangePrefix) {
-            setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')));
+            setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSampleTmp, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')));
         }
         const dataOnChange = {
-            ...allValues,
+            quantity: allValues.quantity,
+            refillInterval: allValues.refillInterval,
+            prefix: allValues.prefix,
+            suffix: allValues.suffix,
+            separator: allValues.separator,
+            ...(allValues.refillInterval === 'auto' && {
+                refillThreshold: allValues.refillThreshold,
+                refillUnit: allValues.refillUnit,
+            }),
+            characterType: allValues.characterType,
+            ...(allValues.characterType === CharacterType.DIGIT_AND_LETTERS && {
+                digitalNumbers: allValues.digitalNumbers,
+                alphabetLetters: allValues.alphabetLetters,
+                capitalization: allValues.capitalization,
+                characterOrder: allValues.characterOrder,
+            }),
+            ...(allValues.characterType === CharacterType.DIGITS && {
+                digitalNumbers: allValues.digitalNumbers,
+            }),
+            ...(allValues.characterType === CharacterType.LETTERS && {
+                alphabetLetters: allValues.alphabetLetters,
+                capitalization: allValues.capitalization,
+            }),
             totalPredicted,
         };
         debouncedOnChange({
@@ -86,11 +132,33 @@ export const CodeStructure = ({ initialData, onChange }) => {
         setMaxCodes(calculateTotalCodes(alphabetLetters, digitalNumbers, characterType));
     }, [alphabetLetters, digitalNumbers, characterType]);
     useEffect(() => {
-        setCodeSample(generateRandomCodeWithConfig(initialData));
+        setCodeSample(generateRandomCodeWithConfig({
+            characterType,
+            digitalNumbers,
+            alphabetLetters,
+            capitalization,
+            characterOrder,
+        }));
     }, [characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder]);
     useEffect(() => {
-        form.setFieldsValue(initialData);
-    }, [initialData, form]);
+        setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSample, prefix, suffix, separator));
+    }, [codeSample, prefix, suffix, separator]);
+    useEffect(() => {
+        form.setFieldsValue({
+            prefix,
+            suffix,
+            separator,
+            quantity,
+            refillInterval,
+            refillThreshold,
+            refillUnit,
+            characterType,
+            digitalNumbers,
+            alphabetLetters,
+            capitalization,
+            characterOrder,
+        });
+    }, [initialData]);
     return (_jsx(CodeStructureWrapper, { children: _jsxs(Form, { form: form, layout: "horizontal", labelCol: { span: 6 }, colon: false, wrapperCol: { span: 24 }, labelAlign: "left", initialValues: {
                 characterType,
                 digitalNumbers,
@@ -108,30 +176,52 @@ export const CodeStructure = ({ initialData, onChange }) => {
                 const fieldKeyChange = changedFields[0].name[0];
                 const isValidate = form.getFieldsError().some(field => field.errors.length > 0);
                 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: {
+            }, 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", rules: [
+                        {
+                            pattern: /^[a-zA-Z0-9]+$/i,
+                            message: 'Invalid input. Use only letters and numbers.',
+                        },
+                    ], 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, { hidden: form.getFieldValue('characterType') === CharacterType.LETTERS, shouldUpdate: true, name: "digitalNumbers", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '65px' } }) }), (form.getFieldValue('characterType') === CharacterType.DIGITS ||
+                                    form.getFieldValue('characterType') === CharacterType.DIGIT_AND_LETTERS) && (_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, { hidden: form.getFieldValue('characterType') === CharacterType.DIGITS, name: "alphabetLetters", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '65px' } }) }), (form.getFieldValue('characterType') === CharacterType.DIGIT_AND_LETTERS ||
+                                    form.getFieldValue('characterType') === CharacterType.LETTERS) && (_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: form.getFieldValue('characterType') !== CharacterType.DIGITS && (_jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP, 'Letters Capitalization') })) }), _jsx(Form.Item, { hidden: form.getFieldValue('characterType') === CharacterType.DIGITS, label: _jsx("span", { children: "\u00A0" }), name: "capitalization", children: _jsx(Radio.Group, { options: CAPITALIZATION_OPTIONS }) })] }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: form.getFieldValue('characterType') === CharacterType.DIGIT_AND_LETTERS && (_jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER, 'Character Order') })) }), _jsx(Form.Item, { hidden: form.getFieldValue('characterType') !== CharacterType.DIGIT_AND_LETTERS, 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", rules: [
+                        {
+                            pattern: /^[a-zA-Z0-9]+$/i,
+                            message: 'Invalid input. Use only letters and numbers.',
+                        },
+                    ], 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: 0, max: 10000, style: { width: '65px' } }) }), _jsx(BlockAbsolute, { children: "code(s) per time" })] }) })] }), _jsx(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: _jsxs(Typography.Text, { children: ["Maximum of ", _jsx("b", { children: maxCodes.toLocaleString() }), " codes (sample", ' ', state.codeWithPrefixAndSuffix, " ) 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, { onBlur: e => {
+                                                            const { value } = e.target;
+                                                            if (isEmpty(value)) {
+                                                                form.setFieldsValue({ refillThreshold: 1 });
+                                                                form.validateFields(['refillThreshold']);
+                                                            }
+                                                        }, 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: '' },
                                                     {
@@ -139,5 +229,5 @@ export const CodeStructure = ({ initialData, onChange }) => {
                                                             form.validateFields(['refillThreshold']);
                                                         },
                                                     },
-                                                ], children: _jsx(Select, { options: REFILL_UNIT_OPTIONS, style: { width: '63px' }, onClick: e => e.preventDefault() }) })) }), "remaining"] }) })] }) })] }) }));
-};
+                                                ], children: _jsx(Select, { defaultValue: RefillUnitType.CODES, options: REFILL_UNIT_OPTIONS, style: { width: '63px' }, onClick: e => e.preventDefault() }) })) }), "remaining"] }) })] }) })] }) }));
+});

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

@@ -30,8 +30,8 @@ export const CAPITALIZATION_OPTIONS = [
         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.RANDOM,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_RANDOM, 'Random'),
     },
 ];
 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 || 75}px;
+  white-space: nowrap;
+  margin-bottom: 15px;
+`;

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

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

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

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

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

@@ -1,4 +1,10 @@
 import { CharacterType, CodeStructureData, SeparatorType } from './type';
-export declare const generateRandomCodeWithConfig: ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }: CodeStructureData) => string;
+export declare const generateRandomCodeWithConfig: ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }: {
+    characterType: CodeStructureData['characterType'];
+    digitalNumbers: CodeStructureData['digitalNumbers'];
+    alphabetLetters: CodeStructureData['alphabetLetters'];
+    capitalization: CodeStructureData['capitalization'];
+    characterOrder: CodeStructureData['characterOrder'];
+}) => string;
 export declare const generateCodeWithPrefixAndSuffix: (code: string, prefix: string, suffix: string, separator: SeparatorType) => string;
 export declare const calculateTotalCodes: (numberOfLetters: number, numberOfDigits: number, characterType: CharacterType) => number;

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

@@ -18,8 +18,10 @@ 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.RANDOM) {
+        letterPart = Array.from(letterPart)
+            .map(char => (Math.random() < 0.5 ? char.toUpperCase() : char.toLowerCase()))
+            .join('');
     }
     // Order characters
     let finalCode = '';
@@ -40,10 +42,7 @@ export const generateRandomCodeWithConfig = ({ characterType, digitalNumbers, al
 export const generateCodeWithPrefixAndSuffix = (code, prefix, suffix, separator) => {
     let finalCode = code;
     // Apply prefix and suffix
-    if (prefix)
-        finalCode = `${prefix}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${finalCode}`;
-    if (suffix)
-        finalCode = `${finalCode}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${suffix}`;
+    finalCode = `${prefix}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${finalCode}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${suffix}`;
     return finalCode;
 };
 export const calculateTotalCodes = (numberOfLetters, numberOfDigits, characterType) => {

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -16,7 +16,7 @@ import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, classNames, onToggleCollapse, closable = false, ...restProps } = props;
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, classNames, collapsed: propCollapsed, onToggleCollapse, closable = false, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -99,17 +99,22 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
-    const handleToggleDrawerSize = () => {
+    const handleToggleDrawerSize = useCallback((updatedCollapsed) => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
-        toggleCollapseDrawer(!collapseDrawer);
-        onToggleCollapse?.(!collapseDrawer);
+        toggleCollapseDrawer(updatedCollapsed ?? !collapseDrawer);
+        onToggleCollapse?.(updatedCollapsed ?? !collapseDrawer);
         /**
          * Set local storage last collapsed
          */
         if (name) {
             localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify({ ...localStorageValues, [name || '']: !collapseDrawer }));
         }
-    };
+    }, [collapseDrawer, name, onToggleCollapse, toggleCollapseDrawer]);
+    useEffect(() => {
+        if (propCollapsed !== undefined) {
+            handleToggleDrawerSize(propCollapsed);
+        }
+    }, [propCollapsed, handleToggleDrawerSize]);
     return (_jsxs(StyledDrawer, { push: false, closable: closable, width: drawerWidth, motion: {
             visible: false,
             motionAppear: false,

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

@@ -14,6 +14,7 @@ export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'titl
     classNames?: DrawerProps['classNames'] & {
         btnToogleSize?: string;
     };
+    collapsed?: boolean;
     onToggleCollapse?: (collapsed: boolean) => void;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {

package/es/components/molecules/Dropdown/style.scss

@@ -1,9 +1,11 @@
 .antsomi-input-dropdown-overlay {
-  .antsomi-dropdown-menu {
-    overflow: hidden;
+  &.antsomi-dropdown {
+    .antsomi-dropdown-menu {
+      overflow: hidden;
 
-    :hover {
-      overflow: auto;
+      &:hover {
+        overflow: auto;
+      }
     }
   }
 }

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,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useMemo } from 'react';
+// Components
+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/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,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useState } from 'react';
+import { isEmpty } from 'lodash';
+// Components
+import { Spin, Typography } from '../../../../atoms';
+import { List } from 'antd';
+import { CloseIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Utils
+import { CLS } from '../../utils';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+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, cursor: 'pointer' }, 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,8 @@
+/// <reference types="react" />
+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,2 @@
+import { lazy } from 'react';
+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,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Components
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopoverAddField } from '../../../SearchPopover';
+// Icons
+import { AddIcon } from '../../../../icons';
+export const Popover = (props) => {
+    const { options, selected, addButtonLabel, onChange, placement } = props;
+    return (_jsx(PopoverAddField, { style: { margin: 0 }, fields: options, placement: placement, selected: selected, 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/index.d.ts

@@ -0,0 +1,3 @@
+export { ListItem } from './List';
+export { Popover } from './Popover';
+export * as LazyComponent from './Loadable';

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

@@ -0,0 +1,3 @@
+export { ListItem } from './List';
+export { Popover } from './Popover';
+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/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/InputSelectAttribute/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
 import { memo, useCallback, useMemo, useState } from 'react';
-import { get, keyBy, upperFirst } from 'lodash';
+import { get, has, keyBy, upperFirst } from 'lodash';
 import { Flex, Form, Select, Tooltip, Typography } from 'antd';
 // Translations
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
@@ -14,6 +14,7 @@ import { EmptyData } from '../EmptyData';
 import { Dashboard30Icon, ErrorIcon } from '../../icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { TAG_TYPE } from '../TagifyInput';
 const InputSelectAttribute = (props) => {
     const { value, errorMsg, label, isErrorTag, sourceOptions = [], mapCodeOptions = {}, onChange, } = props;
     const [form] = Form.useForm();
@@ -27,7 +28,7 @@ const InputSelectAttribute = (props) => {
         return [];
     }, [sourceValue, mapCodeOptions]);
     const initCodeTitleField = useMemo(() => {
-        if (sourceValue === 'allocated_code') {
+        if (sourceValue === TAG_TYPE.PROMOTION_CODE) {
             return 'Allocated Code';
         }
         return upperFirst(translate(translations._ITEM_NAME_ATTRIBUTE, 'attribute'));
@@ -40,7 +41,8 @@ const InputSelectAttribute = (props) => {
     const getCodeDefaultBySource = useCallback((source) => get(mapCodeOptions, [source, '0', 'value'], ''), [mapCodeOptions]);
     const onOpenModal = useCallback(() => {
         if (value && typeof value !== 'string') {
-            form.setFieldsValue({ source: value?.source, code: value?.code });
+            const isExist = has(mapCodeBySource, [value?.code, 'label']);
+            form.setFieldsValue({ source: value?.source, code: isExist ? value?.code : undefined });
         }
         else {
             const source = sourceOptions[0]?.value || '';
@@ -48,7 +50,7 @@ const InputSelectAttribute = (props) => {
             form.setFieldsValue({ source, code });
         }
         setOpenModal(true);
-    }, [value, form, sourceOptions, getCodeDefaultBySource]);
+    }, [value, mapCodeBySource, form, sourceOptions, getCodeDefaultBySource]);
     const onDeselect = useCallback(() => {
         onChange({ value: '', valueType: 'input' });
     }, [onChange]);
@@ -97,7 +99,9 @@ const InputSelectAttribute = (props) => {
                     height: 32,
                     padding: '4px 12px 4px 4px',
                     borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
-                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (get(mapCodeBySource, [value?.code, 'label'], value?.code)) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (_jsx(Typography.Text, { ellipsis: {
+                                    tooltip: get(mapCodeBySource, [value?.code, 'label'], value?.code),
+                                }, style: { maxWidth: 150 }, children: get(mapCodeBySource, [value?.code, 'label'], value?.code) })) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
         }
         else {
             element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {

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.002",
+  "version": "1.3.6-beta.20",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,7 +61,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-locales": "1.0.35",
+    "@antscorp/antsomi-locales": "1.0.37",
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/icons": "0.27.56",
     "@antscorp/image-editor": "1.0.2",