@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

package/es/components/organism/FilterSetting/components/common/InputOrSelect/index.js

@@ -0,0 +1,537 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var _a, _b, _c, _d, _e;
+/* eslint-disable @typescript-eslint/no-use-before-define */
+// Libraries
+import React, { useState, useEffect, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { getI18n } from 'react-i18next';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { AutoComplete, Input } from 'antd';
+import get from 'lodash/get';
+// Icons
+import Icon from '@antscorp/icons';
+// Atoms
+import { Button, Text, Tag } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { Modal, SelectV2 as Select, RadioGroup, TreeSelect, } from '@antscorp/antsomi-ui/es/components/molecules';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Queries
+import { useGetDynamicContentAttr } from '@antscorp/antsomi-ui/es/queries';
+// Style
+import { RowSelect } from '../../../styled';
+// Services
+import { getListAllEvents, getListAttributesEvent, getListSourceByEvent, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/BusinessObject';
+import Search from 'antd/lib/input/Search';
+// Constants
+import { DEFAULT_CUSTOMER_META_DATA, DEFAULT_EVENT_META_DATA, DEFAULT_VISITOR_META_DATA, VALUE_TYPE, } from '../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+// Utils
+import { flattenTree } from '../../../../../../utils';
+import { buildOptionAttrArchive, checkStatusAttr, } from '@antscorp/antsomi-ui/es/components/molecules/AddDynamicContent/utils';
+// Selectors
+import { useSelectServiceAuth } from '../../../../ContentSources/provider';
+const { CUSTOMER, EVENT, VISITOR } = VALUE_TYPE;
+export const InputOrSelect = props => {
+    const { value, eventMetadata, customerMetadata, visitorMetadata, valueType, onChangeMultipleValue, dataType, boFieldOptions, businessObject, useBo, hideSelectField, } = props;
+    const { t } = i18nInstance;
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [errorMsg, setErrorMsg] = useState('');
+    // const [selectedEvent , setSelectedEvent] = useState({value:'',label:''})
+    const showModal = () => {
+        setIsModalVisible(true);
+    };
+    const handleOk = ({ valueType, metaData }) => {
+        const mapMetaData = {
+            event_metadata: metaData.event,
+            visitor_metadata: metaData.visitor,
+            customer_metadata: metaData.customer,
+        };
+        setIsModalVisible(false);
+        onChangeMultipleValue(Object.assign(Object.assign({}, mapMetaData), { value: null, value_type: valueType }));
+    };
+    const handleCancel = () => {
+        setIsModalVisible(false);
+        // if (!eventMetadata.useBo && !eventMetadata.item_property_name && !eventMetadata.ATTRIBUTE) {
+        //   onDeselect();
+        // }
+    };
+    const onChangeInput = (val) => {
+        if (dataType === 'number' && isNaN(val) && val !== '-' && val !== '+') {
+            return;
+        }
+        onChangeMultipleValue({
+            value: val,
+            value_type: 'normal',
+            customer_metadata: DEFAULT_CUSTOMER_META_DATA,
+            visitor_metadata: DEFAULT_VISITOR_META_DATA,
+            event_metadata: Object.assign(Object.assign({}, DEFAULT_EVENT_META_DATA), { useBo }),
+        });
+    };
+    const onDeselect = () => {
+        onChangeMultipleValue({
+            value_type: 'normal',
+            customer_metadata: DEFAULT_CUSTOMER_META_DATA,
+            visitor_metadata: DEFAULT_VISITOR_META_DATA,
+            event_metadata: Object.assign(Object.assign({}, DEFAULT_EVENT_META_DATA), { useBo }),
+        });
+    };
+    const renderInput = (type) => {
+        var _a;
+        let element = null;
+        if (isModalVisible ||
+            (['event', 'visitor', 'customer'].includes(type) &&
+                ((eventMetadata.useBo && eventMetadata.field_code_bo) ||
+                    eventMetadata.item_property_name ||
+                    customerMetadata.item_property_name ||
+                    visitorMetadata.item_property_name))) {
+            element = (React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 32,
+                    padding: '4px 12px 4px 4px',
+                    borderBottom: `1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.gray5}`,
+                } },
+                React.createElement("div", { style: { width: '100%', cursor: 'pointer' }, onClick: showModal },
+                    React.createElement(Tag, null, eventMetadata.useBo
+                        ? eventMetadata.field_label_bo || eventMetadata.field_code_bo
+                        : (valueType === EVENT.value &&
+                            (eventMetadata.item_property_label || eventMetadata.item_property_name)) ||
+                            (valueType === CUSTOMER.value && customerMetadata.item_property_name) ||
+                            (valueType === VISITOR.value && visitorMetadata.item_property_name))),
+                React.createElement(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })));
+        }
+        else {
+            element = (React.createElement(StyledSelect, { mode: "multiple", options: [{ value: '', label: t(translations.orSelectAField.title) }], notFoundContent: null, onSelect: showModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, placeholder: value || t(translations.inputYourValue.title), "$isPlaceholder": !value, dropdownStyle: Object.assign({}, (hideSelectField ? { display: 'none' } : {})) }));
+        }
+        return element;
+    };
+    return (React.createElement(React.Fragment, null,
+        renderInput(valueType),
+        errorMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg)) : null,
+        React.createElement(ModalSelect, { isModalVisible: isModalVisible, valueType: valueType, eventMetadata: eventMetadata, customerMetadata: customerMetadata, visitorMetadata: visitorMetadata, handleOk: handleOk, handleCancel: handleCancel, businessObject: businessObject, boFieldOptions: boFieldOptions, defaultIsBo: useBo, onError: errorMsg => setErrorMsg(errorMsg) })));
+};
+export const ModalSelect = props => {
+    var _a, _b;
+    // Props
+    const { isModalVisible, handleOk, handleCancel, valueType, customerMetadata, visitorMetadata, eventMetadata, boFieldOptions, businessObject, defaultIsBo, onError, } = props;
+    // Translations
+    const { t } = i18nInstance;
+    const i18n = getI18n();
+    // States
+    const [, setOpenTreeSelect] = useState(false);
+    const [metaData, setMetaData] = useState({
+        customer: customerMetadata,
+        visitor: visitorMetadata,
+        event: Object.assign(Object.assign({}, eventMetadata), { useBo: (_a = eventMetadata.useBo) !== null && _a !== void 0 ? _a : defaultIsBo }),
+    });
+    const [tempValueType, setTempValueType] = useState(valueType === 'normal' ? 'event' : valueType);
+    const serviceAuth = useSelectServiceAuth();
+    const { url = '' } = serviceAuth, restAuthInfo = __rest(serviceAuth, ["url"]);
+    // Selectors
+    const { data: dynamicContentAttributes } = useGetDynamicContentAttr({ url }, restAuthInfo);
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const [listEvent, setListEvent] = useState([]);
+    const [listSourceByEvent, setListSourceByEvent] = useState([]);
+    const [listEventAttr, setListEventAttr] = useState([]);
+    const [treeEventAttr, setTreeEventAttr] = useState([]);
+    const [, setSearchValue] = useState('');
+    const [loading, setLoading] = useState({
+        isLoadingEvent: false,
+        isLoadingSource: false,
+        isLoadingAttrs: false,
+    });
+    // Memo
+    const currentMetaData = useMemo(() => metaData[tempValueType] || {}, [metaData, tempValueType]);
+    const flatEventAttrs = useMemo(() => flattenTree(listEventAttr, 'items'), [listEventAttr]);
+    const { errorMessage: eventAttrErrorMessage } = checkStatusAttr({
+        listAttribute: flatEventAttrs.map(({ itemPropertyName, eventPropertyName, status }) => ({
+            value: eventPropertyName || itemPropertyName,
+            status,
+        })) || [],
+        field: currentMetaData.item_property_name || undefined,
+    });
+    const { errorMessage: boAttrErrorMessage } = checkStatusAttr({
+        listAttribute: (dynamicContentAttributes || {})[tempValueType] || [],
+        field: currentMetaData.item_property_name || undefined,
+    });
+    useEffect(() => {
+        let errorMsg = '';
+        if (valueType === VALUE_TYPE.EVENT.value && eventAttrErrorMessage) {
+            errorMsg = eventAttrErrorMessage;
+        }
+        if ([VALUE_TYPE.CUSTOMER.value, VALUE_TYPE.VISITOR.value].includes(valueType) &&
+            boAttrErrorMessage) {
+            errorMsg = boAttrErrorMessage;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        onError && onError(errorMsg);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventAttrErrorMessage, boAttrErrorMessage, valueType]);
+    useDeepCompareEffect(() => {
+        var _a;
+        setMetaData({
+            customer: customerMetadata,
+            visitor: visitorMetadata,
+            event: Object.assign(Object.assign({}, eventMetadata), { useBo: (_a = eventMetadata.useBo) !== null && _a !== void 0 ? _a : defaultIsBo }),
+        });
+    }, [customerMetadata, visitorMetadata, eventMetadata]);
+    useEffect(() => {
+        if (isModalVisible) {
+            setTempValueType(valueType === 'normal' ? 'event' : valueType);
+        }
+    }, [valueType, isModalVisible]);
+    useEffect(() => {
+        getListEvents();
+        setMetaData(metaData => {
+            var _a;
+            return (Object.assign(Object.assign({}, metaData), { [tempValueType]: Object.assign(Object.assign({}, metaData[tempValueType]), { useBo: (_a = eventMetadata.useBo) !== null && _a !== void 0 ? _a : defaultIsBo }) }));
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tempValueType]);
+    useEffect(() => {
+        if (currentMetaData.event_action_id && currentMetaData.event_category_id) {
+            getListSources({
+                event_action_id: currentMetaData.event_action_id,
+                event_category_id: currentMetaData.event_category_id,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentMetaData.event_action_id, currentMetaData.event_category_id]);
+    useEffect(() => {
+        const controller = new AbortController();
+        const { signal } = controller;
+        const { insight_property_ids } = currentMetaData;
+        getListAttribute({
+            insight_property_ids,
+            event_action_id: currentMetaData.event_action_id,
+            event_category_id: currentMetaData.event_category_id,
+            signal,
+        });
+        return () => {
+            controller.abort();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentMetaData.insight_property_ids]);
+    // Services
+    const getListEvents = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setLoading(Object.assign(Object.assign({}, loading), { isLoadingEvent: true }));
+            const { rows } = yield getListAllEvents({ url }, restAuthInfo);
+            setListEvent(rows);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log('error', error);
+        }
+        finally {
+            setLoading(Object.assign(Object.assign({}, loading), { isLoadingEvent: false }));
+        }
+    });
+    const getListSources = (_c) => __awaiter(void 0, [_c], void 0, function* ({ event_action_id, event_category_id }) {
+        setLoading(Object.assign(Object.assign({}, loading), { isLoadingSource: true }));
+        const { rows } = yield getListSourceByEvent({
+            url,
+            eventActionId: event_action_id,
+            eventCategoryId: event_category_id,
+        }, restAuthInfo);
+        setListSourceByEvent(rows);
+        setLoading(Object.assign(Object.assign({}, loading), { isLoadingSource: false }));
+    });
+    const getListAttribute = (_d) => __awaiter(void 0, [_d], void 0, function* ({ insight_property_ids, event_action_id, event_category_id, signal, }) {
+        if (!insight_property_ids ||
+            (Array.isArray(insight_property_ids) && insight_property_ids.length === 0)) {
+            setLoading(Object.assign(Object.assign({}, loading), { isLoadingAttrs: false }));
+            return;
+        }
+        setLoading(Object.assign(Object.assign({}, loading), { isLoadingAttrs: true }));
+        const { rows } = yield getListAttributesEvent(serviceAuth, {
+            sourceId: insight_property_ids,
+            eventActionId: event_action_id,
+            eventCategoryId: event_category_id,
+            signal, // AbortController
+        });
+        setListEventAttr(rows);
+        setLoading(Object.assign(Object.assign({}, loading), { isLoadingAttrs: false }));
+        const treeAttrs = rows.map((attr) => (Object.assign({ value: attr.eventPropertyName, title: attr.eventPropertyDisplay, isLeaf: attr.items ? attr.items.length === 0 : true, selectable: attr.items ? attr.items.length === 0 : true }, (attr.items &&
+            attr.items.length && {
+            children: attr.items.map((childAttr) => ({
+                value: `${childAttr.itemTypeId}.${childAttr.itemPropertyName}`,
+                title: childAttr.translateLabel,
+                status: childAttr.status,
+                isLeaf: true,
+            })),
+        }))));
+        setTreeEventAttr(treeAttrs);
+    });
+    const onChangeFieldType = (e) => {
+        const { value } = e.target;
+        if (value) {
+            setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { useBo: value === 'bo' }) })));
+        }
+    };
+    const onChangeEvent = (val) => {
+        const selected = listEvent.find(item => item.value === val);
+        if (selected) {
+            setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { event_action_id: selected.eventActionId, event_category_id: selected.eventCategoryId, event_tracking_name: selected.eventTrackingName, 
+                    // resets
+                    insight_property_ids: null, item_type_id: null, item_type_name: null, item_property_name: null, item_property_label: null, event_property_syntax: null }) })));
+            setTreeEventAttr([]);
+            setListEventAttr([]);
+        }
+    };
+    const onChangeSource = (values = []) => {
+        const sourcesSelected = listSourceByEvent.filter(source => values.includes(source.value));
+        if (values.length === 0) {
+            setTreeEventAttr([]);
+            setListEventAttr([]);
+        }
+        setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { insight_property_ids: sourcesSelected.map(source => source.insightPropertyId), 
+                // resets
+                item_type_id: null, item_type_name: null, item_property_name: null, item_property_label: null, event_property_syntax: null }) })));
+    };
+    const onChangeAttribute = (val) => {
+        const [attribute, item] = val.split('.');
+        if (!item) {
+            const selected = listEventAttr.find(attr => attr.value === attribute);
+            if (selected) {
+                setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { item_type_id: null, item_type_name: null, item_property_name: selected.eventPropertyName, item_property_label: selected.label, event_property_syntax: selected.eventPropertySyntax, useBo: false }) })));
+            }
+        }
+        else {
+            const selectedAttribute = listEventAttr.find(attr => +attr.itemTypeId === +attribute);
+            const selected = selectedAttribute.items.find((attr) => attr.itemPropertyName === item);
+            if (selected) {
+                setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { item_type_id: selected.itemTypeId, item_type_name: selected.itemTypeName, item_property_name: selected.itemPropertyName, item_property_label: selected.translateLabel, event_property_syntax: selected.eventPropertySyntax, useBo: false }) })));
+            }
+        }
+    };
+    const onSelect = (item) => {
+        if (item.isBo) {
+            setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { field_code_bo: item.value, field_label_bo: item.label, useBo: true }) })));
+        }
+        else {
+            if (item.isLeaf) {
+                // select item || parents not items
+                setSearchValue('');
+                onChangeAttribute(item.value);
+                onDropdownVisibleChange(false);
+            }
+            else {
+                // select parents
+                if (expandedKeys.includes(item.value)) {
+                    // close expand
+                    const newExpandedKeys = expandedKeys.filter(key => key !== item.value);
+                    onTreeExpand(newExpandedKeys);
+                }
+                else {
+                    // open expand
+                    onTreeExpand((prev) => [...prev, item.value]);
+                }
+            }
+        }
+    };
+    const onTreeExpand = (val) => {
+        setExpandedKeys(val);
+    };
+    const onDropdownVisibleChange = (open) => {
+        setOpenTreeSelect(open);
+    };
+    const handleDisableSubmit = () => {
+        switch (tempValueType) {
+            case EVENT.value:
+                if (metaData.event.useBo) {
+                    return !metaData.event.useBo;
+                }
+                return !metaData.event.item_property_name || !!eventAttrErrorMessage;
+            default:
+                return !currentMetaData.item_property_name || !!boAttrErrorMessage;
+        }
+    };
+    const onChangeDynamicContentAttr = (value) => {
+        setMetaData(metaData => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, metaData), { [tempValueType]: {
+                    item_type_id: (_a = VALUE_TYPE[tempValueType.toUpperCase()]) === null || _a === void 0 ? void 0 : _a.id,
+                    item_type_name: (_b = VALUE_TYPE[tempValueType.toUpperCase()]) === null || _b === void 0 ? void 0 : _b.name,
+                    item_property_name: value,
+                } }));
+        });
+    };
+    const onCancel = () => {
+        setMetaData({
+            visitor: visitorMetadata,
+            customer: customerMetadata,
+            event: eventMetadata,
+        });
+        setTempValueType(valueType);
+        handleCancel();
+    };
+    const attributeValue = (currentMetaData.useBo
+        ? currentMetaData.field_code_bo
+        : currentMetaData.item_type_id
+            ? `${currentMetaData.item_type_id}.${currentMetaData.item_property_name}`
+            : currentMetaData.item_property_name) || undefined;
+    return (React.createElement(Modal, { title: t(translations.selectAttributeCapitalize.title).toString(), width: 545, visible: isModalVisible, onOk: () => handleOk({
+            valueType: tempValueType,
+            metaData,
+        }), onCancel: onCancel, destroyOnClose: true, footer: [
+            React.createElement(Button, { key: "submit", type: "primary", onClick: () => handleOk({
+                    valueType: tempValueType,
+                    metaData,
+                }), disabled: handleDisableSubmit() }, t(translations.apply.title).toString()),
+            React.createElement(Button, { key: "back", onClick: onCancel }, t(translations.cancel.title).toString()),
+        ] },
+        businessObject && boFieldOptions && boFieldOptions.length ? (React.createElement(RadioGroup, { value: currentMetaData.useBo ? 'bo' : 'event', onChange: onChangeFieldType, style: { gap: 25 }, options: [
+                {
+                    value: 'bo',
+                    label: t(translations.fromBo.title).toString(),
+                },
+                {
+                    value: 'event',
+                    label: t(translations.fromEvent.title).toString(),
+                },
+            ] })) : null,
+        currentMetaData.useBo && businessObject && boFieldOptions ? (React.createElement(RowSelect, null,
+            React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectBo.title).toString()),
+            React.createElement(Input, { value: businessObject ? businessObject.itemTypeDisplay || businessObject.itemTypeName : '', onChange: () => { }, style: {
+                    borderTop: 'none',
+                    borderRight: 'none',
+                    borderLeft: 'none',
+                    fontSize: 12,
+                    pointerEvents: 'none',
+                } }),
+            React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectAttribute.title).toString()),
+            React.createElement(Select, { value: attributeValue, options: boFieldOptions, onChange: (value, item) => onSelect({
+                    value,
+                    isBo: true,
+                    label: item.label || '',
+                    isLeaf: true,
+                }), placeholder: t(translations.selectAnItem.title).toString(), showSearch: true }))) : (React.createElement(RowSelect, null,
+            React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.dynamicContent.modal.label.contentSource).toString()),
+            React.createElement(Select, { showSearch: true, placeholder: "Select an item", defaultValue: EVENT.value, value: tempValueType || undefined, onChange: v => setTempValueType(v), options: Object.values(VALUE_TYPE).map(({ value, label }) => ({ value, label })) }),
+            [CUSTOMER.value, VISITOR.value].includes(tempValueType || '') ? (React.createElement(React.Fragment, null,
+                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.dynamicContent.modal.label.attribute).toString()),
+                React.createElement(Select, { status: boAttrErrorMessage ? 'error' : '', errorMsg: boAttrErrorMessage, showSearch: true, placeholder: "Select an item", options: (_b = buildOptionAttrArchive((dynamicContentAttributes || {})[tempValueType], currentMetaData.item_property_name || undefined)) === null || _b === void 0 ? void 0 : _b.map(attribute => {
+                        var _a;
+                        return ({
+                            value: attribute.value,
+                            label: get(attribute, `label.${(_a = i18n.language) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, attribute.defaultLabel),
+                        });
+                    }), value: currentMetaData.item_property_name || undefined, onChange: onChangeDynamicContentAttr }))) : (React.createElement(React.Fragment, null,
+                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectEvent.title).toString()),
+                React.createElement(Select, { showSearch: true, placeholder: "Select an item", value: currentMetaData.event_tracking_name || undefined, loading: loading.isLoadingEvent, onChange: v => onChangeEvent(v), options: listEvent.map(event => ({ value: event.value, label: event.label })) }),
+                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.inAnySourceOf.title).toString()),
+                React.createElement(Select, { mode: "multiple", showSearch: true, placeholder: "Select an item", value: currentMetaData.insight_property_ids || undefined, loading: loading.isLoadingSource, options: listSourceByEvent.map(event => ({
+                        value: event.value,
+                        label: event.label,
+                    })), onChange: v => onChangeSource(v) }),
+                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectEventAttribute.title).toString()),
+                React.createElement(TreeSelect, { showSearch: true, value: attributeValue || undefined, placeholder: t(translations.selectEventAttribute.title).toString(), treeData: treeEventAttr.map(attr => (Object.assign(Object.assign({}, attr), { children: buildOptionAttrArchive(attr.children || [], attributeValue || undefined) }))), loading: loading.isLoadingAttrs, onChange: onChangeAttribute, status: eventAttrErrorMessage ? 'error' : '' })))))));
+};
+ModalSelect.defaultProps = {
+    valueType: EVENT.value,
+    customerMetadata: {
+        item_type_id: CUSTOMER.id,
+        item_type_name: CUSTOMER.name,
+        item_property_name: '',
+    },
+    visitorMetadata: {
+        item_type_id: VISITOR.id,
+        item_type_name: VISITOR.name,
+        item_property_name: '',
+    },
+};
+export const StyledAutoComplete = styled(AutoComplete) `
+  width: 100%;
+
+  .antsomi-select-selector {
+    border-top: none !important;
+    border-right: none !important;
+    border-left: none !important;
+  }
+`;
+export const StyledDropdown = styled.div `
+  .antsomi-select-tree
+    .antsomi-select-tree-treenode:not(.antsomi-select-tree .antsomi-select-tree-treenode-disabled)
+    .antsomi-select-tree-title {
+    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+    ${props => props.$isSearching
+    ? css `
+            font-weight: 500;
+          `
+    : ``};
+  }
+  .antsomi-select-tree-node-content-wrapper {
+    display: flex;
+    align-items: center;
+  }
+`;
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selection-placeholder {
+    ${props => {
+    var _a;
+    return !props.$isPlaceholder
+        ? css `
+            color: rgba(0, 0, 0, 0.85);
+            font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+          `
+        : `
+        `;
+}}
+  }
+`;
+export const StyledTreeSelect = styled(TreeSelect) `
+  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+  width: 100%;
+  &:hover {
+    .antsomi-select-selector {
+      border-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.gray5} !important;
+    }
+  }
+
+  .antsomi-select-selector {
+    border-top: 0 !important;
+    border-right: 0 !important;
+    border-left: 0 !important;
+    border-bottom: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.gray5};
+
+    // padding-right: 12px;
+  }
+  .antsomi-select-selection-overflow-item.antsomi-select-selection-overflow-item-rest {
+    .antsomi-select-selection-item {
+      color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue4};
+      background: #e6f7ff;
+      border-color: #91d5ff;
+    }
+  }
+`;
+export const StyledSearch = styled(Search) `
+  .antsomi-input-group-addon {
+    button {
+      height: 32px;
+    }
+  }
+`;

package/es/components/organism/FilterSetting/components/common/InputSelectMulti/ColumnSuggestion/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DataSelect } from '..';
+interface ColumnContent {
+    data: DataSelect;
+    extendValue?: any;
+    onChange: (value: any) => void;
+    onChangeRemoveExtend: (value: any) => void;
+}
+export declare const ColumnSuggestion: React.FC<ColumnContent>;
+export declare const WrapperContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const Span: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextField: import("styled-components").StyledComponent<React.FC<import("@antscorp/antsomi-ui/es/components/atoms/Text").TextProps>, any, {}, never>;
+export {};

package/es/components/organism/FilterSetting/components/common/InputSelectMulti/ColumnSuggestion/index.js

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+// Libraries
+import React from 'react';
+import styled from 'styled-components';
+// Atoms
+import { Tooltip, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+export const ColumnSuggestion = props => {
+    const { data, onChange, extendValue, onChangeRemoveExtend } = props;
+    const showContent = (childs, extend) => {
+        const result = [];
+        childs.forEach((item) => {
+            result.push(React.createElement(Tooltip, { title: item },
+                React.createElement(ListItem, null,
+                    React.createElement(TextField, null, item),
+                    React.createElement(Icon, { onClick: () => onChange(item), type: "icon-ants-remove-slim", size: 10, style: { cursor: 'pointer' } }))));
+        });
+        extend === null || extend === void 0 ? void 0 : extend.forEach((element) => {
+            result.push(React.createElement(Tooltip, { title: element },
+                React.createElement(ListItem, null,
+                    React.createElement(TextField, null, element),
+                    React.createElement(Icon, { size: 10, type: "icon-ants-flag" }),
+                    React.createElement(Icon, { onClick: () => onChangeRemoveExtend(element), type: "icon-ants-remove-slim", size: 10, style: { cursor: 'pointer' } }))));
+        });
+        if (result.length > 0) {
+            return React.createElement(List, null, result);
+        }
+        return null;
+    };
+    return React.createElement(WrapperContent, null, showContent(data, extendValue));
+};
+export const WrapperContent = styled.div `
+  width: 100%;
+  height: 100%;
+`;
+export const List = styled.ul `
+  width: 100%;
+  height: 90%;
+  overflow: auto;
+  margin-top: 10px;
+  padding: 5px;
+`;
+export const ListItem = styled.li `
+  border: 0.063rem solid rgb(230, 230, 230);
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  width: 100%;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  border-radius: 0.313rem;
+  justify-content: space-between;
+  margin-top: 5px;
+`;
+export const Span = styled.div `
+  color: inherit;
+  max-width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export const TextField = styled(Text) `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 180px;
+`;

package/es/components/organism/FilterSetting/components/common/InputSelectMulti/Tree/index.d.ts

@@ -0,0 +1,20 @@
+import React, { UIEventHandler } from 'react';
+import { DataSelect } from '..';
+type TreeData = {
+    value: string;
+    title: string;
+    key: string;
+    isLeaf: boolean;
+}[];
+interface TreeContent {
+    treeData: TreeData;
+    data: DataSelect;
+    onChange: (value: any) => void;
+    onScroll: UIEventHandler<HTMLDivElement>;
+}
+export declare const TreeContentWrapper: React.FC<TreeContent>;
+export declare const WrapperContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const Span: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};