@antscorp/antsomi-ui 1.3.5-beta.291 → 1.3.5-beta.293

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

@@ -28,14 +28,13 @@ export const HeaderV2 = memo(props => {
     const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
     const history = useHistory();
-    /** Prefer to use Header in AppConfigContext */
+    // * Prefer to use Header in AppConfigContext
     const { className, style, breadcrumbs, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     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 = (_a = urlParams.get('oid')) !== null && _a !== void 0 ? _a : 'all';
-    // States
     const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_b = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _b !== void 0 ? _b : 'all'}`}`);
     // Memo
     const accountSelectionDomain = useMemo(() => {
@@ -85,7 +84,6 @@ export const HeaderV2 = memo(props => {
         token,
         lang: language,
     };
-    // Handlers
     const handleChangeAccount = (userId) => {
         setSelectedAccount(userId);
         if (useURLParam) {

package/es/components/organism/LeftMenu/components/HomeMenu/index.js

@@ -10,9 +10,9 @@ import { CreateButton, HomeMenuWrapper } from './styled';
 // Hooks
 import { useHomeMenu } from './useHomeMenu';
 export const HomeMenu = memo(() => {
-    // Handlers
     const { children, onCreateNewReport, onMenuClick } = useHomeMenu();
-    return (React.createElement(HomeMenuWrapper, { vertical: true },
+    // console.log({});
+    return (React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
         React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
             React.createElement(Flex, { gap: 10, align: "center" },
                 React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),

package/es/components/organism/LeftMenu/components/HomeMenu/styled.js

@@ -7,6 +7,7 @@ import { Button, Flex } from '../../../../atoms';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const HomeMenuWrapper = styled(Flex) `
   height: 100%;
+  width: 100%;
 
   .menu-list {
     width: 100%;

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 export declare const useHomeMenu: () => {
     children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
-    onCreateNewReport: () => void;
+    onCreateNewReport: import("react").MouseEventHandler<HTMLElement>;
     onOptionCallback: (args: {
         menuItemKey: string;
         optionKey: string;

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -8,29 +8,14 @@ import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
 import { getGeneratePath, getMenuItem } from '../../utils';
 // Types
 import { useLeftMenuStore } from '../../stores';
+import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
 export const useHomeMenu = () => {
-    // Hooks
-    const { pathname, hash, search } = window.location;
+    const { pathname, search } = window.location;
     const history = useHistory();
-    // Stores
     const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
     const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
-    // Memos
+    const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
-    // Handlers
-    const handleSetSearchParams = useCallback((searchParam) => {
-        const url = `${pathname}${hash}`;
-        if (url.includes(getGeneratePath(HOME_ROUTE, Object.assign({}, auth)))) {
-            urlParams.set('type', searchParam);
-            history.replace({ search: urlParams.toString() });
-        }
-        else {
-            history.push(getGeneratePath(HOME_ROUTE, Object.assign({}, auth)));
-            urlParams.set('type', searchParam);
-            history.replace({ search: urlParams.toString() });
-        }
-    }, [auth, hash, history, pathname, urlParams]);
-    // Memos
     const onOptionCallback = useCallback((args) => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
@@ -51,12 +36,16 @@ export const useHomeMenu = () => {
         var _a;
         return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
     }), [appMenuChildren, onOptionCallback]);
-    // Callbacks
-    const onCreateNewReport = useCallback(() => {
-        history.push(getGeneratePath(HOME_ROUTE, auth));
-        urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
-        history.replace({ search: urlParams.toString() });
-    }, [auth, history, urlParams]);
+    const onCreateNewReport = useCallback(e => {
+        if (onClickCreateDashboard) {
+            onClickCreateDashboard(e);
+        }
+        else {
+            history.push(getGeneratePath(HOME_ROUTE, auth));
+            urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
+            history.replace({ search: urlParams.toString() });
+        }
+    }, [auth, history, onClickCreateDashboard, urlParams]);
     const onMenuClick = useCallback((key, _) => {
         const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
         if (newPathName !== pathname) {

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -6,10 +6,10 @@ import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 // Components
 import { Dropdown, Menu } from 'antd';
-import { Flex } from '../../../../../atoms';
 import { MenuItemImage } from './components';
+import { Flex } from '../../../../../atoms';
 // Styled
-import { LabelCustom, MenuWrapper } from './styled';
+import { LabelCustom, LabelWrapper, MenuWrapper, OptionDropdownWrapper } from './styled';
 import { IconWrapper } from '../../../styled';
 // Constants
 import { ICON_SIZE } from '../../../constants';
@@ -19,9 +19,17 @@ import { recursiveFindParentOfActiveItem } from './utils';
 // Hooks
 import { useLeftMenuStore } from '../../../stores';
 import { useNavigatePath } from '../../../hooks';
+const styles = {
+    dropdownMenu: { width: '130px', padding: '8px 0' },
+    icon: { marginTop: '2px', zIndex: 1000, flexShrink: 0 },
+    expandIcon: {
+        fontSize: ICON_SIZE,
+        color: 'inherit',
+    },
+    menuItemTitle: { flex: '1 1 0%', maxWidth: '100%' },
+};
 export const ChildMenu = memo(props => {
     const { items = [], onMenuClick } = props;
-    // Stores
     const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const menuItems = useLeftMenuStore(store => store.state.menuItems);
@@ -29,18 +37,15 @@ export const ChildMenu = memo(props => {
     const isCustomized = useLeftMenuStore(store => store.state.isCustomized);
     const customActiveCurrentKey = useLeftMenuStore(store => store.state.customActiveCurrentKey);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
-    // States
     const [currentActiveItem, setCurrentActiveItem] = useState('');
     const [openKeys, setOpenKeys] = useState([]);
-    // Hooks
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
-    // Side Effects
     useEffect(() => {
         var _a;
         if (isCustomized) {
             setCurrentActiveItem(customActiveCurrentKey);
-            /** Find parent key of active menu item to open it */
+            // Find parent key of active menu item to open it
             const parentKey = recursiveFindParentOfActiveItem({
                 activeMenuItem: customActiveCurrentKey,
                 menuItems: customItems,
@@ -51,11 +56,11 @@ export const ChildMenu = memo(props => {
         }
         else {
             const url = `${pathname}${hash}`;
-            /** Active menu item by current url */
+            // Active menu item by current url
             const activeMenuItem = (_a = findLastMatchedItemByUrl({ url, menuItems, auth })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
             if (activeMenuItem && activeMenuItem !== currentActiveItem) {
                 setCurrentActiveItem(activeMenuItem);
-                /** Find parent key of active menu item to open it */
+                // Find parent key of active menu item to open it
                 const parentKey = recursiveFindParentOfActiveItem({
                     activeMenuItem,
                     menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => getMenuItem(item)),
@@ -63,7 +68,7 @@ export const ChildMenu = memo(props => {
                 if (parentKey) {
                     setOpenKeys(prev => [...prev, parentKey]);
                 }
-                /**  Active App Item having code matching url */
+                // Active App Item having code matching url
                 const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
                 if (matchAppCode && matchAppCode !== activeAppCode) {
                     setLeftMenuState({ activeAppCode: matchAppCode });
@@ -83,43 +88,43 @@ export const ChildMenu = memo(props => {
         customActiveCurrentKey,
         customItems,
     ]);
-    // Handlers
     const onClick = e => {
         onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
     };
-    // Render components
     const customMenuItems = (args) => {
         var _a;
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
-            var _a;
             const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
-            const labelComponent = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { width: '100%' }, className: "child-menu-label" },
-                React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
-                React.createElement(Dropdown, { menu: {
-                        items: options,
-                        onClick: e => {
-                            e.domEvent.stopPropagation();
-                            e.domEvent.preventDefault();
-                            optionCallback === null || optionCallback === void 0 ? void 0 : optionCallback({ menuItemKey: key, optionKey: e.key });
-                        },
-                    }, trigger: ['click'] },
-                    React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: { marginTop: '2px', zIndex: 1000 } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+            const renderLabel = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(LabelWrapper, null,
+                React.createElement(LabelCustom, { ellipsis: { tooltip: label }, style: { flex: '1 1 0%' } }, label),
+                React.createElement(OptionDropdownWrapper, null,
+                    React.createElement(Dropdown, { menu: {
+                            items: options,
+                            onClick: e => {
+                                e.domEvent.stopPropagation();
+                                e.domEvent.preventDefault();
+                                optionCallback === null || optionCallback === void 0 ? void 0 : optionCallback({ menuItemKey: key, optionKey: e.key });
+                            },
+                            style: styles.dropdownMenu,
+                        }, trigger: ['click'] },
+                        React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.icon }))))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+            const renderIcon = () => {
+                var _a;
+                return !isNil(icon) || !isNil(logo_url) ? (React.createElement(Flex, { style: { flexShrink: 0 }, align: "center" }, !isNil(icon) ? (React.createElement(IconWrapper, null,
+                    React.createElement(Icon, { type: icon }))) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null)) : null;
+            };
+            const renderTitle = () => !menu_item_path ? (renderLabel()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()));
             return {
                 key,
-                label: !menu_item_path ? (labelComponent()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, labelComponent())),
-                icon: !isNil(icon) ? (React.createElement(IconWrapper, null,
-                    React.createElement(Icon, { type: icon }))) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null,
+                label: (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { height: '100%' } },
+                    renderIcon(),
+                    React.createElement(Flex, { style: styles.menuItemTitle, align: "center" }, renderTitle()))),
                 children: customMenuItems({ parent: item, items: children }),
             };
         });
     };
     return (React.createElement(MenuWrapper, null,
-        React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], openKeys: uniq(openKeys), mode: "inline", items: customMenuItems({ items }), inlineIndent: 10, onOpenChange: openKeys => {
+        React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], openKeys: uniq(openKeys), mode: "inline", items: customMenuItems({ items }), inlineIndent: 12, onOpenChange: openKeys => {
                 setOpenKeys(openKeys);
-            }, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
-                    fontSize: ICON_SIZE,
-                    color: 'inherit',
-                    // color: THEME.token?.bw8,
-                    transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
-                } })), onClick: onClick })));
+            }, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: Object.assign(Object.assign({}, styles.expandIcon), { transform: `rotate(${isOpen ? '180deg' : '0deg'})` }) })), onClick: onClick })));
 });

package/es/components/organism/LeftMenu/components/common/ChildMenu/styled.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const LabelCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const OptionDropdownWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/organism/LeftMenu/components/common/ChildMenu/styled.js

@@ -1,11 +1,27 @@
-var _a;
+var _a, _b;
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Typography } from '../../../../../atoms';
+import { Flex, Typography } from '../../../../../atoms';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { ICON_SIZE } from '../../../constants';
+export const LabelWrapper = styled(Flex) `
+  width: 100%;
+`;
+LabelWrapper.defaultProps = {
+    gap: 10,
+    align: 'center',
+    justify: 'space-between',
+};
+export const LabelCustom = styled(Typography.Text) `
+  font-size: inherit !important;
+  color: inherit !important;
+`;
+export const OptionDropdownWrapper = styled(Flex) `
+  width: 24px;
+`;
+OptionDropdownWrapper.defaultProps = { align: 'center' };
 export const MenuWrapper = styled.div `
   width: 100%;
   height: 100%;
@@ -14,15 +30,81 @@ export const MenuWrapper = styled.div `
   font-weight: bold !important;
   border-right: none !important;
 
-  & > ul {
+  & > ul.antsomi-menu.antsomi-menu-root {
     height: 100%;
 
-    li {
-      width: 100% !important;
+    & > li {
+      padding-left: 0px !important;
+
+      &.antsomi-menu-submenu > [role='menuitem'] {
+        margin: 0;
+        padding-left: 0px !important;
+        width: 100%;
+        border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+        padding-right: 4px !important;
+      }
+    }
+
+    & li {
+      width: 100%;
+      margin: 0;
+      padding-right: 0px;
+      background-color: transparent !important;
+
+      & .antsomi-menu-title-content {
+        width: 100%;
+        height: 100%;
+        border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+        padding: 0 8px;
+
+        &:hover {
+          background-color: #f2f9ff !important;
+        }
+      }
+
+      &.antsomi-menu-item-selected {
+        & > .antsomi-menu-title-content {
+          background-color: #deeffe !important;
+        }
+      }
 
       [role='icon'] {
         font-size: ${ICON_SIZE}px !important;
       }
+
+      & a.menu-link {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      &.antsomi-menu-submenu {
+        & > [role='menuitem'] {
+          padding-right: 0;
+        }
+
+        & > ul.antsomi-menu.antsomi-menu-sub {
+          & > [role='menuitem'] {
+            width: 100%;
+            padding-right: 0px;
+
+            & > .antsomi-menu-title-content {
+              & ${OptionDropdownWrapper} {
+                display: none;
+              }
+
+              &:hover {
+                & ${OptionDropdownWrapper} {
+                  display: flex;
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 
@@ -31,30 +113,8 @@ export const MenuWrapper = styled.div `
     border: none !important;
   }
 
-  [role='menuitem'] {
-    margin: 0 !important;
-    border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
-    padding-right: 10px !important;
-  }
-
-  [role='menuitem'].antsomi-menu-item-selected {
-    background-color: #deeffe !important;
-  }
-
   .antsomi-menu-item-active,
   .antsomi-menu-submenu-title:hover {
     background-color: #f2f9ff !important;
   }
-
-  .menu-link {
-    width: 100% !important;
-    height: 100% !important;
-    display: flex !important;
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-`;
-export const LabelCustom = styled(Typography.Text) `
-  font-size: inherit !important;
-  color: inherit !important;
 `;

package/es/components/organism/LeftMenu/hooks/useLeftMenu.d.ts

@@ -7,7 +7,6 @@ export declare const useLeftMenu: (props: LeftMenuProps) => {
     state: TState;
     activeAppCode: string;
     permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
-    /** Variables */
     customActiveAppKey: string;
     onToggleChildMenu: () => void;
     onMouseEnter: (key: string) => void;

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

@@ -9,7 +9,7 @@ import { findActiveAppCodeByChild, findActiveAppCodeByUrl, findLastMatchedItemBy
 import { useLeftMenuStore } from '../stores';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
 // Constants
-import { CDP_API, PERMISSION_API, PERMISSION_ENV_API } from '@antscorp/antsomi-ui/es/constants';
+import { CDP_API, PERMISSION_API } from '@antscorp/antsomi-ui/es/constants';
 const initialState = {
     hoverItem: '',
     isExpandMenu: true,
@@ -18,23 +18,31 @@ export const useLeftMenu = (props) => {
     // Props
     const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, customization, onActiveMenuCodeChange, } = props;
     const { isExpandable = true, isCustomized = false, items, activeKey } = customization || {};
-    // Hooks
-    const { pathname, hash, search } = window.location;
-    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
-    // Stores
+    const { pathname, hash } = window.location;
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
-    // Destructuring variables
-    const { auth, languageCode, env } = appConfig || {};
-    // State
+    const { auth, languageCode = 'en', env = 'development' } = appConfig || {};
     const [state, setState] = useState(initialState);
-    // Queries
+    // const { data: menuList } = useGetListMenu({
+    //   args: {
+    //     auth: {
+    //       token: env === 'production' ? auth?.token : '5474r2x214z284d4w2b4y444d464b444q4y274u4t5x5',
+    //       url: 'https://permission.antsomi.com',
+    //       portalId: env === 'production' ? auth?.portalId : 561236459,
+    //       userId: env === 'production' ? auth?.userId : '1600083836',
+    //       accountId: env === 'production' ? auth?.accountId : '1600083836',
+    //     },
+    //     params: {
+    //       type: 'menu-item-permission',
+    //     },
+    //   },
+    // });
     const { data: menuList } = useGetListMenu({
         args: {
             auth: {
-                token: env === 'production' ? auth === null || auth === void 0 ? void 0 : auth.token : '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4',
-                url: env ? PERMISSION_ENV_API[env] : '',
+                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
+                url: 'https://sandbox-permission.ants.vn',
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
                 userId: auth === null || auth === void 0 ? void 0 : auth.userId,
                 accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
@@ -63,10 +71,10 @@ export const useLeftMenu = (props) => {
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
         args: {
             auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: env ? `${CDP_API.production}/hub` : '',
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                token: env === 'development' ? '5474r2x214z284d4w2b4y494d43464k5a4v2j464m5a4' : auth === null || auth === void 0 ? void 0 : auth.token,
+                url: env === 'development' ? `${CDP_API.production}/hub` : `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub`,
+                portalId: env === 'development' ? 561236459 : auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: env === 'development' ? '1600083836' : auth === null || auth === void 0 ? void 0 : auth.userId,
             },
             params: {
                 objectType,
@@ -90,9 +98,7 @@ export const useLeftMenu = (props) => {
             },
         },
     });
-    // Variables
     const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
-    // Memos
     const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], ['level_position']), flattenMenuPermission), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
     const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
         menuList: permissionMenu,
@@ -100,7 +106,6 @@ export const useLeftMenu = (props) => {
         dashboardData,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
     }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
-    /* Handlers */
     const receivePostMessage = (event) => {
         const { data } = event;
         const { type } = data || {};
@@ -113,7 +118,6 @@ export const useLeftMenu = (props) => {
                 break;
         }
     };
-    // Side Effects
     // Receive Post Message
     useEffect(() => {
         if (!isCustomized) {
@@ -125,9 +129,7 @@ export const useLeftMenu = (props) => {
     useEffect(() => {
         setLeftMenuState({ appConfig, isCustomized });
     }, [appConfig, isCustomized, setLeftMenuState]);
-    /**
-     * Active Custom App Key when active key is changed
-     */
+    // Active Custom App Key when active key is changed
     useEffect(() => {
         if (activeKey && items)
             setLeftMenuState({
@@ -138,9 +140,7 @@ export const useLeftMenu = (props) => {
                 customActiveCurrentKey: activeKey,
             });
     }, [activeKey, appConfig, isCustomized, items, setLeftMenuState]);
-    /**
-     * Change list menu children when hovering or activating items, giving priority to hovering items
-     */
+    // Change list menu children when hovering or activating items, giving priority to hovering items
     useEffect(() => {
         var _a, _b;
         if (isCustomized) {
@@ -160,33 +160,33 @@ export const useLeftMenu = (props) => {
             }
         }
     }, [
-        isCustomized,
         activeAppCode,
+        customActiveAppKey,
+        isCustomized,
+        items,
         mappingChildrenMenu,
         state.hoverItem,
         setLeftMenuState,
-        items,
-        customActiveAppKey,
     ]);
     useEffect(() => {
-        var _a;
         if (!isCustomized) {
             const url = `${pathname}${hash}`;
-            /**
-             * Active App Item having code matching url
-             */
+            // Active App Item having code matching url
             const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
             if (matchAppCode && matchAppCode !== activeAppCode) {
                 setLeftMenuState({ activeAppCode: matchAppCode });
             }
-            /**
-             * Callback function when url change
-             */
-            const matchedCode = (_a = findLastMatchedItemByUrl({
+        }
+    }, [activeAppCode, auth, hash, isCustomized, mappingChildrenMenu, pathname, setLeftMenuState]);
+    useEffect(() => {
+        if (!isCustomized) {
+            const url = `${pathname}${hash}`;
+            // Callback function using at Layout when url change
+            const matchedCode = findLastMatchedItemByUrl({
                 url,
                 menuItems: mappingChildrenMenu,
                 auth,
-            })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
+            });
             const activeItemPath = matchedCode
                 ? findPathOfActiveItem({
                     activeMenuItem: matchedCode,
@@ -196,19 +196,14 @@ export const useLeftMenu = (props) => {
             onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
         }
     }, [
-        isCustomized,
-        activeAppCode,
         auth,
+        flattenMenuPermission,
         hash,
+        isCustomized,
         mappingChildrenMenu,
         pathname,
-        permissionMenu,
-        setLeftMenuState,
         onActiveMenuCodeChange,
-        flattenMenuPermission,
-        urlParams,
     ]);
-    /* Callbacks */
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
     }, []);
@@ -226,15 +221,10 @@ export const useLeftMenu = (props) => {
         onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
     };
     return {
-        /* State */
         state,
-        /* Zustand */
         activeAppCode,
-        /* Data Queries */
         permissionMenu,
-        /** Variables */
         customActiveAppKey,
-        /* Callbacks */
         onToggleChildMenu,
         onMouseEnter,
         onMouseLeave,

package/es/components/organism/LeftMenu/index.js

@@ -18,42 +18,28 @@ import { useLeftMenu, useNavigatePath } from './hooks';
 export const LeftMenu = memo(props => {
     const { style, className, customization } = props;
     const { isExpandable = true, isCustomized = false, items = [], onMenuItemClick, } = customization || {};
-    // Hooks
-    const { 
-    /* State */
-    state, 
-    /* Store */
-    activeAppCode, 
-    /* Data Queries */
-    permissionMenu, 
-    /** Variables */
-    customActiveAppKey, 
-    /* Callbacks */
-    onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, } = useLeftMenu(props);
+    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, } = useLeftMenu(props);
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
-    // Memo
     const childMenu = useMemo(() => {
         const selectedFeatureKey = state.hoverItem ? state.hoverItem : activeAppCode;
         if (isCustomized)
             return React.createElement(CustomMenu, { onMenuItemClick: onMenuItemClick });
         switch (selectedFeatureKey) {
-            case APP_KEYS.HOME: {
+            case APP_KEYS.HOME:
                 return React.createElement(HomeMenu, null);
-            }
             default:
                 return React.createElement(CommonMenu, null);
         }
     }, [activeAppCode, isCustomized, state.hoverItem, onMenuItemClick]);
-    // Render components
     const renderFeatureMenuItems = useCallback((item) => {
         const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
         const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
-        const labelComponent = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
             React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
             React.createElement(Typography.Text, null, menu_item_name),
             React.createElement("div", { className: "popup-triangle" })));
-        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent())));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()))) : (renderLabel())));
     }, [activeAppCode, getPath, isPushDifferentDomain, navigatePath, onMouseEnter, state.hoverItem]);
     const renderCustomizedMenuItems = useCallback((items) => items === null || items === void 0 ? void 0 : items.map(item => {
         const { key, icon, label } = item;
@@ -89,7 +75,7 @@ export const LeftMenu = memo(props => {
                     React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
                     React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
                     React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", onMouseLeave: onMouseLeave },
-                        React.createElement("div", { className: "scroll-content" }, childMenu))),
+                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))),
                 React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
             isExpandable && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: {
@@ -98,5 +84,5 @@ export const LeftMenu = memo(props => {
                         transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
                     }, onClick: onToggleChildMenu })))),
         React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu && isExpandable, className: "antsomi-scroll-box" },
-            React.createElement("div", { className: "scroll-content" }, childMenu))));
+            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))));
 });

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

@@ -26,12 +26,11 @@ export const PopoverWrapper = styled.div `
   left: 65px;
   border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
   bottom: 15px;
-  width: 230px;
   box-shadow: 0px 3px 20px 0px #002e5933;
   height: calc(100% - ${HEADER_HEIGHT + 15}px);
   transition: visibility 0s, opacity 0.2s ease-out;
   z-index: 10;
-  padding: 10px;
+  padding: 20px;
   box-sizing: border-box;
 `;
 export const FeatureMenuWrapper = styled(Flex) `

package/es/components/organism/LeftMenu/utils/index.d.ts

@@ -84,7 +84,7 @@ export declare const findLastMatchedItemByUrl: (args: {
     auth?: Partial<PayloadInfo>;
 }) => TFeatureMenu | undefined;
 export declare const findPathOfActiveItem: (args: {
-    activeMenuItem: string;
+    activeMenuItem: TFeatureMenu;
     menuItems: TFeatureMenu[];
 }) => TFeatureMenu[];
 /**

package/es/components/organism/LeftMenu/utils/index.js

@@ -129,6 +129,7 @@ export const getMappingAppChildren = (args) => {
                         menu_item_code: item.channelCode,
                         menu_item_name: item.translateLabel,
                         logo_url: item.logoUrl,
+                        menu_item_parent: menuItem.menu_item,
                         menu_item_path: getGeneratePath(path, Object.assign(Object.assign({}, auth), { channelId: item.channelId })),
                     }))))) || [];
                 break;
@@ -156,10 +157,12 @@ export const getMappingAppChildren = (args) => {
                         menu_item: childMenuItem.menu_item_code,
                         menu_item_code: childMenuItem.menu_item_code,
                         menu_item_name: childMenuItem.menu_item_name,
+                        menu_item_parent: appItem.menu_item,
                     })), { children: (_a = (((dashboardObject === null || dashboardObject === void 0 ? void 0 : dashboardObject[childMenuItem.menu_item_code]) || []))) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign({}, getInitialFeatureMenuItem({
                             menu_item: String(item.dashboardId),
                             menu_item_code: String(item.dashboardId),
                             menu_item_name: item.dashboardName,
+                            menu_item_parent: childMenuItem.menu_item_code,
                             menu_item_path: getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(item.dashboardId) })),
                         })))) }));
                 });
@@ -243,14 +246,15 @@ export const findLastMatchedItemByUrl = (args) => {
     try {
         const { url, menuItems, auth } = args;
         const matchedItems = [];
-        const recursiveFindActiveItem = (items) => {
+        const recursiveFindActiveItem = (items, parentId) => {
             for (const item of items) {
-                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
-                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth)))) {
+                if ((item === null || item === void 0 ? void 0 : item.menu_item_path) &&
+                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth))) &&
+                    (!parentId || item.menu_item_parent === parentId)) {
                     matchedItems.push(item);
                 }
                 if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
-                    recursiveFindActiveItem(item.children);
+                    recursiveFindActiveItem(item.children, String(item.menu_item));
                 }
             }
         };
@@ -268,14 +272,15 @@ export const findLastMatchedItemByUrl = (args) => {
 export const findPathOfActiveItem = (args) => {
     try {
         const { activeMenuItem, menuItems } = args;
-        const recursiveFindPathOfActiveItem = (menuItems) => {
+        const recursiveFindPathOfActiveItem = (menuItems, parentId) => {
             let path = [];
             for (const item of menuItems) {
-                if (item.menu_item_code === activeMenuItem) {
+                if (item.menu_item_code === (activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.menu_item_code) &&
+                    (!parentId || (activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.menu_item_parent) === parentId)) {
                     path.push(item);
                     break;
                 }
-                const childPath = recursiveFindPathOfActiveItem((item === null || item === void 0 ? void 0 : item.children) || []);
+                const childPath = recursiveFindPathOfActiveItem((item === null || item === void 0 ? void 0 : item.children) || [], String(item.menu_item));
                 if (childPath.length) {
                     path = [item, ...childPath];
                     break;

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

@@ -23,7 +23,7 @@ import { HeaderV2 } from '../../molecules';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
-import { MENU_PERMISSIONS } from './constants';
+import { APP_ROLE_SCOPE, MENU_PERMISSIONS } from './constants';
 import { APP_CODES, APP_IAM_DOMAIN, APP_PERMISSION_DOMAIN, IAM_API, PERMISSION_API, PORTALS_IDS, SOCKET_API, } from '../../../constants';
 // Css
 import '@antscorp/processing-notification/dist/index.css';
@@ -35,7 +35,6 @@ export const Layout = memo(props => {
     const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, onActiveMenuChange, } = props;
     const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
     const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
-    // Selectors
     const appConfig = useContextSelector(AppConfigContext, state => state);
     const { auth, languageCode, appCode, env } = appConfig;
     const { token, userId, portalId } = auth || {};
@@ -114,14 +113,21 @@ export const Layout = memo(props => {
             const menuPermission = flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
             if (menuPermission) {
                 const checkRoleScope = menuPermission
-                    ? checkingRoleScope({ menuCode: activeItem.menu_item_code, menuPermission })
+                    ? checkingRoleScope({
+                        menuCode: menuPermission.menu_code || '',
+                        menuPermission,
+                        scope: APP_ROLE_SCOPE.EVERYTHING,
+                    })
                     : false;
                 if (checkRoleScope) {
                     roleScope = true;
                     break;
                 }
             }
-            /** Nếu trong Api Permission không có những có trong @constant MENU_PERMISSIONS thì vẫn trả về True vì có những MENU_CODE mà BA chưa define permission  */
+            /**
+             * Nếu trong Api Permission không có những có trong @constant MENU_PERMISSIONS
+             * thì vẫn trả về True vì có những MENU_CODE mà BA chưa define permission
+             * */
             if (isExternalPermissionCode) {
                 roleScope = true;
                 break;

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

@@ -14,9 +14,6 @@ export declare const MARKETING_CHANNEL_CODE: {
  * Nếu PERMISSION_CODE không được tìm thấy trong api get permissions và trong @constant MENU_PERMISSIONS thì sẽ ẩn account selection
  */
 export declare const MENU_PERMISSIONS: {
-    ALL_CHANNEL: string;
-    ORCHESTRATION: string;
-    CAMPAIGN: string;
     BATCH_STREAM: string;
     REALTIME_STREAM: string;
     DF_DATA_SOURCE: string;

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

@@ -14,9 +14,6 @@ export const MARKETING_CHANNEL_CODE = {
  * Nếu PERMISSION_CODE không được tìm thấy trong api get permissions và trong @constant MENU_PERMISSIONS thì sẽ ẩn account selection
  */
 export const MENU_PERMISSIONS = {
-    [MARKETING_CHANNEL_CODE.ALL_CHANNEL]: 'JOURNEY',
-    [MARKETING_CHANNEL_CODE.ORCHESTRATION]: 'JOURNEY',
-    [MARKETING_CHANNEL_CODE.CAMPAIGN]: 'JOURNEY',
     BATCH_STREAM: 'BATCH_STREAM',
     REALTIME_STREAM: 'REALTIME_STREAM',
     DF_DATA_SOURCE: 'DF_DATA_SOURCE',

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

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import { HeaderV2Props } from '../../../molecules';
 import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
 export interface HeaderStore extends Partial<HeaderV2Props> {
 }
 export interface LeftMenuStore {
+    onClickCreateDashboard?: React.MouseEventHandler<HTMLElement>;
 }
 export interface WorkspaceStore {
 }
@@ -17,6 +19,10 @@ interface LayoutStore {
     setLeftMenuState: (state: DeepPartial<LeftMenuStore>) => void;
     setWorkspaceState: (state: Partial<WorkspaceStore>) => void;
     setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
+    resetHeaderState: () => void;
+    resetLeftMenuState: () => void;
+    resetWorkspaceState: () => void;
+    resetLayoutState: () => void;
 }
 export declare const useLayoutStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LayoutStore>>;
 export {};

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

@@ -18,4 +18,16 @@ 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) }),
     })),
+    resetHeaderState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { header: initialState.header }),
+    })),
+    resetLeftMenuState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: initialState.leftMenu }),
+    })),
+    resetWorkspaceState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { workspace: initialState.workspace }),
+    })),
+    resetLayoutState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), initialState),
+    })),
 }));

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

@@ -11,6 +11,6 @@ export declare const checkingRoleScope: (args: {
     menuCode: string;
     menuPermission: FeatureMenuPermission;
     action?: string;
-    scope?: string;
+    scope?: number;
     isExactly?: boolean;
 }) => boolean;

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -29,15 +29,11 @@ const PATH = 'src/components/template/TemplateListing/components/CategoryListing
 export const CategoryListing = memo(props => {
     var _a;
     const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, header, footer, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "header", "footer", "onMenuChange"]);
-    // States
     const [checkedState, setCheckedState] = useState({});
-    // Side Effects
     useEffect(() => {
         setCheckedState(prev => (isEqual(prev, checkedCategories) ? prev : checkedCategories));
     }, [checkedCategories]);
-    // Ref
     const timeoutAfterChange = useRef(null);
-    // Handlers
     const handleClickMenu = e => {
         var _a;
         try {
@@ -63,7 +59,6 @@ export const CategoryListing = memo(props => {
             });
         }
     };
-    // Render components
     const renderCustomLabel = useCallback((args) => {
         var _a;
         try {
@@ -108,10 +103,9 @@ export const CategoryListing = memo(props => {
             return undefined;
         }
     }, [renderCustomLabel]);
-    // Memo
     const menuItems = useMemo(() => {
         const menuItems = [];
-        items === null || items === void 0 ? void 0 : items.forEach((item, index) => {
+        items === null || items === void 0 ? void 0 : items.forEach((item, _) => {
             // if (index > 0) menuItems.push({ type: 'divider' });
             const menuItem = getItem(Object.assign(Object.assign({}, item), { parentId: null }), true);
             if (menuItem)

package/es/components/template/TemplateListing/index.js

@@ -25,11 +25,8 @@ import { LoadMoreBlock, TemplateListingWrapper, TemplateWrapper } from './styled
 // Hooks
 import { useIntersectionObserver, useListingItemResize } from '@antscorp/antsomi-ui/es/hooks';
 export const TemplateListing = memo(props => {
-    // Props
     const { templatesProps = TEMPLATES_DEFAULT, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, emptyProps = EMPTY_DEFAULT, previewModalProps, } = props;
-    // States
     const [openPreviewModal, setOpenPreviewModal] = useState(false);
-    // Variables
     const { header, footer, items = [], gap = LISTING_GAP_DEFAULT, loading = false, wrapperClassName, wrapperStyle, onLoadMoreTemplates = () => { }, } = templatesProps || {};
     const _a = previewModalProps || {}, { onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["onOk", "onCancel"]);
     const _b = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps } = _b, restOfTemplateItemProps = __rest(_b, ["width", "height", "previewBtnProps"]);
@@ -51,7 +48,6 @@ export const TemplateListing = memo(props => {
             }
         },
     });
-    // Handlers
     const handleClickThumbnailPreview = (id) => {
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
         setOpenPreviewModal(true);

package/es/hooks/index.d.ts

@@ -19,3 +19,6 @@ export * from './useMutationObserver';
 export * from './useKeyEventCanvas';
 export * from './useDragEvent';
 export * from './useDropFile';
+export * from './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';

package/es/hooks/index.js

@@ -38,3 +38,6 @@ export * from './useMutationObserver';
 export * from './useKeyEventCanvas';
 export * from './useDragEvent';
 export * from './useDropFile';
+export * from './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';

package/es/hooks/useEventListener.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject } from 'react';
+declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof HTMLElementEventMap & keyof SVGElementEventMap, T extends Element = K extends keyof HTMLElementEventMap ? HTMLDivElement : SVGElement>(eventName: K, handler: ((event: HTMLElementEventMap[K]) => void) | ((event: SVGElementEventMap[K]) => void), element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
+export { useEventListener };

package/es/hooks/useEventListener.js

@@ -0,0 +1,28 @@
+// Libraries
+import { useEffect, useRef } from 'react';
+// Hooks
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+function useEventListener(eventName, handler, element, options) {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        var _a;
+        // Define the listening target
+        const targetElement = (_a = element === null || element === void 0 ? void 0 : element.current) !== null && _a !== void 0 ? _a : window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = event => {
+            savedHandler.current(event);
+        };
+        targetElement.addEventListener(eventName, listener, options);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener, options);
+        };
+    }, [eventName, element, options]);
+}
+export { useEventListener };

package/es/hooks/useListingItemResize.js

@@ -1,19 +1,14 @@
 // Libraries
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
 import { isNumber } from 'lodash';
 const DEFAULT_RATIO = 1;
 export const useListingItemResize = (props) => {
     var _a;
     const { initialWidth, gap } = props;
-    // Ref
     const ref = useRef(null);
-    const timeoutAfterChange = useRef(null);
-    // Hooks
     const forceUpdate = useForceUpdate();
-    /* Variables */
     const containerWidth = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    /* Memo */
     /**
      * The number of items per row to display in the container
      */
@@ -45,39 +40,23 @@ export const useListingItemResize = (props) => {
         }
         return DEFAULT_RATIO;
     }, [containerWidth, gap, initialWidth, itemPerRow]);
-    // template-listing-wrapper
-    // Hooks
-    // useMutationObserver(
-    //   mutationsList => {
-    //     const templateListingElements = mutationsList?.filter(item =>
-    //       (item.target as Element)?.classList?.contains('template-listing-wrapper'),
-    //     );
-    //     // console.log({ templateListingElements, mutationsList });
-    //     // if (timeoutAfterChange) {
-    //     //   clearTimeout(timeoutAfterChange.current);
-    //     // }
-    //     // timeoutAfterChange.current = setTimeout(() => {
-    //     //   forceUpdate();
-    //     // }, 500);
-    //   },
-    //   ref,
-    //   {
-    //     attributes: true,
-    //     childList: true,
-    //     subtree: true,
-    //     characterData: true,
-    //     attributeOldValue: true,
-    //     characterDataOldValue: true,
-    //   },
-    // );
-    /* Events */
-    window.addEventListener('resize', () => {
-        if (timeoutAfterChange) {
-            clearTimeout(timeoutAfterChange.current);
-        }
-        timeoutAfterChange.current = setTimeout(() => {
-            forceUpdate();
-        }, 200);
-    });
+    useEffect(() => {
+        let timeoutAfterChange = null;
+        const handleResize = () => {
+            if (timeoutAfterChange) {
+                clearTimeout(timeoutAfterChange);
+            }
+            timeoutAfterChange = setTimeout(() => {
+                forceUpdate();
+            }, 500);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (timeoutAfterChange) {
+                clearTimeout(timeoutAfterChange);
+            }
+        };
+    }, [forceUpdate]);
     return { ref, itemPerRow, ratio, gap };
 };

package/es/hooks/useWindowSize.d.ts

@@ -0,0 +1,11 @@
+type WindowSize<T extends number | undefined = number | undefined> = {
+    width: T;
+    height: T;
+};
+type UseWindowSizeOptions<InitializeWithValue extends boolean | undefined> = {
+    initializeWithValue: InitializeWithValue;
+    debounceDelay?: number;
+};
+export declare function useWindowSize(options: UseWindowSizeOptions<false>): WindowSize;
+export declare function useWindowSize(options?: Partial<UseWindowSizeOptions<true>>): WindowSize<number>;
+export {};

package/es/hooks/useWindowSize.js

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { useDebounceCallback, useEventListener, useIsomorphicLayoutEffect } from '.';
+const IS_SERVER = typeof window === 'undefined';
+export function useWindowSize(options = {}) {
+    let { initializeWithValue = true } = options;
+    if (IS_SERVER) {
+        initializeWithValue = false;
+    }
+    const [windowSize, setWindowSize] = useState(() => {
+        if (initializeWithValue) {
+            return {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            };
+        }
+        return {
+            width: undefined,
+            height: undefined,
+        };
+    });
+    const debouncedSetWindowSize = useDebounceCallback(setWindowSize, options.debounceDelay);
+    function handleSize() {
+        const setSize = options.debounceDelay ? debouncedSetWindowSize : setWindowSize;
+        setSize({
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+    }
+    useEventListener('resize', handleSize);
+    // Set size at the first client-side load
+    useIsomorphicLayoutEffect(() => {
+        handleSize();
+    }, []);
+    return windowSize;
+}

package/package.json

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