@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 import Icon from '@antscorp/icons';
 // Components
 import { Button, Flex, Typography } from '../../../../atoms';
@@ -9,11 +10,7 @@ import { BlankTemplateWrapper } from './styled';
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from '@antscorp/antsomi-ui/es/components/molecules/ThumbnailCard/constants';
 export const BlankTemplate = memo(props => {
     const { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, show, description = 'Blank Template', blankTemplateRender, onClick, } = props;
-    const BlankTemplateNode = (React.createElement(BlankTemplateWrapper, { style: { width, height }, align: "center", justify: "center", onClick: onClick },
-        React.createElement(Flex, { align: "center", justify: "center", gap: 10, vertical: true, style: { width: '100%' } },
-            React.createElement(Button, { type: "text", className: "add-blank-btn", icon: React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 24 } }) }),
-            React.createElement("div", { className: "description" },
-                React.createElement(Typography.Text, { ellipsis: { tooltip: description }, style: { maxWidth: '100%', color: 'inherit' } }, description)))));
-    return show ? (blankTemplateRender ? (React.createElement(React.Fragment, null, blankTemplateRender(BlankTemplateNode))) : (BlankTemplateNode)) : null;
+    const BlankTemplateNode = (_jsx(BlankTemplateWrapper, { style: { width, height }, align: "center", justify: "center", onClick: onClick, children: _jsxs(Flex, { align: "center", justify: "center", gap: 10, vertical: true, style: { width: '100%' }, children: [_jsx(Button, { type: "text", className: "add-blank-btn", icon: _jsx(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 24 } }) }), _jsx("div", { className: "description", children: _jsx(Typography.Text, { ellipsis: { tooltip: description }, style: { maxWidth: '100%', color: 'inherit' }, children: description }) })] }) }));
+    return show ? (blankTemplateRender ? (_jsx(_Fragment, { children: blankTemplateRender(BlankTemplateNode) })) : (BlankTemplateNode)) : null;
 });
 BlankTemplate.displayName = 'BlankTemplate';

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

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

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

@@ -1,16 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { 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';
@@ -28,26 +18,29 @@ const PATH = 'src/components/template/TemplateListing/components/CategoryListing
 export const CategoryListing = memo(props => {
     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"]);
+    wrapperClassName, wrapperStyle, onMenuChange, ...restOfProps } = props;
     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];
+            const parentId = keyPath?.[1];
             if (parentId) {
-                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] });
+                const newCheckedCategories = checkedState?.[parentId]?.includes(key)
+                    ? {
+                        ...checkedState,
+                        [parentId]: checkedState[parentId].filter(item => item !== key),
+                    }
+                    : { ...checkedState, [parentId]: [...(checkedState?.[parentId] || []), key] };
                 if (timeoutAfterChange) {
                     setCheckedState(newCheckedCategories);
                     clearTimeout(timeoutAfterChange.current);
                 }
                 timeoutAfterChange.current = setTimeout(() => {
-                    onMenuChange === null || onMenuChange === void 0 ? void 0 : onMenuChange(newCheckedCategories);
+                    onMenuChange?.(newCheckedCategories);
                 }, debounceChangeMenu);
             }
         }
@@ -60,15 +53,10 @@ export const CategoryListing = memo(props => {
         }
     };
     const renderCustomLabel = useCallback((args) => {
-        var _a;
         try {
             const { key, parentId, label, total } = args;
-            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 },
-                        React.createElement(TextWrapper, { ellipsis: { tooltip: label } }, label))),
-                React.createElement("span", { className: "total" }, isNumber(total) ? total : '')));
+            const isChecked = !!(!!parentId && checkedState?.[parentId]?.includes(key));
+            return (_jsxs(CustomLabelStyled, { onClick: e => e.preventDefault(), children: [_jsx("div", { className: "label", children: _jsx(Checkbox, { checked: isChecked, children: _jsx(TextWrapper, { ellipsis: { tooltip: label }, children: label }) }) }), _jsx("span", { className: "total", children: isNumber(total) ? total : '' })] }));
         }
         catch (error) {
             handleError(error, {
@@ -82,17 +70,23 @@ export const CategoryListing = memo(props => {
     const getItem = useCallback((item, isRoot) => {
         try {
             const { key, label, children } = item;
-            return Object.assign(Object.assign(Object.assign({}, item), (isRoot
-                ? {
-                    label: (React.createElement(CustomRootLabel, null,
-                        React.createElement(TextWrapper, { ellipsis: { tooltip: label } }, label))),
-                }
-                : {})), { children: !!children && !isEmpty(children)
-                    ? children === null || children === void 0 ? void 0 : children.map(child => {
-                        const childItem = Object.assign(Object.assign({}, child), { parentId: key });
-                        return getItem(Object.assign(Object.assign({}, childItem), { label: renderCustomLabel(childItem) }));
+            return {
+                ...item,
+                ...(isRoot
+                    ? {
+                        label: (_jsx(CustomRootLabel, { children: _jsx(TextWrapper, { ellipsis: { tooltip: label }, children: label }) })),
+                    }
+                    : {}),
+                children: !!children && !isEmpty(children)
+                    ? children?.map(child => {
+                        const childItem = { ...child, parentId: key };
+                        return getItem({
+                            ...childItem,
+                            label: renderCustomLabel(childItem),
+                        });
                     })
-                    : undefined });
+                    : undefined,
+            };
         }
         catch (error) {
             handleError(error, {
@@ -105,39 +99,31 @@ export const CategoryListing = memo(props => {
     }, [renderCustomLabel]);
     const menuItems = useMemo(() => {
         const menuItems = [];
-        items === null || items === void 0 ? void 0 : items.forEach((item, _) => {
+        items?.forEach((item, _) => {
             // if (index > 0) menuItems.push({ type: 'divider' });
-            const menuItem = getItem(Object.assign(Object.assign({}, item), { parentId: null }), true);
+            const menuItem = getItem({ ...item, parentId: null }, true);
             if (menuItem)
                 menuItems.push(menuItem);
         });
         return menuItems;
     }, [getItem, items]);
-    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;
+    return (show && !isEmpty(menuItems)) || header || loading ? (_jsxs(MenuWrapper, { "$width": width, className: wrapperClassName, style: wrapperStyle, children: [header, _jsx(Scrollbars, { className: "category__listing", children: _jsxs(Spin, { spinning: loading, wrapperClassName: "template-listing__loading", children: [_jsx(Menu, { selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items?.map(item => String(item.key)), expandIcon: ({ isOpen }) => (_jsx(Icon, { type: "icon-ants-expand-more", style: {
+                                    fontSize: 20,
+                                    color: THEME?.token?.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,4 +1,3 @@
-var _a;
 import styled from 'styled-components';
 import { Typography } from '../../../../atoms';
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -109,7 +108,7 @@ export const CustomLabelStyled = styled.div `
     flex-shrink: 0;
     font-size: 13px;
     font-weight: 400;
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    color: ${globalToken?.bw8};
     line-height: 1 !important;
     font-size: 11px;
     height: fit-content;
@@ -118,7 +117,7 @@ export const CustomLabelStyled = styled.div `
 export const CustomRootLabel = styled.div `
   font-size: 13px !important;
   font-weight: 400;
-  /* color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8}; */
+  /* color: ${THEME?.token?.bw8}; */
   height: 100%;
   display: flex;
   align-items: center;

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

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash';
 // Components
 import { Icon } from '@antscorp/antsomi-ui/es/components';
@@ -8,8 +7,6 @@ import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyIcon, EmptyWrapper } from './styled';
 const { Text } = Typography;
 export const Empty = 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" }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon),
-        React.createElement(Text, { className: "animate__animated animate__fadeInUp" }, description)));
+    const { icon = _jsx(Icon, { type: "icon-ants-media" }), description = 'No data' } = props;
+    return (_jsxs(EmptyWrapper, { children: [_jsx(EmptyIcon, { className: "animate__animated animate__tada", children: isString(icon) ? _jsx(Icon, { type: icon }) : icon }), _jsx(Text, { className: "animate__animated animate__fadeInUp", children: description })] }));
 };

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

@@ -1,4 +1,3 @@
-var _a, _b, _c;
 // Libraries
 import styled from 'styled-components';
 // Components
@@ -10,7 +9,7 @@ export const EmptyWrapper = styled(Flex) `
   height: 100%;
 
   .antsomi-typography {
-    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${THEME.token?.bw8};
   }
 `;
 EmptyWrapper.defaultProps = {
@@ -26,10 +25,10 @@ export const EmptyIcon = styled.div `
   width: 60px;
   height: 60px;
   border-radius: 100%;
-  background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+  background-color: ${THEME.token?.bw2};
 
   i {
     font-size: 24px;
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+    color: ${THEME.token?.bw6};
   }
 `;

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -64,7 +64,7 @@ export const useTemplateListing = (options) => {
     const filter = useDeepCompareMemo(() => {
         const draftFilter = Object.entries(checkedCategories)
             .map(([key, value]) => {
-            const category = categoryList === null || categoryList === void 0 ? void 0 : categoryList.find(category => category.categoryCode === key);
+            const category = categoryList?.find(category => category.categoryCode === key);
             if (category && !isEmpty(value)) {
                 return {
                     [key.toUpperCase()]: {
@@ -140,7 +140,7 @@ export const useTemplateListing = (options) => {
     // Memo
     const flatTemplateItems = useDeepCompareMemo(() => {
         const { pages } = infiniteObjectTemplate || {};
-        return pages === null || pages === void 0 ? void 0 : pages.flatMap(({ entities }) => entities.flatMap(entity => entity.toJson()));
+        return pages?.flatMap(({ entities }) => entities.flatMap(entity => entity.toJson()));
     }, [infiniteObjectTemplate]);
     const templateDetail = useDeepCompareMemo(() => {
         if (infiniteObjectTemplate && selectedTemplateId) {
@@ -173,13 +173,13 @@ export const useTemplateListing = (options) => {
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
-    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems[index]) || { id: random(10) }) || [], [flatTemplateItems, mockTemplateItems]);
+    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => flatTemplateItems?.[index] || { id: random(10) }) || [], [flatTemplateItems, mockTemplateItems]);
     const similarTemplates = useMemo(() => {
         const maxSimilarTemplateLength = 4;
-        return (getShuffleArray(templateItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
+        return (getShuffleArray(templateItems.filter(item => item?.id !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
     }, [templateItems, selectedTemplateId]);
     const previewTemplateCategories = useDeepCompareMemo(() => {
-        if ((categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.length) && !!templateDetail) {
+        if (categoryItems?.length && !!templateDetail) {
             /**
              * Filter category items has value of object template
              * and filter child items has value of object template
@@ -189,14 +189,14 @@ export const useTemplateListing = (options) => {
                 const values = templateDetail.model[item.key];
                 return typeof values === 'object' ? !isEmpty(values) : !!values;
             })
-                .map(item => {
-                var _a;
-                return (Object.assign(Object.assign({}, item), { children: (_a = item.children) === null || _a === void 0 ? void 0 : _a.filter(childItem => {
-                        let values = templateDetail.model[item.key];
-                        values = Array.isArray(values) ? values : [values];
-                        return values.includes(+`${childItem.key}`.split(CATEGORY_SPLIT_KEY)[1]);
-                    }) }));
-            });
+                .map(item => ({
+                ...item,
+                children: item.children?.filter(childItem => {
+                    let values = templateDetail.model[item.key];
+                    values = Array.isArray(values) ? values : [values];
+                    return values.includes(+`${childItem.key}`.split(CATEGORY_SPLIT_KEY)[1]);
+                }),
+            }));
         }
         return [];
     }, [categoryItems, templateDetail]);
@@ -206,20 +206,29 @@ export const useTemplateListing = (options) => {
      * Then set MockTemplateItems length equal flatTemplateItems
      */
     useDeepCompareEffect(() => {
-        if (flatTemplateItems && (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length) !== (mockTemplateItems === null || mockTemplateItems === void 0 ? void 0 : mockTemplateItems.length)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length }) })));
+        if (flatTemplateItems && flatTemplateItems?.length !== mockTemplateItems?.length) {
+            setState(prev => ({
+                ...prev,
+                mockTemplateItems: Array.from({ length: flatTemplateItems?.length }),
+            }));
         }
     }, [flatTemplateItems]);
     useDeepCompareEffect(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
+        setState(prev => ({
+            ...prev,
+            openCategoryKeys: categoryList?.map(({ categoryCode }) => categoryCode) || [],
+        }));
     }, [categoryList]);
     useDeepCompareEffect(() => {
         if (!isEmpty(checkedCategoriesDefault)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories: Object.entries(checkedCategoriesDefault).reduce((acc, curr) => {
+            setState(prev => ({
+                ...prev,
+                checkedCategories: Object.entries(checkedCategoriesDefault).reduce((acc, curr) => {
                     const [key, value] = curr;
                     acc[key] = value.map(item => [key, item].join(CATEGORY_SPLIT_KEY));
                     return acc;
-                }, {}) || {} })));
+                }, {}) || {},
+            }));
         }
     }, [checkedCategoriesDefault]);
     /**
@@ -234,10 +243,13 @@ export const useTemplateListing = (options) => {
     }, [getListType, publicLevel, objectType]);
     // Handles
     const onChangeCheckedCategories = (checkedCategories) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories })));
+        setState(prev => ({
+            ...prev,
+            checkedCategories,
+        }));
     };
     const onChangeOpenCategoryKeys = useCallback((openKeys) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: openKeys })));
+        setState(prev => ({ ...prev, openCategoryKeys: openKeys }));
     }, []);
     const onRemoveObjectTemplate = useCallback((id) => {
         bulkUpdateTemplate({
@@ -251,15 +263,14 @@ export const useTemplateListing = (options) => {
         });
     }, [bulkUpdateTemplate, serviceAuth]);
     const onLoadMore = useCallback(() => {
-        var _a;
         const { pages } = infiniteObjectTemplate || {};
-        const totalTemplateItems = ((_a = pages === null || pages === void 0 ? void 0 : pages[0].meta) === null || _a === void 0 ? void 0 : _a.totalItems) || 0;
+        const totalTemplateItems = pages?.[0].meta?.totalItems || 0;
         const newMockItemLength = Math.min(totalTemplateItems, mockTemplateItems.length + limitListPerPage);
         // If there is no more data, return
         if (newMockItemLength > totalTemplateItems)
             return;
         if (!isFetchingNextPage && hasNextPage) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: newMockItemLength }) })));
+            setState(prev => ({ ...prev, mockTemplateItems: Array.from({ length: newMockItemLength }) }));
             fetchNextPage();
         }
     }, [
@@ -271,7 +282,7 @@ export const useTemplateListing = (options) => {
         fetchNextPage,
     ]);
     const onSelectTemplate = useCallback((id, action) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: id, selectTemplateAction: action })));
+        setState(prev => ({ ...prev, selectedTemplateId: id, selectTemplateAction: action }));
     }, []);
     return {
         // MapKeys

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

@@ -1,17 +1,7 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/function-component-definition */
 // Libraries
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 // Components
 import { CategoryListing, BlankTemplate } from './components';
 import { Scrollbars, Spin } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -30,8 +20,8 @@ export const TemplateListing = memo(props => {
     const { templatesProps = TEMPLATES_DEFAULT, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, emptyProps = EMPTY_DEFAULT, previewModalProps, } = props;
     const [openPreviewModal, setOpenPreviewModal] = useState(false);
     const { header, footer, content, 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"]);
+    const { onOk, onCancel, ...restOfPreviewModalProps } = previewModalProps || {};
+    const { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps, ...restOfTemplateItemProps } = templateItemProps || {};
     const { onClick: onClickPreview } = previewBtnProps || {};
     const isHasData = items.length > 0;
     // Memo
@@ -51,47 +41,36 @@ export const TemplateListing = memo(props => {
         },
     });
     const handleClickThumbnailPreview = (id) => {
-        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
+        onClickPreview?.(id);
         setOpenPreviewModal(true);
     };
     const handleOkPreviewModal = (e) => {
-        onOk === null || onOk === void 0 ? void 0 : onOk(e);
+        onOk?.(e);
         setOpenPreviewModal(false);
     };
     const handleCancelPreviewModal = (e) => {
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+        onCancel?.(e);
         setOpenPreviewModal(false);
     };
-    const renderTemplateListing = () => (React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
-        React.createElement(Scrollbars, { className: "template-listing" },
-            React.createElement("div", { ref: containerRef, style: {
-                    display: 'grid',
-                    gap: listingGap,
-                    gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
-                } },
-                React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
-                !!itemPerRow &&
-                    (items === null || items === void 0 ? void 0 : items.map((item, index) => {
-                        const { id, name, thumbnail } = item || {};
-                        const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
-                        return (React.createElement("div", { key: id },
-                            index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
-                            React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, 
-                                // thumbnailCacheValue={thumbnailCacheValue}
-                                previewBtnProps: Object.assign(Object.assign({}, previewBtnProps), { onClick: handleClickThumbnailPreview }) }, restOfTemplateItemProps))));
-                    }))),
-            !loading && !blankTemplateProps.show && !isHasData && (React.createElement(EmptyData, { icon: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.icon, title: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description })))));
-    return (React.createElement(TemplateListingWrapper, { "data-test": "template-listing-component" },
-        React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps, "data-test": "template-listing-categories" })),
-        React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle, "data-test": "template-listing-container" },
-            header,
-            content
-                ? typeof content === 'function'
-                    ? content(renderTemplateListing())
-                    : content
-                : renderTemplateListing(),
-            footer),
-        React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
+    const renderTemplateListing = () => (_jsx(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full", children: _jsxs(Scrollbars, { className: "template-listing", children: [_jsxs("div", { ref: containerRef, style: {
+                        display: 'grid',
+                        gap: listingGap,
+                        gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
+                    }, children: [_jsx(BlankTemplate, { width: width * ratio, height: height * ratio, ...blankTemplateProps }), !!itemPerRow &&
+                            items?.map((item, index) => {
+                                const { id, name, thumbnail } = item || {};
+                                const loading = typeof item?.name === 'undefined';
+                                return (_jsxs("div", { children: [index === items.length - 2 && _jsx(LoadMoreBlock, { ref: loadMoreRef }), _jsx(ThumbnailCard, { id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, 
+                                            // thumbnailCacheValue={thumbnailCacheValue}
+                                            previewBtnProps: {
+                                                ...previewBtnProps,
+                                                onClick: handleClickThumbnailPreview,
+                                            }, ...restOfTemplateItemProps })] }, id));
+                            })] }), !loading && !blankTemplateProps.show && !isHasData && (_jsx(EmptyData, { icon: emptyProps?.icon, title: emptyProps?.description }))] }) }));
+    return (_jsxs(TemplateListingWrapper, { "data-test": "template-listing-component", children: [_jsx(CategoryListing, { ...categoryListingProps, emptyProps: emptyProps, "data-test": "template-listing-categories" }), _jsxs(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle, "data-test": "template-listing-container", children: [header, content
+                        ? typeof content === 'function'
+                            ? content(renderTemplateListing())
+                            : content
+                        : renderTemplateListing(), footer] }), _jsx(PreviewTemplateModal, { open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal, ...restOfPreviewModalProps })] }));
 });
 TemplateListing.displayName = 'TemplateListing';
-// TemplateListing.defaultProps = TEMPLATE_LISTING_DEFAULT;

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

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Components
 import { Table } from '../../../../../../organism';
 import { Typography } from '../../../../../../atoms';
@@ -12,31 +11,31 @@ export const BlankTemplatePropsTable = () => {
         {
             key: '1',
             property: 'show',
-            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"),
+            description: _jsx(Typography.Text, { children: "Handler show or hide Blank Template" }),
+            type: _jsx(CustomTag, { type: "normal", children: "boolean" }),
+            default: _jsx(CustomTag, { type: "default", children: "false" }),
         },
         {
             key: '2',
             property: 'description',
-            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"),
+            description: (_jsx(Typography.Text, { children: "The text that is displayed below the Add Button" })),
+            type: _jsx(CustomTag, { type: "normal", children: "string" }),
+            default: _jsx(CustomTag, { type: "default", children: "Blank Template" }),
         },
         {
             key: '3',
             property: 'onClick',
-            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" }, " - "),
+            description: _jsx(Typography.Text, { children: "Callback onClick on Blank Template" }),
+            type: _jsx(CustomTag, { type: "normal", children: 'React.MouseEventHandler<HTMLElement>' }),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
         {
             key: '4',
             property: 'blankTemplateRender',
-            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" }, " - "),
+            description: _jsx(Typography.Text, { children: "Render Blank Template node for customizing" }),
+            type: _jsx(CustomTag, { type: "normal", children: '(node: ReactNode) => ReactNode' }),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
     ];
-    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+    return _jsx(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };