@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,18 +1,17 @@
-var _a, _b, _c;
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Tag } from '../../atoms';
+import { Tag } from '@antscorp/antsomi-ui/es/components/atoms/Tag';
 // Constants
 import { THEME } from '../../../constants';
 export const StyledTag = styled(Tag) `
   position: relative;
-  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue2} !important;
+  background-color: ${THEME.token?.blue2} !important;
   padding: 3px 10px !important;
   margin: 0px !important;
   border-radius: 15px !important;
   border: none !important;
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px !important;
+  font-size: ${THEME.token?.fontSize}px !important;
 
   .antsomi-tag-close-icon {
     opacity: 0;
@@ -37,5 +36,5 @@ export const TagCloseBtn = styled.div `
   border-radius: 100%;
   border: 2.5px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
   background-color: #fff;
-  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
+  color: ${THEME.token?.colorPrimary};
 `;

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 // Context
 import { SelectAccountContext } from './context';
 // Components
@@ -15,12 +16,8 @@ const AccountChip = props => {
             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, { className: "select-account-chip", style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.accountChip) || {})), disabled: isDisabled, isError: isError },
-            React.createElement(Typography.Text, { className: "name", ellipsis: { tooltip: { title: label } }, style: { maxWidth: '150px' } }, 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" }))))));
+    const isDisabled = disabled || state?.disabled || disabledAccount?.includes(user?.[userIdKey]);
+    return (_jsx(Tooltip, { open: isError ? undefined : false, title: errorMsg, children: _jsxs(AccountChipWrapper, { className: "select-account-chip", style: { ...(styles?.accountChip || {}) }, disabled: isDisabled, isError: isError, children: [_jsx(Typography.Text, { className: "name", ellipsis: { tooltip: { title: label } }, style: { maxWidth: '150px' }, children: label }), !isViewMode && !state?.isViewMode && !isDisabled && (_jsx("div", { className: "icon-remove", onClick: handleRemove, children: _jsx(Icon, { type: "icon-ants-remove-slim" }) }))] }) }));
 };
 AccountChip.defaultProps = {
     disabled: false,

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

@@ -1,10 +1,10 @@
-import React, { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
 import { CheckboxStyled } from './styled';
 import { Typography } from '../../atoms';
 const AccountItem = props => {
     const { checked, label, disabled, name, onChange } = props;
-    const TextLabel = ({ children }) => (React.createElement(Typography.Text, { ellipsis: { tooltip: { title: children } }, style: { maxWidth: '220px', lineHeight: '20px' } }, children));
-    return (React.createElement(CheckboxStyled, { name: name, disabled: disabled, checked: checked, onChange: onChange },
-        React.createElement(TextLabel, null, label)));
+    const TextLabel = ({ children }) => (_jsx(Typography.Text, { ellipsis: { tooltip: { title: children } }, style: { maxWidth: '220px', lineHeight: '20px' }, children: children }));
+    return (_jsx(CheckboxStyled, { name: name, disabled: disabled, checked: checked, onChange: onChange, children: _jsx(TextLabel, { children: label }) }));
 };
 export default memo(AccountItem);

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

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '../../atoms';
 import { ItemOnlyOne } from './styled';
 const AccountItemOnlyOne = props => {
     const { label, checked, disabled, name, onClick } = props;
-    return (React.createElement(ItemOnlyOne, { className: `${disabled ? 'disabled' : ''} ${checked ? 'checked' : ''}`, onClick: onClick },
-        React.createElement(Typography.Text, { ellipsis: { tooltip: { title: label } }, style: { maxWidth: '220px' } }, label)));
+    return (_jsx(ItemOnlyOne, { className: `${disabled ? 'disabled' : ''} ${checked ? 'checked' : ''}`, onClick: onClick, children: _jsx(Typography.Text, { ellipsis: { tooltip: { title: label } }, style: { maxWidth: '220px' }, children: label }) }));
 };
 export default AccountItemOnlyOne;

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useContext, useEffect, useState } from 'react';
+import { memo, useContext, useEffect, useState } from 'react';
 import { slice } from 'lodash';
 // Context
 import { SelectAccountContext } from './context/SelectAccountContext';
@@ -9,7 +10,6 @@ import { Button, Icon, Input, Scrollbars } from '../../atoms';
 import { Dropdown } from '../Dropdown';
 import AccountItem from './AccountItem';
 const AccountList = () => {
-    var _a;
     const { formListRef, state, dispatch } = useContext(SelectAccountContext);
     const { usersSelected, usersDisplay, disabledAccount, nameKey, userIdKey, searchText, listAccountGroupDisplay, limit = 10, } = state;
     const POSITION_TOP = 0.9;
@@ -39,55 +39,29 @@ const AccountList = () => {
             setTempSelected(tempSelected.filter(id => id !== key));
         }
     };
-    return (React.createElement(AccountListWrapper, null,
-        React.createElement(AccountListBody, null,
-            React.createElement("form", { ref: formListRef, id: "form-account-list" },
-                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: () => {
-                            var _a;
-                            return (
-                            // <AccountListContent>
-                            React.createElement(Scrollbars, { width: "100%", autoHeight: true, autoHeightMax: 160, onScrollFrame: values => {
-                                    if (values.top > POSITION_TOP &&
-                                        limit * pageGroup < (listAccountGroupDisplay === null || listAccountGroupDisplay === void 0 ? void 0 : listAccountGroupDisplay.length)) {
-                                        setPageGroup(pageGroup + 1);
-                                    }
-                                } },
-                                React.createElement(AccountListContent, null, (_a = slice(listAccountGroupDisplay, 0, limit * pageGroup)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], name: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), label: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupNameKey], 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]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]) })))))
-                            // </AccountListContent>
-                            );
-                        } },
-                        React.createElement(AccountListTitleGroup, { onClick: () => setOpenGroup(!openGroup) },
-                            React.createElement("div", null, state.groupText || 'Account group'),
-                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", 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: () => {
-                            var _a;
-                            return (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", onScrollFrame: values => {
-                                    if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
-                                        setPage(page + 1);
-                                    }
-                                } },
-                                React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[userIdKey], name: item === null || item === void 0 ? void 0 : item[userIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[userIdKey]) }))))));
-                        } },
-                        React.createElement(AccountListTitleGroup, { onClick: () => setOpenAccount(!openAccount) },
-                            React.createElement("div", null, state.accountText || 'Account'),
-                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
-                                    transform: openAccount ? 'rotate(180deg)' : 'rotate(0deg)',
-                                    transition: '0.3s',
-                                } }))),
-                    React.createElement("div", { id: "account-list" }))) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", style: { marginTop: 15 }, onScrollFrame: values => {
-                        if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
-                            setPage(page + 1);
-                        }
-                    } },
-                    React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[userIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[userIdKey]) })))))))),
-        React.createElement(AccountListFooter, null,
-            React.createElement(Button, { onClick: () => handleCancel() }, state.cancelText || 'Cancel'),
-            React.createElement(Button, { type: "primary", onClick: () => handleApply() }, state.applyText || 'Apply'))));
+    return (_jsxs(AccountListWrapper, { children: [_jsx(AccountListBody, { children: _jsxs("form", { ref: formListRef, id: "form-account-list", children: [_jsx(Input, { value: searchText, placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2" }), onAfterChange: value => handleSearch(value), debounce: 500 }), state?.type === 'group' ? (_jsxs(_Fragment, { children: [_jsx(Dropdown, { open: openGroup, getPopupContainer: () => document.getElementById('account-group-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (
+                                    // <AccountListContent>
+                                    _jsx(Scrollbars, { width: "100%", autoHeight: true, autoHeightMax: 160, onScrollFrame: values => {
+                                            if (values.top > POSITION_TOP &&
+                                                limit * pageGroup < listAccountGroupDisplay?.length) {
+                                                setPageGroup(pageGroup + 1);
+                                            }
+                                        }, children: _jsx(AccountListContent, { children: slice(listAccountGroupDisplay, 0, limit * pageGroup)?.map(item => (_jsx(AccountItem, { name: item?.[state?.groupIdKey], checked: tempSelected.includes(item?.[state?.groupIdKey]), label: item?.[state?.groupNameKey], disabled: disabledAccount?.includes(item?.[state?.groupIdKey]), onChange: e => handleTempSelected(e.target.checked, item?.[state?.groupIdKey]) }, item?.[state?.groupIdKey]))) }) })
+                                    // </AccountListContent>
+                                    ), children: _jsxs(AccountListTitleGroup, { onClick: () => setOpenGroup(!openGroup), children: [_jsx("div", { children: state.groupText || 'Account group' }), _jsx(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
+                                                    transform: openGroup ? 'rotate(180deg)' : 'rotate(0deg)',
+                                                    transition: '0.3s',
+                                                } })] }) }), _jsx("div", { id: "account-group-list" }), _jsx(Dropdown, { open: openAccount, getPopupContainer: () => document.getElementById('account-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", onScrollFrame: values => {
+                                            if (values.top > POSITION_TOP && limit * page < usersDisplay?.length) {
+                                                setPage(page + 1);
+                                            }
+                                        }, children: _jsx(AccountListContent, { children: slice(usersDisplay, 0, limit * page)?.map(item => (_jsx(AccountItem, { name: item?.[userIdKey], checked: tempSelected.includes(item?.[userIdKey]), label: item?.[nameKey], disabled: disabledAccount?.includes(item?.[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item?.[userIdKey]) }, item?.[userIdKey]))) }) })), children: _jsxs(AccountListTitleGroup, { onClick: () => setOpenAccount(!openAccount), children: [_jsx("div", { children: state.accountText || 'Account' }), _jsx(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
+                                                    transform: openAccount ? 'rotate(180deg)' : 'rotate(0deg)',
+                                                    transition: '0.3s',
+                                                } })] }) }), _jsx("div", { id: "account-list" })] })) : (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", style: { marginTop: 15 }, onScrollFrame: values => {
+                                if (values.top > POSITION_TOP && limit * page < usersDisplay?.length) {
+                                    setPage(page + 1);
+                                }
+                            }, children: _jsx(AccountListContent, { children: slice(usersDisplay, 0, limit * page)?.map(item => (_jsx(AccountItem, { checked: tempSelected.includes(item?.[userIdKey]), label: item?.[nameKey], disabled: disabledAccount?.includes(item?.[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item?.[userIdKey]) }, item?.[userIdKey]))) }) }))] }) }), _jsxs(AccountListFooter, { children: [_jsx(Button, { onClick: () => handleCancel(), children: state.cancelText || 'Cancel' }), _jsx(Button, { type: "primary", onClick: () => handleApply(), children: state.applyText || 'Apply' })] })] }));
 };
 export default memo(AccountList);

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

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const AccountListOnlyOne: () => React.JSX.Element;
+declare const AccountListOnlyOne: () => import("react/jsx-runtime").JSX.Element;
 export default AccountListOnlyOne;

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { slice } from 'lodash';
 // Components
 import { AccountListContent, AccountListTitleGroup, AccountListWrapper } from './styled';
@@ -9,7 +10,6 @@ import { SearchIcon } from '../../icons';
 import { Dropdown } from '../Dropdown';
 import AccountItemOnlyOne from './AccountItemOnlyOne';
 const AccountListOnlyOne = () => {
-    var _a;
     const { state, dispatch } = useContext(SelectAccountContext);
     const { usersSelected, usersDisplay, disabledAccount, nameKey, userIdKey, searchText, listAccountGroupDisplay, limit = 10, } = state;
     // States
@@ -27,51 +27,29 @@ const AccountListOnlyOne = () => {
             dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: '' });
         }
     };
-    return (React.createElement(AccountListWrapper, null,
-        React.createElement("div", null,
-            React.createElement(Input, { value: searchText, placeholder: "Search", suffix: React.createElement(SearchIcon, { color: "#595959" }), onAfterChange: value => handleSearch(value), debounce: 500, style: { borderStyle: 'none' } }),
-            (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: () => {
-                        var _a;
-                        return (
-                        // <AccountListContent>
-                        React.createElement(Scrollbars, { width: "100%", autoHeight: true, autoHeightMax: 160, onScrollFrame: values => {
-                                if (values.top > POSITION_TOP &&
-                                    limit * pageGroup < (listAccountGroupDisplay === null || listAccountGroupDisplay === void 0 ? void 0 : listAccountGroupDisplay.length)) {
-                                    setPageGroup(pageGroup + 1);
-                                }
-                            } },
-                            React.createElement(AccountListContent, null, (_a = slice(listAccountGroupDisplay, 0, limit * pageGroup)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItemOnlyOne, { key: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], name: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], checked: usersSelected.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), label: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupNameKey], 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]), onClick: () => handleClick(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]) })))))
-                        // </AccountListContent>
-                        );
-                    } },
-                    React.createElement(AccountListTitleGroup, { onClick: () => setOpenGroup(!openGroup) },
-                        React.createElement("div", null, state.groupText || 'Account group'),
-                        React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", 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: () => {
-                        var _a;
-                        return (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", onScrollFrame: values => {
-                                if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
-                                    setPage(page + 1);
-                                }
-                            } },
-                            React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItemOnlyOne, { key: item === null || item === void 0 ? void 0 : item[userIdKey], name: item === null || item === void 0 ? void 0 : item[userIdKey], checked: usersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onClick: () => handleClick(item === null || item === void 0 ? void 0 : item[userIdKey]) }))))));
-                    } },
-                    React.createElement(AccountListTitleGroup, { onClick: () => setOpenAccount(!openAccount) },
-                        React.createElement("div", null, state.accountText || 'Account'),
-                        React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
-                                transform: openAccount ? 'rotate(180deg)' : 'rotate(0deg)',
-                                transition: '0.3s',
-                            } }))),
-                React.createElement("div", { id: "account-list" }))) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", style: { marginTop: 8 }, onScrollFrame: values => {
-                    if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
-                        setPage(page + 1);
-                    }
-                } },
-                React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItemOnlyOne, { key: item === null || item === void 0 ? void 0 : item[userIdKey], checked: usersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onClick: () => handleClick(item === null || item === void 0 ? void 0 : item[userIdKey]) })))))))));
+    return (_jsx(AccountListWrapper, { children: _jsxs("div", { children: [_jsx(Input, { value: searchText, placeholder: "Search", suffix: _jsx(SearchIcon, { color: "#595959" }), onAfterChange: value => handleSearch(value), debounce: 500, style: { borderStyle: 'none' } }), state?.type === 'group' ? (_jsxs(_Fragment, { children: [_jsx(Dropdown, { open: openGroup, getPopupContainer: () => document.getElementById('account-group-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (
+                            // <AccountListContent>
+                            _jsx(Scrollbars, { width: "100%", autoHeight: true, autoHeightMax: 160, onScrollFrame: values => {
+                                    if (values.top > POSITION_TOP &&
+                                        limit * pageGroup < listAccountGroupDisplay?.length) {
+                                        setPageGroup(pageGroup + 1);
+                                    }
+                                }, children: _jsx(AccountListContent, { children: slice(listAccountGroupDisplay, 0, limit * pageGroup)?.map(item => (_jsx(AccountItemOnlyOne, { name: item?.[state?.groupIdKey], checked: usersSelected.includes(item?.[state?.groupIdKey]), label: item?.[state?.groupNameKey], disabled: disabledAccount?.includes(item?.[state?.groupIdKey]), onClick: () => handleClick(item?.[state?.groupIdKey]) }, item?.[state?.groupIdKey]))) }) })
+                            // </AccountListContent>
+                            ), children: _jsxs(AccountListTitleGroup, { onClick: () => setOpenGroup(!openGroup), children: [_jsx("div", { children: state.groupText || 'Account group' }), _jsx(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
+                                            transform: openGroup ? 'rotate(180deg)' : 'rotate(0deg)',
+                                            transition: '0.3s',
+                                        } })] }) }), _jsx("div", { id: "account-group-list" }), _jsx(Dropdown, { open: openAccount, getPopupContainer: () => document.getElementById('account-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", onScrollFrame: values => {
+                                    if (values.top > POSITION_TOP && limit * page < usersDisplay?.length) {
+                                        setPage(page + 1);
+                                    }
+                                }, children: _jsx(AccountListContent, { children: slice(usersDisplay, 0, limit * page)?.map(item => (_jsx(AccountItemOnlyOne, { name: item?.[userIdKey], checked: usersSelected.includes(item?.[userIdKey]), label: item?.[nameKey], disabled: disabledAccount?.includes(item?.[userIdKey]), onClick: () => handleClick(item?.[userIdKey]) }, item?.[userIdKey]))) }) })), children: _jsxs(AccountListTitleGroup, { onClick: () => setOpenAccount(!openAccount), children: [_jsx("div", { children: state.accountText || 'Account' }), _jsx(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
+                                            transform: openAccount ? 'rotate(180deg)' : 'rotate(0deg)',
+                                            transition: '0.3s',
+                                        } })] }) }), _jsx("div", { id: "account-list" })] })) : (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", style: { marginTop: 8 }, onScrollFrame: values => {
+                        if (values.top > POSITION_TOP && limit * page < usersDisplay?.length) {
+                            setPage(page + 1);
+                        }
+                    }, children: _jsx(AccountListContent, { children: slice(usersDisplay, 0, limit * page)?.map(item => (_jsx(AccountItemOnlyOne, { checked: usersSelected.includes(item?.[userIdKey]), label: item?.[nameKey], disabled: disabledAccount?.includes(item?.[userIdKey]), onClick: () => handleClick(item?.[userIdKey]) }, item?.[userIdKey]))) }) }))] }) }));
 };
 export default AccountListOnlyOne;

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

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

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 // Context
 import { SelectAccountContext } from './context';
 // Components
@@ -8,7 +9,6 @@ import { Icon, Popover } from '../../atoms';
 import AccountList from './AccountList';
 import AccountListOnlyOne from './AccountListOnlyOne';
 const ButtonAdd = () => {
-    var _a;
     const { state, dispatch } = useContext(SelectAccountContext);
     const { onlyOne } = state;
     const handleClose = visible => {
@@ -21,12 +21,8 @@ const ButtonAdd = () => {
             dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: '' });
         }
     };
-    return (React.createElement(Popover, { open: state.openAccountList, content: onlyOne ? React.createElement(AccountListOnlyOne, null) : React.createElement(AccountList, null), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true, onOpenChange: handleClose, afterOpenChange: handleAfterClose, placement: "bottomLeft" },
-        React.createElement(ButtonAddStyled, { className: "select-account-btn-add", style: Object.assign({}, (((_a = state === null || state === void 0 ? void 0 : state.styles) === null || _a === void 0 ? void 0 : _a.btnAdd) || {})), disabled: state.disabled || !state.isInitDone, onClick: () => state.openAccountList
+    return (_jsx(Popover, { open: state.openAccountList, content: onlyOne ? _jsx(AccountListOnlyOne, {}) : _jsx(AccountList, {}), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true, onOpenChange: handleClose, afterOpenChange: handleAfterClose, placement: "bottomLeft", children: _jsxs(ButtonAddStyled, { className: "select-account-btn-add", style: { ...(state?.styles?.btnAdd || {}) }, disabled: state.disabled || !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" }, state.addText || 'Add account'))));
+                : dispatch({ type: 'OPEN_ACCOUNT_LIST' }), children: [_jsx("div", { className: "icon", children: _jsx(Icon, { type: "icon-ants-add", size: 10 }) }), _jsx("div", { className: "name", children: state.addText || 'Add account' })] }) }));
 };
 export default ButtonAdd;

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

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

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 // Context
 import { SelectAccountContext } from './context';
 // Components
@@ -12,24 +13,21 @@ const ButtonViewAll = () => {
     const handleRemove = ({ userId, index }) => {
         dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
     };
-    const contentViewAll = () => (React.createElement(ViewAllWrapper, null,
-        state.showOwnerDefault && React.createElement(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }),
-        state.type === 'group'
-            ? usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
-                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) => {
-                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, { className: "select-account-view-all", style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.btnViewAll) || {})), type: "text" }, "View all")));
+    const contentViewAll = () => (_jsxs(ViewAllWrapper, { children: [state.showOwnerDefault && _jsx(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }), state.type === 'group'
+                ? usersSelected?.map((id, index) => {
+                    const group = state.listAccountGroup.find(u => u?.[state?.groupIdKey] === id);
+                    if (!group) {
+                        const user = users.find(u => u?.[userIdKey] === id);
+                        if (!user)
+                            return null;
+                        return (_jsx(AccountChip, { user: user, value: user?.[userIdKey], label: user?.[nameKey], onRemove: () => handleRemove({ userId: user?.[userIdKey], index }) }, user?.[userIdKey]));
+                    }
+                    return (_jsx(AccountChip, { user: group, value: group?.[state.groupIdKey], label: group?.[state?.groupNameKey], onRemove: () => handleRemove({ userId: group?.[state.groupIdKey], index }) }, group?.[state.groupIdKey]));
+                })
+                : usersSelected?.map((id, index) => {
+                    const user = users.find(u => u?.[userIdKey] === id);
+                    return (_jsx(AccountChip, { user: user, value: user?.[userIdKey], label: user?.[nameKey], onRemove: () => handleRemove({ userId: user?.[userIdKey], index }) }, user?.[userIdKey]));
+                })] }));
+    return (_jsx(Popover, { content: () => contentViewAll(), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true, children: _jsx(ButtonViewAllStyled, { className: "select-account-view-all", style: { ...(styles?.btnViewAll || {}) }, type: "text", children: "View all" }) }));
 };
 export default ButtonViewAll;

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 // Context
 import { SelectAccountContext } from './context';
 // Components
@@ -8,36 +9,30 @@ 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, className, styles } = state;
     const handleRemove = ({ userId, index }) => {
         dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
     };
-    return (React.createElement(Wrapper, { className: `select-account ${className}`, style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.wrapper) || {})), disabled: !!disabled },
-        state.showOwnerDefault && React.createElement(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }),
-        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 === null || users === void 0 ? void 0 : users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+    return (_jsxs(Wrapper, { className: `select-account ${className}`, style: { ...(styles?.wrapper || {}) }, disabled: !!disabled, children: [state.showOwnerDefault && _jsx(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }), state.type === 'group'
+                ? usersSelected?.map((id, index) => {
+                    if (index >= state?.limitShow)
+                        return null;
+                    const group = state?.listAccountGroup?.find(u => u?.[state?.groupIdKey] === id);
+                    if (!group) {
+                        const user = users?.find(u => u?.[userIdKey] === id);
+                        if (!user)
+                            return null;
+                        return (_jsx(AccountChip, { user: user, value: user?.[userIdKey], label: user?.[nameKey], onRemove: () => handleRemove({ userId: user?.[userIdKey], index }) }, user?.[userIdKey]));
+                    }
+                    return (_jsx(AccountChip, { user: group, value: group?.[state.groupIdKey], label: group?.[state?.groupNameKey], onRemove: () => handleRemove({ userId: group?.[state.groupIdKey], index }) }, group?.[state.groupIdKey]));
+                })
+                : usersSelected?.map((id, index) => {
+                    if (index >= state?.limitShow)
+                        return null;
+                    const user = users?.find(u => 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 === null || users === void 0 ? void 0 : 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 }) }));
-            }),
-        ((_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) && (!(state === null || state === void 0 ? void 0 : state.onlyOne) || !(usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.length)) && React.createElement(ButtonAdd, null)));
+                    return (_jsx(AccountChip, { user: user, value: user?.[userIdKey], label: user?.[nameKey], onRemove: () => handleRemove({ userId: user?.[userIdKey], index }) }, user?.[userIdKey]));
+                }), state?.usersSelected?.length > state?.limitShow && _jsx(ButtonViewAll, {}), !state?.isViewMode && (!state?.onlyOne || !usersSelected?.length) && _jsx(ButtonAdd, {})] }));
 };

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

@@ -1,16 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { createContext, useEffect, useMemo, useReducer, useRef } from 'react';
+import { createContext, useEffect, useMemo, useReducer, useRef } from 'react';
 import { uniq, get } from 'lodash';
 // Reducer
 import { initialState, reducer } from './reducer';
@@ -24,8 +14,12 @@ const initialContext = {
 };
 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 { children, initData, ...rest } = props;
+    const [state, dispatch] = useReducer(reducer, {
+        ...initialState,
+        ...rest,
+        usersSelected: [...(uniq(initData) || [])],
+    });
     const changedRef = useRef(0);
     const formListRef = useRef(null);
     const contextValue = useMemo(() => ({ formListRef, state, dispatch }), [formListRef, state, dispatch]);
@@ -44,11 +38,11 @@ export const SelectAccountProvider = props => {
         dispatch({ type: 'INIT' });
     }, []);
     useEffect(() => {
-        dispatch({ type: 'UPDATE', payload: Object.assign({}, rest) });
+        dispatch({ type: 'UPDATE', payload: { ...rest } });
     }, [rest]);
     useEffect(() => {
         if (!isLoading && state.serviceAccounts) {
-            const newData = get(data, (state === null || state === void 0 ? void 0 : state.dataAccountsKey) || '', Array.isArray(data) ? data : []);
+            const newData = get(data, state?.dataAccountsKey || '', Array.isArray(data) ? data : []);
             dispatch({
                 type: 'UPDATE_USERS',
                 payload: newData,
@@ -68,5 +62,5 @@ export const SelectAccountProvider = props => {
     //     changedRef.current--;
     //   }
     // }, [usersSelected]);
-    return (React.createElement(SelectAccountContext.Provider, { value: contextValue }, children));
+    return (_jsx(SelectAccountContext.Provider, { value: contextValue, children: children }));
 };

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

@@ -15,7 +15,6 @@ export const initialState = {
     type: 'default',
 };
 export const reducer = (state, action) => produce(state, draft => {
-    var _a, _b;
     // console.log(action.type, { payload: action?.payload || undefined, state });
     switch (action.type) {
         case 'INIT': {
@@ -29,8 +28,8 @@ export const reducer = (state, action) => produce(state, draft => {
             break;
         }
         case 'UPDATE': {
-            Object.keys((action === null || action === void 0 ? void 0 : action.payload) || {}).forEach(key => {
-                draft[key] = action === null || action === void 0 ? void 0 : action.payload[key];
+            Object.keys(action?.payload || {}).forEach(key => {
+                draft[key] = action?.payload[key];
             });
             break;
         }
@@ -124,10 +123,9 @@ export const reducer = (state, action) => produce(state, draft => {
         case 'UPDATE_SEARCH_TEXT':
             draft.searchText = action.payload;
             if (draft.searchType === 'client') {
-                const userFilters = (_a = draft.users) === null || _a === void 0 ? void 0 : _a.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;
-                });
+                const userFilters = draft.users?.filter(user => user?.[draft?.nameKey]
+                    ?.toLowerCase()
+                    ?.indexOf(action.payload?.toLowerCase().trim()) !== -1);
                 draft.usersDisplay = userFilters;
             }
             else if (draft.searchType === 'server') {
@@ -136,10 +134,9 @@ export const reducer = (state, action) => produce(state, draft => {
                 };
             }
             if (draft.type === 'group') {
-                const groupFilters = (_b = draft.listAccountGroup) === null || _b === void 0 ? void 0 : _b.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;
-                });
+                const groupFilters = draft.listAccountGroup?.filter(group => group?.[draft?.groupNameKey]
+                    ?.toLowerCase()
+                    ?.indexOf(action.payload?.toLowerCase().trim()) !== -1);
                 draft.listAccountGroupDisplay = groupFilters;
             }
             break;

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

@@ -4,6 +4,9 @@ import { useQuery } from '@tanstack/react-query';
 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 })], 
+export const useGetAbstractUsers = ({ queryOptions = {}, params = {}, search = '', queryFn = AbstractService.lookupInfo.callApi.c_user_id, enabled = true, }) => useQuery({
+    queryKey: [QUERY_KEYS.GET_ABSTRACT_USERS, JSON.stringify({ params, search })],
     // initialData: defaultDataSource,
-    queryFn: () => queryFn({ params, search }) }, queryOptions));
+    queryFn: () => queryFn({ params, search }),
+    ...queryOptions,
+});