@antscorp/antsomi-ui 1.3.5-beta.351 → 1.3.5-beta.353

package/es/components/molecules/EditorTab/EditorTab.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ModalFuncProps } from 'antd';
 interface EditorTabItem {
     showIcon?: boolean;
     showDropdown?: boolean;
@@ -14,13 +15,15 @@ interface EditorTabProps {
     showArrow?: boolean;
     showDropdown?: boolean;
     editNameOnConfigure?: boolean;
+    newTabText?: string;
     showComposeNewQuery?: boolean;
     className?: string;
     leftBlockClassName?: string;
     tabItemClassName?: string;
     listTab?: EditorTabItem[];
     activeId?: string;
-    defaultActiveId?: string;
+    confirmOnRemoveTab?: boolean;
+    modalFuncProps?: ModalFuncProps;
     onActiveTab: (id: string) => void;
     onCloseTab: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
     onConfigure: (id: string) => void;

package/es/components/molecules/EditorTab/EditorTab.js

@@ -1,9 +1,18 @@
+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());
+    });
+};
 // Lib
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 // Components
 import Icon from '@antscorp/icons/main';
-import { Button, Typography, Dropdown, ContentEditable } from '@antscorp/antsomi-ui/es/components';
+import { Button, Typography, Dropdown, ContentEditable, Modal, } from '@antscorp/antsomi-ui/es/components';
 // Styles
 import { EditorTabStyled } from './styled';
 // Utils
@@ -11,15 +20,15 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/EditorTab/index.jsx';
 export const EditorTab = props => {
     var _a;
-    const { listTab = [], activeId = '', defaultActiveId, showArrow, showDropdown, editNameOnConfigure, 
+    const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
     // disabledScroll,
-    onCloseTab, onActiveTab, onAddTab, onConfigure, onSaveName, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, } = props;
-    const [activeTabId, setActiveTabId] = useState(defaultActiveId || activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
+    onCloseTab, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab = true, modalFuncProps, } = props;
+    const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
     const [arrTabs, setArrTabs] = useState(listTab || []);
     const [isEditable, setIsEditable] = useState();
+    const [modal, contextModal] = Modal.useModal();
     // Ref
     const leftBlockRef = useRef(null);
-    const activeTabIdx = useMemo(() => arrTabs.findIndex(tab => tab.id === activeId), [activeId, arrTabs]);
     useEffect(() => {
         if (listTab.length - arrTabs.length === 1) {
             setActiveTabId(listTab[listTab.length - 1].id);
@@ -27,58 +36,46 @@ export const EditorTab = props => {
         setArrTabs(listTab);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [listTab]);
-    // useEffect(() => {
-    //   if (onActiveTab) onActiveTab(activeTabId);
-    //   // eslint-disable-next-line react-hooks/exhaustive-deps
-    // }, [activeTabId]);
     useEffect(() => {
-        const tabEl = document.getElementById(`tab-${activeTabId}`);
+        var _a;
+        const tabEl = (_a = leftBlockRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-item.active');
         if (tabEl) {
-            tabEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+            tabEl.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
         }
     }, [activeTabId]);
     useEffect(() => {
-        // if (activeId && activeTabId !== activeId) {
-        //   setActiveTabId(activeId);
-        // }
         setActiveTabId(prev => (activeId && prev !== activeId ? activeId : prev));
     }, [activeId]);
     const handleAddNew = () => {
         onAddTab();
     };
-    const handleCloseTab = (e, tab, idx) => {
+    const modalConfirmAsync = useCallback(() => modal.confirm(Object.assign({ title: 'Remove this tab', content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?', okText: 'Confirm', icon: React.createElement("span", { style: { display: 'none' } }), className: 'editor-tab__modal-confirm' }, modalFuncProps)), [modalFuncProps, modal]);
+    const handleActiveTab = useCallback((tabId) => {
+        setActiveTabId(tabId);
+        if (onActiveTab)
+            onActiveTab(tabId);
+    }, [onActiveTab]);
+    const handleCloseTab = (e, tab, idx) => __awaiter(void 0, void 0, void 0, function* () {
         e.stopPropagation();
         if (arrTabs.length < 2) {
             return;
         }
+        const isConfirm = confirmOnRemoveTab ? yield modalConfirmAsync() : true;
+        if (!isConfirm)
+            return;
         if (activeTabId === tab.id) {
             if (idx === arrTabs.length - 1) {
-                setActiveTabId(arrTabs[idx - 1].id);
-                if (onActiveTab)
-                    onActiveTab(arrTabs[idx - 1].id);
+                handleActiveTab(arrTabs[idx - 1].id);
             }
             else if (arrTabs.length > 1) {
-                setActiveTabId(arrTabs[idx + 1].id);
-                if (onActiveTab)
-                    onActiveTab(arrTabs[idx - 1].id);
+                handleActiveTab(arrTabs[idx + 1].id);
             }
         }
-        const newTabs = [...arrTabs];
-        newTabs.splice(idx, 1);
+        const newTabs = arrTabs.filter(item => item.id !== tab.id);
         onCloseTab(tab, idx, newTabs);
-        // setArrTabs(prevTabs => {
-        //   const newTabs = [...prevTabs];
-        //   newTabs.splice(idx, 1);
-        //   onCloseTab(tab, idx, newTabs);
-        //   return newTabs;
-        // });
-    };
-    const handleActiveTab = tab => {
-        setActiveTabId(tab.id);
-        if (onActiveTab)
-            onActiveTab(tab.id);
-    };
-    const onWheelLeftBlock = event => {
+        setArrTabs(newTabs);
+    });
+    const onWheelLeftBlock = useCallback(event => {
         try {
             if (!event.deltaY) {
                 return;
@@ -92,42 +89,33 @@ export const EditorTab = props => {
                 args: {},
             });
         }
-    };
-    const onClickArrow = (direction = 'left') => {
+    }, []);
+    const onClickArrow = useCallback((direction = 'left') => {
         const idx = arrTabs.findIndex(tab => tab.id === activeTabId);
         if (idx !== -1) {
             switch (direction) {
                 case 'left':
-                    if (idx === 0) {
-                        return;
-                    }
-                    setActiveTabId(arrTabs[idx - 1].id);
-                    if (onActiveTab)
-                        onActiveTab(arrTabs[idx - 1].id);
+                    if (idx !== 0)
+                        handleActiveTab(arrTabs[idx - 1].id);
                     break;
                 case 'right':
-                    if (idx === arrTabs.length - 1) {
-                        return;
-                    }
-                    setActiveTabId(arrTabs[idx + 1].id);
-                    if (onActiveTab)
-                        onActiveTab(arrTabs[idx + 1].id);
+                    if (idx !== arrTabs.length - 1)
+                        handleActiveTab(arrTabs[idx + 1].id);
                     break;
                 default:
                     break;
             }
         }
-    };
+    }, [activeTabId, arrTabs, handleActiveTab]);
     return (React.createElement(EditorTabStyled, { className: className || '' },
-        showArrow && (React.createElement("div", { className: classnames('navigate-button', {
-                '--disabled': activeTabIdx === 0,
-            }), onClick: () => onClickArrow('left') },
+        contextModal,
+        showArrow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('left') },
             React.createElement(Icon, { type: "icon-ants-angle-left" }))),
         React.createElement("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock }, arrTabs && arrTabs.length
             ? arrTabs.map((tab, idx) => {
                 const { showIcon = true, closeable = true } = tab;
                 // const { showIcon = true, showDropdown = true, closeable = true } = tab;
-                return (React.createElement("div", { key: tab.id, id: `tab-${tab.id}`, onClick: () => handleActiveTab(tab), className: classnames('tab-item', tabItemClassName, {
+                return (React.createElement("div", { key: tab.id, onClick: () => handleActiveTab(tab.id), className: classnames('tab-item', tabItemClassName, {
                         active: tab.id === activeTabId,
                     }) },
                     showIcon &&
@@ -141,7 +129,7 @@ export const EditorTab = props => {
                                 { label: 'Configure', key: 'configure', style: { minWidth: '135px' } },
                                 { label: 'Remove', key: 'remove', style: { minWidth: '135px' } },
                             ],
-                            onClick: ({ key, domEvent }) => {
+                            onClick: (_a) => __awaiter(void 0, [_a], void 0, function* ({ key, domEvent }) {
                                 switch (key) {
                                     case 'configure':
                                         if (editNameOnConfigure)
@@ -149,24 +137,19 @@ export const EditorTab = props => {
                                         onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
                                         break;
                                     case 'remove':
-                                        handleCloseTab(domEvent, tab, idx);
+                                        yield handleCloseTab(domEvent, tab, idx);
                                         break;
                                     default:
                                         break;
                                 }
-                            },
+                            }),
                         }, placement: "bottomRight", trigger: ['click'], destroyPopupOnHide: true },
-                        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), 
-                            // icon={<Icon type="icon-ants-angle-left" overlayStyle={{ fontSize: 12 }} />}
-                            // style={{ transform: 'rotate(-90deg)' }}
-                            size: "small" }))) : closeable ? (React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-remove-slim", onClick: e => handleCloseTab(e, tab, idx), overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
+                        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closeable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
             })
             : null),
-        showArrow && (React.createElement("div", { className: classnames('navigate-button', '--right', {
-                '--disabled': activeTabIdx === arrTabs.length - 1,
-            }), onClick: () => onClickArrow('right') },
+        showArrow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('right') },
             React.createElement(Icon, { type: "icon-ants-angle-right" }))),
-        showComposeNewQuery && (React.createElement(Button, { onClick: handleAddNew, className: "new-query-button" },
+        showComposeNewQuery || newTabText ? (React.createElement(Button, { onClick: handleAddNew, className: "new-query-button" },
             React.createElement(Icon, { type: "icon-ants-add-square" }),
-            "New query"))));
+            newTabText || 'New query')) : null));
 };

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

@@ -115,6 +115,13 @@ export const EditorTabStyled = styled.div `
     border: none;
   }
 
+  &:has(.left-block > div:last-child.active) .navigate-button:last-child,
+  &:has(.left-block > div:first-child.active) .navigate-button:first-child {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   .navigate-button {
     /* Structure Block */
     flex-shrink: 0;
@@ -130,14 +137,14 @@ export const EditorTabStyled = styled.div `
 
     cursor: pointer;
 
-    &.--right {
+    &:last-child {
       border-right: 1px solid #e0e0e0;
     }
 
-    &.--disabled {
+    /* &.--disabled {
       cursor: not-allowed;
       pointer-events: none;
       opacity: 0.7;
-    }
+    } */
   }
 `;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type AccountChipProps = {
+    label: string;
+    value: string;
+    user: any;
+    disabled?: boolean;
+    isViewMode?: boolean;
+    isError?: boolean;
+    errorMsg?: string;
+    onRemove?: (item: any) => void;
+};
+declare const AccountChip: React.FC<AccountChipProps>;
+export default AccountChip;

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

@@ -0,0 +1,31 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { AccountChipWrapper } from './styled';
+import Icon from '@antscorp/icons';
+import { Tooltip } from '../../atoms';
+const AccountChip = props => {
+    const { user, label, value, disabled, isViewMode, isError, errorMsg, onRemove } = props;
+    const { state } = useContext(SelectAccountContext);
+    const { disabledAccount, userIdKey } = state;
+    const handleRemove = () => {
+        if (typeof onRemove === 'function') {
+            onRemove({ value, user });
+        }
+    };
+    const isDisabled = disabled || (state === null || state === void 0 ? void 0 : state.disabled) || (disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(user === null || user === void 0 ? void 0 : user[userIdKey]));
+    return (React.createElement(Tooltip, { open: isError ? undefined : false, title: errorMsg },
+        React.createElement(AccountChipWrapper, { disabled: isDisabled, isError: isError },
+            React.createElement("div", { className: "name" }, label),
+            !isViewMode && !(state === null || state === void 0 ? void 0 : state.isViewMode) && !isDisabled && (React.createElement("div", { className: "icon-remove", onClick: handleRemove },
+                React.createElement(Icon, { type: "icon-ants-remove-slim" }))))));
+};
+AccountChip.defaultProps = {
+    disabled: false,
+    isViewMode: false,
+    isError: false,
+    errorMsg: '',
+};
+export default AccountChip;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+type AccountListProps = {};
+declare const AccountList: React.FC<AccountListProps>;
+export default AccountList;

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

@@ -0,0 +1,47 @@
+import React, { useContext, useState } from 'react';
+import { AccountListBody, AccountListContent, AccountListFooter, AccountListTitleGroup, AccountListWrapper, CheckboxStyled, } from './styled';
+import { Button, Icon, Input } from '../../atoms';
+import { Dropdown } from '../Dropdown';
+import { SelectAccountContext } from './context/SelectAccountContext';
+const AccountList = () => {
+    const { state, dispatch } = useContext(SelectAccountContext);
+    const { usersDisplay, disabledAccount, draftUsersSelected, nameKey, userIdKey, searchText, listAccountGroupDisplay, } = state;
+    const [openGroup, setOpenGroup] = useState(true);
+    const [openAccount, setOpenAccount] = useState(true);
+    const handleCheckbox = userId => {
+        dispatch({ type: 'UPDATE_DRAFT_USERS_SELECTED', payload: { userId } });
+    };
+    const handleCancel = () => {
+        dispatch({ type: 'CLOSE_ACCOUNT_LIST' });
+    };
+    const handleApply = () => {
+        dispatch({ type: 'APPLY' });
+    };
+    const handleSearch = text => {
+        dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: text });
+    };
+    return (React.createElement(AccountListWrapper, null,
+        React.createElement(AccountListBody, null,
+            React.createElement(Input, { value: searchText, placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2" }), onAfterChange: value => handleSearch(value), debounce: 500 }),
+            (state === null || state === void 0 ? void 0 : state.type) === 'group' ? (React.createElement(React.Fragment, null,
+                React.createElement(Dropdown, { open: openGroup, getPopupContainer: () => document.getElementById('account-group-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (React.createElement(AccountListContent, null, listAccountGroupDisplay === null || listAccountGroupDisplay === void 0 ? void 0 : listAccountGroupDisplay.map((item, idx) => (React.createElement(CheckboxStyled, { key: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), defaultChecked: draftUsersSelected.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), onChange: () => handleCheckbox(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]) }, item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupNameKey]))))) },
+                    React.createElement(AccountListTitleGroup, { onClick: () => setOpenGroup(!openGroup) },
+                        React.createElement("div", null, "Account Group"),
+                        React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, style: {
+                                transform: openGroup ? 'rotate(180deg)' : 'rotate(0deg)',
+                                transition: '0.3s',
+                            } }))),
+                React.createElement("div", { id: "account-group-list" }),
+                React.createElement(Dropdown, { open: openAccount, getPopupContainer: () => document.getElementById('account-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (React.createElement(AccountListContent, null, usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.map(item => (React.createElement(CheckboxStyled, { key: item === null || item === void 0 ? void 0 : item[userIdKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), defaultChecked: draftUsersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: () => handleCheckbox(item === null || item === void 0 ? void 0 : item[userIdKey]) }, item === null || item === void 0 ? void 0 : item[nameKey]))))) },
+                    React.createElement(AccountListTitleGroup, { onClick: () => setOpenAccount(!openAccount) },
+                        React.createElement("div", null, "Account"),
+                        React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, style: {
+                                transform: openAccount ? 'rotate(180deg)' : 'rotate(0deg)',
+                                transition: '0.3s',
+                            } }))),
+                React.createElement("div", { id: "account-list" }))) : (React.createElement(AccountListContent, { style: { marginTop: 15 } }, usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.map(item => (React.createElement(CheckboxStyled, { key: item === null || item === void 0 ? void 0 : item[userIdKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), defaultChecked: draftUsersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: () => handleCheckbox(item === null || item === void 0 ? void 0 : item[userIdKey]) }, item === null || item === void 0 ? void 0 : item[nameKey])))))),
+        React.createElement(AccountListFooter, null,
+            React.createElement(Button, { onClick: () => handleCancel() }, "Cancel"),
+            React.createElement(Button, { type: "primary", onClick: () => handleApply() }, "Apply"))));
+};
+export default AccountList;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ButtonAdd: () => React.JSX.Element;
+export default ButtonAdd;

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

@@ -0,0 +1,29 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { ButtonAddStyled } from './styled';
+import { Icon, Popover } from '../../atoms';
+import AccountList from './AccountList';
+const ButtonAdd = () => {
+    const { state, dispatch } = useContext(SelectAccountContext);
+    const handleClose = visible => {
+        if (!visible) {
+            dispatch({ type: 'CLOSE_ACCOUNT_LIST' });
+        }
+    };
+    const handleAfterClose = visible => {
+        if (!visible) {
+            dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: '' });
+        }
+    };
+    return (React.createElement(Popover, { open: state.openAccountList, content: React.createElement(AccountList, null), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true, onOpenChange: handleClose, afterOpenChange: handleAfterClose },
+        React.createElement(ButtonAddStyled, { loading: !state.isInitDone, onClick: () => state.openAccountList
+                ? dispatch({ type: 'CLOSE_ACCOUNT_LIST' })
+                : dispatch({ type: 'OPEN_ACCOUNT_LIST' }) },
+            React.createElement("div", { className: "icon" },
+                React.createElement(Icon, { type: "icon-ants-add", size: 10 })),
+            React.createElement("div", { className: "name" }, "Add account"))));
+};
+export default ButtonAdd;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ButtonViewAll: () => React.JSX.Element;
+export default ButtonViewAll;

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

@@ -0,0 +1,37 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { ButtonViewAllStyled, ViewAllWrapper } from './styled';
+import { Popover } from '../../atoms';
+import AccountChip from './AccountChip';
+const ButtonViewAll = () => {
+    const { state, dispatch } = useContext(SelectAccountContext);
+    const { usersSelected, nameKey, userIdKey, users } = state;
+    const handleRemove = ({ userId, index }) => {
+        dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
+    };
+    const contentViewAll = () => (React.createElement(ViewAllWrapper, null, state.type === 'group'
+        ? usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+            if (index < (state === null || state === void 0 ? void 0 : state.limitShow))
+                return null;
+            const group = state.listAccountGroup.find(u => (u === null || u === void 0 ? void 0 : u[state === null || state === void 0 ? void 0 : state.groupIdKey]) === id);
+            if (!group) {
+                const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+                if (!user)
+                    return null;
+                return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+            }
+            return (React.createElement(AccountChip, { key: group === null || group === void 0 ? void 0 : group[state.groupIdKey], user: group, value: group === null || group === void 0 ? void 0 : group[state.groupIdKey], label: group === null || group === void 0 ? void 0 : group[state === null || state === void 0 ? void 0 : state.groupNameKey], onRemove: () => handleRemove({ userId: group === null || group === void 0 ? void 0 : group[state.groupIdKey], index }) }));
+        })
+        : usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+            if (index < (state === null || state === void 0 ? void 0 : state.limitShow))
+                return null;
+            const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+            return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+        })));
+    return (React.createElement(Popover, { content: () => contentViewAll(), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true },
+        React.createElement(ButtonViewAllStyled, { type: "text" }, "View all")));
+};
+export default ButtonViewAll;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Content: React.FC;

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

@@ -0,0 +1,40 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { Wrapper } from './styled';
+import AccountChip from './AccountChip';
+import ButtonAdd from './ButtonAdd';
+import ButtonViewAll from './ButtonViewAll';
+export const Content = () => {
+    var _a;
+    const { state, dispatch } = useContext(SelectAccountContext);
+    const { usersSelected, nameKey, userIdKey, users, disabled } = state;
+    const handleRemove = ({ userId, index }) => {
+        dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
+    };
+    return (React.createElement(Wrapper, { disabled: !!disabled },
+        state.type === 'group'
+            ? usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+                var _a;
+                if (index >= (state === null || state === void 0 ? void 0 : state.limitShow))
+                    return null;
+                const group = (_a = state === null || state === void 0 ? void 0 : state.listAccountGroup) === null || _a === void 0 ? void 0 : _a.find(u => (u === null || u === void 0 ? void 0 : u[state === null || state === void 0 ? void 0 : state.groupIdKey]) === id);
+                if (!group) {
+                    const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+                    if (!user)
+                        return null;
+                    return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+                }
+                return (React.createElement(AccountChip, { key: group === null || group === void 0 ? void 0 : group[state.groupIdKey], user: group, value: group === null || group === void 0 ? void 0 : group[state.groupIdKey], label: group === null || group === void 0 ? void 0 : group[state === null || state === void 0 ? void 0 : state.groupNameKey], onRemove: () => handleRemove({ userId: group === null || group === void 0 ? void 0 : group[state.groupIdKey], index }) }));
+            })
+            : usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+                if (index >= (state === null || state === void 0 ? void 0 : state.limitShow))
+                    return null;
+                const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+                return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+            }),
+        ((_a = state === null || state === void 0 ? void 0 : state.usersSelected) === null || _a === void 0 ? void 0 : _a.length) > (state === null || state === void 0 ? void 0 : state.limitShow) && React.createElement(ButtonViewAll, null),
+        !(state === null || state === void 0 ? void 0 : state.isViewMode) && React.createElement(ButtonAdd, null)));
+};

package/es/components/molecules/SelectAccount/context/SelectAccountContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectAccountProps, TContext } from '../type';
+export declare const SelectAccountContext: React.Context<TContext>;
+export declare const SelectAccountProvider: React.FC<React.PropsWithChildren<SelectAccountProps>>;

package/es/components/molecules/SelectAccount/context/SelectAccountContext.js

@@ -0,0 +1,51 @@
+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, { createContext, useEffect, useMemo, useReducer } from 'react';
+import { uniq } from 'lodash';
+// Reducer
+import { initialState, reducer } from './reducer';
+// Hooks
+import { useGetAbstractUsers } from '../hook';
+const initialContext = {
+    state: initialState,
+    dispatch: () => { },
+};
+export const SelectAccountContext = createContext(initialContext);
+export const SelectAccountProvider = props => {
+    const { children, initData } = props, rest = __rest(props, ["children", "initData"]);
+    const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, initialState), rest), { usersSelected: [...(uniq(initData) || [])] }));
+    const contextValue = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+    const { usersSelected, isInitDone, onChange } = state;
+    // Fetch users
+    const { isLoading, data } = useGetAbstractUsers({
+        queryFn: state.serviceAccounts,
+        params: state.paramsFetchUsers,
+        search: state.searchType === 'server' ? state.searchText : '',
+    });
+    useEffect(() => {
+        dispatch({ type: 'INIT' });
+    }, []);
+    useEffect(() => {
+        if (!isLoading) {
+            dispatch({ type: 'UPDATE_USERS', payload: (data === null || data === void 0 ? void 0 : data[state === null || state === void 0 ? void 0 : state.dataAccountsKey]) || [] });
+            dispatch({ type: 'UPDATE_USERS_DISPLAY', payload: (data === null || data === void 0 ? void 0 : data[state === null || state === void 0 ? void 0 : state.dataAccountsKey]) || [] });
+        }
+    }, [data]);
+    // Callback OnChange
+    useEffect(() => {
+        if (isInitDone && typeof onChange === 'function') {
+            onChange(usersSelected);
+        }
+    }, [usersSelected]);
+    return (React.createElement(SelectAccountContext.Provider, { value: contextValue }, children));
+};

package/es/components/molecules/SelectAccount/context/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectAccountContext';

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

@@ -0,0 +1 @@
+export * from './SelectAccountContext';

package/es/components/molecules/SelectAccount/context/reducer.d.ts

@@ -0,0 +1,3 @@
+import { TAction, TState } from '../type';
+export declare const initialState: TState;
+export declare const reducer: (state: TState, action: TAction) => TState;

package/es/components/molecules/SelectAccount/context/reducer.js

@@ -0,0 +1,95 @@
+import produce from 'immer';
+export const initialState = {
+    isInitDone: false,
+    searchText: '',
+    openAccountList: false,
+    limitShow: 10,
+    users: [],
+    usersDisplay: [],
+    listAccountGroupDisplay: [],
+    paramsFetchUsers: {},
+    usersSelected: [],
+    draftUsersSelected: [],
+    type: 'default',
+};
+export const reducer = (state, action) => produce(state, draft => {
+    var _a, _b, _c, _d, _e;
+    // console.log(action.type, { payload: action?.payload || undefined, state });
+    switch (action.type) {
+        case 'INIT': {
+            if (draft.type === 'group') {
+                draft.listAccountGroupDisplay = draft.listAccountGroup;
+            }
+            draft.paramsFetchUsers = draft.paramsAccounts || {};
+            draft.isInitDone = true;
+            break;
+        }
+        case 'OPEN_ACCOUNT_LIST':
+            draft.openAccountList = true;
+            draft.draftUsersSelected = draft.usersSelected;
+            break;
+        case 'CLOSE_ACCOUNT_LIST':
+            draft.openAccountList = false;
+            draft.draftUsersSelected = [];
+            break;
+        case 'APPLY':
+            draft.usersSelected = draft.draftUsersSelected;
+            draft.draftUsersSelected = [];
+            draft.openAccountList = false;
+            break;
+        case 'UPDATE_USERS':
+            draft.users = action.payload;
+            break;
+        case 'UPDATE_USERS_DISPLAY':
+            draft.usersDisplay = action.payload;
+            break;
+        case 'UPDATE_USERS_SELECTED':
+            draft.usersSelected = action.payload;
+            break;
+        case 'UPDATE_DRAFT_USERS_SELECTED': {
+            const { userId } = action.payload;
+            const indexExist = (_a = draft === null || draft === void 0 ? void 0 : draft.draftUsersSelected) === null || _a === void 0 ? void 0 : _a.indexOf(userId);
+            if (indexExist >= 0) {
+                draft.draftUsersSelected = [
+                    ...(_b = draft === null || draft === void 0 ? void 0 : draft.draftUsersSelected) === null || _b === void 0 ? void 0 : _b.slice(0, indexExist),
+                    ...(_c = draft === null || draft === void 0 ? void 0 : draft.draftUsersSelected) === null || _c === void 0 ? void 0 : _c.slice(indexExist + 1),
+                ];
+            }
+            else {
+                draft.draftUsersSelected = [...draft === null || draft === void 0 ? void 0 : draft.draftUsersSelected, userId];
+            }
+            break;
+        }
+        case 'UPDATE_SEARCH_TEXT':
+            draft.searchText = action.payload;
+            if (draft.searchType === 'client') {
+                const userFilters = (_d = draft.users) === null || _d === void 0 ? void 0 : _d.filter(user => {
+                    var _a, _b, _c;
+                    return ((_b = (_a = user === null || user === void 0 ? void 0 : user[draft === null || draft === void 0 ? void 0 : draft.nameKey]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf((_c = action.payload) === null || _c === void 0 ? void 0 : _c.toLowerCase().trim())) !== -1;
+                });
+                draft.usersDisplay = userFilters;
+            }
+            else if (draft.searchType === 'server') {
+                draft.paramsFetchUsers = {
+                    search: action.payload,
+                };
+            }
+            if (draft.type === 'group') {
+                const groupFilters = (_e = draft.listAccountGroup) === null || _e === void 0 ? void 0 : _e.filter(group => {
+                    var _a, _b, _c;
+                    return ((_b = (_a = group === null || group === void 0 ? void 0 : group[draft === null || draft === void 0 ? void 0 : draft.groupNameKey]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf((_c = action.payload) === null || _c === void 0 ? void 0 : _c.toLowerCase().trim())) !== -1;
+                });
+                draft.listAccountGroupDisplay = groupFilters;
+            }
+            break;
+        case 'REMOVE_USER':
+            {
+                const { index } = action.payload;
+                const clone = [...draft.usersSelected];
+                draft.usersSelected = [...clone.slice(0, index), ...clone.slice(index + 1)];
+            }
+            break;
+        default:
+            break;
+    }
+});

package/es/components/molecules/SelectAccount/hook/index.d.ts

@@ -0,0 +1 @@
+export * from './useGetAbstractUsers';

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

@@ -0,0 +1 @@
+export * from './useGetAbstractUsers';

package/es/components/molecules/SelectAccount/hook/useGetAbstractUsers.d.ts

@@ -0,0 +1,11 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+type Props = {
+    queryOptions?: UseQueryOptions;
+    params?: Record<string, any>;
+    search?: string;
+    queryFn?: Function;
+    enabled?: boolean;
+    defaultDataSource?: any;
+};
+export declare const useGetAbstractUsers: ({ queryOptions, params, search, queryFn, enabled, }: Props) => import("@tanstack/react-query").UseQueryResult<unknown, unknown>;
+export {};

package/es/components/molecules/SelectAccount/hook/useGetAbstractUsers.js

@@ -0,0 +1,9 @@
+// Libraries
+import { useQuery } from '@tanstack/react-query';
+// Service
+import AbstractService from '@antscorp/antsomi-ui/es/services/Abstract';
+// Constant
+import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants';
+export const useGetAbstractUsers = ({ queryOptions = {}, params = {}, search = '', queryFn = AbstractService.lookupInfo.callApi.c_user_id, enabled = true, }) => useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_ABSTRACT_USERS, JSON.stringify({ params, search })], 
+    // initialData: defaultDataSource,
+    queryFn: () => queryFn({ params, search }) }, queryOptions));

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectAccountProps } from './type';
+export declare const SelectAccount: React.FC<SelectAccountProps>;
+export default SelectAccount;

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

@@ -0,0 +1,21 @@
+// Libraries
+import React from 'react';
+import { queryClientAntsomiUI, QueryClientProviderAntsomiUI, } from '@antscorp/antsomi-ui/es/queries/configs';
+// Context
+import { SelectAccountProvider } from './context/SelectAccountContext';
+// Components
+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)))));
+SelectAccount.defaultProps = {
+    initData: [],
+    limitShow: 10,
+    type: 'default',
+    searchType: 'client',
+    dataAccountsKey: 'data',
+};
+export default SelectAccount;

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,164 @@
+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;
+
+    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: 10px;
+  flex-wrap: wrap;
+  max-width: 300px;
+  padding: 15px;
+`;

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

@@ -0,0 +1,79 @@
+import React from 'react';
+type AccountProps = {
+    type: 'default';
+};
+type GroupAccountProps = {
+    type: 'group';
+    listAccountGroup: any[];
+    groupNameKey: string;
+    groupIdKey: string;
+};
+export type SelectAccountProps = {
+    initData?: Array<string | number>;
+    searchType?: 'client' | 'server';
+    isViewMode?: boolean;
+    disabled?: boolean;
+    disabledAccount?: any[];
+    limitShow?: number;
+    nameKey: string;
+    userIdKey: string;
+    dataAccountsKey: string;
+    paramsAccounts: {};
+    serviceAccounts: ({ params, search }: {
+        params: any;
+        search: any;
+    }) => Promise<any>;
+    onChange?: (idSelected: Array<string | number>) => void;
+} & (AccountProps | GroupAccountProps);
+export type TState = SelectAccountProps & {
+    isInitDone: boolean;
+    searchText: string;
+    openAccountList: boolean;
+    limitShow: number;
+    users: any[];
+    usersDisplay: any[];
+    listAccountGroupDisplay: any[];
+    usersSelected: (string | number)[];
+    draftUsersSelected: (string | number)[];
+    paramsFetchUsers: {};
+};
+export type TAction = {
+    type: 'INIT';
+} | {
+    type: 'APPLY';
+} | {
+    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_DRAFT_USERS_SELECTED';
+    payload: {
+        userId: string | number;
+    };
+} | {
+    type: 'UPDATE_SEARCH_TEXT';
+    payload: string;
+} | {
+    type: 'UPDATE_USERS';
+    payload: any[];
+} | {
+    type: 'REMOVE_USER';
+    payload: {
+        userId: string | number;
+        index: number;
+    };
+};
+export type TContext = {
+    state: TState;
+    dispatch: React.Dispatch<TAction>;
+};
+export {};

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

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

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

@@ -57,6 +57,7 @@ export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';
+export { SelectAccount } from './SelectAccount';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';

package/es/components/molecules/index.js

@@ -57,3 +57,4 @@ export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';
+export { SelectAccount } from './SelectAccount';

package/es/constants/queries.d.ts

@@ -26,4 +26,5 @@ export declare const QUERY_KEYS: {
     GET_ACCOUNT_LISTING: string;
     GET_PERMISSION_ACCOUNT_LISTING: string;
     GET_RECENT_ACCOUNT: string;
+    GET_ABSTRACT_USERS: string;
 };

package/es/constants/queries.js

@@ -37,4 +37,6 @@ export const QUERY_KEYS = {
     GET_ACCOUNT_LISTING: 'GET_ACCOUNT_LISTING',
     GET_PERMISSION_ACCOUNT_LISTING: 'GET_PERMISSION_ACCOUNT_LISTING',
     GET_RECENT_ACCOUNT: 'GET_RECENT_ACCOUNT',
+    // ABSTRACT
+    GET_ABSTRACT_USERS: 'GET_ABSTRACT_USERS',
 };

package/es/constants/variables.d.ts

@@ -30,3 +30,6 @@ export declare const UI_SIZE: {
     MEDIUM: string;
     LARGE: string;
 };
+export declare const ENDPOINT: {
+    toolkitV2: string;
+};

package/es/constants/variables.js

@@ -31,3 +31,7 @@ export const UI_SIZE = {
     MEDIUM: 'medium',
     LARGE: 'large',
 };
+const TOOLKIT_API_VERSION = '2.0';
+export const ENDPOINT = {
+    toolkitV2: `toolkit/v${TOOLKIT_API_VERSION}`,
+};

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -11,7 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent6, accent7, gray5, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
@@ -825,6 +825,20 @@ export const GlobalStyle = () => {
           border-radius: 0 0 2px 2px;
         }
       }
+      /* Override style for Modal confirm in Editor Tab */
+      .editor-tab__modal-confirm .antsomi-modal-content .antsomi-modal-body {
+        .antsomi-modal-confirm-body-wrapper {
+          padding: 0;
+
+          .antsomi-modal-confirm-body {
+            padding: 20px 20px 0 20px;
+          }
+          .antsomi-modal-confirm-btns {
+            padding: 12px 20px 20px;
+            border-top: 1px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.bw4};
+          }
+        }
+      }
 
       /* Message Notification */
       .ant-message {
@@ -838,7 +852,7 @@ export const GlobalStyle = () => {
 
       .antsomi-collapse {
         &.antsomi-collapse-borderless {
-          border-bottom: 1px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.gray5};
+          border-bottom: 1px solid ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.gray5};
         }
 
         > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
@@ -848,12 +862,12 @@ export const GlobalStyle = () => {
 
       /* Switch */
       .antsomi-switch {
-        border: 2px solid ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.colorPrimary} !important;
+        border: 2px solid ${(_36 = THEME.token) === null || _36 === void 0 ? void 0 : _36.colorPrimary} !important;
 
         &.antsomi-switch-checked {
           > .antsomi-switch-handle {
             &::before {
-              background-color: ${(_36 = THEME.token) === null || _36 === void 0 ? void 0 : _36.bw0} !important;
+              background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.bw0} !important;
             }
           }
         }
@@ -870,7 +884,7 @@ export const GlobalStyle = () => {
           font-weight: bold;
 
           &:not(.antsomi-tabs-tab-active):hover {
-            background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.blue};
+            background-color: ${(_38 = THEME.token) === null || _38 === void 0 ? void 0 : _38.blue};
           }
         }
         .antsomi-tabs-tab-active {
@@ -912,7 +926,7 @@ export const GlobalStyle = () => {
       .antsomi-menu {
         .antsomi-menu-submenu.antsomi-menu-submenu-selected {
           .antsomi-menu-item.antsomi-menu-item-selected {
-            background-color: ${(_38 = THEME.token) === null || _38 === void 0 ? void 0 : _38.blue};
+            background-color: ${(_39 = THEME.token) === null || _39 === void 0 ? void 0 : _39.blue};
           }
         }
       }

package/es/services/Abstract/index.d.ts

@@ -0,0 +1,15 @@
+declare const AbstractService: {
+    lookupInfo: {
+        callApi: {
+            c_user_id: ({ params, search }: {
+                params?: {} | undefined;
+                search: any;
+            }) => Promise<any[]>;
+            list_account: ({ params, search }: {
+                params?: {} | undefined;
+                search: any;
+            }) => Promise<any[]>;
+        };
+    };
+};
+export default AbstractService;

package/es/services/Abstract/index.js

@@ -0,0 +1,45 @@
+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());
+    });
+};
+import { ENDPOINT } from '../../constants';
+import { callApiWithAuth, getEntriesV2 } from '../../utils';
+const AbstractService = {
+    lookupInfo: {
+        callApi: {
+            c_user_id: (_a) => __awaiter(void 0, [_a], void 0, function* ({ params = {}, search }) {
+                const queryParams = Object.assign({ search }, params);
+                const query = new URLSearchParams(queryParams).toString();
+                return callApiWithAuth(`${ENDPOINT.toolkitV2}/selector/users/listing${query ? `?${query}` : ''}`, 'GET', null, '//sandbox-app.cdp.asia/hub', { api_pid: 33167 }, '5474r2x214z294d4v284y4n5g436p464g47423o4', '1600084823')
+                    .then(res => {
+                    const data = getEntriesV2(res, 0);
+                    return data;
+                })
+                    .catch(err => {
+                    console.error(err);
+                    return err;
+                });
+            }),
+            list_account: (_b) => __awaiter(void 0, [_b], void 0, function* ({ params = {}, search }) {
+                const queryParams = Object.assign({ search }, params);
+                const query = new URLSearchParams(queryParams).toString();
+                return callApiWithAuth(`${ENDPOINT.toolkitV2}/portal/get-list-account-network${query ? `?${query}` : ''}`, 'GET', null, '//sandbox-app.cdp.asia/hub', { api_pid: 33167 }, '5474r2x214z294d4v284y4l5j454p4k5s4q2u4l4l5', '1600084823')
+                    .then(res => {
+                    const data = getEntriesV2(res, 0);
+                    // dataBackup[params.objectName] = data;
+                    return data;
+                })
+                    .catch(err => {
+                    console.error(err);
+                    return err;
+                });
+            }),
+        },
+    },
+};
+export default AbstractService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.351",
+  "version": "1.3.5-beta.353",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",