@antscorp/antsomi-ui 1.3.5-beta.62 → 1.3.5-beta.621

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

@@ -0,0 +1,267 @@
+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;
+};
+// Libraries
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import get from 'lodash/get';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+// Molecules
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { TreeSelect } from '../TreeSelect';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Selectors
+import { useSelectServiceAuth } from '../../organism/ContentSources/provider';
+// Styled
+import { SelectEventAttributeWrapper, StyledSelect } from './styled';
+// Utils
+import { handleError, flattenTree } from '../../../utils';
+import { buildOptionAttrArchive, checkStatusAttr } from '../AddDynamicContent/utils';
+// Services
+import { getListAllEvents, getListAttributesEvent, getListSourceByEvent, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/BusinessObject';
+const PATH = 'src/components/molecules/SelectEventAttribute/index.tsx';
+export const SelectEventAttribute = memo(props => {
+    // I18n
+    const { t } = i18nInstance;
+    // Props
+    const { styleWrapper = {}, eventMetadata, journeySettings, isShowErrorAlert, onChange } = props;
+    // Selectors
+    const { triggerEvent } = journeySettings || {};
+    const serviceAuth = useSelectServiceAuth();
+    const { url = '' } = serviceAuth, restAuthInfo = __rest(serviceAuth, ["url"]);
+    // State
+    const [listEvent, setListEvent] = useState([]);
+    const [listSourceByEvent, setListSourceByEvent] = useState([]);
+    const [treeEventAttrs, setTreeEventAttrs] = useState([]);
+    const [loading, setLoading] = useState({
+        isLoadingEvent: false,
+        isLoadingSource: false,
+        isLoadingAttrs: false,
+    });
+    const [eventAttrs, setEventAttrs] = useState([]);
+    const flatEventAttrs = useMemo(() => flattenTree(eventAttrs, 'items'), [eventAttrs]);
+    const memoizedEventAttributeValue = useMemo(() => {
+        const attributeValue = eventMetadata.item_type_id
+            ? `${eventMetadata.item_type_id}.${eventMetadata.item_property_name}`
+            : eventMetadata.item_property_name || undefined;
+        return attributeValue;
+    }, [eventMetadata.item_property_name, eventMetadata.item_type_id]);
+    const { errorMessage } = checkStatusAttr({
+        listAttribute: flatEventAttrs.map(({ itemPropertyName, eventPropertyName, status }) => ({
+            value: eventPropertyName || itemPropertyName,
+            status,
+        })) || [],
+        field: eventMetadata.item_property_name || undefined,
+    });
+    // Use Effect
+    useEffect(() => {
+        getListEvents();
+    }, []);
+    // 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);
+        if (!!eventActionId &&
+            !!eventCategoryId &&
+            listEvent.length &&
+            !eventMetadata.event_action_id) {
+            const defaultEvent = listEvent.find(event => +event.eventActionId === +eventActionId && +event.eventCategoryId === +eventCategoryId);
+            if (defaultEvent) {
+                draftEventMetadata.event_action_id = defaultEvent.eventActionId;
+                draftEventMetadata.event_category_id = defaultEvent.eventCategoryId;
+                draftEventMetadata.event_tracking_name = defaultEvent.eventTrackingName;
+            }
+            if (get(insightPropertyIds, 'length', 0) &&
+                !get(eventMetadata, 'insight_property_id.length', 0)) {
+                draftEventMetadata.insight_property_id = insightPropertyIds;
+            }
+            onChange(draftEventMetadata, true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [triggerEvent, listEvent, eventMetadata]);
+    useEffect(() => {
+        if (eventMetadata.event_action_id && eventMetadata.event_category_id) {
+            getListSources({
+                event_action_id: eventMetadata.event_action_id,
+                event_category_id: eventMetadata.event_category_id,
+            });
+        }
+    }, [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)) {
+            return;
+        }
+        if (!eventMetadata.insight_property_id) {
+            return;
+        }
+        getListAttributes({
+            insight_property_id: Array.isArray(eventMetadata.insight_property_id)
+                ? eventMetadata.insight_property_id.join(',')
+                : eventMetadata.insight_property_id,
+            event_action_id: eventMetadata.event_action_id,
+            event_category_id: eventMetadata.event_category_id,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventMetadata.insight_property_id]);
+    // Handlers
+    const getListEvents = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingEvent: true })));
+            const { rows } = yield getListAllEvents({ url }, restAuthInfo);
+            setListEvent(rows);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'getListEvents',
+                args: {},
+            });
+        }
+        finally {
+            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingEvent: false })));
+        }
+    });
+    const getListSources = (_a) => __awaiter(void 0, [_a], void 0, function* ({ event_action_id, event_category_id }) {
+        try {
+            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingSource: true })));
+            const { rows } = yield getListSourceByEvent({
+                url,
+                eventActionId: event_action_id,
+                eventCategoryId: event_category_id,
+            }, restAuthInfo);
+            setListSourceByEvent(rows);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'getListSources',
+                args: { event_action_id, event_category_id },
+            });
+        }
+        finally {
+            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingSource: false })));
+        }
+    });
+    const getListAttributes = (_b) => __awaiter(void 0, [_b], void 0, function* ({ insight_property_id, event_action_id, event_category_id }) {
+        try {
+            setLoading(loading => (Object.assign(Object.assign({}, loading), { isLoadingAttrs: true })));
+            const { rows } = yield 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)
+                    ? `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,
+                })),
+            }))));
+            setTreeEventAttrs(treeAttrs);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'getListAttributes',
+                args: { insight_property_id, event_action_id, event_category_id },
+            });
+        }
+        finally {
+            setLoading(loading => (Object.assign(Object.assign({}, 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, 
+                // 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 }));
+            setEventAttrs([]);
+            setTreeEventAttrs([]);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeEvent',
+                args: { value },
+            });
+        }
+    };
+    const onChangeSource = (values = []) => {
+        try {
+            const sourcesSelected = listSourceByEvent.filter(source => values.includes(source.value));
+            if (values.length === 0) {
+                setTreeEventAttrs([]);
+                setEventAttrs([]);
+            }
+            onChange(Object.assign(Object.assign({}, 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 }));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeSource',
+                args: { values },
+            });
+        }
+    };
+    const onChangeEventAttribute = (value) => {
+        try {
+            const [attribute, item] = value.split('.');
+            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 }));
+                }
+            }
+            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 }));
+                }
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeEventAttribute',
+                args: {},
+            });
+        }
+    };
+    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' : '' })));
+});

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

@@ -0,0 +1,13 @@
+/// <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;
+    defaultProps: {
+        suffixIcon: import("react").JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => import("react").JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: import("react").JSX.Element;
+    };
+}, any, {}, never>;

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

@@ -0,0 +1,13 @@
+// Libraries
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import styled from 'styled-components';
+export const SelectEventAttributeWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+`;
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selector {
+    height: auto;
+  }
+`;

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

@@ -0,0 +1,17 @@
+import React, { MouseEventHandler } from 'react';
+import { SelectProps as AntdSelectProps } from 'antd/lib/select';
+interface SelectMultiProps extends AntdSelectProps {
+    label?: string;
+}
+export declare const SelectMulti: React.FC<SelectMultiProps>;
+export declare const SelectMultiOption: import("rc-select/lib/Option").OptionFC;
+export declare const SelectMultOptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
+interface SelectOptionLabelProps {
+    title?: string;
+    label: string;
+    checked: boolean;
+    onClick: MouseEventHandler<HTMLDivElement>;
+    disabled?: boolean;
+}
+export declare const SelectOptionLabel: React.FC<SelectOptionLabelProps>;
+export {};

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

@@ -0,0 +1,50 @@
+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';
+// Antd components
+import { Select as AntdSelect } from 'antd';
+// Atoms
+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" })));
+};
+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: {
+            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)));
+};
+SelectMulti.defaultProps = {
+    mode: 'multiple',
+    suffixIcon: React.createElement(Icon, { type: "icon-antsomi-expand-more" }),
+    value: [],
+    onChange: () => { },
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    Option: import("rc-select/lib/Option").OptionFC;
+    OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+}, any, {}, never>;

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

@@ -0,0 +1,71 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+// Libraries
+import styled from 'styled-components';
+// Antd components
+import { Select as AntdSelect } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const SelectWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .icon-arrow-down {
+    position: absolute;
+    bottom: 4px;
+    right: 8px;
+  }
+`;
+export const StyledSelect = styled(AntdSelect) `
+  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+
+  .antsomi-select-arrow {
+    display: flex;
+    align-items: center;
+    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.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-weight: normal;
+
+    transition: all 0.3s ease;
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorTextBase};
+
+    &:hover {
+      background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.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;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow) !important;
+
+    cursor: pointer !important;
+    caret-color: transparent;
+
+    &:active,
+    &:focus {
+      background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.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};
+    }
+  }
+
+  &.antsomi-select-disabled {
+    .antsomi-select-arrow {
+      color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent5} !important;
+    }
+  }
+`;

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

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import type { CustomTagProps } from 'rc-select/lib/BaseSelect';
+import { CSSProperties } from 'styled-components';
+import { SelectProps as AntdSelectProps } from 'antd';
+export interface SelectProps extends AntdSelectProps {
+    label?: ReactNode;
+    labelClassname?: string;
+    description?: string;
+    showCount?: boolean;
+    maxLength?: number;
+    errorMsg?: string;
+    errorArchive?: string;
+    containerStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    isReverseMask?: boolean;
+    required?: boolean;
+    focused?: boolean;
+}
+type TTagRender = CustomTagProps & {
+    style?: CSSProperties;
+};
+export declare const SelectV2: {
+    (props: SelectProps): React.JSX.Element;
+    defaultProps: {
+        suffixIcon: React.JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => React.JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: React.JSX.Element;
+    };
+};
+export declare const tagRender: (props: TTagRender) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,100 @@
+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, { useEffect, useMemo, useState } from 'react';
+// Atoms
+import { RequiredLabel, Spin, Text, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { StyledSelect, SelectWrapper, StyledTag, CloseButton } from './styled';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+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"]);
+    // I18n
+    const { t } = i18nInstance;
+    const [isFocused, setFocused] = useState(false);
+    const requiredMsg = useMemo(() => {
+        let msg = '';
+        const isEmptyValue = !props.value || (Array.isArray(props.value) && !props.value.length);
+        if (required && isEmptyValue && isFocused) {
+            msg = t(translations.messageError.fieldIsRequired.message);
+        }
+        return msg;
+    }, [props.value, required, isFocused, t]);
+    useEffect(() => {
+        if (focused) {
+            setFocused(focused);
+        }
+    }, [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 (React.createElement(Text, { style: Object.assign({ marginBottom: 5 }, (labelStyle || {})), color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon }, 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: {
+                    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)));
+};
+// 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));
+};
+SelectV2.defaultProps = {
+    suffixIcon: React.createElement(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()) || '';
+        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 }),
+};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    Option: import("rc-select/lib/Option").OptionFC;
+    OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+}, any, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"div", any, {
+    borderColor?: any;
+}, never>;