@antscorp/antsomi-ui 1.3.5-beta.352 → 1.3.5-beta.354

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;