@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

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

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 // Atoms
 import { Tooltip, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -12,22 +10,18 @@ export const TreeContentWrapper = props => {
     const showContent = childs => {
         const result = [];
         childs.forEach((item, key) => {
-            var _a;
-            result.push(React.createElement(Tooltip, { title: item.title },
-                React.createElement(ListItem, null,
-                    React.createElement(TextField, null, item.title),
-                    React.createElement(Icon, { disabled: data.includes(item.value), size: 10, type: "icon-ants-double-arrow-up", onClick: data.includes(item.value) ? () => { } : e => onChange(item.value), style: {
-                            color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-                            cursor: 'pointer',
-                            transform: 'rotate(90deg)',
-                        } }))));
+            result.push(_jsx(Tooltip, { title: item.title, children: _jsxs(ListItem, { children: [_jsx(TextField, { children: item.title }), _jsx(Icon, { disabled: data.includes(item.value), size: 10, type: "icon-ants-double-arrow-up", onClick: data.includes(item.value) ? () => { } : e => onChange(item.value), style: {
+                                color: THEME.token?.colorPrimary,
+                                cursor: 'pointer',
+                                transform: 'rotate(90deg)',
+                            } })] }) }));
         });
         if (result.length > 0) {
-            return React.createElement(List, null, result);
+            return _jsx(List, { children: result });
         }
         return null;
     };
-    return React.createElement(WrapperContent, { onScrollCapture: onScroll }, showContent(treeData));
+    return _jsx(WrapperContent, { onScrollCapture: onScroll, children: showContent(treeData) });
 };
 export const WrapperContent = styled.div `
   width: 100%;

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

@@ -1,27 +1,7 @@
-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;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-use-before-define */
 // Libraries
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { keyBy } from 'lodash';
 import classNames from 'classnames';
 import styled from 'styled-components';
@@ -71,23 +51,27 @@ export const InputSelectMulti = props => {
     // Debounce
     const debounceSearchValue = useDebounce(searchValue, 500);
     useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
+        (async () => {
             setLoading(true);
-            const res = yield getSuggestions({ pageNum: page, search: debounceSearchValue });
-            const newData = Object.assign({}, res);
+            const res = await getSuggestions({ pageNum: page, search: debounceSearchValue });
+            const newData = {
+                ...res,
+            };
             setData(newData);
             setTreeData(Object.values(newData));
             setLoading(false);
-        }))();
+        })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [debounceSearchValue]);
     useEffect(() => {
         if (column === SEGMENT_IDS) {
-            (() => __awaiter(void 0, void 0, void 0, function* () {
-                const res = yield getInfoMetadata();
-                const newData = Object.assign({}, res);
+            (async () => {
+                const res = await getInfoMetadata();
+                const newData = {
+                    ...res,
+                };
                 setMapLabel(newData);
-            }))();
+            })();
         }
         setDataSelect(value);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -104,13 +88,11 @@ export const InputSelectMulti = props => {
             }, 1000);
         }
     }, [isCheckDropDown]);
-    const getSuggestions = (_a) => __awaiter(void 0, [_a], void 0, function* ({ pageNum, search }) {
-        return column === SEGMENT_IDS
-            ? getSuggestionObjects({ pageNum, search })
-            : getSuggestionItems({ pageNum, search });
-    });
-    const getSuggestionItems = (_b) => __awaiter(void 0, [_b], void 0, function* ({ pageNum, search }) {
-        const { rows } = yield getListSuggestionItems({}, {
+    const getSuggestions = async ({ pageNum, search }) => column === SEGMENT_IDS
+        ? getSuggestionObjects({ pageNum, search })
+        : getSuggestionItems({ pageNum, search });
+    const getSuggestionItems = async ({ pageNum, search }) => {
+        const { rows } = await getListSuggestionItems({}, {
             limit: 20,
             page: pageNum,
             sd: 'asc',
@@ -135,9 +117,9 @@ export const InputSelectMulti = props => {
             };
         }), 'value');
         return data;
-    });
-    const getSuggestionObjects = (_c) => __awaiter(void 0, [_c], void 0, function* ({ pageNum, search }) {
-        const { rows } = yield getListSuggestionObjects({}, {
+    };
+    const getSuggestionObjects = async ({ pageNum, search }) => {
+        const { rows } = await getListSuggestionObjects({}, {
             limit: 20,
             page: pageNum,
             sd: 'asc',
@@ -185,9 +167,9 @@ export const InputSelectMulti = props => {
             isLeaf: true,
         })), 'value');
         return data;
-    });
-    const getInfoMetadata = () => __awaiter(void 0, void 0, void 0, function* () {
-        const { rows } = yield getListInfoMetadata({}, {
+    };
+    const getInfoMetadata = async () => {
+        const { rows } = await getListInfoMetadata({}, {
             objectType: 'BO_SEGMENTS',
             filters: {
                 OR: [
@@ -209,7 +191,7 @@ export const InputSelectMulti = props => {
             return acc;
         }, {});
         return data;
-    });
+    };
     const onPopover = () => {
         setIsCheck(true);
         setPopover(!openPopover);
@@ -257,16 +239,19 @@ export const InputSelectMulti = props => {
     const onChangeTreeData = (val) => {
         setTreeData(val);
     };
-    const onLoadMore = () => __awaiter(void 0, void 0, void 0, function* () {
+    const onLoadMore = async () => {
         setLoadingMore(true);
         const newPage = page + 1;
-        const res = yield getSuggestions({ pageNum: newPage, search: searchValue });
-        const newData = Object.assign(Object.assign({}, data), res);
+        const res = await getSuggestions({ pageNum: newPage, search: searchValue });
+        const newData = {
+            ...data,
+            ...res,
+        };
         setData(newData);
         setTreeData(Object.values(newData));
         setLoadingMore(false);
         setPage(prev => prev + 1);
-    });
+    };
     const onScroll = event => {
         if (isShowCheck) {
             return;
@@ -299,9 +284,8 @@ export const InputSelectMulti = props => {
         setIsShowCheck(prev => !prev);
     };
     const onUncheckAll = () => {
-        var _a;
         setDataSelect([]);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, [], 'value', 'extend');
+        props.onChange?.([], 'value', 'extend');
     };
     const handleOkModalSelect = ({ valueType, metaData }) => {
         const mapMetaData = {
@@ -310,7 +294,11 @@ export const InputSelectMulti = props => {
             customer_metadata: metaData.customer,
         };
         setModalSelectVisible(false);
-        onChangeMultipleValue(Object.assign(Object.assign({ value: [] }, mapMetaData), { value_type: valueType }));
+        onChangeMultipleValue({
+            value: [],
+            ...mapMetaData,
+            value_type: valueType,
+        });
     };
     const onApplyExtendValue = value => {
         const newArray = (dataExtend || []).concat(value);
@@ -320,64 +308,50 @@ export const InputSelectMulti = props => {
     const handleCancelModalSelect = () => {
         setModalSelectVisible(false);
     };
-    const renderInput = () => {
-        var _a, _b;
-        return (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: () => setModalSelectVisible(true) },
-                React.createElement(Tag, null, (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: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase, cursor: 'pointer' }, onClick: () => {
+    const renderInput = () => (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 32,
+            padding: '4px 12px 4px 4px',
+            borderBottom: `1px solid ${THEME.token?.gray5}`,
+        }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: () => setModalSelectVisible(true), children: _jsx(Tag, { children: (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) }) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: THEME.token?.colorTextBase, cursor: 'pointer' }, onClick: () => {
                     onChangeMultipleValue({
                         event_metadata: DEFAULT_EVENT_META_DATA,
                         value_type: 'normal',
                     });
-                } })));
-    };
-    return (React.createElement(React.Fragment, null,
-        ['event', 'customer', 'visitor'].includes(valueType || '') ? (renderInput()) : (React.createElement(SelectMultiple
-        // open
-        , { 
+                } })] }));
+    return (_jsxs(_Fragment, { children: [['event', 'customer', 'visitor'].includes(valueType || '') ? (renderInput()) : (_jsx(SelectMultiple
             // open
-            virtual: false, treeData: treeData, value: dataExtend ? value.concat(dataExtend) : value, dropdownExtraContent: !hideSelectField ? (React.createElement(React.Fragment, null,
-                React.createElement(Divider, { style: {
-                        border: '0.51px solid rgb(203, 214, 226)',
-                        marginTop: 6,
-                        marginBottom: 6,
-                    } }),
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center', padding: '0px 10px' } },
-                    React.createElement(Text, null, t(translations.or.title).toString()),
-                    React.createElement(Button, { type: "text", onClick: () => setModalSelectVisible(true) }, t(translations.selectAField.title).toString())))) : null, searchValue: searchValue, notFoundContent: React.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: 128,
-                } }, loading ? 'Loading...' : 'No data'), onSearch: onSearch, onChange: onChangeValue, onChangeTreeData: onChangeTreeData, 
-            // data={data}
-            loading: loading, onScroll: onScroll, isShowCheck: isShowCheck, onChangeIsShowCheck: onChangeIsShowCheck, onUncheckAll: onUncheckAll, mapLabel: mapLabel, dataSelect: dataSelect, onChangeOpen: onChangeOpen, open: open, onSelectAll: onSelectAll, onApplyExtendValue: onApplyExtendValue, column: column, extendValue: dataExtend, onChangeRemoveExtend: onChangeRemoveExtend, onPopover: onPopover, onApply: onApply, openPopover: openPopover, isCheckDropDown: isCheckDropDown })),
-        errorMessage ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8 } }, errorMessage)) : null,
-        React.createElement(ModalSelect, { valueType: valueType || 'event', isModalVisible: modalSelectVisible, customerMetadata: customerMetadata, visitorMetadata: visitorMetadata, eventMetadata: eventMetadata, handleOk: handleOkModalSelect, handleCancel: handleCancelModalSelect })));
+            , { 
+                // open
+                virtual: false, treeData: treeData, value: dataExtend ? value.concat(dataExtend) : value, dropdownExtraContent: !hideSelectField ? (_jsxs(_Fragment, { children: [_jsx(Divider, { style: {
+                                border: '0.51px solid rgb(203, 214, 226)',
+                                marginTop: 6,
+                                marginBottom: 6,
+                            } }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', padding: '0px 10px' }, children: [_jsx(Text, { children: t(translations.or.title).toString() }), _jsx(Button, { type: "text", onClick: () => setModalSelectVisible(true), children: t(translations.selectAField.title).toString() })] })] })) : null, searchValue: searchValue, notFoundContent: _jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: 128,
+                    }, children: loading ? 'Loading...' : 'No data' }), onSearch: onSearch, onChange: onChangeValue, onChangeTreeData: onChangeTreeData, 
+                // data={data}
+                loading: loading, onScroll: onScroll, isShowCheck: isShowCheck, onChangeIsShowCheck: onChangeIsShowCheck, onUncheckAll: onUncheckAll, mapLabel: mapLabel, dataSelect: dataSelect, onChangeOpen: onChangeOpen, open: open, onSelectAll: onSelectAll, onApplyExtendValue: onApplyExtendValue, column: column, extendValue: dataExtend, onChangeRemoveExtend: onChangeRemoveExtend, onPopover: onPopover, onApply: onApply, openPopover: openPopover, isCheckDropDown: isCheckDropDown })), errorMessage ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8 }, children: errorMessage })) : null, _jsx(ModalSelect, { valueType: valueType || 'event', isModalVisible: modalSelectVisible, customerMetadata: customerMetadata, visitorMetadata: visitorMetadata, eventMetadata: eventMetadata, handleOk: handleOkModalSelect, handleCancel: handleCancelModalSelect })] }));
 };
 export const SelectMultiple = props => {
     const { onChangeTreeData, 
     // data,
-    loading, onScroll, isShowCheck, onChangeIsShowCheck, onUncheckAll, mapLabel, dropdownExtraContent, treeData, onChange, dataSelect, onChangeOpen, open, onSelectAll, onApplyExtendValue, extendValue, column, onChangeRemoveExtend, onPopover, onApply, openPopover, isCheckDropDown, searchValue, onSearch } = props, restOf = __rest(props, ["onChangeTreeData", "loading", "onScroll", "isShowCheck", "onChangeIsShowCheck", "onUncheckAll", "mapLabel", "dropdownExtraContent", "treeData", "onChange", "dataSelect", "onChangeOpen", "open", "onSelectAll", "onApplyExtendValue", "extendValue", "column", "onChangeRemoveExtend", "onPopover", "onApply", "openPopover", "isCheckDropDown", "searchValue", "onSearch"]);
+    loading, onScroll, isShowCheck, onChangeIsShowCheck, onUncheckAll, mapLabel, dropdownExtraContent, treeData, onChange, dataSelect, onChangeOpen, open, onSelectAll, onApplyExtendValue, extendValue, column, onChangeRemoveExtend, onPopover, onApply, openPopover, isCheckDropDown, searchValue, onSearch, ...restOf } = props;
     // I18next
     const { t } = i18nInstance;
-    return (React.createElement(StyledTreeSelect, Object.assign({ showSearch: false, searchValue: searchValue, treeCheckable: true, 
+    return (_jsx(StyledTreeSelect, { showSearch: false, searchValue: searchValue, treeCheckable: true, 
         // open
-        placement: "bottomRight", autoClearSearchValue: true, dropdownStyle: { minWidth: '600px', width: '600px' }, open: open, onDropdownVisibleChange: isCheckDropDown ? () => { } : onChangeOpen, maxTagCount: "responsive", tagRender: v => React.createElement(Tag, Object.assign({}, v), mapLabel[v.value] || v.label), placeholder: t(translations.selectAnItem.title).toString(), dropdownRender: menu => (React.createElement(SelectMultipleDropdown, { menu: menu, isShowCheck: isShowCheck, extraContent: dropdownExtraContent, onChangeIsShowCheck: onChangeIsShowCheck, onUncheckAll: onUncheckAll, onScroll: onScroll, treeData: treeData, onChange: onChange, dataSelect: dataSelect, onChangeOpen: onChangeOpen, onSelectAll: onSelectAll, onApplyExtendValue: onApplyExtendValue, column: column, extendValue: extendValue, onChangeRemoveExtend: onChangeRemoveExtend, onPopover: onPopover, onApply: onApply, openPopover: openPopover, searchValue: searchValue, onSearch: onSearch, loading: loading })) }, restOf)));
+        placement: "bottomRight", autoClearSearchValue: true, dropdownStyle: { minWidth: '600px', width: '600px' }, open: open, onDropdownVisibleChange: isCheckDropDown ? () => { } : onChangeOpen, maxTagCount: "responsive", tagRender: v => _jsx(Tag, { ...v, children: mapLabel[v.value] || v.label }), placeholder: t(translations.selectAnItem.title).toString(), dropdownRender: menu => (_jsx(SelectMultipleDropdown, { menu: menu, isShowCheck: isShowCheck, extraContent: dropdownExtraContent, onChangeIsShowCheck: onChangeIsShowCheck, onUncheckAll: onUncheckAll, onScroll: onScroll, treeData: treeData, onChange: onChange, dataSelect: dataSelect, onChangeOpen: onChangeOpen, onSelectAll: onSelectAll, onApplyExtendValue: onApplyExtendValue, column: column, extendValue: extendValue, onChangeRemoveExtend: onChangeRemoveExtend, onPopover: onPopover, onApply: onApply, openPopover: openPopover, searchValue: searchValue, onSearch: onSearch, loading: loading })), ...restOf }));
 };
 export const SelectMultipleDropdown = props => {
-    var _a, _b, _c;
     const { menu, isShowCheck, onChangeIsShowCheck, onUncheckAll, onScroll, extraContent, treeData, onChange, dataSelect, onChangeOpen, onSelectAll, onApplyExtendValue, extendValue = [], column, onChangeRemoveExtend, onPopover, onApply, openPopover, searchValue, onSearch, loading, } = props;
     const [data, setData] = useState([]);
     const [dataTextArea, setDataArea] = useState('');
@@ -417,96 +391,58 @@ export const SelectMultipleDropdown = props => {
     const onSearchInput = e => {
         onSearch(e.target.value);
     };
-    const content = (React.createElement("div", { style: {
+    const content = (_jsxs("div", { style: {
             width: '300px',
             height: '200',
-        } },
-        React.createElement("div", { style: { marginBottom: '5px' } }, "Extend values"),
-        React.createElement("div", null,
-            React.createElement(TextArea
-            // componentKey={props.componentKey}
-            , { "aria-label": "minimum height", placeholder: "You can extend values by input or paste values, separated by enter", onChange: evt => onChangeText(evt.target.value, evt), onKeyDown: onChangeKey, style: {
-                    width: '98%',
-                    height: '130px',
-                    border: '1px #c8ccd7 solid',
-                    outline: 'none',
-                    resize: 'none',
-                }, value: dataTextArea || '' })),
-        React.createElement("div", { style: {
-                display: 'flex',
-                justifyContent: 'space-around',
-                width: '120px',
-                paddingTop: '15px',
-            } },
-            React.createElement(Button, { onClick: applyExtend, type: "primary" }, "Apply"),
-            React.createElement(Button, { onClick: onCancelExtend, type: "default" }, "Cancel"))));
-    return (React.createElement(StyledDropdown, null,
-        React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
-            React.createElement(WrapperHeader, null,
-                React.createElement(Input, { style: {
-                        width: 290,
-                        margin: '2px 10px 2px 5px',
-                        border: '1px solid rgba(0, 0, 0, 0.42)',
-                        borderRadius: '5px',
-                    }, value: searchValue, onChange: onSearchInput, placeholder: "Search values" }),
-                React.createElement(Icon, { style: {
-                        top: '13px',
-                        left: '270px',
-                        position: 'absolute',
-                    }, type: "icon-ants-search", size: 16 }))),
-        React.createElement(Divider, { style: {
-                border: '0.51px solid rgb(203, 214, 226)',
-                margin: '5px 0px 0px 0px',
-            } }),
-        React.createElement(ContainerCustomize, null,
-            React.createElement(WrapperContentCustomize, null, loading ? (React.createElement("div", { style: {
+        }, children: [_jsx("div", { style: { marginBottom: '5px' }, children: "Extend values" }), _jsx("div", { children: _jsx(TextArea
+                // componentKey={props.componentKey}
+                , { "aria-label": "minimum height", placeholder: "You can extend values by input or paste values, separated by enter", onChange: evt => onChangeText(evt.target.value, evt), onKeyDown: onChangeKey, style: {
+                        width: '98%',
+                        height: '130px',
+                        border: '1px #c8ccd7 solid',
+                        outline: 'none',
+                        resize: 'none',
+                    }, value: dataTextArea || '' }) }), _jsxs("div", { style: {
                     display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    height: 128,
-                } },
-                React.createElement(Text, { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon }, "Loading..."))) : (React.createElement(SuggestionTitle, null,
-                React.createElement(HeaderContent, null,
-                    React.createElement(Text, { style: { fontWeight: 'bold', marginLeft: '10px' } },
-                        column,
-                        React.createElement("span", { style: { fontWeight: 'normal' } }, `(${treeData.length})`)),
-                    React.createElement(Text, { style: {
-                            cursor: 'pointer',
-                            fontWeight: 'bold',
-                            paddingLeft: '10px',
-                            paddingRight: '10px',
-                        }, color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary, onClick: onSelectAll }, "Select All")),
-                React.createElement(TreeContentWrapper, { onScroll: onScroll, data: dataSelect, onChange: onChange, treeData: treeData })))),
-            React.createElement(WrapperSuggestion, null,
-                React.createElement(SuggestionTitle, null,
-                    React.createElement(HeaderContent, null,
-                        React.createElement(Text, { style: { fontWeight: 'bold', marginLeft: '10px' } },
-                            "Selected",
-                            React.createElement("span", { style: { fontWeight: 'normal' } }, `(${dataSelect.length + extendValue.length})`)),
-                        React.createElement(Text, { style: {
-                                cursor: 'pointer',
-                                fontWeight: 'bold',
-                                paddingLeft: '10px',
-                                paddingRight: '10px',
-                            }, color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary, onClick: onUncheckAll }, "Remove All")),
-                    React.createElement(ColumnSuggestion, { onChangeRemoveExtend: onChangeRemoveExtend, extendValue: extendValue, onChange: onChange, data: dataSelect })))),
-        React.createElement(Divider, { style: { border: '0.51px solid rgb(203, 214, 226)', margin: '0px 0px 7px 0px' } }),
-        React.createElement(WrapperFooterContent, null,
-            React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', width: '120px' } },
-                React.createElement(Button, { onClick: onChangeOpen, type: "primary" }, "Apply"),
-                React.createElement(Button, { onClick: onCancel, type: "default" }, "Cancel")),
-            React.createElement(Popover, { getPopupContainer: triggerNode => triggerNode.parentElement, visible: openPopover, 
-                // onVisibleChange={onVisibleChange}
-                overlayClassName: classNames('antsomi-w-[330px]', 'no-arrow', 'title-bg-blue'), placement: "bottomRight", content: content, trigger: ['click'] },
-                React.createElement(Button, { onClick: onPopover, type: "default" },
-                    React.createElement(Icon, { size: 10, type: "icon-ants-flag" }),
-                    "Extend Value"))),
-        extraContent));
+                    justifyContent: 'space-around',
+                    width: '120px',
+                    paddingTop: '15px',
+                }, children: [_jsx(Button, { onClick: applyExtend, type: "primary", children: "Apply" }), _jsx(Button, { onClick: onCancelExtend, type: "default", children: "Cancel" })] })] }));
+    return (_jsxs(StyledDropdown, { children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: _jsxs(WrapperHeader, { children: [_jsx(Input, { style: {
+                                width: 290,
+                                margin: '2px 10px 2px 5px',
+                                border: '1px solid rgba(0, 0, 0, 0.42)',
+                                borderRadius: '5px',
+                            }, value: searchValue, onChange: onSearchInput, placeholder: "Search values" }), _jsx(Icon, { style: {
+                                top: '13px',
+                                left: '270px',
+                                position: 'absolute',
+                            }, type: "icon-ants-search", size: 16 })] }) }), _jsx(Divider, { style: {
+                    border: '0.51px solid rgb(203, 214, 226)',
+                    margin: '5px 0px 0px 0px',
+                } }), _jsxs(ContainerCustomize, { children: [_jsx(WrapperContentCustomize, { children: loading ? (_jsx("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: 128,
+                            }, children: _jsx(Text, { color: THEME.token?.colorIcon, children: "Loading..." }) })) : (_jsxs(SuggestionTitle, { children: [_jsxs(HeaderContent, { children: [_jsxs(Text, { style: { fontWeight: 'bold', marginLeft: '10px' }, children: [column, _jsx("span", { style: { fontWeight: 'normal' }, children: `(${treeData.length})` })] }), _jsx(Text, { style: {
+                                                cursor: 'pointer',
+                                                fontWeight: 'bold',
+                                                paddingLeft: '10px',
+                                                paddingRight: '10px',
+                                            }, color: THEME.token?.colorPrimary, onClick: onSelectAll, children: "Select All" })] }), _jsx(TreeContentWrapper, { onScroll: onScroll, data: dataSelect, onChange: onChange, treeData: treeData })] })) }), _jsx(WrapperSuggestion, { children: _jsxs(SuggestionTitle, { children: [_jsxs(HeaderContent, { children: [_jsxs(Text, { style: { fontWeight: 'bold', marginLeft: '10px' }, children: ["Selected", _jsx("span", { style: { fontWeight: 'normal' }, children: `(${dataSelect.length + extendValue.length})` })] }), _jsx(Text, { style: {
+                                                cursor: 'pointer',
+                                                fontWeight: 'bold',
+                                                paddingLeft: '10px',
+                                                paddingRight: '10px',
+                                            }, color: THEME.token?.colorPrimary, onClick: onUncheckAll, children: "Remove All" })] }), _jsx(ColumnSuggestion, { onChangeRemoveExtend: onChangeRemoveExtend, extendValue: extendValue, onChange: onChange, data: dataSelect })] }) })] }), _jsx(Divider, { style: { border: '0.51px solid rgb(203, 214, 226)', margin: '0px 0px 7px 0px' } }), _jsxs(WrapperFooterContent, { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-around', width: '120px' }, children: [_jsx(Button, { onClick: onChangeOpen, type: "primary", children: "Apply" }), _jsx(Button, { onClick: onCancel, type: "default", children: "Cancel" })] }), _jsx(Popover, { getPopupContainer: triggerNode => triggerNode.parentElement, visible: openPopover, 
+                        // onVisibleChange={onVisibleChange}
+                        overlayClassName: classNames('antsomi-w-[330px]', 'no-arrow', 'title-bg-blue'), placement: "bottomRight", content: content, trigger: ['click'], children: _jsxs(Button, { onClick: onPopover, type: "default", children: [_jsx(Icon, { size: 10, type: "icon-ants-flag" }), "Extend Value"] }) })] }), extraContent] }));
 };
 export const StyledDropdown = styled.div `
   .antsomi-select-tree-list {
     .antsomi-select-tree-title {
-      font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+      font-size: ${THEME.token?.fontSize}px;
     }
     .antsomi-select-tree-treenode {
       margin-right: 8px;

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

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Atoms
 import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
 export const TextTreeSelect = props => {
@@ -9,5 +8,5 @@ export const TextTreeSelect = props => {
         event.stopPropagation();
         onDropdownVisibleChange(open);
     };
-    return (React.createElement(Text, { style: { marginLeft: 8 }, onClick: onClick }, searchValue ? '' : attribute ? label : ''));
+    return (_jsx(Text, { style: { marginLeft: 8 }, onClick: onClick, children: searchValue ? '' : attribute ? label : '' }));
 };