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

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { HeaderV2Props } from '../../../molecules';
+import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
+import { ContentWrapperProps, WorkspaceProps } from '../types';
+import { LeftMenuProps } from '../../../organism';
+export interface HeaderStore extends Partial<HeaderV2Props> {
+    browserTitle?: string;
+}
+export interface LeftMenuStore extends LeftMenuProps {
+    show?: boolean;
+    onClickCreateDashboard?: React.MouseEventHandler<HTMLElement>;
+}
+export interface LayoutStoreState {
+    header: HeaderStore;
+    leftMenu: LeftMenuStore;
+    workspace: WorkspaceProps;
+    contentWrapper: ContentWrapperProps;
+}
+interface LayoutStore {
+    state: LayoutStoreState;
+    setHeaderState: (state: DeepPartial<HeaderStore>) => void;
+    setLeftMenuState: (state: DeepPartial<LeftMenuStore>) => void;
+    setWorkspaceState: (state: Partial<WorkspaceProps>) => void;
+    setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
+    setContentWrapperState: (state: DeepPartial<ContentWrapperProps>) => 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

@@ -0,0 +1,45 @@
+// Libraries
+import { create } from 'zustand';
+import { cloneDeep, merge } from 'lodash';
+const initialState = {
+    header: {},
+    leftMenu: {},
+    workspace: {},
+    contentWrapper: {},
+};
+export const useLayoutStore = create(set => ({
+    state: initialState,
+    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) }),
+    })),
+    setLeftMenuState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: Object.assign(Object.assign({}, store.state.leftMenu), newState) }),
+    })),
+    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: {} }),
+    })),
+    resetLeftMenuState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: {} }),
+    })),
+    resetWorkspaceState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { workspace: {} }),
+    })),
+    resetContentWrapperState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { contentWrapper: {} }),
+    })),
+    resetLayoutState: () => set(() => ({
+        state: {
+            contentWrapper: {},
+            header: {},
+            leftMenu: {},
+            workspace: {},
+        },
+    })),
+}));

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+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, {
+    $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

@@ -0,0 +1,87 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../atoms';
+// Constants
+import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const LayoutWrapper = styled(Flex) `
+  width: 100%;
+  background-color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_3};
+  position: relative;
+
+  .layout-header {
+    position: absolute;
+    z-index: 20;
+    ${({ showLeftMenu }) => showLeftMenu
+    ? `  
+        width: calc(100% - 70px);
+        left: 70px;
+      `
+    : 'width: 100%'};
+  }
+
+  .layout-body {
+    position: relative;
+    width: 100%;
+    z-index: 10;
+
+    &__menu {
+      flex-shrink: 0;
+    }
+
+    &__content {
+      position: relative;
+      flex: 1 1 0%;
+      border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+      background-color: white;
+      height: 100%;
+      padding: 15px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      overflow: auto;
+      z-index: 1;
+    }
+  }
+`;
+export const ContentWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  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;
+  top: 0px;
+  position: sticky;
+  /* height: 50px; */
+  width: 100%;
+  /* margin-bottom: 6px; */
+  background-color: white;
+  z-index: 999;
+
+  > div {
+    margin-top: 15px;
+    margin-bottom: 6px;
+  }
+`;
+export const ChildrenWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  & > div {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+  /* height: calc(100% - 50px); */
+`;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface ContentWrapperProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    noPadding?: boolean;
+    showNotification?: 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/components/template/Layout/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './permission';

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

@@ -0,0 +1 @@
+export * from './permission';

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

@@ -0,0 +1,22 @@
+import { FeatureMenuPermission, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export declare const checkingRoleScope: (args: {
+    menuCode: string;
+    menuPermission: FeatureMenuPermission;
+    action?: string;
+    scope?: number;
+    isExactly?: boolean;
+}) => boolean;
+export declare const hasSelectAccountPermission: (args: {
+    activeItemPath: TFeatureMenu[];
+    flattenPermissionList?: FeatureMenuPermission[];
+    menuListPermission?: FeatureMenuPermission[];
+    appItem?: TFeatureMenu;
+}) => boolean;

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

@@ -0,0 +1,117 @@
+import { MENU_CODE, APP_ROLE_SCOPE, MENU_PERMISSIONS, DUPLICATE_PERMISSION_MENU_CODES, } from '../constants';
+import { isEmpty } from 'lodash';
+const EDIT_ROLE = new Set(['CREATE', 'UPDATE', 'DELETE']);
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export const checkingRoleScope = (args) => {
+    const { menuCode, menuPermission, scope = APP_ROLE_SCOPE.NONE, action = 'NONE', isExactly = false, } = args;
+    if (![
+        MENU_CODE.JOURNEY,
+        MENU_CODE.LABELS,
+        MENU_CODE.DASHBOARD_OVERVIEW,
+        MENU_CODE.MEDIA_TEMPLATE,
+        MENU_CODE.EMAIL_TEMPLATE,
+        MENU_CODE.BATCH_STREAMING,
+        MENU_CODE.REALTIME_STREAMING,
+        MENU_CODE.DATASOURCES,
+        // MENU_CODE.SEGMENT,
+        // MENU_CODE.DESTINATIONS_HUB,
+        MENU_CODE.BUSINESS_OBJECT,
+        MENU_CODE.DATA_OBJECT,
+        MENU_CODE.DATA_VIEW,
+    ].includes(menuCode))
+        return false;
+    const menuRole = menuPermission;
+    let isOK = false;
+    // role Create/Update/Delete is similar current define, only has view and edit(create/delete)
+    const { selected_view = 1, selected_edit = 1 } = menuRole;
+    if (isExactly) {
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) === Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) === Number(scope);
+        }
+    }
+    else {
+        // eslint-disable-next-line no-lonely-if
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) >= Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) >= Number(scope);
+        }
+    }
+    return isOK;
+};
+export const hasSelectAccountPermission = (args) => {
+    const { activeItemPath, flattenPermissionList, menuListPermission, appItem } = args;
+    if (isEmpty(activeItemPath))
+        return false;
+    let roleScope = false;
+    activeItemPath.reverse().pop();
+    for (const activeItem of activeItemPath) {
+        let permissionCode;
+        /** Dùng để check xem Permission Code có được lấy từ @constant MENU_PERMISSIONS hay không */
+        let isExternalPermissionCode = false;
+        /**
+         * Kiểm tra nếu MENU_CODE có trong @constant MENU_PERMISSIONS thì lấy Permission từ constant
+         * Không thì lấy từ api Permission
+         * Nếu ở cả 2 nơi đều không có permission thì không hiện account selection
+         */
+        if (Object.keys(MENU_PERMISSIONS).includes(activeItem.menu_item_code)) {
+            permissionCode = MENU_PERMISSIONS[activeItem.menu_item_code];
+            isExternalPermissionCode = true;
+        }
+        else {
+            permissionCode = activeItem.permission_code;
+        }
+        const menuPermission = (() => {
+            var _a;
+            if (DUPLICATE_PERMISSION_MENU_CODES.includes(activeItem.menu_item_code)) {
+                if (appItem) {
+                    const appPermission = (() => {
+                        switch (appItem === null || appItem === void 0 ? void 0 : appItem.permission_code) {
+                            case 'SQL_WORKSPACE':
+                                return 'APP_ANTALYSER';
+                            default:
+                                return appItem === null || appItem === void 0 ? void 0 : appItem.permission_code;
+                        }
+                    })();
+                    const parentMenu = menuListPermission === null || menuListPermission === void 0 ? void 0 : menuListPermission.find(item => item.app_code === appPermission);
+                    return (_a = parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.childs) === null || _a === void 0 ? void 0 : _a.find(item => item.menu_code === permissionCode);
+                }
+                return;
+            }
+            return flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
+        })();
+        if (menuPermission) {
+            const checkRoleScope = 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
+         * */
+        if (isExternalPermissionCode) {
+            roleScope = true;
+            break;
+        }
+    }
+    return roleScope;
+};

package/es/components/template/TemplateListing/components/BlankTemplate/styled.js

@@ -2,10 +2,12 @@
 import styled from 'styled-components';
 // Components
 import { Flex } from '../../../../atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const BlankTemplateWrapper = styled(Flex) `
   box-sizing: border-box;
   border: 1px solid #b8cfe6;
-  border-radius: 5px;
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
   cursor: pointer;
 
   .add-blank-btn {

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

@@ -10,34 +10,45 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isEmpty, isNumber } from 'lodash';
 import Icon from '@antscorp/icons';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import isEqual from 'react-fast-compare';
 // Styled
 import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './styled';
 // Components
-import { Checkbox, Spin } from '../../../../atoms';
+import { Checkbox, Scrollbars, Spin } from '../../../../atoms';
 import { Menu } from '../../../../organism';
-import { Empty } from '../Empty';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 // Constants
-import { CATEGORY_LISTING_WITH } from '../../constants';
+import { CATEGORY_DEBOUNCE, CATEGORY_LISTING_WITH } from '../../constants';
 const PATH = 'src/components/template/TemplateListing/components/CategoryListing/index.tsx';
 export const CategoryListing = memo(props => {
-    var _a;
-    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "onMenuChange"]);
-    // Handlers
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, header, footer, 
+    /* Wrapper */
+    wrapperClassName, wrapperStyle, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "header", "footer", "wrapperClassName", "wrapperStyle", "onMenuChange"]);
+    const [checkedState, setCheckedState] = useState({});
+    useEffect(() => {
+        setCheckedState(prev => (isEqual(prev, checkedCategories) ? prev : checkedCategories));
+    }, [checkedCategories]);
+    const timeoutAfterChange = useRef(null);
     const handleClickMenu = e => {
         var _a;
         try {
             const { key, keyPath } = e;
             const parentId = keyPath === null || keyPath === void 0 ? void 0 : keyPath[1];
             if (parentId) {
-                const newCheckedCategories = ((_a = checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key))
-                    ? Object.assign(Object.assign({}, checkedCategories), { [parentId]: checkedCategories[parentId].filter(item => item !== key) }) : Object.assign(Object.assign({}, checkedCategories), { [parentId]: [...((checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) || []), key] });
-                onMenuChange === null || onMenuChange === void 0 ? void 0 : onMenuChange(newCheckedCategories);
+                const newCheckedCategories = ((_a = checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key))
+                    ? Object.assign(Object.assign({}, checkedState), { [parentId]: checkedState[parentId].filter(item => item !== key) }) : Object.assign(Object.assign({}, checkedState), { [parentId]: [...((checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) || []), key] });
+                if (timeoutAfterChange) {
+                    setCheckedState(newCheckedCategories);
+                    clearTimeout(timeoutAfterChange.current);
+                }
+                timeoutAfterChange.current = setTimeout(() => {
+                    onMenuChange === null || onMenuChange === void 0 ? void 0 : onMenuChange(newCheckedCategories);
+                }, debounceChangeMenu);
             }
         }
         catch (error) {
@@ -48,12 +59,11 @@ export const CategoryListing = memo(props => {
             });
         }
     };
-    // Render components
     const renderCustomLabel = useCallback((args) => {
         var _a;
         try {
             const { key, parentId, label, total } = args;
-            const isChecked = !!(!!parentId && ((_a = checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key)));
+            const isChecked = !!(!!parentId && ((_a = checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key)));
             return (React.createElement(CustomLabelStyled, { onClick: e => e.preventDefault() },
                 React.createElement("div", { className: "label" },
                     React.createElement(Checkbox, { checked: isChecked },
@@ -68,7 +78,7 @@ export const CategoryListing = memo(props => {
             });
             return null;
         }
-    }, [checkedCategories]);
+    }, [checkedState]);
     const getItem = useCallback((item, isRoot) => {
         try {
             const { key, label, children } = item;
@@ -93,20 +103,41 @@ 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) => {
-            if (index > 0)
-                menuItems.push({ type: 'divider' });
+        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)
                 menuItems.push(menuItem);
         });
         return menuItems;
     }, [getItem, items]);
-    return show ? (React.createElement(MenuWrapper, { "$width": width },
-        React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
-            React.createElement(Empty, null))) : (React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
+    return (show && !isEmpty(menuItems)) || header || loading ? (React.createElement(MenuWrapper, { "$width": width, className: wrapperClassName, style: wrapperStyle },
+        header,
+        React.createElement(Scrollbars, { className: "category__listing" },
+            React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" },
+                React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: ({ isOpen }) => {
+                        var _a;
+                        return (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+                                fontSize: 20,
+                                color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8,
+                                transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                                insetInlineEnd: 5,
+                                position: 'absolute',
+                            } }));
+                    }, 
+                    // expandIcon={
+                    //   <Icon
+                    //     type="icon-ants-expand-more"
+                    //     style={{
+                    //       fontSize: 20,
+                    //       color: THEME?.token?.bw8,
+                    //       // transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    //     }}
+                    //   />
+                    // }
+                    onClick: handleClickMenu }, restOfProps)),
+                footer)))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

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

@@ -1,40 +1,77 @@
-var _a, _b;
+var _a;
 import styled from 'styled-components';
 import { Typography } from '../../../../atoms';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
 export const MenuWrapper = styled.div `
+  position: relative;
   flex-shrink: 0;
   width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
   overflow: auto;
   overflow-x: hidden;
   border-right: 1px solid rgba(5, 5, 5, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 
-  .antsomi-menu {
+  .category__listing {
+    position: relative;
     height: 100%;
+    overflow-y: auto;
 
-    [role='menuitem'] {
-      width: 100%;
-      border-radius: 0;
-      height: 30px;
-      padding: 0 10px !important;
-      margin-left: 0 !important;
-      margin-right: 0 !important;
+    .antsomi-menu,
+    .ant-menu {
+      [role='menu'] {
+        background-color: white !important;
+      }
+
+      [role='menuitem'] {
+        width: 100%;
+        border-radius: 0;
+        height: 30px;
+        padding: 0 10px !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+
+        .antsomi-menu-title-content,
+        .ant-menu-title-content {
+          height: 100%;
+        }
+      }
 
-      .antsomi-menu-title-content {
-        height: 100%;
+      .antsomi-menu-submenu-title,
+      .ant-menu-submenu-title {
+        height: 30px !important;
+      }
+
+      .antsomi-menu-submenu-title {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        transition: all 0.3s;
+      }
+
+      .antsomi-menu-submenu-open {
+        .antsomi-menu-submenu-title {
+          margin-bottom: 0px;
+        }
+      }
+
+      .antsomi-menu-sub {
+        > li.antsomi-menu-item:first-child {
+          margin-top: 0;
+        }
       }
     }
-  }
 
-  .category-loading {
-    height: 100%;
-  }
+    .category-loading {
+      height: 100%;
+    }
 
-  .empty-wrapper {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    .empty-wrapper {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
   }
 `;
 export const CustomLabelStyled = styled.div `
@@ -67,18 +104,18 @@ export const CustomLabelStyled = styled.div `
 
   .total {
     flex-shrink: 0;
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 400;
-    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
     line-height: 1 !important;
+    font-size: 11px;
     height: fit-content;
   }
 `;
-// TODO: tách class dùng chung
 export const CustomRootLabel = styled.div `
-  font-size: 11px;
+  font-size: 13px !important;
   font-weight: 400;
-  color: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  /* color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8}; */
   height: 100%;
   display: flex;
   align-items: center;
@@ -86,7 +123,7 @@ export const CustomRootLabel = styled.div `
 `;
 export const TextWrapper = styled(Text) `
   max-width: 100%;
-  color: inherit;
+  color: inherit !important;
   height: fit-content;
-  font-size: inherit;
+  font-size: inherit !important;
 `;

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

@@ -1,5 +1,6 @@
 // Libraries
 import React from 'react';
+import { isString } from 'lodash';
 // Components
 import { Icon } from '@antscorp/antsomi-ui/es/components';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -7,12 +8,8 @@ import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyIcon, EmptyWrapper } from './styled';
 const { Text } = Typography;
 export const Empty = props => {
-    const { icon, description } = props;
+    const { icon = React.createElement(Icon, { type: "icon-ants-media" }), description = 'No data' } = props;
     return (React.createElement(EmptyWrapper, null,
-        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, icon),
+        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon),
         React.createElement(Text, { className: "animate__animated animate__fadeInUp" }, description)));
 };
-Empty.defaultProps = {
-    icon: React.createElement(Icon, { type: "icon-ants-media" }),
-    description: 'No data',
-};

package/es/components/template/TemplateListing/constants/defaultProps.d.ts

@@ -1,12 +1,12 @@
 import { ThumbnailCardProps } from '../../../molecules';
-import { BlankTemplateProps, CategoryListingProps, TemplateListingProps, TemplatesProps } from '../types';
+import { BlankTemplateProps, CategoryListingProps, TemplatesProps } from '../types';
 import { EmptyProps } from '../types/Empty';
-export declare const CATEGORY_LISTING_WITH = 220;
+export declare const CATEGORY_LISTING_WITH = 230;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
 export declare const LISTING_GAP_DEFAULT = 30;
+export declare const CATEGORY_DEBOUNCE = 400;
 export declare const TEMPLATE_ITEM_DEFAULT: Omit<ThumbnailCardProps, 'id'>;
 export declare const BLANK_TEMPLATE_DEFAULT: BlankTemplateProps;
 export declare const CATEGORY_LISTING_DEFAULT: Omit<CategoryListingProps, 'items'>;
-export declare const TEMPLATE_LISTING_DEFAULT: TemplateListingProps;
 export declare const EMPTY_DEFAULT: EmptyProps;
 export declare const TEMPLATES_DEFAULT: TemplatesProps;