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

package/es/components/molecules/SearchPopover/constants.js

@@ -0,0 +1,27 @@
+export const FIELD_DATA_TYPE = {
+    NUMBER: {
+        label: 'Number',
+        name: 'number',
+        value: 2,
+    },
+    STRING: {
+        label: 'String',
+        name: 'string',
+        value: 1,
+    },
+    TEXT: {
+        label: 'Text',
+        name: 'text',
+        value: 1,
+    },
+    DATE_TIME: {
+        label: 'Datetime',
+        name: 'datetime',
+        value: 5,
+    },
+    BOOLEAN: {
+        label: 'Boolean',
+        name: 'boolean',
+        value: 17,
+    },
+};

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

@@ -0,0 +1,3 @@
+export { PopoverAddField, PopoverSelect } from './components';
+export { SearchPopover } from './SearchPopover';
+export type { SearchPopoverProps, PopoverAddFieldProps } from './types';

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

@@ -0,0 +1,2 @@
+export { PopoverAddField, PopoverSelect } from './components';
+export { SearchPopover } from './SearchPopover';

package/es/components/molecules/SearchPopover/styles.scss

@@ -0,0 +1,31 @@
+.search-popover-overlay {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 0;
+
+      .antsomi-input-group-wrapper {
+        padding: 8px 10px;
+        border-bottom: 1px solid var(--divider-1);
+
+        .antsomi-input {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        .antsomi-input-group-addon {
+          border: none;
+          background: transparent;
+          font-size: 20px;
+          padding: 0;
+          min-width: 25px;
+
+          > i {
+            font-size: 24px;
+            color: #595959;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/es/components/molecules/SearchPopover/types.d.ts

@@ -0,0 +1,30 @@
+import { PopoverProps } from 'antd';
+import { InputProps } from '../../atoms/Input';
+import React, { PropsWithChildren } from 'react';
+export type SearchPopoverProps = PropsWithChildren<{
+    inputSearchProps?: InputProps;
+} & PopoverProps>;
+export type Option = {
+    key: string;
+    label: React.ReactNode | ((info: {
+        selected: boolean;
+    }) => React.ReactNode);
+};
+export type Field = Option & {
+    dataType?: string | number;
+};
+export type PopoverSelectProps<TOption extends Option = Option> = SearchPopoverProps & Partial<{
+    options: TOption[];
+    selected: string[];
+    onCancel: () => void;
+    onApply: (selected: string[]) => void;
+    children: React.ReactNode;
+    showAllLabel: string;
+    showSelectedLabel: string;
+    deselectAllLabel: string;
+    selectAllLabel: string;
+    onSearchPredicate: (option: TOption) => boolean;
+}>;
+export type PopoverAddFieldProps = Omit<PopoverSelectProps, 'options'> & {
+    fields: Field[];
+};

package/es/components/molecules/SearchPopover/types.js

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

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const renderIconField: (dataType?: string | number) => React.JSX.Element;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Icon } from '../../atoms/Icon';
+import { FIELD_DATA_TYPE } from './constants';
+export const renderIconField = (dataType = FIELD_DATA_TYPE.STRING.name) => {
+    switch (dataType) {
+        case FIELD_DATA_TYPE.STRING.name:
+        case FIELD_DATA_TYPE.STRING.value:
+        case FIELD_DATA_TYPE.TEXT.name:
+        case FIELD_DATA_TYPE.TEXT.value:
+            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+        case FIELD_DATA_TYPE.BOOLEAN.name:
+        case FIELD_DATA_TYPE.BOOLEAN.value:
+            return React.createElement(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.NUMBER.name:
+        case FIELD_DATA_TYPE.NUMBER.value:
+            return React.createElement(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.DATE_TIME.name:
+        case FIELD_DATA_TYPE.DATE_TIME.value:
+            return React.createElement(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
+        default:
+            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+    }
+};

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, Typography } from '../../atoms';
+const AccountChip = props => {
+    const { user, label, value, disabled, isViewMode, isError, errorMsg, onRemove } = props;
+    const { state } = useContext(SelectAccountContext);
+    const { disabledAccount, userIdKey, styles } = 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, { 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" }))))));
+};
+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,56 @@
+import React, { useContext, useState } from 'react';
+import { AccountListBody, AccountListContent, AccountListFooter, AccountListTitleGroup, AccountListWrapper, CheckboxStyled, } from './styled';
+import { Button, Icon, Input, Scrollbars, Typography } from '../../atoms';
+import { Dropdown } from '../Dropdown';
+import { SelectAccountContext } from './context/SelectAccountContext';
+const AccountList = () => {
+    const { formListRef, state, dispatch } = useContext(SelectAccountContext);
+    const { usersSelected, usersDisplay, disabledAccount, nameKey, userIdKey, searchText, listAccountGroupDisplay, } = state;
+    const [openGroup, setOpenGroup] = useState(true);
+    const [openAccount, setOpenAccount] = useState(true);
+    const handleCancel = () => {
+        dispatch({ type: 'CLOSE_ACCOUNT_LIST' });
+    };
+    const handleApply = () => {
+        dispatch({ type: 'APPLY', payload: { formRef: formListRef } });
+    };
+    const handleSearch = text => {
+        dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: text });
+    };
+    const TextLabel = ({ children }) => (React.createElement(Typography.Text, { ellipsis: { tooltip: { title: children } }, style: { maxWidth: '220px' } }, children));
+    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: () => (
+                        // <AccountListContent>
+                        React.createElement(Scrollbars, { style: {
+                                width: '100%',
+                                height: 160,
+                            } }, 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], name: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], value: typeof (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: usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]) },
+                            React.createElement(TextLabel, null, item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupNameKey])))))
+                        // </AccountListContent>
+                        ) },
+                        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], name: item === null || item === void 0 ? void 0 : item[userIdKey], value: typeof (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: usersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]) },
+                            React.createElement(TextLabel, null, 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], name: item === null || item === void 0 ? void 0 : item[userIdKey], value: typeof (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: usersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]) },
+                    React.createElement(TextLabel, null, 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,30 @@
+// 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 = () => {
+    var _a;
+    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, 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
+                ? 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,35 @@
+// 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, styles } = state;
+    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")));
+};
+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,43 @@
+// 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, 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);
+                    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)));
+};

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,69 @@
+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, useRef } from 'react';
+import { uniq, get } from 'lodash';
+// Reducer
+import { initialState, reducer } from './reducer';
+// Hooks
+import { useGetAbstractUsers } from '../hook';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+const initialContext = {
+    formListRef: { current: null },
+    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 changedRef = useRef(0);
+    const formListRef = useRef(null);
+    const contextValue = useMemo(() => ({ formListRef, state, dispatch }), [formListRef, 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 : '',
+    });
+    useDeepCompareEffect(() => {
+        changedRef.current++;
+        dispatch({ type: 'UPDATE_USERS_SELECTED', payload: [...(uniq(initData) || [])] });
+    }, [initData]);
+    useEffect(() => {
+        dispatch({ type: 'INIT' });
+    }, []);
+    useEffect(() => {
+        dispatch({ type: 'UPDATE', payload: Object.assign({}, rest) });
+    }, [rest]);
+    useEffect(() => {
+        if (!isLoading && state.serviceAccounts) {
+            const newData = get(data, (state === null || state === void 0 ? void 0 : state.dataAccountsKey) || '', Array.isArray(data) ? data : []);
+            dispatch({
+                type: 'UPDATE_USERS',
+                payload: newData,
+            });
+            dispatch({ type: 'UPDATE_USERS_DISPLAY', payload: newData });
+        }
+    }, [data]);
+    // Callback OnChange
+    useEffect(() => {
+        if (isInitDone && typeof onChange === 'function' && changedRef.current <= 0) {
+            onChange(usersSelected, state.users.filter(user => usersSelected.includes(user[state.userIdKey])));
+        }
+        if (changedRef.current > 0) {
+            changedRef.current--;
+        }
+    }, [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,119 @@
+import produce from 'immer';
+import { parseValue } from '../utils';
+import { intersection, union } from 'lodash';
+export const initialState = {
+    isInitDone: false,
+    searchText: '',
+    openAccountList: false,
+    limitShow: 10,
+    onlyOne: false,
+    users: [],
+    usersDisplay: [],
+    listAccountGroupDisplay: [],
+    paramsFetchUsers: {},
+    usersSelected: [],
+    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': {
+            if (draft.type === 'group') {
+                draft.listAccountGroupDisplay = draft.listAccountGroup;
+            }
+            draft.paramsFetchUsers = draft.paramsAccounts || {};
+            draft.paramsFetchUsers = draft.paramsAccounts || {};
+            draft.usersDisplay = draft.users || [];
+            draft.isInitDone = true;
+            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];
+            });
+            break;
+        }
+        case 'OPEN_ACCOUNT_LIST':
+            draft.openAccountList = true;
+            break;
+        case 'CLOSE_ACCOUNT_LIST':
+            draft.openAccountList = false;
+            break;
+        case 'APPLY': {
+            const { formRef } = action.payload;
+            if (!formRef.current)
+                break;
+            const form = formRef.current;
+            const elements = Array.from(form.elements);
+            // Store the state of disabled elements
+            const disabledElements = [];
+            // Temporarily enable disabled elements
+            for (const element of elements) {
+                if (element.disabled) {
+                    disabledElements.push(element);
+                    element.disabled = false;
+                }
+            }
+            const formData = new FormData(form);
+            // Restore the state of disabled elements
+            for (const element of disabledElements) {
+                element.disabled = true;
+            }
+            const entriesFormData = Object.fromEntries(formData);
+            const selected = Object.keys(Object.fromEntries(formData)).map(key => parseValue(key, entriesFormData[key].toString()));
+            draft.usersSelected = [
+                ...(union(intersection(draft.usersSelected, selected), selected) || []),
+            ];
+            draft.openAccountList = false;
+            break;
+        }
+        case 'UPDATE_USERS':
+            if (Array.isArray(action.payload)) {
+                draft.users = action.payload;
+            }
+            break;
+        case 'UPDATE_USERS_DISPLAY':
+            if (Array.isArray(action.payload)) {
+                draft.usersDisplay = action.payload;
+            }
+            break;
+        case 'UPDATE_USERS_SELECTED':
+            if (Array.isArray(action.payload)) {
+                draft.usersSelected = action.payload;
+            }
+            break;
+        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;
+                });
+                draft.usersDisplay = userFilters;
+            }
+            else if (draft.searchType === 'server') {
+                draft.paramsFetchUsers = {
+                    search: action.payload,
+                };
+            }
+            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;
+                });
+                draft.listAccountGroupDisplay = groupFilters;
+            }
+            break;
+        case 'REMOVE_USER':
+            {
+                const { index } = action.payload;
+                const clone = [...draft.usersSelected];
+                const newSelected = [...clone.slice(0, index), ...clone.slice(index + 1)];
+                draft.usersSelected = newSelected;
+            }
+            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,23 @@
+// 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',
+    className: '',
+    styles: {},
+};
+export default SelectAccount;