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

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

@@ -57,7 +57,7 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
                     } },
                     React.createElement("div", { className: "general-dropdown-wrapper" },
                         React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
-                        allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))),
+                        allowEdit && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } })))),
                 React.createElement("div", { className: "description" }, renderDescription())),
             !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
                     items: [
@@ -75,5 +75,5 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
                 } },
                 React.createElement("div", { className: "public-role-dropdown-wrapper" },
                     React.createElement("div", { className: "for-title" }, ROLE_ACCESS_LABEL[publicRole]),
-                    allowEdit && !isShowOnlyText && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))))))));
+                    allowEdit && !isShowOnlyText && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } }))))))));
 };

package/es/components/molecules/ShareAccess/components/GeneralAccess/styled.js

@@ -6,8 +6,7 @@ export const StyledGeneralAccessRoot = styled.div `
   flex-direction: column;
 
   .title {
-    margin-bottom: 12px;
-    font-weight: bold;
+    margin-bottom: 10px;
   }
 
   .setting {
@@ -15,13 +14,13 @@ export const StyledGeneralAccessRoot = styled.div `
     justify-content: space-between;
     border: 1px solid #e6e6e6;
     border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
-    padding: 8px;
+    padding: 15px;
 
-    .icon-angle {
+    /* .icon-angle {
       font-size: 10px;
       display: flex;
       align-items: center;
-    }
+    } */
 
     .accessable-icon {
       font-size: 28px;

package/es/components/molecules/ShareAccess/components/LayoutContent/styled.js

@@ -3,5 +3,5 @@ export const StyledLayoutContentRoot = styled.div `
   font-size: 12px;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 20px;
 `;

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

@@ -104,6 +104,6 @@ export const PeopleAccess = (props) => {
                         } },
                         React.createElement("div", { className: "role-actions" },
                             React.createElement("div", { className: "role" }, ROLE_ACCESS_LABEL[access.role] || ''),
-                            !!actions.length && (React.createElement(Icon, { type: "icon-ants-angle-down", style: { fontSize: 10 } }))))));
+                            !!actions.length && (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20 } }))))));
             } })));
 };

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.js

@@ -6,8 +6,7 @@ export const StyledPeopleAccessRoot = styled.div `
   flex-direction: column;
 
   .title {
-    margin-bottom: 12px;
-    font-weight: bold;
+    margin-bottom: 10px;
   }
 
   .antsomi-list {
@@ -15,12 +14,19 @@ export const StyledPeopleAccessRoot = styled.div `
     border: 1px solid #e6e6e6;
 
     .antsomi-list-items {
-      padding: 0;
+      /* padding: 0; */
+      padding: 15px;
 
       .antsomi-list-item {
-        padding: 8px;
+        /* padding: 8px; */
+        padding: 0;
+        margin-bottom: 15px;
         border: none;
 
+        &:last-child {
+          margin-bottom: 0;
+        }
+
         .info {
           flex: 1;
           margin-left: 15px;
@@ -34,6 +40,10 @@ export const StyledPeopleAccessRoot = styled.div `
           }
         }
 
+        /* .antsomi-avatar {
+          align-self: flex-start;
+        } */
+
         .role-actions {
           display: flex;
           align-items: center;
@@ -43,6 +53,10 @@ export const StyledPeopleAccessRoot = styled.div `
             cursor: pointer;
           }
         }
+
+        /* .role-actions :not(i) {
+          align-self: flex-start !important;
+        } */
       }
     }
   }

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

@@ -7,16 +7,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useMemo, useState } from 'react';
-import { Avatar, AutoComplete } from 'antd';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
-import { StyledSearchUserRoot, StyledSelectItem } from './styled';
 import { isEmail } from '@antscorp/antsomi-ui/es/utils';
-import { useShareAccess } from '../../hooks';
+import { AutoComplete, Avatar, Input } from 'antd';
 import produce from 'immer';
-import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
+import React, { useEffect, useMemo, useState } from 'react';
 import { updateObjAccessInfo } from '../../actions';
-import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
+import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
+import { useShareAccess } from '../../hooks';
+import { StyledSearchUserRoot, StyledSelectItem } from './styled';
 export const SearchUser = (props) => {
     const { getUserInfo, placeholder = 'Add people' } = props;
     const { state, dispatch } = useShareAccess();
@@ -72,18 +72,32 @@ export const SearchUser = (props) => {
     if (!allowEdit)
         return null;
     return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(AutoComplete, { placeholder: placeholder, 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 => ({
+        React.createElement(AutoComplete, { value: searchTerm, onSearch: v => setSearchTerm(v), notFoundContent: null, 
+            // TODO: move to inline Input loading - prevent annoying effect when isFetching so fast
+            // notFoundContent={
+            //   isFetching ? (
+            //     <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 }),
                     React.createElement("div", { className: "info" },
                         React.createElement("div", { className: "name" }, user.user_name),
                         React.createElement("div", { className: "email" }, user.email)))),
-            })) })));
+            })) },
+            React.createElement(Input, { style: { padding: '5px' }, placeholder: placeholder, suffix: isFetching ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : (
+                // TODO: empty span for Input don't lose focus when fetching
+                // https://ant.design/components/input#why-input-lose-focus-when-change-prefixsuffixshowcount
+                React.createElement("span", null)), autoFocus: true }))));
 };

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

@@ -7,8 +7,10 @@ import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMe
 import { useLeftMenuContext } from '../contexts';
 // Constants
 import { CDP_API, PERMISSION_API, POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Utils
 import { findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+const { DEV, SANDBOX, SANDBOX_CDP } = ENV;
 export const usePermission = () => {
     const appConfig = useLeftMenuContext(store => store.appConfig);
     const isCustomized = useLeftMenuContext(store => store.isCustomized);
@@ -21,11 +23,11 @@ export const usePermission = () => {
         args: {
             auth: {
                 // token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || auth?.token,
-                token: ['development', 'sandbox'].includes(env)
+                token: [DEV, SANDBOX, SANDBOX_CDP].includes(env)
                     ? '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4'
                     : auth === null || auth === void 0 ? void 0 : auth.token,
                 // url: 'https://sandbox-permission.ants.vn',
-                url: ['development', 'sandbox'].includes(env)
+                url: [DEV, SANDBOX, SANDBOX_CDP].includes(env)
                     ? 'https://sandbox-permission.ants.vn'
                     : permissionDomain || PERMISSION_API, // NOTE: Hard for sandbox, development
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -304,10 +304,6 @@ export const GlobalStyle = () => {
       .antsomi-select-dropdown {
         padding: 8px 0 !important;
         z-index: 3002 !important;
-
-        /* .antsomi-select-item:not(:last-child) {
-          margin-bottom: 6px;
-        } */
       }
 
       .antsomi-select-selection-overflow {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.521",
+  "version": "1.3.5-beta.523",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",