@antscorp/antsomi-ui 1.3.5-beta.344 → 1.3.5-beta.346

package/es/components/template/Layout/Layout.d.ts

@@ -3,15 +3,15 @@ import { LeftMenuProps } from '../../organism';
 import { HeaderV2Props } from '../../molecules';
 import '@antscorp/processing-notification/dist/index.css';
 import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
+import { ContentWrapperProps, WorkspaceProps } from './types';
 interface LayoutProps {
     headerProps?: Partial<Omit<HeaderV2Props, 'helpConfig'> & {
         helpConfig: Partial<HeaderV2Props['helpConfig']>;
     }>;
     leftMenuProps?: LeftMenuProps;
     processingNotificationProps?: Partial<ProcessingNotificationProps>;
-    workspaceProps?: React.HTMLAttributes<HTMLDivElement> & {
-        workspaceContentProps?: React.HTMLAttributes<HTMLDivElement>;
-    };
+    contentWrapperProps?: ContentWrapperProps;
+    workspaceProps?: WorkspaceProps;
     onActiveMenuChange?: (menuActive?: string) => void;
 }
 export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;

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

@@ -10,10 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import AntsProcessingNotification from '@antscorp/processing-notification';
-import { merge } from 'lodash';
+import { cloneDeep, merge, omit } from 'lodash';
 // Styled
 import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
 // Components
@@ -29,9 +29,10 @@ import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
 // Utils
 import { hasSelectAccountPermission } from './utils';
+import { useDeepCompareMemo, useMutationObserver } from '@antscorp/antsomi-ui/es/hooks';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
-    const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, onActiveMenuChange, } = props;
+    const { leftMenuProps, headerProps = {}, workspaceProps, contentWrapperProps, processingNotificationProps, children, onActiveMenuChange, } = props;
     const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
     const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
     const appConfig = useContextSelector(AppConfigContext, state => state);
@@ -39,7 +40,28 @@ export const Layout = memo(props => {
     const { token, userId, portalId } = auth || {};
     const headerStore = useLayoutStore(store => store.state.header);
     const showLeftMenu = useLayoutStore(store => store.state.leftMenu.show);
+    const contentWrapper = useLayoutStore(store => store.state.contentWrapper);
+    const workspace = useLayoutStore(store => store.state.workspace);
+    const layoutState = useLayoutStore(store => store.state);
+    console.log('🚀 ~ layoutState: joifdsjfiodsjfoids', layoutState, contentWrapper);
     const [showAccountSelection, setShowAccountSelection] = useState(false);
+    const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
+    // Refs
+    const notificationWrapperRef = useRef(null);
+    // Hooks
+    useMutationObserver(() => {
+        if (notificationWrapperRef.current) {
+            const child = notificationWrapperRef.current.querySelector('div');
+            setNoSpaceTopContent(!!child);
+        }
+    }, notificationWrapperRef, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributeOldValue: true,
+        characterDataOldValue: true,
+    });
     // Memo
     const permissionDomain = useMemo(() => {
         var _a;
@@ -84,7 +106,15 @@ export const Layout = memo(props => {
                         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 }) }));
     }, [headerProps, iamDomain, permissionDomain, showAccountSelection]);
-    const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
+    const mergeHeaderProps = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), cloneDeep(headerStore)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cloneDeep(initialHeaderProps), cloneDeep(headerStore)]);
+    const mergeContentWrapperProps = useDeepCompareMemo(() => merge(contentWrapperProps, contentWrapper), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)]);
+    const mergeWorkSpaceProps = useDeepCompareMemo(() => merge(restOfWorkspaceProps, omit(workspace, 'workspaceContentProps')), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cloneDeep(restOfWorkspaceProps), cloneDeep(workspace)]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList) => {
         var _a;
@@ -96,9 +126,9 @@ export const Layout = memo(props => {
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
             showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}`, appConfig: appConfig }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange }))),
-            React.createElement(ContentWrapper, null,
-                React.createElement("div", Object.assign({}, restOfWorkspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
-                    React.createElement(NotificationWrapper, null,
+            React.createElement(ContentWrapper, Object.assign({ "$noPadding": mergeContentWrapperProps.noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps),
+                React.createElement("div", Object.assign({}, mergeWorkSpaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
+                    React.createElement(NotificationWrapper, { ref: notificationWrapperRef },
                         React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
                     React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps),
                         React.createElement("div", null, children)))))));

package/es/components/template/Layout/stores/index.d.ts

@@ -1,25 +1,26 @@
 /// <reference types="react" />
 import { HeaderV2Props } from '../../../molecules';
 import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
+import { ContentWrapperProps, WorkspaceProps } from '../types';
 export interface HeaderStore extends Partial<HeaderV2Props> {
 }
 export interface LeftMenuStore {
     show: boolean;
     onClickCreateDashboard?: React.MouseEventHandler<HTMLElement>;
 }
-export interface WorkspaceStore {
-}
 export interface LayoutStoreState {
     header: HeaderStore;
     leftMenu: LeftMenuStore;
-    workspace: WorkspaceStore;
+    workspace: WorkspaceProps;
+    contentWrapper: ContentWrapperProps;
 }
 interface LayoutStore {
     state: LayoutStoreState;
     setHeaderState: (state: DeepPartial<HeaderStore>) => void;
     setLeftMenuState: (state: DeepPartial<LeftMenuStore>) => void;
-    setWorkspaceState: (state: Partial<WorkspaceStore>) => void;
+    setWorkspaceState: (state: Partial<WorkspaceProps>) => void;
     setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
+    setContentWrapperState: (state: DeepPartial<ContentWrapperProps>) => void;
     resetHeaderState: () => void;
     resetLeftMenuState: () => void;
     resetWorkspaceState: () => void;

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

@@ -5,6 +5,7 @@ const initialState = {
     header: {},
     leftMenu: { show: true },
     workspace: {},
+    contentWrapper: {},
 };
 export const useLayoutStore = create(set => ({
     state: initialState,
@@ -18,6 +19,9 @@ export const useLayoutStore = create(set => ({
     setWorkspaceState: newState => set(store => ({
         state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
     })),
+    setContentWrapperState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { contentWrapper: Object.assign(Object.assign({}, store.state.contentWrapper), newState) }),
+    })),
     resetHeaderState: () => set(store => ({
         state: Object.assign(Object.assign({}, store.state), { header: {} }),
     })),
@@ -27,11 +31,10 @@ export const useLayoutStore = create(set => ({
     resetWorkspaceState: () => set(store => ({
         state: Object.assign(Object.assign({}, store.state), { workspace: {} }),
     })),
-    resetLayoutState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), {
-            header: {},
-            leftMenu: { show: true },
-            workspace: {},
-        }),
+    resetContentWrapperState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { contentWrapper: initialState.contentWrapper }),
+    })),
+    resetLayoutState: () => set(() => ({
+        state: initialState,
     })),
 }));

package/es/components/template/Layout/styled.d.ts

@@ -2,6 +2,9 @@
 export declare const LayoutWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
     showLeftMenu: boolean;
 }, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
+    $noPadding?: boolean | undefined;
+    $noSpaceTopContent?: boolean | undefined;
+}, never>;
 export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -38,7 +38,6 @@ export const LayoutWrapper = styled(Flex) `
       background-color: white;
       height: 100%;
       padding: 15px;
-      padding-top: 0px;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
@@ -51,8 +50,13 @@ export const ContentWrapper = styled.div `
   position: relative;
   width: 100%;
   height: 100vh;
-  padding: ${HEADER_HEIGHT}px 15px 15px 0;
   box-sizing: border-box;
+
+  ${({ $noPadding }) => $noPadding ? `padding: ${HEADER_HEIGHT}px 0 0 0;` : `padding: ${HEADER_HEIGHT}px 15px 15px 0;`}
+
+  .layout-body__content {
+    ${({ $noSpaceTopContent }) => $noSpaceTopContent && 'padding-top: 0;'}
+  }
 `;
 export const NotificationWrapper = styled.div `
   flex-shrink: 0;
@@ -61,11 +65,11 @@ export const NotificationWrapper = styled.div `
   /* height: 50px; */
   width: 100%;
   /* margin-bottom: 6px; */
-  padding-top: 15px;
   background-color: white;
   z-index: 999;
 
   > div {
+    margin-top: 15px;
     margin-bottom: 6px;
   }
 `;

package/es/components/template/Layout/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ContentWrapperProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    noPadding?: boolean;
+}
+export interface WorkspaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    workspaceContentProps?: React.HTMLAttributes<HTMLDivElement>;
+}

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

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

package/es/constants/theme.js

@@ -221,6 +221,8 @@ THEME.components = {
         itemDisabledColor: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.colorTextDisabled,
         itemActiveBg: (_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.blue1_1,
     },
-    Form: {},
+    Form: {
+        itemMarginBottom: 15,
+    },
 };
 export const globalToken = theme.getDesignToken(THEME);

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -767,7 +767,7 @@ export const GlobalStyle = () => {
 
       /* Modal Close */
       .antsomi-modal-root .antsomi-modal-wrap {
-        z-index: 3001 !important;
+        z-index: 3001;
       }
 
       .antsomi-modal .antsomi-modal-close {
@@ -780,6 +780,7 @@ export const GlobalStyle = () => {
           padding: 20px;
         }
       }
+
       .antsomi-modal-content {
         .antsomi-modal-header {
           .antsomi-modal-title {
@@ -789,8 +790,8 @@ export const GlobalStyle = () => {
             word-wrap: break-word;
           }
         }
+
         .antsomi-modal-body {
-          font-size: 14px !important;
           p {
             margin: 0;
           }
@@ -817,10 +818,9 @@ export const GlobalStyle = () => {
           }
         }
         .antsomi-modal-footer {
-          padding: 15px !important;
           text-align: right;
           background: transparent;
-          border-top: 1px solid #f0f0f0 !important;
+          border-top: 1px solid #f0f0f0;
           border-radius: 0 0 2px 2px;
         }
       }

package/package.json

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