@antscorp/antsomi-ui 1.3.5-beta.110 → 1.3.5-beta.112

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

@@ -6,13 +6,13 @@ import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, generalAccessSettings, excludeUserAccess, allowAddUser = true } = props;
+    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, } = props;
     const { state } = useShareAccess();
     const { allowEdit, allowView } = state;
     if (!allowEdit && !allowView)
         return null;
     return (React.createElement(StyledLayoutContentRoot, null,
-        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo }),
+        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }),
         React.createElement(PeopleAccess, { excludeUserAccess: excludeUserAccess }),
         React.createElement(GeneralAccess, { generalAccessSettings: generalAccessSettings }),
         React.createElement(ModalTransferOwnership, null)));

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

@@ -1,8 +1,8 @@
 import Icon from '@antscorp/icons';
 import produce from 'immer';
 import { Avatar, Dropdown, List } from 'antd';
-import { remove } from 'lodash';
-import React from 'react';
+import { remove, cloneDeep } from 'lodash';
+import React, { useMemo } from 'react';
 import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
 import { useShareAccess } from '../../hooks';
 import { getActionsByUser } from '../../utils';
@@ -17,6 +17,16 @@ export const PeopleAccess = (props) => {
     const { excludeUserAccess } = props;
     const { state, dispatch } = useShareAccess();
     const { accessInfo, accessUserId, accessUserPermission } = state;
+    const dataSourceSorted = useMemo(() => {
+        if (!Array.isArray(accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess))
+            return [];
+        const listAccess = cloneDeep((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) || []);
+        return listAccess.sort((a, b) => {
+            if (+a.role === +b.role)
+                return 0;
+            return +a.role === 1 ? -1 : 1;
+        });
+    }, [accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess]);
     const handleClickAction = (actKey, updatedUserId) => {
         if (!accessInfo || !dispatch)
             return;
@@ -72,7 +82,7 @@ export const PeopleAccess = (props) => {
         return null;
     return (React.createElement(StyledPeopleAccessRoot, null,
         React.createElement("div", { className: "title" }, "People with access"),
-        React.createElement(List, { dataSource: accessInfo.listAccess, renderItem: access => {
+        React.createElement(List, { dataSource: dataSourceSorted, renderItem: access => {
                 const actions = getActionsByUser({
                     userId: accessUserId,
                     updatedUserId: access.userId,

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ShareAccessProps } from '../../types';
-type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo'>;
+type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo' | 'placeholder'>;
 export declare const SearchUser: (props: SearchUserProps) => React.JSX.Element | null;
 export {};

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

@@ -17,7 +17,7 @@ import produce from 'immer';
 import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
 import { updateObjAccessInfo } from '../../actions';
 export const SearchUser = (props) => {
-    const { getUserInfo } = props;
+    const { getUserInfo, placeholder } = props;
     const { state, dispatch } = useShareAccess();
     const { accessInfo, allowEdit } = state;
     const [users, setUsers] = useState([]);
@@ -58,11 +58,12 @@ export const SearchUser = (props) => {
             draft.listAccess.push(newUser);
         });
         dispatch(updateObjAccessInfo(updated));
+        setUsers([]);
     };
     if (!allowEdit)
         return null;
     return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(Select, { showSearch: true, placeholder: "Add people and groups", value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
+        React.createElement(Select, { showSearch: true, placeholder: placeholder || 'Add people and groups', value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
                 value: user.user_id,
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),

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

@@ -40,6 +40,7 @@ export type ShareAccessProps = {
     };
     accessInfo?: ObjectAccessInfo;
     allowAddUser?: boolean;
+    placeholder?: string;
     excludeUserAccess?: ExcludeUserAccess;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     generalAccessSettings?: GeneralAccessSettings;

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts

@@ -56,6 +56,7 @@ export interface TemplateSaveAsProps {
         label?: string;
         isLoading?: boolean;
         defaultNewTemplateName?: string;
+        selectPlaceholder?: string;
         onSearch?: (searchValue: string) => void;
         onNamePopupScroll?: SelectProps['onPopupScroll'];
         onScrollToBottom?: () => void;

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -11,21 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React, { useEffect, useState } from 'react';
-import { Dropdown, Form } from 'antd';
+import { Form } from 'antd';
 import dayjs from 'dayjs';
 // Components
-import { Tooltip, Button, Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, Space, Spin, } from '@antscorp/antsomi-ui/es/components';
+import { Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, Space, Spin, } from '@antscorp/antsomi-ui/es/components';
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 // Styles
 import { TemplateSaveAsStyled } from './styled';
-import { ImageSlider } from './components';
+import { Category, ImageSlider } from './components';
 const { Text } = Typography;
 export const TemplateSaveAs = props => {
     const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
-    const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
+    const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
     const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
     const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
     const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
@@ -54,24 +54,18 @@ export const TemplateSaveAs = props => {
             onChange(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, value), (!(value === null || value === void 0 ? void 0 : value.saveOption) && { saveOption: saveNewValue })), (!(value === null || value === void 0 ? void 0 : value.templateName) && { templateName: { id: undefined, label: templateNameNew } })), (!(value === null || value === void 0 ? void 0 : value.defaultThumbnail) && { defaultThumbnail })), newValue), (_b = (_a = form === null || form === void 0 ? void 0 : form.getFieldsError()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errors);
         }
     };
-    const handleAddCategory = ({ parentKey, item, }) => {
-        const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
-        if (currCategory) {
-            const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +item] });
-            handleChangeValue({ categories: newCategory });
-        }
-        else {
-            const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [+item] });
-            handleChangeValue({ categories: newCategory });
-        }
+    const handleAddCategory = ({ parentKey, childKey }) => {
+        const currCategory = (categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey]) || [];
+        const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +childKey] });
+        handleChangeValue({ categories: newCategory });
     };
-    const handleRemoveCategory = ({ parent, item, }) => {
-        const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parent];
+    const handleRemoveCategory = ({ parentKey, childKey }) => {
+        const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
         if (!currCategory)
             return;
-        const newChildren = currCategory.filter(child => child !== item);
+        const newChildren = currCategory.filter(child => child !== childKey);
         handleChangeValue({
-            categories: Object.assign(Object.assign({}, categoriesValue), { [parent]: newChildren }),
+            categories: Object.assign(Object.assign({}, categoriesValue), { [parentKey]: newChildren }),
         });
     };
     return (React.createElement(Form, { form: form, initialValues: {
@@ -95,13 +89,12 @@ export const TemplateSaveAs = props => {
                     React.createElement(Flex, { className: "field-container" },
                         React.createElement(Text, { className: "field-title field-title--middle" },
                             templateLabel || 'Template name',
-                            " ",
-                            React.createElement("span", null, " *")),
+                            React.createElement("span", null, "\u2009*")),
                         saveOption === saveNewValue ? (React.createElement(Form.Item, { name: "template-name", validateTrigger: "onChange", noStyle: true, rules: [{ required: true }] },
                             React.createElement(Input, { className: "field-input", value: templateNameNew, debounce: 100, onAfterChange: value => {
                                     handleChangeValue({ templateName: { id: undefined, label: value } });
                                     setTemplateNameNew(value);
-                                }, "aria-valuetext": templateNameNew, required: true }))) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
+                                }, "aria-valuetext": templateNameNew, required: true }))) : (React.createElement(Select, { className: "field-input", placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
                                 if (onNamePopupScroll)
                                     onNamePopupScroll(e);
                                 if (onScrollToBottom) {
@@ -160,41 +153,11 @@ export const TemplateSaveAs = props => {
                             React.createElement(Spin, { size: "small" })))) : null,
                     !isLoadingCategories && categories
                         ? categories.map(parentCategory => {
-                            var _a;
                             const selectedChildren = categoriesValue[parentCategory.key];
-                            const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key)));
                             // NOTE: filter to remove device and template categories
-                            if ((omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.length) &&
-                                omitCategories.includes(parentCategory.key.toString()))
+                            if (omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.includes(parentCategory.key.toString()))
                                 return null;
-                            return (React.createElement(Flex, { key: parentCategory.key, className: "field-container" },
-                                React.createElement(Text, { className: "field-title" }, parentCategory.label),
-                                React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, 
-                                /* selectedCategory */
-                                selectedChildren === null || selectedChildren === void 0 ? void 0 :
-                                    selectedChildren.map(selectedKey => {
-                                        var _a;
-                                        const selectedLabel = (_a = parentCategory.children.find(item => item.key === selectedKey)) === null || _a === void 0 ? void 0 : _a.label;
-                                        return (React.createElement(Flex, { key: selectedKey, className: "selected-category", justify: "space-between", align: "center" },
-                                            React.createElement(Tooltip, { title: selectedLabel, zIndex: 3001 },
-                                                React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
-                                            ' ',
-                                            React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
-                                                    parent: parentCategory.key,
-                                                    item: selectedKey,
-                                                }) }, "\u00D7")));
-                                    }),
-                                    React.createElement(Dropdown, { menu: {
-                                            items: remainChildren,
-                                            onClick: ({ key }) => {
-                                                handleAddCategory({
-                                                    parentKey: parentCategory.key,
-                                                    item: key,
-                                                });
-                                            },
-                                        }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
-                                        "+ Add ", (_a = parentCategory.label) === null || _a === void 0 ? void 0 :
-                                        _a.toLowerCase())) : (parentCategory.label)))));
+                            return (React.createElement(Category, { key: parentCategory.key, categoryKey: parentCategory.key, categoryChildren: parentCategory.children, label: parentCategory.label, selected: selectedChildren, onAddCategory: handleAddCategory, onRemoveCategory: handleRemoveCategory }));
                         })
                         : null),
                 isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },

package/es/components/molecules/TemplateSaveAs/components/Category/Category.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type EditCategory = ({ parentKey, childKey, }: {
+    parentKey: string | number;
+    childKey: string | number;
+}) => void;
+interface CategoryProps {
+    categoryKey: string | number;
+    categoryChildren: Array<{
+        key: string | number;
+        label: string | React.ReactNode;
+    }>;
+    label: string | React.ReactNode;
+    selected: (string | number)[];
+    onRemoveCategory: EditCategory;
+    onAddCategory: EditCategory;
+}
+export declare const Category: React.FC<CategoryProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/Category/Category.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Tooltip, Button, Flex, Typography, Dropdown } from '@antscorp/antsomi-ui/es/components';
+const { Text } = Typography;
+export const Category = props => {
+    const { categoryKey, categoryChildren, label, selected, onRemoveCategory, onAddCategory } = props;
+    const remainChildren = categoryChildren.filter(item => !(selected === null || selected === void 0 ? void 0 : selected.includes(item.key)));
+    return (React.createElement(Flex, { className: "field-container" },
+        React.createElement(Text, { className: "field-title" }, label),
+        React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, selected === null || selected === void 0 ? void 0 :
+            selected.map(selectedKey => {
+                var _a;
+                const selectedLabel = (_a = categoryChildren.find(item => item.key === selectedKey)) === null || _a === void 0 ? void 0 : _a.label;
+                return (React.createElement(Flex, { key: selectedKey, className: "selected-category", justify: "space-between", align: "center" },
+                    React.createElement(Tooltip, { title: selectedLabel, zIndex: 3001 },
+                        React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
+                    React.createElement("span", { className: "remove-btn", onClick: () => onRemoveCategory({ parentKey: categoryKey, childKey: selectedKey }) }, "\u00D7")));
+            }),
+            React.createElement(Dropdown, { menu: {
+                    items: remainChildren,
+                    onClick: ({ key }) => onAddCategory({ parentKey: categoryKey, childKey: key }),
+                }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof label === 'string' ? React.createElement(Button, null,
+                "+ Add ", label === null || label === void 0 ? void 0 :
+                label.toLowerCase()) : label))));
+};

package/es/components/molecules/TemplateSaveAs/components/Category/index.d.ts

@@ -0,0 +1,2 @@
+export { Category } from './Category';
+export type { EditCategory } from './Category';

package/es/components/molecules/TemplateSaveAs/components/Category/index.js

@@ -0,0 +1 @@
+export { Category } from './Category';

package/es/components/molecules/TemplateSaveAs/components/index.d.ts

@@ -1,2 +1,4 @@
 export { ImageSlider } from './ImageSlider';
 export type { ImageSliderProps } from './ImageSlider';
+export { Category } from './Category';
+export type { EditCategory } from './Category';

package/es/components/molecules/TemplateSaveAs/components/index.js

@@ -1 +1,2 @@
 export { ImageSlider } from './ImageSlider';
+export { Category } from './Category';

package/es/components/organism/PreviewTemplateModal/components/Banner/index.js

@@ -1,5 +1,6 @@
 // Libraries
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 // Styled
 import { BannerWrapper } from './styled';
 // Components
@@ -9,9 +10,22 @@ import { DEVICE_TYPE } from '../../constants';
 export const Banner = memo(props => {
     const { deviceType, showSkeleton = false, children } = props;
     const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
+    // States
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    // Side effects
+    useEffect(() => {
+        setShouldAnimate(true);
+        const timerId = setTimeout(() => {
+            setShouldAnimate(false);
+        }, 1000);
+        return () => clearTimeout(timerId);
+    }, [children]);
     return (React.createElement(BannerWrapper, null,
-        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper' : 'desktop-wrapper'}` },
-            React.createElement("div", { className: "content-wrapper" }, isMobile ? React.createElement(MobileFrameV2, null, children || null) : children || null),
+        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
+            React.createElement("div", { className: classNames({
+                    'content-wrapper': true,
+                    'animate__animated animate__fadeIn': shouldAnimate,
+                }) }, isMobile ? React.createElement(MobileFrameV2, null, children || null) : children || null),
             showSkeleton && (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: "skeleton" }),
                 React.createElement("div", { className: "backdrop" }))))));

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -17,6 +17,7 @@ export const BannerWrapper = styled.div `
     width: 380px;
     height: 800px;
     border-radius: 80px;
+    animation-duration: 0.2s !important;
 
     .content-wrapper {
       width: fit-content;
@@ -34,7 +35,7 @@ export const BannerWrapper = styled.div `
     height: 100%;
     width: 100%;
     border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-
+    transition: width 0.2s ease, height 0.2s ease;
     .content-wrapper {
       width: 100%;
       height: 100%;
@@ -43,9 +44,10 @@ export const BannerWrapper = styled.div `
 
   .content-wrapper {
     position: absolute;
-    top: 0;
-    left: 0;
     z-index: 12;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
   .skeleton {

package/es/components/organism/PreviewTemplateModal/components/Information/index.js

@@ -8,22 +8,23 @@ import { Button, Radio, Typography, Flex } from '../../../../atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
 export const Information = memo(props => {
-    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = '', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description, categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
     return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
         React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
         React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },
-            React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            description && React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
             categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
                 React.createElement("div", null,
                     label,
                     ":"),
                 React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', ')))))),
-        showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
-                label: (React.createElement(Flex, { gap: 5, align: "center" },
-                    React.createElement(Icon, { type: icon }),
-                    label)),
-                value,
-            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
-        React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
-            React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText))));
+        React.createElement(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true },
+            showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
+                    label: (React.createElement(Flex, { gap: 5, align: "center" },
+                        React.createElement(Icon, { type: icon }),
+                        label)),
+                    value,
+                })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
+            React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
+                React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText)))));
 });

package/es/components/organism/PreviewTemplateModal/components/Information/styled.js

@@ -6,7 +6,8 @@ export const InformationWrapper = styled(Flex) `
   width: 350px;
   flex-shrink: 0;
   font-size: 12px;
-  max-height: 762px;
+  height: 100%;
+  max-height: 100%;
 
   .title {
     font-size: 16px;
@@ -33,10 +34,12 @@ export const InformationWrapper = styled(Flex) `
         font-size: 24px;
       }
     }
+  }
 
-    .content-information {
-      flex: 1 1 0%;
-      overflow-y: auto;
-    }
+  .content-information {
+    flex: 1 1 0%;
+    height: fit-content;
+    overflow-y: auto;
+    max-height: 682px;
   }
 `;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -17,7 +17,7 @@ import { ThumbnailCard } from '../../../../molecules';
 import { Empty } from '../../../../template/TemplateListing/components/Empty';
 import { Flex } from '../../../../atoms';
 // Styled
-import { SimilarTemplateWrapper } from './styled';
+import { SimilarTemplateWrapper, TemplateListWrapper } from './styled';
 // Constants
 import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
 const MAX_QUANTITY_TEMPLATES = 4;
@@ -27,6 +27,6 @@ export const SimilarTemplate = memo(props => {
     const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
     return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
-        React.createElement(Flex, { gap: 30, justify: "center" }, isEmpty(similarTemplates) ? (React.createElement(Empty, null)) : ((_a = similarTemplates
-            .slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps)))))))) : null;
+        isEmpty(similarTemplates) ? (React.createElement(Flex, { justify: "center" },
+            React.createElement(Empty, null))) : (React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps)))))))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
 export declare const SimilarTemplateWrapper: 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 TemplateListWrapper: import("styled-components").StyledComponent<"div", any, {
+    templateQuantity: number;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js

@@ -10,3 +10,8 @@ export const SimilarTemplateWrapper = styled(Flex) `
     font-size: 16px;
   }
 `;
+export const TemplateListWrapper = styled.div `
+  display: grid;
+  grid-template-columns: ${({ templateQuantity }) => `repeat(${templateQuantity}, minmax(0, 1fr))`};
+  gap: 30px;
+`;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.js

@@ -50,7 +50,7 @@ export const ThumbnailSlider = memo(props => {
         return (React.createElement(Flex, { gap: GAP_X },
             !!index && (React.createElement(Flex, { align: "center" },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
-            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
     };
     return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
         React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
@@ -59,12 +59,14 @@ export const ThumbnailSlider = memo(props => {
             }, onBeforeInit: swiper => {
                 setTimeout(() => {
                     // Override prevEl & nextEl now that refs are defined
-                    swiper.params.navigation.prevEl = navigationPrevRef.current;
-                    swiper.params.navigation.nextEl = navigationNextRef.current;
-                    // Re-init navigation
-                    swiper.navigation.destroy();
-                    swiper.navigation.init();
-                    swiper.navigation.update();
+                    if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
+                        swiper.params.navigation.prevEl = navigationPrevRef.current;
+                        swiper.params.navigation.nextEl = navigationNextRef.current;
+                        // Re-init navigation
+                        swiper.navigation.destroy();
+                        swiper.navigation.init();
+                        swiper.navigation.update();
+                    }
                 });
             }, onSlideChange: ({ isBeginning, isEnd }) => {
                 setSlideBeginning(isBeginning);

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -11,11 +11,21 @@ export const ThumbnailSliderWrapper = styled.div `
 
   .swiper {
     max-width: 1030px;
+
     .swiper-slide {
       width: fit-content !important;
     }
   }
 
+  .thumbnail-animation {
+    box-shadow: none;
+    transition: box-shadow 0.1s ease-in-out;
+
+    &:hover {
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
   .custom-button-prev,
   .custom-button-next {
     z-index: 10;

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

@@ -10,10 +10,11 @@ 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
@@ -23,11 +24,19 @@ 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 = {}, emptyProps, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "onMenuChange"]);
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "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;
@@ -35,9 +44,15 @@ export const CategoryListing = memo(props => {
             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) {
@@ -53,7 +68,7 @@ export const CategoryListing = memo(props => {
         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 +83,7 @@ export const CategoryListing = memo(props => {
             });
             return null;
         }
-    }, [checkedCategories]);
+    }, [checkedState]);
     const getItem = useCallback((item, isRoot) => {
         try {
             const { key, label, children } = item;

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

@@ -4,6 +4,7 @@ import { EmptyProps } from '../types/Empty';
 export declare const CATEGORY_LISTING_WITH = 220;
 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'>;

package/es/components/template/TemplateListing/constants/defaultProps.js

@@ -2,6 +2,7 @@
 export const CATEGORY_LISTING_WITH = 220;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
 export const LISTING_GAP_DEFAULT = 30;
+export const CATEGORY_DEBOUNCE = 400;
 /* Default props */
 export const TEMPLATE_ITEM_DEFAULT = {
     removable: true,

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

@@ -63,7 +63,7 @@ export const TemplateListing = memo(props => {
         setOpenPreviewModal(false);
     };
     return (React.createElement(TemplateListingWrapper, null,
-        React.createElement(CategoryListing, Object.assign({}, categoryListingProps)),
+        React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
         React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading template-listing__loading--full" },
             React.createElement("div", { className: "template-listing" },
                 React.createElement("div", { ref: containerRef, style: {

package/es/components/template/TemplateListing/stories/dataTypes/components/BlankTemplatePropsTable/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 // Utils
@@ -12,32 +12,28 @@ export const BlankTemplatePropsTable = () => {
         {
             key: '1',
             property: 'show',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handler show or hide Blank Template"))),
+            description: React.createElement(Typography.Text, null, "Handler show or hide Blank Template"),
             type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
             default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '2',
             property: 'description',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "The text that is displayed below the Add Button"))),
+            description: (React.createElement(Typography.Text, null, "The text that is displayed below the Add Button")),
             type: React.createElement(CustomTag, { type: "normal" }, "string"),
             default: React.createElement(CustomTag, { type: "default" }, "Blank Template"),
         },
         {
             key: '3',
             property: 'onClick',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Callback onClick on Blank Template"))),
+            description: React.createElement(Typography.Text, null, "Callback onClick on Blank Template"),
             type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '4',
             property: 'blankTemplateRender',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Render Blank Template node for customizing"))),
+            description: React.createElement(Typography.Text, null, "Render Blank Template node for customizing"),
             type: React.createElement(CustomTag, { type: "normal" }, '(node: ReactNode) => ReactNode'),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },

package/es/components/template/TemplateListing/stories/dataTypes/components/CategoryListingPropsTable/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import LinkTo from '@storybook/addon-links/react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 import { CATEGORY_LISTING_WITH } from '../../../../constants';
@@ -14,8 +14,7 @@ export const CategoryListingPropsTable = () => {
         {
             key: '1',
             property: 'items',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "List of category items"))),
+            description: React.createElement(Typography.Text, null, "List of category items"),
             type: (React.createElement(LinkTo, { story: "t-category-item" },
                 React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
             default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
@@ -23,35 +22,45 @@ export const CategoryListingPropsTable = () => {
         {
             key: '2',
             property: 'width',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Width of category"))),
+            description: React.createElement(Typography.Text, null, "Width of category"),
             type: React.createElement(CustomTag, { type: "normal" }, "number"),
             default: React.createElement(CustomTag, { type: "default" }, CATEGORY_LISTING_WITH),
         },
         {
             key: '3',
             property: 'loading',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Show loading category listing"))),
+            description: React.createElement(Typography.Text, null, "Show loading category listing"),
             type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
             default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '4',
             property: 'show',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handler show or hide category"))),
+            description: React.createElement(Typography.Text, null, "Handler show or hide category"),
             type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
             default: React.createElement(CustomTag, { type: "default" }, "true"),
         },
         {
             key: '5',
             property: 'checkedCategories',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Record of checked categories"))),
+            description: React.createElement(Typography.Text, null, "Record of checked categories"),
             type: React.createElement(CustomTag, { type: "link" }, "TCheckedCategories"),
             default: React.createElement(CustomTag, { type: "default" }, '{ }'),
         },
+        {
+            key: '6',
+            property: 'debounceChangeMenu',
+            description: React.createElement(Typography.Text, null, "Handle debounce onchange menu function"),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, "500"),
+        },
+        {
+            key: '7',
+            property: 'onMenuChange',
+            description: React.createElement(Typography.Text, null, "Onchange menu function"),
+            type: React.createElement(CustomTag, { type: "normal" }, `(value: TCheckedCategories) => void`),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
     ];
     return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };

package/es/components/template/TemplateListing/stories/dataTypes/components/EmptyPropsTable/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 // Utils
@@ -12,16 +12,14 @@ export const EmptyPropsTable = () => {
         {
             key: '1',
             property: 'icon',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Customize Empty icon"))),
+            description: React.createElement(Typography.Text, null, "Customize Empty icon"),
             type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '2',
             property: 'description',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "The text that is displayed below the Icon"))),
+            description: React.createElement(Typography.Text, null, "The text that is displayed below the Icon"),
             type: React.createElement(CustomTag, { type: "normal" }, "string"),
             default: React.createElement(CustomTag, { type: "default" }, "No data"),
         },

package/es/components/template/TemplateListing/stories/dataTypes/components/TCategoryItemTable/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 // Utils
@@ -12,32 +12,28 @@ export const TCategoryItemTable = () => {
         {
             key: '1',
             property: 'TCategoryItemId',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Identification of Category Item"))),
+            description: React.createElement(Typography.Text, null, "Identification of Category Item"),
             type: React.createElement(CustomTag, { type: "link" }, "TCategoryItemId"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '2',
             property: 'label',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Label of Category Item"))),
+            description: React.createElement(Typography.Text, null, "Label of Category Item"),
             type: React.createElement(CustomTag, { type: "normal" }, "string"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '3',
             property: 'total',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Total child categories of it"))),
+            description: React.createElement(Typography.Text, null, "Total child categories of it"),
             type: React.createElement(CustomTag, { type: "normal" }, "number"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '4',
             property: 'children',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Its children categories"))),
+            description: React.createElement(Typography.Text, null, "Its children categories"),
             type: React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"),
             default: React.createElement(CustomTag, { type: "default" }, " [ ] "),
         },

package/es/components/template/TemplateListing/stories/dataTypes/components/TTemplateItemTable/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 // Utils
@@ -12,24 +12,21 @@ export const TTemplateItemTable = () => {
         {
             key: '1',
             property: 'id',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Identification of Template Item"))),
+            description: React.createElement(Typography.Text, null, "Identification of Template Item"),
             type: React.createElement(CustomTag, { type: "link" }, "TThumbnailCardId"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '2',
             property: 'name',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Name of Template Item"))),
+            description: React.createElement(Typography.Text, null, "Name of Template Item"),
             type: React.createElement(CustomTag, { type: "normal" }, "string"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '3',
             property: 'thumbnail',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Thumbnail image of Template Item"))),
+            description: React.createElement(Typography.Text, null, "Thumbnail image of Template Item"),
             type: React.createElement(CustomTag, { type: "normal" }, "string"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },

package/es/components/template/TemplateListing/stories/dataTypes/components/TemplatesPropsTable/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import LinkTo from '@storybook/addon-links/react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Tag, Typography, Flex } from '../../../../../../atoms';
+import { Tag, Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 import { LISTING_GAP_DEFAULT } from '../../../../constants';
@@ -14,8 +14,7 @@ export const TemplatesPropsTable = () => {
         {
             key: '1',
             property: 'items',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "List of templates"))),
+            description: React.createElement(Typography.Text, null, "List of templates"),
             type: (React.createElement(LinkTo, { story: "t-template-item" },
                 React.createElement(CustomTag, { type: "link" }, "( TTemplateItem & T) [ ]"))),
             default: React.createElement(Tag, { bordered: false }, "[ ]"),
@@ -23,15 +22,14 @@ export const TemplatesPropsTable = () => {
         {
             key: '2',
             property: 'loading',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Show loading template listing"))),
+            description: React.createElement(Typography.Text, null, "Show loading template listing"),
             type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
             default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '3',
             property: 'gap',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
+            description: (React.createElement(React.Fragment, null,
                 React.createElement(Typography.Text, null, "Spacing between template items"),
                 React.createElement(Typography.Text, null, "When the screen size changes, the height and width of each template will change according to the screen, but the gap remains the same."))),
             type: React.createElement(CustomTag, { type: "normal" }, "number"),
@@ -40,8 +38,7 @@ export const TemplatesPropsTable = () => {
         {
             key: '4',
             property: 'onLoadMoreTemplates',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handles loading additional data based on lazy loading mechanism"))),
+            description: (React.createElement(Typography.Text, null, "Handles loading additional data based on lazy loading mechanism")),
             type: React.createElement(CustomTag, { type: "normal" }, '( ) => void'),
             default: React.createElement(CustomTag, { type: "default" }, '( ) => { }'),
         },

package/es/components/template/TemplateListing/types/CategoryListing.d.ts

@@ -9,6 +9,7 @@ export interface CategoryListingProps extends MenuProps {
     loading?: boolean;
     show?: boolean;
     checkedCategories?: TCheckedCategories;
+    debounceChangeMenu?: number;
     emptyProps?: EmptyProps;
     onMenuChange?: (value: TCheckedCategories) => void;
 }

package/package.json

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