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

package/es/components/organism/Help/Help.js

@@ -989,7 +989,8 @@ const Help = props => {
                 onClick: info => handleClick(info),
             }, 
             // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
-            trigger: triggerType, placement: "bottomRight" }, children || React.createElement(IconButtonStyled, { icon: React.createElement(Icon, { type: "icon-ants-help" }) })),
+            trigger: triggerType, placement: "bottomRight" }, children || (React.createElement(IconButtonStyled, null,
+            React.createElement(Icon, { type: "icon-ants-help" })))),
         isShowPopup &&
             createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                     display: 'flex',

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

@@ -268,6 +268,8 @@ export const IconButtonStyled = styled(Button) `
   color: #666666 !important;
   box-shadow: none !important;
   border-radius: 10px !important;
+  height: 36px !important;
+  width: 36px !important;
 
   &.antsomi-dropdown-open,
   &.antsomi-popover-open {

package/es/components/organism/Notification/Notification.js

@@ -254,5 +254,6 @@ export const Notification = React.memo(props => {
                 justifyContent: 'center',
                 backgroundColor: themeToken.red6,
             } },
-            React.createElement(ActionButton, { icon: React.createElement(Icon, { type: "icon-ants-bell" }) }))));
+            React.createElement(ActionButton, null,
+                React.createElement(Icon, { type: "icon-ants-bell" })))));
 });

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

@@ -124,6 +124,8 @@ export const ActionButton = styled(Button) `
   color: #666666 !important;
   box-shadow: none !important;
   border-radius: 10px !important;
+  height: 36px !important;
+  width: 36px !important;
 
   &.notify-action {
     border: none !important;

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

@@ -29,7 +29,7 @@ import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
 // Utils
 import { hasSelectAccountPermission } from './utils';
-import { useMutationObserver } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareMemo, useMutationObserver } from '@antscorp/antsomi-ui/es/hooks';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
     const { leftMenuProps, headerProps = {}, workspaceProps, contentWrapperProps, processingNotificationProps, children, onActiveMenuChange, } = props;
@@ -39,7 +39,9 @@ export const Layout = memo(props => {
     const { auth, languageCode, appCode, env } = appConfig;
     const { token, userId, portalId } = auth || {};
     const showLeftMenu = useLayoutStore(store => store.state.leftMenu.show);
-    const layoutState = useLayoutStore(store => store.state);
+    const header = useLayoutStore(store => store.state.header);
+    const contentWrapper = useLayoutStore(store => store.state.contentWrapper);
+    const workspace = useLayoutStore(store => store.state.workspace);
     const [showAccountSelection, setShowAccountSelection] = useState(false);
     const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
     // Refs
@@ -47,6 +49,7 @@ export const Layout = memo(props => {
     // Hooks
     useMutationObserver(() => {
         if (notificationWrapperRef.current) {
+            console.log('dfjdsoifjdsoijoi');
             const child = notificationWrapperRef.current.querySelector('div');
             setNoSpaceTopContent(!!child);
         }
@@ -91,7 +94,7 @@ export const Layout = memo(props => {
                 return IAM_API;
         }
     }, [appCode, env, portalId]);
-    const initialHeaderProps = useMemo(() => {
+    const initialHeaderProps = useDeepCompareMemo(() => {
         var _a, _b;
         return (Object.assign(Object.assign({ className: 'layout-header', useURLParam: true }, headerProps), { config: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.config), { permissionDomain,
                 iamDomain }), helpConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig), { configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
@@ -102,9 +105,9 @@ 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 = merge(cloneDeep(initialHeaderProps), cloneDeep(layoutState.header));
-    const mergeContentWrapperProps = merge(cloneDeep(contentWrapperProps), cloneDeep(layoutState.contentWrapper));
-    const mergeWorkSpaceProps = merge(cloneDeep(restOfWorkspaceProps), cloneDeep(omit(layoutState.workspace, 'workspaceContentProps')));
+    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"]);
+    const mergeWorkSpaceProps = useDeepCompareMemo(() => merge(cloneDeep(restOfWorkspaceProps), omit(workspace, 'workspaceContentProps')), [restOfWorkspaceProps, 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;
@@ -116,8 +119,8 @@ 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, 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(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps),
+                React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps),
                     React.createElement(NotificationWrapper, { ref: notificationWrapperRef },
                         React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
                     React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps),

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

@@ -1,6 +1,6 @@
 // Libraries
 import { create } from 'zustand';
-import { merge } from 'lodash';
+import { cloneDeep, merge } from 'lodash';
 const initialState = {
     header: {},
     leftMenu: { show: true },
@@ -9,7 +9,7 @@ const initialState = {
 };
 export const useLayoutStore = create(set => ({
     state: initialState,
-    setLayoutState: newState => set(store => ({ state: merge(store.state, newState) })),
+    setLayoutState: newState => set(store => ({ state: merge(cloneDeep(store.state), cloneDeep(newState)) })),
     setHeaderState: newState => set(store => ({
         state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
     })),

package/package.json

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