@antscorp/antsomi-ui 1.3.5-beta.367 → 1.3.5-beta.369

package/es/assets/css/main.scss

@@ -1,26 +1,6 @@
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
-
-  --border-primary: #005eb8;
-  --border-normal: #b8cfe6;
-  --border-hover: #81bcf4;
-  --border-active: #005eb8;
-  --border-disable: #d4d4d4;
-
-  --divider-1: #e5e5e5;
-  --divider-2: #d4d4d4;
-  --divider-3: #bebebe;
 }
 
-*,
-*:before,
-*:after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
 
-.rc-virtual-list-scrollbar {
-  width: 4px !important;
-}

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

@@ -5,7 +5,7 @@ import { SelectAccountContext } from './context';
 // Components
 import { AccountChipWrapper } from './styled';
 import Icon from '@antscorp/icons';
-import { Tooltip } from '../../atoms';
+import { Tooltip, Typography } from '../../atoms';
 const AccountChip = props => {
     const { user, label, value, disabled, isViewMode, isError, errorMsg, onRemove } = props;
     const { state } = useContext(SelectAccountContext);
@@ -18,7 +18,7 @@ const AccountChip = props => {
     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("div", { className: "name" }, label),
+            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" }))))));
 };

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

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import { AccountListBody, AccountListContent, AccountListFooter, AccountListTitleGroup, AccountListWrapper, CheckboxStyled, } from './styled';
-import { Button, Icon, Input } from '../../atoms';
+import { Button, Icon, Input, Typography } from '../../atoms';
 import { Dropdown } from '../Dropdown';
 import { SelectAccountContext } from './context/SelectAccountContext';
 const AccountList = () => {
@@ -20,11 +20,13 @@ const AccountList = () => {
     const handleSearch = text => {
         dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: text });
     };
+    const TextLabel = ({ children }) => (React.createElement(Typography.Text, { ellipsis: { tooltip: { title: children } }, style: { maxWidth: '230px' } }, children));
     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(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]) },
+                        React.createElement(TextLabel, null, 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: {
@@ -32,14 +34,16 @@ const AccountList = () => {
                                 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(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]) },
+                        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], 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("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]) },
+                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"))));

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

@@ -19,7 +19,7 @@ const ButtonAdd = () => {
             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 },
+    return (React.createElement(Popover, { open: state.openAccountList, content: React.createElement(AccountList, null), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, onOpenChange: handleClose, afterOpenChange: handleAfterClose },
         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) || {})), loading: !state.isInitDone, onClick: () => state.openAccountList
                 ? dispatch({ type: 'CLOSE_ACCOUNT_LIST' })
                 : dispatch({ type: 'OPEN_ACCOUNT_LIST' }) },

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

@@ -22,6 +22,7 @@ export const AccountChipWrapper = styled.div `
     margin: 0px;
     padding: 0px;
 
+    line-height: 14px;
     width: 100%;
     text-align: center;
   }

package/es/components/organism/LeftMenu/hooks/usePermission.js

@@ -28,6 +28,9 @@ export const usePermission = () => {
                 type: 'menu-item-permission',
             },
         },
+        options: {
+            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId,
+        },
     });
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
         args: {

package/es/components/template/Layout/Layout.js

@@ -35,7 +35,7 @@ export const Layout = memo(props => {
     const { leftMenuProps, headerProps = {}, workspaceProps, contentWrapperProps, processingNotificationProps, children, onActiveMenuChange, } = props;
     const _a = workspaceProps || {}, { workspaceContentProps } = _a, restOfWorkspaceProps = __rest(_a, ["workspaceContentProps"]);
     const appConfig = useContextSelector(AppConfigContext, state => state);
-    const { auth, languageCode, appCode, permissionDomain: configPermissionDomain, env } = appConfig;
+    const { auth, languageCode, appCode, permissionDomain: configPermissionDomain, iamDomain: configIamDomain, env, } = appConfig;
     const { token, userId, portalId } = auth || {};
     const leftMenu = useLayoutStore(store => store.state.leftMenu);
     const header = useLayoutStore(store => store.state.header);
@@ -84,6 +84,8 @@ export const Layout = memo(props => {
     }, [appCode, configPermissionDomain, env, portalId]);
     const iamDomain = useMemo(() => {
         var _a;
+        if (configIamDomain)
+            return configIamDomain;
         /**
          * Check if appCode not exist and portalId is SANDBOX
          * then return production iam api
@@ -107,7 +109,7 @@ export const Layout = memo(props => {
                         p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
                         embeddedData: {},
                         INSIGHT_U_OGS: 'uogs',
-                    } }) }), accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: !!((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
+                    } }) }), accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: appCode || 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: !!((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
     }, [headerProps, iamDomain, permissionDomain, showAccountSelection]);
     const mergeHeaderProps = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), header), [initialHeaderProps, header]);
     const _b = useDeepCompareMemo(() => merge(cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)), [contentWrapperProps, contentWrapper]), { noPadding } = _b, mergeContentWrapperProps = __rest(_b, ["noPadding"]);

package/es/providers/AppConfigProvider/contexts/index.d.ts

@@ -10,6 +10,7 @@ export interface AppConfigProps {
     urlLogout?: string;
     /** Domain */
     permissionDomain?: string;
+    iamDomain?: string;
     setAppConfig: React.Dispatch<React.SetStateAction<AppConfigProviderProps>>;
 }
 export interface AppConfigProviderProps extends Omit<AppConfigProps, 'setAppConfig'> {

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -9,12 +9,30 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
-const { accent6, accent7, gray5, scrollBarSize } = THEME.token || {};
+const { accent6, accent7, gray5, scrollBarSize, bw3, bw4, bw5 } = THEME.token || {};
 export const GlobalStyle = () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
+      :root {
+        --divider-1: ${bw3};
+        --divider-2: ${bw4};
+        --divider-3: ${bw5};
+      }
+
+      *,
+      *:before,
+      *:after {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+
+      .rc-virtual-list-scrollbar {
+        width: 4px !important;
+      }
+
       /* Custom */
       .antsomi-scrollbar-hidden {
         -ms-overflow-style: none; /* for Internet Explorer, Edge */

package/es/queries/LeftMenu/index.js

@@ -25,12 +25,13 @@ export const useUpdateTask = () => {
 };
 export const useGetListMenu = (params) => {
     const { options, args } = params;
-    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU, args.params, args.auth], queryFn: () => getListMenu(params.args), onSuccess() { } }, options));
+    const { auth } = args || {};
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU, args.params, args.auth], queryFn: () => getListMenu(params.args), onSuccess() { }, enabled: !!(auth === null || auth === void 0 ? void 0 : auth.token) && !!auth.portalId && !!(auth === null || auth === void 0 ? void 0 : auth.userId) }, options));
 };
 export const useGetListMenuPermission = (params) => {
     const { options, args } = params;
     const { token, accountId, userId } = args.auth;
-    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU_PERMISSION, args.params, token, accountId, userId], queryFn: () => getListMenuPermission(params.args), onSuccess() { } }, options));
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU_PERMISSION, args.params, token, accountId, userId], queryFn: () => getListMenuPermission(params.args), onSuccess() { }, enabled: !!token && !!userId }, options));
 };
 export const useGetDestinationChannel = (params) => {
     const { options, args } = params;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.367",
+  "version": "1.3.5-beta.369",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -59,7 +59,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.35",
+    "@antscorp/icons": "0.27.36",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",