@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { queryClientAntsomiUI, QueryClientProviderAntsomiUI, } from '@antscorp/antsomi-ui/es/queries/configs';
 // Context
 import { SelectAccountProvider } from './context/SelectAccountContext';
@@ -7,10 +6,7 @@ import { SelectAccountProvider } from './context/SelectAccountContext';
 import { Content } from './Content';
 // Provider
 import { AntdTableConfigProvider } from '../../organism/DataTable/providers';
-export const SelectAccount = props => (React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
-    React.createElement(AntdTableConfigProvider, null,
-        React.createElement(SelectAccountProvider, Object.assign({}, props),
-            React.createElement(Content, null)))));
+export const SelectAccount = props => (_jsx(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI, children: _jsx(AntdTableConfigProvider, { children: _jsx(SelectAccountProvider, { ...props, children: _jsx(Content, {}) }) }) }));
 SelectAccount.defaultProps = {
     initData: [],
     limit: 10,

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

@@ -6,19 +6,13 @@ export declare const AccountChipWrapper: import("styled-components").StyledCompo
     disabled?: boolean | undefined;
     isError?: boolean | undefined;
 }, never>;
-export declare const ButtonAddStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
-export declare const ButtonViewAllStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const ButtonAddStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const ButtonViewAllStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const AccountListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AccountListBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AccountListFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AccountListTitleGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AccountListContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CheckboxStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").CheckboxProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
-    Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd/es/checkbox").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
-}, any, {}, never>;
+export declare const CheckboxStyled: import("styled-components").StyledComponent<import("react").FC<import("antd").CheckboxProps>, any, {}, never>;
 export declare const ViewAllWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemOnlyOne: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
-import { Button, Checkbox } from '../../atoms';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Checkbox } from '@antscorp/antsomi-ui/es/components/atoms/Checkbox';
 export const Wrapper = styled.div `
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
   width: 100%;
-  pointer-events: ${props => ((props === null || props === void 0 ? void 0 : props.disabled) ? 'none' : 'initial')};
+  pointer-events: ${props => (props?.disabled ? 'none' : 'initial')};
 `;
 export const AccountChipWrapper = styled.div `
   color: #000000;

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

@@ -4,7 +4,7 @@ export const parseValue = (value, type) => {
             case 'number':
                 return Number(value);
             default:
-                return value === null || value === void 0 ? void 0 : value.toString();
+                return value?.toString();
         }
     }
     catch (error) {

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

@@ -1,25 +1,6 @@
-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;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import get from 'lodash/get';
 // Hooks
@@ -47,7 +28,7 @@ export const SelectEventAttribute = memo(props => {
     // Selectors
     const { triggerEvent } = journeySettings || {};
     const serviceAuth = useSelectServiceAuth();
-    const { url = '' } = serviceAuth, restAuthInfo = __rest(serviceAuth, ["url"]);
+    const { url = '', ...restAuthInfo } = serviceAuth;
     // State
     const [listEvent, setListEvent] = useState([]);
     const [listSourceByEvent, setListSourceByEvent] = useState([]);
@@ -79,7 +60,7 @@ export const SelectEventAttribute = memo(props => {
     // Handle set trigger event when didn't chose event and trigger event is exists
     useDeepCompareEffect(() => {
         const { eventActionId, eventCategoryId, insightPropertyIds = [] } = triggerEvent || {};
-        const draftEventMetadata = Object.assign({}, eventMetadata);
+        const draftEventMetadata = { ...eventMetadata };
         if (!!eventActionId &&
             !!eventCategoryId &&
             listEvent.length &&
@@ -107,9 +88,8 @@ export const SelectEventAttribute = memo(props => {
         }
     }, [eventMetadata.event_action_id, eventMetadata.event_category_id]);
     useEffect(() => {
-        var _a;
         if (typeof eventMetadata.insight_property_id === 'object' &&
-            !((_a = eventMetadata.insight_property_id) === null || _a === void 0 ? void 0 : _a.length)) {
+            !eventMetadata.insight_property_id?.length) {
             return;
         }
         if (!eventMetadata.insight_property_id) {
@@ -125,10 +105,13 @@ export const SelectEventAttribute = memo(props => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [eventMetadata.insight_property_id]);
     // Handlers
-    const getListEvents = () => __awaiter(void 0, void 0, void 0, function* () {
+    const getListEvents = async () => {
         try {
-            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingEvent: true })));
-            const { rows } = yield getListAllEvents({ url }, restAuthInfo);
+            setLoading(loading => ({
+                ...loading,
+                isLoadingEvent: true,
+            }));
+            const { rows } = await getListAllEvents({ url }, restAuthInfo);
             setListEvent(rows);
         }
         catch (error) {
@@ -139,13 +122,19 @@ export const SelectEventAttribute = memo(props => {
             });
         }
         finally {
-            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingEvent: false })));
+            setLoading(loading => ({
+                ...loading,
+                isLoadingEvent: false,
+            }));
         }
-    });
-    const getListSources = (_a) => __awaiter(void 0, [_a], void 0, function* ({ event_action_id, event_category_id }) {
+    };
+    const getListSources = async ({ event_action_id, event_category_id }) => {
         try {
-            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingSource: true })));
-            const { rows } = yield getListSourceByEvent({
+            setLoading(loading => ({
+                ...loading,
+                isLoadingSource: true,
+            }));
+            const { rows } = await getListSourceByEvent({
                 url,
                 eventActionId: event_action_id,
                 eventCategoryId: event_category_id,
@@ -160,29 +149,41 @@ export const SelectEventAttribute = memo(props => {
             });
         }
         finally {
-            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingSource: false })));
+            setLoading(loading => ({
+                ...loading,
+                isLoadingSource: false,
+            }));
         }
-    });
-    const getListAttributes = (_b) => __awaiter(void 0, [_b], void 0, function* ({ insight_property_id, event_action_id, event_category_id }) {
+    };
+    const getListAttributes = async ({ insight_property_id, event_action_id, event_category_id }) => {
         try {
-            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingAttrs: true })));
-            const { rows } = yield getListAttributesEvent(serviceAuth, {
+            setLoading(loading => ({
+                ...loading,
+                isLoadingAttrs: true,
+            }));
+            const { rows } = await getListAttributesEvent(serviceAuth, {
                 sourceId: insight_property_id,
                 eventActionId: event_action_id,
                 eventCategoryId: event_category_id,
             });
             setEventAttrs(rows);
-            const treeAttrs = rows.map((attr) => (Object.assign({ value: get(attr, 'items.length', 0)
+            const treeAttrs = rows.map((attr) => ({
+                value: get(attr, 'items.length', 0)
                     ? `sub-${attr.eventPropertyName}`
-                    : attr.eventPropertyName, title: attr.eventPropertyDisplay, isLeaf: attr.items ? get(attr, 'items.length', 0) === 0 : true, selectable: attr.items ? get(attr, 'items.length', 0) === 0 : true }, (attr.items &&
-                get(attr, 'items.length', 0) && {
-                children: attr.items.map((childAttr) => ({
-                    value: `${childAttr.itemTypeId}.${childAttr.itemPropertyName}`,
-                    title: childAttr.translateLabel,
-                    status: childAttr.status,
-                    isLeaf: true,
-                })),
-            }))));
+                    : attr.eventPropertyName,
+                title: attr.eventPropertyDisplay,
+                isLeaf: attr.items ? get(attr, 'items.length', 0) === 0 : true,
+                selectable: attr.items ? get(attr, 'items.length', 0) === 0 : true,
+                ...(attr.items &&
+                    get(attr, 'items.length', 0) && {
+                    children: attr.items.map((childAttr) => ({
+                        value: `${childAttr.itemTypeId}.${childAttr.itemPropertyName}`,
+                        title: childAttr.translateLabel,
+                        status: childAttr.status,
+                        isLeaf: true,
+                    })),
+                }),
+            }));
             setTreeEventAttrs(treeAttrs);
         }
         catch (error) {
@@ -193,15 +194,28 @@ export const SelectEventAttribute = memo(props => {
             });
         }
         finally {
-            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingAttrs: false })));
+            setLoading(loading => ({
+                ...loading,
+                isLoadingAttrs: false,
+            }));
         }
-    });
+    };
     const onChangeEvent = (value) => {
         try {
             const eventSelected = listEvent.find(event => event.value === value);
-            onChange(Object.assign(Object.assign({}, eventMetadata), { event_action_id: eventSelected.eventActionId, event_category_id: eventSelected.eventCategoryId, event_tracking_name: eventSelected.eventTrackingName, 
+            onChange({
+                ...eventMetadata,
+                event_action_id: eventSelected.eventActionId,
+                event_category_id: eventSelected.eventCategoryId,
+                event_tracking_name: eventSelected.eventTrackingName,
                 // resets
-                insight_property_id: null, item_type_id: null, item_type_name: null, item_property_name: null, item_property_label: null, event_property_syntax: null }));
+                insight_property_id: null,
+                item_type_id: null,
+                item_type_name: null,
+                item_property_name: null,
+                item_property_label: null,
+                event_property_syntax: null,
+            });
             setEventAttrs([]);
             setTreeEventAttrs([]);
         }
@@ -220,9 +234,16 @@ export const SelectEventAttribute = memo(props => {
                 setTreeEventAttrs([]);
                 setEventAttrs([]);
             }
-            onChange(Object.assign(Object.assign({}, eventMetadata), { insight_property_id: sourcesSelected.map(source => source.insightPropertyId), 
+            onChange({
+                ...eventMetadata,
+                insight_property_id: 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 }));
+                item_type_id: null,
+                item_type_name: null,
+                item_property_name: null,
+                item_property_label: null,
+                event_property_syntax: null,
+            });
         }
         catch (error) {
             handleError(error, {
@@ -238,14 +259,28 @@ export const SelectEventAttribute = memo(props => {
             if (!item) {
                 const selected = eventAttrs.find(attr => attr.value === attribute);
                 if (selected) {
-                    onChange(Object.assign(Object.assign({}, eventMetadata), { item_type_id: null, item_type_name: null, item_property_name: selected.eventPropertyName, item_property_label: selected.label, event_property_syntax: selected.eventPropertySyntax }));
+                    onChange({
+                        ...eventMetadata,
+                        item_type_id: null,
+                        item_type_name: null,
+                        item_property_name: selected.eventPropertyName,
+                        item_property_label: selected.label,
+                        event_property_syntax: selected.eventPropertySyntax,
+                    });
                 }
             }
             else {
                 const selectedAttribute = eventAttrs.find(attr => +attr.itemTypeId === +attribute);
                 const selected = selectedAttribute.items.find((attr) => attr.itemPropertyName === item);
                 if (selected) {
-                    onChange(Object.assign(Object.assign({}, eventMetadata), { 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 }));
+                    onChange({
+                        ...eventMetadata,
+                        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,
+                    });
                 }
             }
         }
@@ -257,11 +292,11 @@ export const SelectEventAttribute = memo(props => {
             });
         }
     };
-    return (React.createElement(SelectEventAttributeWrapper, { style: styleWrapper },
-        React.createElement(Select, { showSearch: true, required: true, focused: isShowErrorAlert, value: eventMetadata.event_tracking_name || undefined, loading: loading.isLoadingEvent, placeholder: t(translations.selectEvent.title).toString(), options: listEvent.map(({ value, label }) => ({ value, label })), onChange: onChangeEvent }),
-        React.createElement(StyledSelect, { showSearch: true, required: true, focused: isShowErrorAlert, value: eventMetadata.insight_property_id || undefined, mode: "multiple", allowClear: true, maxTagTextLength: 18, loading: loading.isLoadingSource, placeholder: t(translations.inAnySourceOf.title).toString(), options: listSourceByEvent.map(({ value, label }) => ({ value, label })), onChange: onChangeSource }),
-        React.createElement(TreeSelect, { showSearch: true, 
-            // required
-            // focused={isShowErrorAlert}
-            value: memoizedEventAttributeValue || undefined, placeholder: t(translations.selectEventAttribute.title).toString(), treeData: treeEventAttrs.map(attr => (Object.assign(Object.assign({}, attr), { children: buildOptionAttrArchive(attr.children || [], memoizedEventAttributeValue) }))), loading: loading.isLoadingAttrs, onChange: onChangeEventAttribute, status: errorMessage ? 'error' : '' })));
+    return (_jsxs(SelectEventAttributeWrapper, { style: styleWrapper, children: [_jsx(Select, { showSearch: true, required: true, focused: isShowErrorAlert, value: eventMetadata.event_tracking_name || undefined, loading: loading.isLoadingEvent, placeholder: t(translations.selectEvent.title).toString(), options: listEvent.map(({ value, label }) => ({ value, label })), onChange: onChangeEvent }), _jsx(StyledSelect, { showSearch: true, required: true, focused: isShowErrorAlert, value: eventMetadata.insight_property_id || undefined, mode: "multiple", allowClear: true, maxTagTextLength: 18, loading: loading.isLoadingSource, placeholder: t(translations.inAnySourceOf.title).toString(), options: listSourceByEvent.map(({ value, label }) => ({ value, label })), onChange: onChangeSource }), _jsx(TreeSelect, { showSearch: true, 
+                // required
+                // focused={isShowErrorAlert}
+                value: memoizedEventAttributeValue || undefined, placeholder: t(translations.selectEventAttribute.title).toString(), treeData: treeEventAttrs.map(attr => ({
+                    ...attr,
+                    children: buildOptionAttrArchive(attr.children || [], memoizedEventAttributeValue),
+                })), loading: loading.isLoadingAttrs, onChange: onChangeEventAttribute, status: errorMessage ? 'error' : '' })] }));
 });

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

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 export declare const SelectEventAttributeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSelect: import("styled-components").StyledComponent<{
-    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react").JSX.Element;
+    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
-        suffixIcon: import("react").JSX.Element;
+        suffixIcon: import("react/jsx-runtime").JSX.Element;
         filterOption: (input: any, option: any) => boolean;
-        tagRender: (props: any) => import("react").JSX.Element;
+        tagRender: (props: any) => import("react/jsx-runtime").JSX.Element;
         containerStyle: {};
         labelStyle: {};
-        clearIcon: import("react").JSX.Element;
+        clearIcon: import("react/jsx-runtime").JSX.Element;
     };
 }, any, {}, never>;

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

@@ -1,16 +1,4 @@
-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;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Antd components
 import { Select as AntdSelect } from 'antd';
 // Atoms
@@ -18,33 +6,28 @@ import { Text, Checkbox, Icon } from '../../atoms';
 // Styled
 import { StyledSelect, SelectWrapper as SelectMultiWrapper } from './styled';
 export const SelectMulti = props => {
-    const { label, children } = props, restOf = __rest(props, ["label", "children"]);
-    return (React.createElement(SelectMultiWrapper, null,
-        label && (React.createElement(Text, { style: { marginBottom: 5 }, color: "#666666" }, label)),
-        React.createElement(StyledSelect, Object.assign({}, restOf), children),
-        React.createElement(Icon, { type: "icon-antsomi-expand-more", className: "icon-arrow-down" })));
+    const { label, children, ...restOf } = props;
+    return (_jsxs(SelectMultiWrapper, { children: [label && (_jsx(Text, { style: { marginBottom: 5 }, color: "#666666", children: label })), _jsx(StyledSelect, { ...restOf, children: children }), _jsx(Icon, { type: "icon-antsomi-expand-more", className: "icon-arrow-down" })] }));
 };
 export const SelectMultiOption = AntdSelect.Option;
 export const SelectMultOptGroup = AntdSelect.OptGroup;
 export const SelectOptionLabel = props => {
     const { title, label, checked, onClick, disabled } = props;
-    return (React.createElement("div", { style: {
+    return (_jsxs("div", { style: {
             display: 'flex',
             alignItems: 'center',
             pointerEvents: disabled ? 'none' : 'auto',
             opacity: disabled ? 0.5 : 1,
-        }, onClick: onClick },
-        React.createElement(Checkbox, { checked: checked }),
-        React.createElement(Text, { style: {
-                marginLeft: 8,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-            }, title: title || label }, label)));
+        }, onClick: onClick, children: [_jsx(Checkbox, { checked: checked }), _jsx(Text, { style: {
+                    marginLeft: 8,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, title: title || label, children: label })] }));
 };
 SelectMulti.defaultProps = {
     mode: 'multiple',
-    suffixIcon: React.createElement(Icon, { type: "icon-antsomi-expand-more" }),
+    suffixIcon: _jsx(Icon, { type: "icon-antsomi-expand-more" }),
     value: [],
     onChange: () => { },
 };

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
 // Libraries
 import styled from 'styled-components';
 // Antd components
@@ -17,31 +16,31 @@ export const SelectWrapper = styled.div `
   }
 `;
 export const StyledSelect = styled(AntdSelect) `
-  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+  font-family: ${THEME.token?.fontFamily};
 
   .antsomi-select-arrow {
     display: flex;
     align-items: center;
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase} !important;
+    color: ${THEME.token?.colorTextBase} !important;
   }
 
   .antsomi-select-selector {
     justify-content: space-between;
     height: 30px;
     padding: 0 5px;
-    font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSize}px;
+    font-size: ${THEME.token?.fontSize}px;
     font-weight: normal;
 
     transition: all 0.3s ease;
-    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorTextBase};
+    color: ${THEME.token?.colorTextBase};
 
     &:hover {
-      background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue0};
+      background-color: ${THEME.token?.blue0};
     }
 
     border-radius: 0px !important;
     border-style: none !important;
-    --tw-shadow: 0 1px 0 0 ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue1} !important;
+    --tw-shadow: 0 1px 0 0 ${THEME.token?.blue1} !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
       var(--tw-shadow) !important;
 
@@ -50,22 +49,22 @@ export const StyledSelect = styled(AntdSelect) `
 
     &:active,
     &:focus {
-      background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue0};
+      background-color: ${THEME.token?.blue0};
       --tw-shadow: 0 1px 0 0 #194e8d !important;
       box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
         var(--tw-shadow) !important;
     }
 
     &:disabled {
-      background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.accent};
-      color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.accent5};
-      box-shadow: 0 1px 0 0 ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.accent1};
+      background-color: ${THEME.token?.accent};
+      color: ${THEME.token?.accent5};
+      box-shadow: 0 1px 0 0 ${THEME.token?.accent1};
     }
   }
 
   &.antsomi-select-disabled {
     .antsomi-select-arrow {
-      color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent5} !important;
+      color: ${THEME.token?.accent5} !important;
     }
   }
 `;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import type { CustomTagProps } from 'rc-select/lib/BaseSelect';
 import { CSSProperties } from 'styled-components';
 import { SelectProps as AntdSelectProps } from 'antd';
@@ -20,15 +20,15 @@ type TTagRender = CustomTagProps & {
     style?: CSSProperties;
 };
 export declare const SelectV2: {
-    (props: SelectProps): React.JSX.Element;
+    (props: SelectProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
-        suffixIcon: React.JSX.Element;
+        suffixIcon: import("react/jsx-runtime").JSX.Element;
         filterOption: (input: any, option: any) => boolean;
-        tagRender: (props: any) => React.JSX.Element;
+        tagRender: (props: any) => import("react/jsx-runtime").JSX.Element;
         containerStyle: {};
         labelStyle: {};
-        clearIcon: React.JSX.Element;
+        clearIcon: import("react/jsx-runtime").JSX.Element;
     };
 };
-export declare const tagRender: (props: TTagRender) => React.JSX.Element;
+export declare const tagRender: (props: TTagRender) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,6 @@
-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;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 // Atoms
 import { RequiredLabel, Spin, Text, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
@@ -21,7 +11,7 @@ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const SelectV2 = (props) => {
-    const { label, children, errorMsg, labelClassname, showCount, maxLength, description, errorArchive, required, focused, containerStyle, labelStyle, isReverseMask } = props, restOf = __rest(props, ["label", "children", "errorMsg", "labelClassname", "showCount", "maxLength", "description", "errorArchive", "required", "focused", "containerStyle", "labelStyle", "isReverseMask"]);
+    const { label, children, errorMsg, labelClassname, showCount, maxLength, description, errorArchive, required, focused, containerStyle, labelStyle, isReverseMask, ...restOf } = props;
     // I18n
     const { t } = i18nInstance;
     const [isFocused, setFocused] = useState(false);
@@ -39,62 +29,49 @@ export const SelectV2 = (props) => {
         }
     }, [focused]);
     const renderRequiredLabel = (label) => {
-        var _a, _b;
         if (required) {
-            return (React.createElement(RequiredLabel, { style: Object.assign({ marginBottom: 5 }, (labelStyle || {})), color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon, isReverseMask: isReverseMask }, label));
+            return (_jsx(RequiredLabel, { style: { marginBottom: 5, ...(labelStyle || {}) }, color: THEME.token?.colorIcon, isReverseMask: isReverseMask, children: label }));
         }
-        return (React.createElement(Text, { style: Object.assign({ marginBottom: 5 }, (labelStyle || {})), color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon }, label));
+        return (_jsx(Text, { style: { marginBottom: 5, ...(labelStyle || {}) }, color: THEME.token?.colorIcon, children: label }));
     };
-    return (React.createElement(SelectWrapper, { style: containerStyle || {} },
-        label && renderRequiredLabel(label),
-        restOf.loading && (React.createElement("div", { style: {
-                position: 'absolute',
-                inset: '0px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: 'white',
-                opacity: '0.9',
-                zIndex: 20,
-            } },
-            React.createElement(Spin, { spinning: true, indicatorSize: 22 }))),
-        React.createElement("div", { style: { width: '100%' } },
-            React.createElement(StyledSelect, Object.assign({}, restOf, { style: Object.assign({ width: '100%' }, (restOf.style || {})), onBlur: e => {
-                    if (!isFocused) {
-                        setFocused(true);
-                    }
-                    props.onBlur && props.onBlur(e);
-                } }), children),
-            (!!showCount || !!description) && (React.createElement("div", { style: {
+    return (_jsxs(SelectWrapper, { style: containerStyle || {}, children: [label && renderRequiredLabel(label), restOf.loading && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: '0px',
                     display: 'flex',
                     alignItems: 'center',
-                    justifyContent: 'space-between',
-                    marginTop: 6,
-                } },
-                React.createElement(Text, null, description),
-                showCount && (React.createElement(Text, null, `${Array.isArray(restOf.value) ? restOf.value.length : 1}/${maxLength || '1'}`)))),
-            (restOf.status === 'error' && errorMsg) || errorArchive || requiredMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorArchive || errorMsg || requiredMsg)) : null)));
+                    justifyContent: 'center',
+                    background: 'white',
+                    opacity: '0.9',
+                    zIndex: 20,
+                }, children: _jsx(Spin, { spinning: true, indicatorSize: 22 }) })), _jsxs("div", { style: { width: '100%' }, children: [_jsx(StyledSelect, { ...restOf, style: { width: '100%', ...(restOf.style || {}) }, onBlur: e => {
+                            if (!isFocused) {
+                                setFocused(true);
+                            }
+                            props.onBlur && props.onBlur(e);
+                        }, children: children }), (!!showCount || !!description) && (_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            marginTop: 6,
+                        }, children: [_jsx(Text, { children: description }), showCount && (_jsx(Text, { children: `${Array.isArray(restOf.value) ? restOf.value.length : 1}/${maxLength || '1'}` }))] })), (restOf.status === 'error' && errorMsg) || errorArchive || requiredMsg ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorArchive || errorMsg || requiredMsg })) : null] })] }));
 };
 // Custom tag render
 export const tagRender = (props) => {
-    var _a;
     const { label, style, closable, onClose } = props;
     const onPreventMouseDown = (event) => {
         event.preventDefault();
         event.stopPropagation();
     };
-    return (React.createElement(StyledTag, { style: style, onMouseDown: onPreventMouseDown, closable: closable, onClose: onClose, closeIcon: React.createElement(CloseButton, { borderColor: style === null || style === void 0 ? void 0 : style.background },
-            React.createElement(Icon, { type: "icon-ants-remove", color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary, size: 10 })) }, label));
+    return (_jsx(StyledTag, { style: style, onMouseDown: onPreventMouseDown, closable: closable, onClose: onClose, closeIcon: _jsx(CloseButton, { borderColor: style?.background, children: _jsx(Icon, { type: "icon-ants-remove", color: THEME.token?.colorPrimary, size: 10 }) }), children: label }));
 };
 SelectV2.defaultProps = {
-    suffixIcon: React.createElement(Icon, { type: "icon-ants-expand-more" }),
+    suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more" }),
     filterOption: (input, option) => {
-        var _a;
-        const value = ((_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+        const value = option?.label?.toString() || '';
         return value.toLowerCase().trim().indexOf(input.toLowerCase().trim()) >= 0;
     },
     tagRender: (props) => tagRender(props),
     containerStyle: {},
     labelStyle: {},
-    clearIcon: React.createElement(Icon, { type: "icon-ants-remove-circle", size: 16 }),
+    clearIcon: _jsx(Icon, { type: "icon-ants-remove-circle", size: 16 }),
 };