@antscorp/antsomi-ui 2.0.114 → 2.0.116

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

@@ -0,0 +1,5 @@
+import type { SelectAssociatedTagProps } from './types';
+export declare const SelectAssociatedTag: {
+    (props: SelectAssociatedTagProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: SelectAssociatedTagProps;
+};

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Components
+import { StyledSpace } from './styled';
+import { Divider } from 'antd';
+import { Select } from '../../molecules';
+import SelectTag from './SelectTag';
+// Constants
+import { defaultProps } from './constants';
+export const SelectAssociatedTag = (props) => {
+    // Props
+    const { tagConfigs, style, status, selected, disabled, options, children, onSelect } = props;
+    const { tag, value } = selected || {};
+    return (_jsxs(StyledSpace, { className: `select-associated-tag ${status}`, style: style, children: [_jsx(SelectTag, { ...tagConfigs, selectedTag: tag }), _jsx(Divider, { type: "vertical", style: { margin: '0px 1px 0px 6px' }, className: "antsomi-divider-between-select" }), children ?? (_jsx(Select, { style: { width: '100%', height: '100%' }, value: value, disabled: disabled, options: options, onChange: onSelect }))] }));
+};
+SelectAssociatedTag.defaultProps = defaultProps;

package/es/components/atoms/SelectAssociatedTag/SelectTag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TagConfigProps } from './types';
+declare const _default: import("react").MemoExoticComponent<(props: TagConfigProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/atoms/SelectAssociatedTag/SelectTag.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { memo, useMemo, useState } from 'react';
+import { keyBy } from 'lodash';
+// Components
+import { Flex, Typography } from 'antd';
+import { Popover } from '../Popover';
+import { SelectedTag } from './styled';
+const SelectTag = (props) => {
+    // Props
+    const { selectedTag, disabled, title, options, onSelect } = props;
+    // State
+    const [open, setOpen] = useState(false);
+    // Memoized
+    const mapOptsMemo = useMemo(() => keyBy(options, 'value'), [options]);
+    const selectedItem = useMemo(() => mapOptsMemo?.[selectedTag] || {}, [selectedTag, mapOptsMemo]);
+    const handleOpenChange = () => {
+        setOpen(!open);
+    };
+    const handleClick = (item) => {
+        setOpen(false);
+        onSelect(item);
+    };
+    return (_jsx(Popover, { open: open && !disabled, title: _jsx(Typography.Text, { style: { fontWeight: '400', maxWidth: 130 }, ellipsis: { tooltip: title }, children: title }), content: _jsx(Flex, { wrap: "wrap", gap: 6, style: { padding: '10px 0px' }, children: options?.map(item => (_jsx(SelectedTag, { "$color": item.color, "$background": item.background, ellipsis: { tooltip: item.label }, onClick: () => handleClick(item), children: item.label }, item.value))) }), placement: "bottomLeft", trigger: "click", overlayInnerStyle: { padding: 10, maxWidth: 150 }, onOpenChange: handleOpenChange, children: _jsx(SelectedTag, { "$color": selectedItem?.color, "$background": selectedItem?.background, ellipsis: { tooltip: selectedItem?.label }, children: selectedItem?.label }) }));
+};
+export default memo(SelectTag);

package/es/components/atoms/SelectAssociatedTag/constants.d.ts

@@ -0,0 +1,11 @@
+import type { SelectAssociatedTagProps, TagItem } from './types';
+export declare const DEFAULT_TAGS: {
+    readonly RAW: "RAW";
+    readonly md5: "md5";
+    readonly sha_256: "sha_256";
+    readonly MD5: "MD5";
+    readonly SHA_256: "SHA_256";
+};
+export declare const DEFAULT_TAGS_OPTS: Record<string, TagItem>;
+export declare const DEFAULT_TAGS_LIST: TagItem[];
+export declare const defaultProps: SelectAssociatedTagProps;

package/es/components/atoms/SelectAssociatedTag/constants.js

@@ -0,0 +1,42 @@
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Locales
+import { translations, translate } from '@antscorp/antsomi-locales';
+export const DEFAULT_TAGS = {
+    RAW: 'RAW',
+    md5: 'md5',
+    sha_256: 'sha_256',
+    MD5: 'MD5',
+    SHA_256: 'SHA_256',
+};
+export const DEFAULT_TAGS_OPTS = {
+    RAW: { label: 'RAW', value: DEFAULT_TAGS.RAW, color: globalToken?.bw0, background: '#4CB4C9' },
+    md5: { label: 'md5', value: DEFAULT_TAGS.md5, color: globalToken?.bw0, background: '#3B8FDE' },
+    sha_256: {
+        label: 'sha-256',
+        value: DEFAULT_TAGS.sha_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+    MD5: { label: 'MD5', value: DEFAULT_TAGS.MD5, color: globalToken?.bw0, background: '#3B8FDE' },
+    SHA_265: {
+        label: 'SHA-256',
+        value: DEFAULT_TAGS.SHA_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+};
+export const DEFAULT_TAGS_LIST = Object.values(DEFAULT_TAGS_OPTS);
+export const defaultProps = {
+    tagConfigs: {
+        options: DEFAULT_TAGS_LIST,
+        title: translate(translations._INFO_STORY_WAIT_FOR_HASH, 'Hash Method'),
+        onSelect: () => { },
+    },
+    selected: {
+        tag: DEFAULT_TAGS.RAW,
+        value: DEFAULT_TAGS.SHA_256,
+    },
+    options: DEFAULT_TAGS_LIST,
+    onSelect: () => { },
+};

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

@@ -0,0 +1,3 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export type { SelectAssociatedTagProps } from './types';
+export * from './constants';

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

@@ -0,0 +1,2 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export * from './constants';

package/es/components/atoms/SelectAssociatedTag/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TagItem } from './types';
+export declare const StyledSpace: import("styled-components").StyledComponent<import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>, any, {}, never>;
+export declare const SelectedTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $background: TagItem['background'];
+    $color: TagItem['color'];
+}, never>;

package/es/components/atoms/SelectAssociatedTag/styled.js

@@ -0,0 +1,60 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Space } from '../Space';
+import { Typography } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSpace = styled(Space.Compact) `
+  width: 100%;
+  height: 30px;
+  padding-left: 5px;
+  align-items: center;
+
+  border-bottom: 1px solid ${globalToken?.blue1};
+
+  &.select-associated-tag {
+    &.warning {
+      border-bottom-color: ${globalToken?.colorWarning};
+    }
+
+    &.error {
+      border-bottom-color: ${globalToken?.colorError};
+    }
+
+    &.success {
+      border-bottom-color: ${globalToken?.colorSuccess};
+    }
+  }
+
+  > div:last-child {
+    width: 100%;
+  }
+
+  .antsomi-divider.antsomi-divider-vertical {
+    height: 20px;
+  }
+
+  .antsomi-select-selector {
+    border: none !important;
+  }
+`;
+export const SelectedTag = styled(Typography.Text) `
+  border-radius: 3px;
+  height: 16px;
+  line-height: 16px;
+  padding-left: 3px;
+  padding-right: 3px;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  background: ${props => props.$background};
+
+  &.antsomi-typography {
+    color: ${props => props.$color};
+
+    &.antsomi-typography-ellipsis {
+      max-width: 70px;
+    }
+  }
+`;

package/es/components/atoms/SelectAssociatedTag/types.d.ts

@@ -0,0 +1,76 @@
+import { Dictionary } from 'lodash';
+import { CSSProperties, ReactNode } from 'react';
+export type TagItem = {
+    label: string;
+    value: string;
+    background: CSSProperties['background'];
+    color: CSSProperties['color'];
+};
+export type Status = 'error' | 'warning' | 'success';
+export interface TagConfigProps {
+    selectedTag: TagItem['value'];
+    title?: string;
+    disabled?: boolean;
+    options: TagItem[];
+    onSelect: (newItem: TagItem) => void;
+}
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+/**
+ * Properties for the SelectAssociatedTag component.
+ */
+export interface SelectAssociatedTagProps {
+    /**
+     * Configuration properties for tag options, excluding the selected tag.
+     * @type {Omit<TagConfigProps, 'selectedTag'>}
+     */
+    tagConfigs: Omit<TagConfigProps, 'selectedTag'>;
+    /**
+     * The currently selected tag and its associated value.
+     * @type {{ tag: string; value: string; }}
+     */
+    selected: {
+        /**
+         * The identifier for the selected tag.
+         * @type {string}
+         */
+        tag: string;
+        /**
+         * The value associated with the selected tag.
+         * @type {Dictionary<SelectOption>}
+         */
+        value: Dictionary<SelectOption>;
+    };
+    /**
+     * Whether the SelectAssociatedTag is disabled.
+     * @type {boolean}
+     */
+    disabled?: boolean;
+    /**
+     * The status of the SelectAssociatedTag, if any.
+     * @type {'error' | 'warning' | 'success' }
+     */
+    status?: Status;
+    /**
+     * A list of selectable options.
+     * @type {SelectOption[]}
+     */
+    options: SelectOption[];
+    /**
+     * The style object for the SelectAssociatedTag component.
+     * @type {CSSProperties}
+     */
+    style?: CSSProperties;
+    /**
+     * The children to be rendered inside the SelectAssociatedTag component.
+     * @type {ReactNode}
+     */
+    children?: ReactNode;
+    /**
+     * Callback function called when an option is selected.
+     * @type {(value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void}
+     */
+    onSelect: (value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void;
+}

package/es/components/atoms/SelectAssociatedTag/types.js

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

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

@@ -49,6 +49,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';
 export * from './NotificationStatus';

package/es/components/atoms/index.js

@@ -49,6 +49,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';
 export * from './NotificationStatus';

package/es/components/icons/CircleInfoIcon.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useIcon } from './hooks/useIcon';
 export const CircleInfoIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, ref: ref, width: width, height: height, children: [_jsx("g", { clipPath: "url(#clip0_1_5)", children: _jsx("path", { d: "M12 21.0002C10.22 21.0002 8.47991 20.4725 6.99987 19.4835C5.51983 18.4946 4.36628 17.0888 3.68509 15.4443C3.0039 13.7998 2.82567 11.9902 3.17294 10.2443C3.5202 8.49851 4.37737 6.89502 5.63604 5.63635C6.89472 4.37767 8.49836 3.52017 10.2442 3.1729C11.99 2.82564 13.7996 3.00399 15.4442 3.68518C17.0887 4.36637 18.4943 5.51986 19.4833 6.99991C20.4722 8.47995 21 10.2202 21 12.0003C20.9973 14.3863 20.0481 16.6738 18.361 18.361C16.6737 20.0482 14.3861 20.9975 12 21.0002ZM9.291 9.7013C9.15006 9.70129 9.01486 9.75744 8.91507 9.85699C8.81529 9.95653 8.75905 10.0915 8.75872 10.2324V11.1772C8.75905 11.3182 8.81529 11.4531 8.91507 11.5526C9.01486 11.6522 9.15006 11.7083 9.291 11.7083H10.6281V18.3541H13.1996V9.7013H9.291ZM11.7043 5.58739C11.3839 5.58713 11.0706 5.68143 10.804 5.85922C10.5375 6.03702 10.3297 6.29028 10.2068 6.5862C10.084 6.88212 10.0516 7.20731 10.1139 7.52161C10.1761 7.8359 10.3302 8.1248 10.5566 8.35155C10.783 8.57829 11.0715 8.73326 11.3857 8.79602C11.6999 8.85877 12.0256 8.82675 12.3218 8.70436C12.6179 8.58198 12.8711 8.37423 13.0493 8.10796C13.2275 7.8417 13.3228 7.52874 13.323 7.20834C13.3237 6.77823 13.1536 6.36547 12.85 6.06074C12.5465 5.756 12.1344 5.58401 11.7043 5.58299V5.58739Z", style: { fill: 'currentcolor' } }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1_5", children: _jsx("rect", { width: "18", height: "18", fill: "white", transform: "translate(3 3)" }) }) })] }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M12 22C10.0222 22 8.08879 21.4136 6.4443 20.3148C4.79981 19.216 3.51809 17.6541 2.76121 15.8268C2.00433 13.9996 1.8063 11.9889 2.19215 10.0492C2.578 8.10937 3.53041 6.32775 4.92894 4.92924C6.32746 3.53073 8.10929 2.57796 10.0491 2.19211C11.9889 1.80627 13.9996 2.00444 15.8269 2.7613C17.6541 3.51817 19.2159 4.79981 20.3148 6.44429C21.4135 8.08876 22 10.0224 22 12.0002C21.997 14.6513 20.9424 17.1929 19.0677 19.0675C17.193 20.9423 14.6513 21.997 12 22ZM8.99 9.44579C8.8334 9.44578 8.68318 9.50817 8.5723 9.61878C8.46144 9.72938 8.39895 9.8793 8.39857 10.0359V11.0857C8.39895 11.2423 8.46144 11.3922 8.5723 11.5028C8.68318 11.6134 8.8334 11.6758 8.99 11.6758H10.4757V19.0599H13.3329V9.44579H8.99ZM11.6714 4.87484C11.3154 4.87455 10.9673 4.97932 10.6712 5.17687C10.375 5.37442 10.1441 5.65582 10.0076 5.98461C9.87108 6.31341 9.83514 6.67473 9.90431 7.02395C9.97349 7.37316 10.1447 7.69415 10.3962 7.94609C10.6477 8.19802 10.9683 8.37021 11.3174 8.43994C11.6665 8.50967 12.0285 8.47408 12.3575 8.3381C12.6865 8.20212 12.9678 7.97129 13.1659 7.67544C13.3639 7.3796 13.4697 7.03187 13.47 6.67588C13.4708 6.19798 13.2817 5.73937 12.9445 5.40078C12.6072 5.06219 12.1493 4.87109 11.6714 4.86995V4.87484Z", fill: "currentColor" }) }));
 });

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

@@ -408,4 +408,6 @@ export declare const LazyIcon: {
     WebPersonalizationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WidgetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WritingAIAssitantIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    QRCodeManagementIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    QRSetDashboardIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
 };

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

@@ -411,4 +411,6 @@ export const LazyIcon = {
     WebPersonalizationIcon: lazy(() => import('../WebPersonalizationIcon').then(m => ({ default: m.WebPersonalizationIcon }))),
     WidgetIcon: lazy(() => import('../WidgetIcon').then(m => ({ default: m.WidgetIcon }))),
     WritingAIAssitantIcon: lazy(() => import('../WritingAIAssitantIcon').then(m => ({ default: m.WritingAIAssitantIcon }))),
+    QRCodeManagementIcon: lazy(() => import('../QRCodeManagementIcon').then(m => ({ default: m.QRCodeManagementIcon }))),
+    QRSetDashboardIcon: lazy(() => import('../QRSetDashboardIcon').then(m => ({ default: m.QRSetDashboardIcon }))),
 };

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

@@ -6,7 +6,18 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     Option: import("rc-select/lib/Option").OptionFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").FC<import("../Modal").ModalProps> & {
+    confirm: (props: import("antd").ModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+    };
+    useModal: typeof import("antd/es/modal/useModal").default;
+    success: import("antd/es/modal/confirm").ModalFunc;
+    info: import("antd/es/modal/confirm").ModalFunc;
+    error: import("antd/es/modal/confirm").ModalFunc;
+    warning: import("antd/es/modal/confirm").ModalFunc;
+    destroyAll: () => void;
+}, any, {}, never>;
 export declare const ButtonCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;

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

@@ -6,4 +6,15 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     Option: import("rc-select/lib/Option").OptionFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").FC<import("../Modal").ModalProps> & {
+    confirm: (props: import("antd").ModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+    };
+    useModal: typeof import("antd/es/modal/useModal").default;
+    success: import("antd/es/modal/confirm").ModalFunc;
+    info: import("antd/es/modal/confirm").ModalFunc;
+    error: import("antd/es/modal/confirm").ModalFunc;
+    warning: import("antd/es/modal/confirm").ModalFunc;
+    destroyAll: () => void;
+}, any, {}, never>;

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export type ValueType = 'input' | 'select';
+type Value = {
+    source: any;
+    code: any;
+} | string;
+type Option = {
+    [key: string]: any;
+    label: string;
+    value: string;
+};
+export interface InputSelectAttributeProps {
+    sourceOptions: Option[];
+    mapCodeOptions: Record<string, Option[]>;
+    label?: string;
+    isErrorTag?: boolean;
+    errorMsg?: string;
+    value: Value;
+    onChange: (newValueData: {
+        value: Value;
+        valueType: ValueType;
+    }) => void;
+}
+declare const _default: import("react").MemoExoticComponent<(props: InputSelectAttributeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Libraries
+import { memo, useCallback, useMemo, useState } from 'react';
+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';
+// Components
+import Icon from '@antscorp/icons';
+import { ModalV2 } from '../ModalV2';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
+import { StyledSelect } from './styled';
+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();
+    const sourceValue = Form.useWatch('source', form);
+    // States
+    const [openModal, setOpenModal] = useState(false);
+    const codeOptions = useMemo(() => {
+        if (sourceValue) {
+            return get(mapCodeOptions, sourceValue, []);
+        }
+        return [];
+    }, [sourceValue, mapCodeOptions]);
+    const initCodeTitleField = useMemo(() => {
+        if (sourceValue === TAG_TYPE.PROMOTION_CODE) {
+            return 'Allocated Code';
+        }
+        return upperFirst(translate(translations._ITEM_NAME_ATTRIBUTE, 'attribute'));
+    }, [sourceValue]);
+    const mapCodeBySource = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(get(mapCodeOptions, value?.source, []), 'value');
+    }, [mapCodeOptions, value]);
+    const mapSourceOptions = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(sourceOptions, 'value');
+    }, [sourceOptions, value]);
+    const getCodeDefaultBySource = useCallback((source) => get(mapCodeOptions, [source, '0', 'value'], ''), [mapCodeOptions]);
+    const onOpenModal = useCallback(() => {
+        if (value && typeof value !== 'string') {
+            const isExistCode = has(mapCodeBySource, [value?.code, 'label']);
+            const isExistSource = has(mapSourceOptions, [value?.source]);
+            form.setFieldsValue({
+                source: isExistSource ? value?.source : undefined,
+                code: isExistCode ? value?.code : undefined,
+            });
+        }
+        else {
+            const source = sourceOptions[0]?.value || '';
+            const code = getCodeDefaultBySource(source);
+            form.setFieldsValue({ source, code });
+        }
+        setOpenModal(true);
+    }, [value, mapCodeBySource, form, sourceOptions, mapSourceOptions, getCodeDefaultBySource]);
+    const onDeselect = useCallback(() => {
+        onChange({ value: '', valueType: 'input' });
+    }, [onChange]);
+    const onHideModal = useCallback(() => {
+        setOpenModal(false);
+    }, []);
+    const onAfterClose = useCallback(() => {
+        form.resetFields();
+    }, [form]);
+    const onOk = async () => {
+        try {
+            // Validate form fields before getting values
+            const values = await form.validateFields();
+            if (typeof values !== 'string') {
+                const newValue = {
+                    source: values?.source,
+                    code: values?.code,
+                };
+                onChange({ value: newValue, valueType: 'select' });
+            }
+            setOpenModal(false);
+        }
+        catch (errorInfo) {
+            // eslint-disable-next-line no-console
+            console.error('Validation Failed:', errorInfo);
+        }
+    };
+    const onChangeInput = useCallback((val) => {
+        onChange({ value: val, valueType: 'input' });
+    }, [onChange]);
+    const onValuesChange = useCallback((changedValues) => {
+        // If source changed -> set new code based on new source
+        if (changedValues?.source) {
+            const newCode = getCodeDefaultBySource(changedValues.source);
+            form.setFieldValue('code', newCode);
+        }
+    }, [form, getCodeDefaultBySource]);
+    const renderInput = () => {
+        let element = null;
+        const isObjValue = value && typeof value !== 'string';
+        if (openModal || isObjValue) {
+            element = (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    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 }) })] })) : (_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: {
+                    ...(openModal ? { display: 'none' } : {}),
+                } }));
+        }
+        return element;
+    };
+    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, afterClose: onAfterClose, destroyOnClose: true, centered: true, children: _jsxs(Form, { colon: false, form: form, onValuesChange: onValuesChange, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "source", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, placeholder: "Please select an item" }) }), _jsx(Form.Item, { label: label || initCodeTitleField, required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), notFoundContent: _jsx(EmptyData, { size: "small", icon: _jsx(Dashboard30Icon, {}), description: "No personalized content in this journey" }), placeholder: "Please select an item", options: codeOptions }) })] }) })] }));
+};
+export default memo(InputSelectAttribute);

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

@@ -0,0 +1,14 @@
+export declare const StyledSelect: import("styled-components").StyledComponent<{
+    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        suffixIcon: import("react/jsx-runtime").JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => import("react/jsx-runtime").JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: import("react/jsx-runtime").JSX.Element;
+    };
+}, any, {
+    $isPlaceholder?: any;
+    $isError?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,33 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selection-overflow .antsomi-select-selection-overflow-item {
+    flex: 1;
+
+    .antsomi-select-selection-search {
+      width: fit-content !important;
+      flex: 1;
+    }
+  }
+
+  ${({ $isError }) => $isError
+    ? css `
+          .antsomi-select-selector {
+            box-shadow: none !important;
+          }
+        `
+    : css ``}
+
+  .antsomi-select-selection-placeholder {
+    ${props => !props.$isPlaceholder
+    ? css `
+            color: rgba(0, 0, 0, 0.85);
+            font-size: ${THEME.token?.fontSize}px;
+          `
+    : css ``}
+  }
+`;

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

@@ -1,6 +1,5 @@
-/// <reference types="hoist-non-react-statics" />
 import React from 'react';
-import { ModalProps as AntdModalProps } from 'antd';
+import { ModalProps as AntdModalProps, ModalFuncProps } from 'antd';
 export interface ModalProps extends AntdModalProps {
     header?: React.ReactNode;
     headerStyle?: {
@@ -10,14 +9,15 @@ export interface ModalProps extends AntdModalProps {
     loading?: boolean;
 }
 export declare const OriginalModal: React.FC<ModalProps>;
-export declare const Modal: string & import("styled-components").StyledComponentBase<React.FC<AntdModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
-    useModal: typeof import("antd/es/modal/useModal").default;
-    destroyAll: () => void;
-    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
-}, any, import("./styled").CustomModalProps, never> & import("hoist-non-react-statics").NonReactStatics<React.FC<AntdModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+export declare const Modal: React.FC<ModalProps> & {
+    confirm: (props: ModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps)) => void;
+    };
     useModal: typeof import("antd/es/modal/useModal").default;
+    success: import("antd/es/modal/confirm").ModalFunc;
+    info: import("antd/es/modal/confirm").ModalFunc;
+    error: import("antd/es/modal/confirm").ModalFunc;
+    warning: import("antd/es/modal/confirm").ModalFunc;
     destroyAll: () => void;
-    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
-}, {}> & React.FC<ModalProps>;
+};

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

@@ -15,16 +15,18 @@ export const OriginalModal = memo(props => {
         maskClosable: loading ? false : props.maskClosable, children: [props.header || null, props.children || null] }));
 });
 OriginalModal.displayName = 'OriginalModal';
-export const Modal = OriginalModal;
-Modal.confirm = (props) => StyledModal.confirm({
-    cancelText: 'Cancel',
-    ...props,
+export const Modal = Object.assign(OriginalModal, {
+    confirm: (props) => StyledModal.confirm({
+        cancelText: 'Cancel',
+        ...props,
+    }),
+    useModal: StyledModal.useModal,
+    success: StyledModal.success,
+    info: StyledModal.info,
+    error: StyledModal.error,
+    warning: StyledModal.warning,
+    destroyAll: StyledModal.destroyAll,
 });
-Modal.useModal = StyledModal.useModal;
-Modal.success = StyledModal.success;
-Modal.info = StyledModal.info;
-Modal.error = StyledModal.error;
-Modal.warning = StyledModal.warning;
 Modal.defaultProps = {
     loading: false,
 };