@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    disabled: boolean;
+}, never>;
+export declare const AccountChipWrapper: import("styled-components").StyledComponent<"div", any, {
+    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 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 ViewAllWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,165 @@
+import styled from 'styled-components';
+import { Button, Checkbox } from '../../atoms';
+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')};
+`;
+export const AccountChipWrapper = styled.div `
+  color: #000000;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+
+  position: relative;
+  padding: 5px 10px;
+  background-color: ${({ disabled, isError }) => disabled ? '#E5E5E5' : isError ? '#fecaca' : '#CAE5FE'};
+  border-radius: 999px;
+
+  .name {
+    margin: 0px;
+    padding: 0px;
+
+    line-height: 14px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .icon-remove {
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 4px;
+    right: 4px;
+
+    font-size: 10px;
+    color: #005eb8;
+
+    border-radius: 100%;
+    background-color: #ffffff;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  &:hover .icon-remove {
+    display: flex;
+  }
+`;
+export const ButtonAddStyled = styled(Button) `
+  border: 1px solid #005eb8 !important;
+  border-radius: 999px !important;
+  background-color: transparent;
+  padding: 4px 5px !important;
+  height: 24px !important;
+
+  display: flex;
+  color: #005eb8;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 700;
+
+  .icon {
+    font-size: 10px;
+    padding: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .name {
+    padding: 0 5px 0 0;
+  }
+`;
+export const ButtonViewAllStyled = styled(Button) `
+  height: 24px !important;
+
+  display: flex;
+  color: #005eb8;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 700;
+`;
+// ----- AccountList -----
+export const AccountListWrapper = styled.div `
+  border-radius: 2px;
+  width: 300px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+  transition: 0.3s;
+`;
+export const AccountListBody = styled.div `
+  padding: 15px;
+`;
+export const AccountListFooter = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+
+  border-top: 1px solid #e5e5e5;
+  padding: 15px;
+`;
+export const AccountListTitleGroup = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 700;
+  cursor: pointer;
+`;
+export const AccountListContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  max-height: 160px;
+  overflow: auto;
+
+  & label:hover {
+    background-color: #f2f9ff;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    display: initial !important;
+    -ms-overflow-style: initial; /* IE and Edge */
+    scrollbar-width: initial; /* Firefox */
+  }
+
+  ::-webkit-scrollbar {
+    border-radius: 15px !important;
+    width: 4px !important;
+    height: 4px !important;
+    background-color: transparent !important;
+  }
+  ::-webkit-scrollbar-track {
+    border-radius: 15px !important;
+    background-color: transparent !important;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    display: none !important;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    border-radius: 15px !important;
+    background-color: #babac0 !important;
+  }
+`;
+export const CheckboxStyled = styled(Checkbox) `
+  padding: 5px !important;
+  border-radius: 10px !important;
+`;
+export const ViewAllWrapper = styled.div `
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  max-width: 300px;
+  padding: 15px;
+`;

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

@@ -0,0 +1,98 @@
+import React from 'react';
+type AccountProps = {
+    type: 'default';
+};
+type GroupAccountProps = {
+    type: 'group';
+    listAccountGroup: any[];
+    groupNameKey: string;
+    groupIdKey: string;
+};
+export type SelectAccountWithUsers = {
+    users?: Record<any, string>[];
+};
+export type SelectAccountWithApi = {
+    dataAccountsKey?: string;
+    paramsAccounts?: {};
+    serviceAccounts?: ({ params, search }: {
+        params: any;
+        search: any;
+    }) => Promise<any>;
+};
+export type SelectAccountProps = {
+    showOwnerDefault?: boolean;
+    initData?: Array<string | number>;
+    searchType?: 'client' | 'server';
+    isViewMode?: boolean;
+    onlyOne?: boolean;
+    disabled?: boolean;
+    disabledAccount?: any[];
+    limitShow?: number;
+    className?: string;
+    styles?: {
+        wrapper?: React.CSSProperties;
+        accountChip?: React.CSSProperties;
+        btnAdd?: React.CSSProperties;
+        btnViewAll?: React.CSSProperties;
+    };
+    nameKey: string;
+    userIdKey: string;
+    onChange?: (idSelected: Array<string | number>, users: Record<string, any>) => void;
+} & (SelectAccountWithUsers | SelectAccountWithApi) & (AccountProps | GroupAccountProps);
+export type TState = SelectAccountProps & {
+    isInitDone: boolean;
+    searchText: string;
+    openAccountList: boolean;
+    limitShow: number;
+    dataAccountsKey?: string;
+    onlyOne: boolean;
+    users: any[];
+    usersDisplay: any[];
+    listAccountGroupDisplay: any[];
+    usersSelected: (string | number)[];
+    paramsFetchUsers: {};
+    paramsAccounts?: {};
+    serviceAccounts?: Function;
+};
+export type TAction = {
+    type: 'INIT';
+} | {
+    type: 'APPLY';
+    payload: {
+        formRef: React.RefObject<HTMLFormElement>;
+    };
+} | {
+    type: 'UPDATE';
+    payload: SelectAccountProps;
+} | {
+    type: 'OPEN_ACCOUNT_LIST';
+} | {
+    type: 'CLOSE_ACCOUNT_LIST';
+} | {
+    type: 'UPDATE_USERS';
+    payload: any[];
+} | {
+    type: 'UPDATE_USERS_DISPLAY';
+    payload: any[];
+} | {
+    type: 'UPDATE_USERS_SELECTED';
+    payload: any[];
+} | {
+    type: 'UPDATE_SEARCH_TEXT';
+    payload: string;
+} | {
+    type: 'UPDATE_USERS';
+    payload: any[];
+} | {
+    type: 'REMOVE_USER';
+    payload: {
+        userId: string | number;
+        index: number;
+    };
+};
+export type TContext = {
+    formListRef: React.RefObject<HTMLFormElement>;
+    state: TState;
+    dispatch: React.Dispatch<TAction>;
+};
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const parseValue: (value: any, type: string) => any;

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

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

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

@@ -0,0 +1,22 @@
+import React, { CSSProperties } from 'react';
+export type EventMetadata = {
+    insight_property_id: any | any[] | null;
+    insight_property_ids?: string[] | null;
+    event_action_id: string | null;
+    event_category_id: string | null;
+    event_tracking_name: string | null;
+    item_type_id: string | null;
+    item_type_name: string | null;
+    item_property_name: string | null;
+    item_property_label: string | null;
+    event_property_syntax: string | null;
+};
+interface SelectEventAttributeProps {
+    styleWrapper?: CSSProperties;
+    eventMetadata: EventMetadata;
+    isShowErrorAlert: boolean;
+    journeySettings: Record<string, any>;
+    onChange: (eventMetaData: EventMetadata, ignoreUndoAction?: boolean) => void;
+}
+export declare const SelectEventAttribute: React.FC<SelectEventAttributeProps>;
+export {};

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 {};