@antscorp/antsomi-ui 2.0.62 → 2.0.64-staging.1

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

@@ -46,6 +46,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -46,3 +46,4 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';

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/EditingList/EditingList.js

@@ -9,15 +9,15 @@ import { Action, List, Search, LazyComponent } from './components';
 import { CLS } from './utils';
 const { Popover, Title } = LazyComponent;
 export const EditingList = (props) => {
-    const { isLoading = false, addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, emptyDescription, onChange, } = props;
+    const { isLoading = false, addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, emptyDescription, popoverProps, onChange, } = props;
     const [search, setSearch] = useState('');
     const debounceSearch = useDebounce(search);
     const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
-    const filterdOptions = useMemo(() => selectedOptions.filter(opt => defaultPopoverSelectSearch(opt, debounceSearch)), [selectedOptions, debounceSearch]);
+    const filterdOptions = useMemo(() => selectedOptions.filter(opt => defaultPopoverSelectSearch(opt, debounceSearch, popoverProps?.inputSearchProps?.searchConfig)), [selectedOptions, debounceSearch, popoverProps?.inputSearchProps?.searchConfig]);
     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(EditingListRoot, { className: clsx(CLS.Root.default, className), vertical: true, gap: 8, children: [title && (_jsx(Suspense, { children: _jsx(Title, { showNum: showNum, title: title, selectedAmount: selected.length, optionAmount: options.length }) })), _jsx(Search, { onChange: e => setSearch(e.target.value) }), _jsx(List, { isLoading: isLoading, filterdOptions: filterdOptions, emptyDescription: emptyDescription, renderAction: key => (_jsx(Action, { removable: removable, onClickRemove: () => handleRemove(key) })) }), !isSelectAll && !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { options: options, selected: selected, addBtnLabel: addBtnLabel, onChange: onChange }) }))] }));
+    return (_jsxs(EditingListRoot, { className: clsx(CLS.Root.default, className), vertical: true, gap: 8, children: [title && (_jsx(Suspense, { children: _jsx(Title, { showNum: showNum, title: title, selectedAmount: selected.length, optionAmount: options.length }) })), _jsx(Search, { onChange: e => setSearch(e.target.value) }), _jsx(List, { isLoading: isLoading, filterdOptions: filterdOptions, emptyDescription: emptyDescription, renderAction: key => (_jsx(Action, { removable: removable, onClickRemove: () => handleRemove(key) })) }), !isSelectAll && !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { options: options, selected: selected, addBtnLabel: addBtnLabel, onChange: onChange, ...popoverProps }) }))] }));
 };

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

@@ -10,4 +10,4 @@ export declare const Popover: import("react").LazyExoticComponent<(props: {
     selected: string[];
     addBtnLabel: import("react").ReactNode;
     onChange?: ((selected: string[]) => void) | undefined;
-}) => import("react/jsx-runtime").JSX.Element>;
+} & Pick<import("../../SearchPopover/types").PopoverSelectProps, "inputSearchProps">) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Option } from '../../types';
+import { EditingListProps, Option } from '../../types';
 type PopoverProps = {
     options: Option[];
     selected: string[];
     addBtnLabel: React.ReactNode;
     onChange?: (selected: string[]) => void;
-};
+} & EditingListProps['popoverProps'];
 export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,6 +4,6 @@ import { PopoverSelect } from '../../../SearchPopover';
 import { StyledAddBtn } from '../../styled';
 import { CLS } from '../../utils';
 export const Popover = (props) => {
-    const { options, selected, addBtnLabel, onChange } = props;
-    return (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, children: _jsxs(StyledAddBtn, { className: CLS.AddButton.default, role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }));
+    const { options, selected, addBtnLabel, onChange, ...popoverSearchProps } = props;
+    return (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, ...popoverSearchProps, children: _jsxs(StyledAddBtn, { className: CLS.AddButton.default, role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }));
 };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PopoverSelectProps } from '../SearchPopover/types';
 export type Option = {
     key: string;
     label: React.ReactNode;
@@ -14,5 +15,6 @@ export type EditingListProps = {
     isLoading?: boolean;
     emptyDescription?: string;
     removable?: boolean;
+    popoverProps?: Pick<PopoverSelectProps, 'inputSearchProps'>;
     onChange?: (selected: string[]) => void;
 };

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export type ValueType = 'input' | 'select';
+type Value = {
+    source: string;
+    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,115 @@
+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 getCodeDefaultBySource = useCallback((source) => get(mapCodeOptions, [source, '0', 'value'], ''), [mapCodeOptions]);
+    const onOpenModal = useCallback(() => {
+        if (value && typeof value !== 'string') {
+            const isExist = has(mapCodeBySource, [value?.code, 'label']);
+            form.setFieldsValue({ source: value?.source, code: isExist ? value?.code : undefined });
+        }
+        else {
+            const source = sourceOptions[0]?.value || '';
+            const code = getCodeDefaultBySource(source);
+            form.setFieldsValue({ source, code });
+        }
+        setOpenModal(true);
+    }, [value, mapCodeBySource, form, sourceOptions, 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/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -15,7 +15,7 @@ export const PopoverSelect = (props) => {
     const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, isAllowEmpty = false, onCancel, onApply, onSearchPredicate, ...rest } = props;
     const itemSize = menuProps.itemSize || ITEM_SIZE;
     const itemSpacing = menuProps.itemSpacing || ITEM_SPACING;
-    const { value: searchValue, ...restInputSearchProps } = inputSearchProps;
+    const { value: searchValue, searchConfig, ...restInputSearchProps } = inputSearchProps;
     const refOnSearchPredicate = useRef(onSearchPredicate);
     useEffect(() => {
         refOnSearchPredicate.current = onSearchPredicate;
@@ -46,15 +46,15 @@ export const PopoverSelect = (props) => {
     const filteredOptions = useMemo(() => {
         let result = options.filter(field => {
             if (!refOnSearchPredicate.current) {
-                return defaultSearch(field, search);
+                return defaultSearch(field, search, searchConfig);
             }
-            return refOnSearchPredicate.current(field) || defaultSearch(field, search);
+            return refOnSearchPredicate.current(field) || defaultSearch(field, search, searchConfig);
         });
         if (showSelected) {
             result = result.filter(field => selectedKeys.has(field.key));
         }
         return result;
-    }, [options, search, showSelected, selectedKeys]);
+    }, [options, search, showSelected, selectedKeys, searchConfig]);
     const handleToggleField = (field, checked) => {
         const newSelectedKeys = new Set(selectedKeys);
         if (checked) {

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

@@ -2,8 +2,13 @@ import { PopoverProps } from 'antd';
 import { InputProps } from '../../atoms/Input';
 import React, { PropsWithChildren } from 'react';
 import { MenuInlineProps } from '../VirtualizedMenu/types';
+export type SearchConfig = {
+    searchWithKey?: boolean;
+};
 export type SearchPopoverProps = PropsWithChildren<{
-    inputSearchProps?: InputProps;
+    inputSearchProps?: InputProps & {
+        searchConfig?: SearchConfig;
+    };
     isAllowEmpty?: boolean;
 } & PopoverProps>;
 export type Option = {

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

@@ -1,5 +1,5 @@
-import { Option } from './types';
-export declare const defaultSearch: (opt: Option, search: string) => boolean;
+import { Option, SearchConfig } from './types';
+export declare const defaultSearch: (opt: Option, search: string, config?: SearchConfig) => boolean;
 export declare const calDefaultListHeightInPopover: (params: {
     listLength: number;
     itemSize: number;