@antscorp/antsomi-ui 1.3.5-beta.355 → 1.3.5-beta.356

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -37,7 +37,7 @@ export const HeaderV2 = memo(props => {
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
-    const oidParam = urlParams.get('oid') || 'all';
+    const oidParam = urlParams.get('oid') || currentAccount || 'all';
     const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'all'}`}`);
     useLayoutEffect(() => {
         if (useURLParam)

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useEffect, useMemo, useState } from 'react';
-import { Avatar, Select } from 'antd';
+import { Avatar, AutoComplete } from 'antd';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { StyledSearchUserRoot, StyledSelectItem } from './styled';
 import { isEmail } from '@antscorp/antsomi-ui/es/utils';
@@ -16,6 +16,7 @@ import { useShareAccess } from '../../hooks';
 import produce from 'immer';
 import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
 import { updateObjAccessInfo } from '../../actions';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 export const SearchUser = (props) => {
     const { getUserInfo, placeholder } = props;
     const { state, dispatch } = useShareAccess();
@@ -71,7 +72,13 @@ export const SearchUser = (props) => {
     if (!allowEdit)
         return null;
     return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(Select, { showSearch: true, placeholder: placeholder || 'Add people and groups', value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (excludedUsers || []).map(user => ({
+        React.createElement(AutoComplete, { placeholder: placeholder || 'Add people and groups', value: searchTerm, onSearch: v => setSearchTerm(v), notFoundContent: isFetching ? (React.createElement(Spin, { style: {
+                    width: '100%',
+                    height: '40px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, indicatorSize: 28 })) : null, options: (excludedUsers || []).map(user => ({
                 value: user.user_id,
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),

package/es/components/organism/AccountSharing/AccountSharing.js

@@ -13,7 +13,7 @@ import axios from 'axios';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { CookiesProvider, useCookies } from 'react-cookie';
 // Icons
-import { Button, Flex, Popover, Spin } from '../../atoms';
+import { Button, Flex, Popover, Spin, Text, Typography } from '../../atoms';
 import CloseIcon from './icons/close';
 import SearchIcon from './icons/search';
 import { InnerCardStyled, InputSearchStyled, PackageSharingStyled, TriggerPopoverStyled, } from './styled';
@@ -38,7 +38,7 @@ export const AccountSharing = props => {
     var _a;
     const { permissionDomain = '', iamDomain = '', token = '', accountId = 0, networkId = 0, appCode = '', lang = 'en', translateData = DEFAULT_TRANSLATE_DATA, urlEditProfile = '', callbackGetInfoAccount, urlLogout = '', isShowSharing = false, isShareAccountAccess = false, u_ogs = '', callbackLogout, } = props;
     const selectedNetworkRef = useRef();
-    const [isShowSearchAccount, setIsShowSearchAccount] = useState(false);
+    // const [isShowSearchAccount, setIsShowSearchAccount] = useState(false);
     const [infoAccount, setInfoAccount] = useState({});
     const [listAccountSharing, setListAccountSharing] = useState([]);
     const [listAccountRecent, setListAccountRecent] = useState([]);
@@ -377,9 +377,9 @@ export const AccountSharing = props => {
         // }
         setLimitAccount(limitAccount + 1);
     });
-    const renderAccounts = (listAccountsRender, customStyle = {}) => (React.createElement("ul", { style: Object.assign(Object.assign({}, customStyle), { opacity: `${isShowLoading ? 0.2 : 1}` }) }, (listAccountsRender === null || listAccountsRender === void 0 ? void 0 : listAccountsRender.length) ? (listAccountsRender.map((account) => (React.createElement("li", { key: account.user_id, onClick: () => handleSwitchAccount(account) },
-        React.createElement("span", { className: "account-name" }, account.full_name),
-        React.createElement("span", { className: "account-number" }, formatUserId(account.user_id)))))) : (React.createElement("div", null, translateLang('KEY_NO_ACCOUNTS')))));
+    const renderAccounts = (listAccountsRender) => listAccountsRender === null || listAccountsRender === void 0 ? void 0 : listAccountsRender.map((account) => (React.createElement("li", { key: account.user_id, onClick: () => handleSwitchAccount(account) },
+        React.createElement(Typography.Text, { className: "account-name", ellipsis: { tooltip: true } }, account.full_name),
+        React.createElement(Text, { className: "account-number" }, formatUserId(account.user_id)))));
     return (React.createElement(CookiesProvider, null,
         React.createElement(Popover, { content: React.createElement(PackageSharingStyled, null,
                 React.createElement("div", { className: "div-info-account" }, infoAccount ? (React.createElement(React.Fragment, null,
@@ -421,24 +421,23 @@ export const AccountSharing = props => {
                                 alignItems: 'center',
                             } },
                             React.createElement("p", { style: { fontSize: 12, color: '#aaa', margin: 0 } }, "No networks")))))),
-                    step === STEP.SWITCH_ACCOUNT ? (isShowSharing ? (React.createElement("div", { className: "div-account-sharing mt-10" },
-                        React.createElement("div", { className: "div-cover-account" },
-                            isShowLoading ? React.createElement(Spin, null) : null,
-                            isShowSearchAccount || !(listAccountRecent === null || listAccountRecent === void 0 ? void 0 : listAccountRecent.length) ? (React.createElement(InputSearch, { value: accountSearch, onChange: value => setAccountSearch(value), onClickRemove: () => {
-                                    setAccountSearch('');
-                                    setIsShowSearchAccount(false);
-                                } })) : (React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: "div-recent-account" },
-                                    React.createElement("span", { className: "recent-title" }, "Recent accounts"),
-                                    React.createElement(SearchIcon, { onClick: () => setIsShowSearchAccount(true), className: "search-icon" })),
-                                renderAccounts(listAccountRecent, {
-                                    minHeight: 32,
-                                    maxHeight: 162,
-                                    padding: '0 10px',
-                                }))),
+                    step === STEP.SWITCH_ACCOUNT ? (isShowSharing ? (React.createElement("div", { className: "div-cover-account" },
+                        isShowLoading ? React.createElement(Spin, null) : null,
+                        React.createElement(InputSearch, { value: accountSearch, onChange: value => setAccountSearch(value), onClickRemove: () => {
+                                setAccountSearch('');
+                            } }),
+                        React.createElement("span", { className: "recent-title" }, "Recent accounts"),
+                        isShowLoading ? null : (React.createElement("div", { className: "no-account-title" },
+                            React.createElement("span", null, translateLang('KEY_NO_ACCOUNTS')))),
+                        React.createElement("ul", { style: { opacity: `${isShowLoading ? 0.2 : 1}` } },
+                            renderAccounts(listAccountRecent),
                             renderAccounts(listAccountSharing)))) : (React.createElement("hr", { style: { margin: '10px 0 20px', background: '#E3EEF1' } }))) : null),
                 React.createElement(Flex, { align: "center", justify: "center" },
-                    React.createElement(Button, { onClick: () => onClickButtonLogout(), icon: React.createElement(Icon, { type: "icon-ants-exit" }) }, translateLang('KEY_LOGOUT')))), arrow: false, trigger: ['click'], placement: "bottomRight", overlayInnerStyle: { backgroundColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_2, padding: '20px 15px' } },
+                    React.createElement(Button, { onClick: () => onClickButtonLogout(), icon: React.createElement(Icon, { type: "icon-ants-logout" }) }, translateLang('KEY_LOGOUT')))), arrow: false, trigger: ['click'], placement: "bottomRight", overlayInnerStyle: {
+                backgroundColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_2,
+                padding: '20px 15px',
+                width: '400px',
+            } },
             React.createElement(TriggerPopoverStyled, null,
                 React.createElement("div", { className: "brand-logo" }, (currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.logo) ? React.createElement("img", { src: currentNetwork.logo, alt: "" }) : null),
                 React.createElement("div", { className: "avatar" }, infoAccount ? React.createElement("img", { src: infoAccount.avatar, alt: "" }) : null)))));

package/es/components/organism/AccountSharing/styled.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const InputSearchStyled = styled.div `
@@ -57,6 +57,8 @@ export const InputSearchStyled = styled.div `
 
     &.remove-icon {
       /* right: 5px; */
+      width: 16px;
+      height: 16px;
       cursor: pointer;
       /* width: 12px; */
     }
@@ -113,6 +115,8 @@ export const PackageSharingStyled = styled.div `
     flex-direction: column;
     align-items: center;
     text-align: center;
+    width: 370px;
+
     .div-info-left {
       position: relative;
       margin-bottom: 10px;
@@ -126,6 +130,7 @@ export const PackageSharingStyled = styled.div `
       }
 
       .edit-profile {
+        text-decoration: none;
         background-color: white;
         border-radius: 100px;
         position: absolute;
@@ -153,84 +158,83 @@ export const PackageSharingStyled = styled.div `
       }
     }
   }
-  .div-account-sharing {
+  .div-cover-account {
     margin-top: 10px;
+    min-height: 185px;
+    position: relative;
 
-    .title-account-sharing {
+    .antsomi-spin {
+      position: absolute;
+      top: 50px;
+      width: 100%;
+      height: calc(100% - 50px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .recent-title {
+      display: none;
+      font-size: 11px;
       color: #999;
-      font-size: 12px;
-      margin-bottom: 10px;
+      padding: 10px 5px 0;
     }
-    .div-cover-account {
-      min-height: 185px;
-      position: relative;
 
-      .antsomi-spin {
-        position: absolute;
-        top: 50px;
-        width: 100%;
-        height: calc(100% - 50px);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .div-recent-account {
-        padding: 10px 15px;
+    &:has(li) .recent-title {
+      display: block;
+    }
+
+    .no-account-title {
+      position: absolute;
+      height: calc(100% - 30px);
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &:has(li) .no-account-title {
+      display: none;
+    }
+
+    ul {
+      overflow-y: auto;
+      max-height: 143px;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      li {
+        cursor: pointer;
+        padding: 8px 5px;
+        border-radius: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.borderRadius}px;
         display: flex;
-        align-items: center;
         justify-content: space-between;
-        position: relative;
+        align-items: center;
+        gap: 10px;
 
-        .recent-title {
-          font-size: 11px;
-          color: #999;
+        &:hover {
+          background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
         }
 
-        /* .search-icon {
-          fill: #666;
-          width: 18px;
-          cursor: pointer;
-        } */
-      }
-      ul {
-        overflow-y: auto;
-        max-height: 143px;
-        min-height: 108px;
-        list-style: none;
-        padding: 0;
-        margin: 10px 0 0 0;
-        li {
-          padding: 8px 5px;
-          border-radius: 10px;
-          cursor: pointer;
-          display: block;
+        .account-name {
+          color: #666;
+          font-size: 13px;
+          font-size: 13px;
+          font-weight: normal;
           overflow: hidden;
+          white-space: nowrap;
           text-overflow: ellipsis;
+          line-height: 1.4;
+          font-size: 13px;
+          font-weight: normal;
+          overflow: hidden;
           white-space: nowrap;
-          position: relative;
-          &:hover {
-            background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
-          }
+          text-overflow: ellipsis;
+          line-height: 1.4;
+        }
 
-          .account-name {
-            color: #666;
-            cursor: pointer;
-            display: block;
-            font-size: 13px;
-            font-weight: normal;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            line-height: 1.4;
-          }
-          .account-number {
-            color: #aaa;
-            cursor: default;
-            font-size: 12px;
-            position: absolute;
-            right: 5px;
-            top: 8px;
-          }
+        .account-number {
+          color: #aaa;
+          font-size: 12px;
+          flex-shrink: 0;
         }
       }
     }
@@ -254,7 +258,7 @@ export const PackageSharingStyled = styled.div `
         height: 42px;
         padding: 10px;
         border-radius: 10px;
-        border: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw4};
+        border: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw4};
 
         & img {
           width: 100%;
@@ -279,15 +283,15 @@ export const PackageSharingStyled = styled.div `
         &:hover {
           .image-wrapper {
             /* box-shadow: 1px 1px 2px 0 #aaa; */
-            background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue};
-            border-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue3};
+            background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue};
+            border-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue3};
           }
         }
         &.disabled {
           cursor: default;
           .image-wrapper {
-            background: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue1_1};
-            border-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7};
+            background: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue1_1};
+            border-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7};
             img {
               cursor: default;
             }
@@ -296,24 +300,20 @@ export const PackageSharingStyled = styled.div `
         .image-wrapper {
           border: 1px solid #ddd;
           padding: 10px;
-          border-radius: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.borderRadius}px;
+          border-radius: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.borderRadius}px;
           transition: all 0.2s ease-in-out;
-          width: 108px;
-          height: 45px;
+          /* width: 108px;
+          height: 45px; */
           img {
             max-width: 100%;
           }
         }
         .network-name {
-          color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw8};
+          color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw8};
           font-size: 11px;
           margin-top: 5px;
           margin-bottom: 0;
           text-align: center;
-          /* margin: 10px 0 0;
-          padding: 0 5px;
-          max-height: 28px;
-          line-height: 1.27; */
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
@@ -326,8 +326,9 @@ export const PackageSharingStyled = styled.div `
   }
 `;
 export const InnerCardStyled = styled.div `
+  width: 370px;
   background-color: white;
-  border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
+  border-radius: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius}px;
   padding: 10px;
   margin-bottom: 15px;
 `;

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

@@ -49,7 +49,6 @@ export const Layout = memo(props => {
     // Hooks
     useMutationObserver(() => {
         if (notificationWrapperRef.current) {
-            console.log('dfjdsoifjdsoijoi');
             const child = notificationWrapperRef.current.querySelector('div');
             setNoSpaceTopContent(!!child);
         }
@@ -103,7 +102,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: 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { currentAccount: auth === null || auth === void 0 ? void 0 : auth.accountId, 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 _c = useDeepCompareMemo(() => merge(cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)), [contentWrapperProps, contentWrapper]), { noPadding } = _c, mergeContentWrapperProps = __rest(_c, ["noPadding"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.355",
+  "version": "1.3.5-beta.356",
   "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.29",
+    "@antscorp/icons": "0.27.30",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",