@antscorp/antsomi-ui 2.0.118 → 2.0.120

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

@@ -5,10 +5,9 @@ import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferO
 import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
-import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 export const LayoutContent = (props) => {
-    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, } = props;
+    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, className, } = props;
     const { state } = useShareAccess();
     const { isLoading } = state;
-    return (_jsx(Spin, { spinning: !!isLoading, children: _jsxs(StyledLayoutContentRoot, { children: [!isLoading && allowAddUser && (_jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder })), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }) }));
+    return (_jsxs(StyledLayoutContentRoot, { className: className, children: [!isLoading && allowAddUser && (_jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder })), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
 };

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

@@ -5,6 +5,7 @@ export const shareAccessReducer = (onChange, onRawChange) => (state, action) =>
     switch (action.type) {
         case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
             const { updated, triggerOut = true } = action.payload;
+            // console.log({ action });
             draft.accessInfo = updated;
             if (triggerOut) {
                 const mapped = mappingOutData(action.payload.updated);

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

@@ -34,6 +34,10 @@ export type UserAccessInfoRaw = {
     allow_view: number;
     allow_edit: number;
     allow_comment: number;
+    full_name?: string;
+    email?: string;
+    avatar?: string;
+    [key: string]: any;
 };
 export type ObjectAccessInfoRaw = {
     is_public: number;
@@ -47,6 +51,7 @@ export type GeneralAccessSettings = {
     publicOnlyWith?: boolean;
 };
 export type ShareAccessProps = {
+    className?: string;
     userId?: number;
     userPermission?: {
         edit: number;

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

@@ -1,5 +1,5 @@
 import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, REGEX_REMOVE_NAME, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from './constants';
-import { remove } from 'lodash';
+import { remove, mapKeys, camelCase, snakeCase } from 'lodash';
 import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
     const valueMapping = {
@@ -87,7 +87,14 @@ export const safeParseAccessInfo = (accessInfo) => {
     return {
         ...accessInfo,
         ownerId: +(ownerId || -1),
-        listAccess: accessInfo?.listAccess?.map(user => ({ ...user, userId: +user.userId })),
+        listAccess: accessInfo?.listAccess?.map(user => ({
+            ...user,
+            userId: +user.userId,
+            role: +user.role,
+            allowView: +user.allowView,
+            allowEdit: +user.allowEdit,
+            allowComment: +user.allowComment,
+        })),
     };
 };
 export const fromRaw = (raw) => ({
@@ -95,6 +102,7 @@ export const fromRaw = (raw) => ({
     publicRole: raw.public_role,
     ownerId: raw.owner_id ?? -1,
     listAccess: raw.list_access.map(u => ({
+        ...mapKeys(u, (_v, key) => camelCase(key)),
         userId: u.user_id,
         role: u.role,
         allowView: u.allow_view,
@@ -107,6 +115,7 @@ export const toRaw = (info) => ({
     public_role: info.publicRole,
     owner_id: info.ownerId,
     list_access: info.listAccess.map(u => ({
+        ...mapKeys(u, (_v, key) => snakeCase(key)),
         user_id: u.userId,
         role: u.role,
         allow_view: u.allowView,

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

@@ -528,5 +528,6 @@ export const AccountSharing = props => {
                     backgroundColor: THEME.token?.blue1_2,
                     padding: '20px 15px',
                     width: '400px',
+                    maxHeight: 'calc(100dvh - 80px)',
                 }, children: _jsxs(TriggerPopoverStyled, { children: [_jsx("div", { className: "brand-logo", children: currentNetwork?.logo ? _jsx("img", { src: currentNetwork.logo, alt: "" }) : null }), _jsx("div", { className: "avatar", children: infoAccount ? _jsx("img", { src: infoAccount.avatar, alt: "" }) : null })] }) }), _jsx(AccountProfile, { accountId: accountId, iamDomain: formatDomain, token: token, isDisabledEdit: false, open: openAccountProfile, onClose: () => setOpenAccountProfile(false) })] }));
 };

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

@@ -270,7 +270,7 @@ export const PackageSharingStyled = styled.div `
       grid-template-columns: 1fr 1fr 1fr;
       gap: 15px;
       margin-top: 26px;
-      max-height: 335px;
+      max-height: min(335px, calc(100dvh - 380px));
       overflow-y: auto;
       padding: 0 7px;
       .network-item {

package/es/providers/ConfigProvider/ConfigProvider.d.ts

@@ -1,6 +1,8 @@
+import { StyleProviderProps } from '@ant-design/cssinjs';
 import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-provider';
 import React, { ReactNode } from 'react';
 import '@antscorp/antsomi-ui/es/assets/css/main.scss';
+import { type GlobalStyleProps } from './GlobalStyle';
 import { TLocale } from '@antscorp/antsomi-ui/es/types';
 import 'animate.css';
 import { AppConfigProviderProps } from '../AppConfigProvider';
@@ -8,6 +10,8 @@ interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
     children?: ReactNode;
     locale?: TLocale;
     appConfig?: AppConfigProviderProps;
+    globalStyle?: GlobalStyleProps;
+    styleProviderProps?: StyleProviderProps;
 }
 declare const ConfigProvider: React.FC<ConfigProviderProps>;
 export default ConfigProvider;

package/es/providers/ConfigProvider/ConfigProvider.js

@@ -22,7 +22,6 @@ import 'animate.css';
 import { AppConfigProvider } from '../AppConfigProvider';
 // Hooks
 import { useMutationObserver } from '../../hooks';
-import { QueryDevtoolsAntsomiUI } from '../../queries';
 // Providers
 // import {
 //   QueryClientProviderAntsomiUI,
@@ -37,7 +36,7 @@ dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 const ConfigProvider = props => {
     // Props
-    const { children, locale, appConfig, theme = THEME, prefixCls = ANTSOMI_COMPONENT_PREFIX_CLS, ...restOfProps } = props;
+    const { children, locale, appConfig, theme = THEME, prefixCls = ANTSOMI_COMPONENT_PREFIX_CLS, globalStyle = {}, styleProviderProps = {}, ...restOfProps } = props;
     // Refs
     const ref = useRef(null);
     // Handlers
@@ -82,6 +81,6 @@ const ConfigProvider = props => {
         const containers = document.getElementsByClassName('antsomi-scroll-box');
         handleScrollAction(Array.from(containers));
     }, []);
-    return (_jsx(AntdConfigProvider, { theme: theme, prefixCls: prefixCls, ...restOfProps, children: _jsx(AppConfigProvider, { value: appConfig, children: _jsx("div", { ref: ref, children: _jsxs(App, { children: [_jsx(GlobalStyle, {}), _jsx(StyleProvider, { hashPriority: "high", children: children }), _jsx(QueryDevtoolsAntsomiUI, { position: "bottom-right" })] }) }) }) }));
+    return (_jsx(AntdConfigProvider, { theme: theme, prefixCls: prefixCls, ...restOfProps, children: _jsx(AppConfigProvider, { value: appConfig, children: _jsx("div", { ref: ref, children: _jsxs(App, { children: [_jsx(GlobalStyle, { ...globalStyle }), _jsx(StyleProvider, { ...styleProviderProps, hashPriority: "high", children: children })] }) }) }) }));
 };
 export default ConfigProvider;

package/es/providers/ConfigProvider/GlobalStyle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface GlobalStyleProps {
+export interface GlobalStyleProps {
+    resetStyles?: boolean;
 }
 export declare const GlobalStyle: React.FC<GlobalStyleProps>;
-export {};

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -9,7 +9,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent7, gray5, scrollBarSize, bw3, bw4, bw5 } = THEME.token || {};
-export const GlobalStyle = () => (_jsx(Global, { styles: css `
+export const GlobalStyle = props => (_jsx(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
       :root {
@@ -18,69 +18,72 @@ export const GlobalStyle = () => (_jsx(Global, { styles: css `
         --divider-3: ${bw5};
       }
 
-      *,
-      *:before,
-      *:after {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        border-width: 0;
-        border-style: solid;
-      }
-
-      blockquote,
-      dl,
-      dd,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      hr,
-      figure,
-      p,
-      pre {
-        margin: 0;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-size: inherit;
-        font-weight: inherit;
-      }
-
-      ol,
-      ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      img,
-      svg,
-      video,
-      canvas,
-      audio,
-      iframe,
-      embed,
-      object {
-        vertical-align: middle;
-      }
-
-      img,
-      video {
-        max-width: 100%;
-        height: auto;
-      }
-
-      hr {
-        border-color: var(--divider-1);
-      }
+      ${props.resetStyles !== false &&
+        `
+        *,
+        *:before,
+        *:after {
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          border-width: 0;
+          border-style: solid;
+        }
+
+        blockquote,
+        dl,
+        dd,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        hr,
+        figure,
+        p,
+        pre {
+          margin: 0;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          font-size: inherit;
+          font-weight: inherit;
+        }
+
+        ol,
+        ul {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        img,
+        svg,
+        video,
+        canvas,
+        audio,
+        iframe,
+        embed,
+        object {
+          vertical-align: middle;
+        }
+
+        img,
+        video {
+          max-width: 100%;
+          height: auto;
+        }
+
+        hr {
+          border-color: var(--divider-1);
+        }
+      `}
 
       .rc-virtual-list-scrollbar {
         width: 4px !important;

package/package.json

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