@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -1,24 +1,5 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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 React, { useState, useRef, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
 import { Cell } from './components/Cell';
 import { GRID_TEMPLATE, MIN_SIZE, THREADHOLD, buildGrid } from './constant';
 import { StyledGrid, StyledMiddleLayer, StyledBGLayer, StyledLine } from './styled';
@@ -113,8 +94,8 @@ export const ResizeGrid = props => {
         // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
         // console.log(initRef.current < 2,!initDoneRef.current, acceptUpdateRef.current)
         if ((initRef.current < 2 || !initDoneRef.current || acceptUpdateRef.current) &&
-            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) &&
-            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
+            initGrid?.rows &&
+            initGrid?.cols) {
             // console.log('apply change...', buildGrid(initGrid))
             initRef.current += 1;
             firstChangeRef.current = true;
@@ -149,9 +130,8 @@ export const ResizeGrid = props => {
                         const newChilds = JSON.parse(JSON.stringify(childs));
                         let isValidChildSize = true;
                         newChilds.forEach((child, idx) => {
-                            var _a, _b;
-                            if (isValidChildSize && notFollow(child, (_a = startRef.current) === null || _a === void 0 ? void 0 : _a.line, false)) {
-                                if (child.rowStart === ((_b = startRef.current) === null || _b === void 0 ? void 0 : _b.line)) {
+                            if (isValidChildSize && notFollow(child, startRef.current?.line, false)) {
+                                if (child.rowStart === startRef.current?.line) {
                                     if (child.transformY) {
                                         child.transformY = +child.transformY - yDistant;
                                     }
@@ -169,7 +149,11 @@ export const ResizeGrid = props => {
                             }
                         });
                         isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateRows: newArr, childs: newChilds }));
+                            setGrid({
+                                ...gridRef.current,
+                                gridTemplateRows: newArr,
+                                childs: newChilds,
+                            });
                     }
                 }
                 else {
@@ -204,7 +188,11 @@ export const ResizeGrid = props => {
                             }
                         });
                         isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateColumns: newArr, childs: newChilds }));
+                            setGrid({
+                                ...gridRef.current,
+                                gridTemplateColumns: newArr,
+                                childs: newChilds,
+                            });
                     }
                 }
             }
@@ -279,12 +267,24 @@ export const ResizeGrid = props => {
                     if (isValid) {
                         const newChilds = [...gridRef.current.childs];
                         Object.keys(mapNewSizeTop).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeTop[cellIdx], movedBottom: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeY: mapNewSizeTop[cellIdx],
+                                movedBottom: true,
+                            };
                         });
                         Object.keys(mapNewSizeBottom).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeBottom[cellIdx][0], transformY: (mapNewSizeBottom[cellIdx][1].transformY || 0) + yDistant, movedTop: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeY: mapNewSizeBottom[cellIdx][0],
+                                transformY: (mapNewSizeBottom[cellIdx][1].transformY || 0) + yDistant,
+                                movedTop: true,
+                            };
+                        });
+                        setGrid({
+                            ...gridRef.current,
+                            childs: newChilds,
                         });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
                     }
                 }
                 else {
@@ -344,12 +344,24 @@ export const ResizeGrid = props => {
                     if (isValid) {
                         const newChilds = [...gridRef.current.childs];
                         Object.keys(mapNewSizeLeft).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeLeft[cellIdx], movedRight: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeX: mapNewSizeLeft[cellIdx],
+                                movedRight: true,
+                            };
                         });
                         Object.keys(mapNewSizeRight).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeRight[cellIdx][0], transformX: (mapNewSizeRight[cellIdx][1].transformX || 0) + xDistant, movedLeft: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeX: mapNewSizeRight[cellIdx][0],
+                                transformX: (mapNewSizeRight[cellIdx][1].transformX || 0) + xDistant,
+                                movedLeft: true,
+                            };
+                        });
+                        setGrid({
+                            ...gridRef.current,
+                            childs: newChilds,
                         });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
                     }
                 }
             }
@@ -391,7 +403,13 @@ export const ResizeGrid = props => {
     //   }
     // };
     const activeCell = ({ idx }) => {
-        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: prev.childs.map((c, i) => (Object.assign(Object.assign({}, c), { active: i === idx }))) })));
+        setGrid(prev => ({
+            ...prev,
+            childs: prev.childs.map((c, i) => ({
+                ...c,
+                active: i === idx,
+            })),
+        }));
     };
     const findResizeCells = ({ type, line, direction, idx, 
     // cell,
@@ -510,16 +528,30 @@ export const ResizeGrid = props => {
         const leftCells = {};
         const rightCells = {};
         leftCols.forEach(i => {
-            var _a, _b;
             const cell = grid.childs[i];
             const cellRef = cellsRef.current[i];
-            leftCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
+            leftCells[i] = {
+                sizeX: cell.sizeX || cellRef.current?.clientWidth || 0,
+                sizeY: cell.sizeY || cellRef.current?.clientHeight || 0,
+                transformX: cell.transformX || 0,
+                transformY: cell.transformY || 0,
+                idx: i,
+                cellRef,
+                ...cell,
+            };
         });
         rightCols.forEach(i => {
-            var _a, _b;
             const cell = grid.childs[i];
             const cellRef = cellsRef.current[i];
-            rightCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
+            rightCells[i] = {
+                sizeX: cell.sizeX || cellRef.current?.clientWidth || 0,
+                sizeY: cell.sizeY || cellRef.current?.clientHeight || 0,
+                transformX: cell.transformX || 0,
+                transformY: cell.transformY || 0,
+                idx: i,
+                cellRef,
+                ...cell,
+            };
         });
         const newDirection = isRevert
             ? {
@@ -589,7 +621,10 @@ export const ResizeGrid = props => {
                     rowEnd: rEnd,
                 };
                 if (i === rowStart && j === colStart) {
-                    newChilds[idx] = Object.assign(Object.assign({}, newChilds[idx]), newChild);
+                    newChilds[idx] = {
+                        ...newChilds[idx],
+                        ...newChild,
+                    };
                 }
                 else if (rStart !== rowStart ||
                     rEnd !== rowEnd ||
@@ -603,7 +638,10 @@ export const ResizeGrid = props => {
         insertArr.forEach(({ idx, cell }) => {
             newChilds.splice(idx, 0, cell);
         });
-        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
+        setGrid(prev => ({
+            ...prev,
+            childs: newChilds,
+        }));
     };
     function resetBackgroundCellRef() {
         Object.entries(cellsRef.current).forEach(([idx, r]) => {
@@ -641,7 +679,10 @@ export const ResizeGrid = props => {
                     // console.log('del corr', i, cordinatesRef.current)
                 }
             });
-            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+            setGrid({
+                ...gridRef.current,
+                childs: newChilds,
+            });
         }
         else {
             if (!isPreview) {
@@ -683,16 +724,15 @@ export const ResizeGrid = props => {
         cellsRef.current[idx] = ref;
         // console.log('cellsRef.current', cellsRef.current)
     };
-    const setCordinate = (idx) => __awaiter(void 0, void 0, void 0, function* () {
+    const setCordinate = async (idx) => {
         // while(!cellsRef[idx]) {
         //   await new Promise(r => {setTimeout(r, 100)});
         //   console.log('wait', idx, cellsRef[idx])
         // }
-        var _b;
         if (containerRef.current) {
             const container = containerRef.current.getBoundingClientRect();
             const childRef = cellsRef.current[idx];
-            const childBox = (_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            const childBox = childRef.current?.getBoundingClientRect();
             if (childBox) {
                 const cordinate = {
                     width: childBox.width,
@@ -707,43 +747,43 @@ export const ResizeGrid = props => {
             }
         }
         // console.log('set corr', idx, cordinatesRef.current)
-    });
+    };
     const renderGrid = (style) => {
         const { gridTemplateColumns, gridTemplateRows, childs } = grid;
         // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
-        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef, allowActive: allowActive })))));
+        return (_jsx("div", { className: "grid-container", ref: containerRef, style: {
+                gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '),
+                gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' '),
+                ...style,
+            }, children: childs.map((cell, idx) => (_jsx(Cell, { idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef, allowActive: allowActive }, `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`))) }));
     };
     const handleUpLine = () => {
         lineVertical(false);
         lineHorizontal(false);
     };
-    const _a = containerStyle || {}, { borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, borderColor } = _a, rest = __rest(_a, ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "borderColor"]);
-    const renderLines = () => (React.createElement(React.Fragment, null,
-        React.createElement(StyledLine, { ref: verticalLineRef, className: "vertical", onMouseUp: handleUpLine }),
-        React.createElement(StyledLine, { ref: horizontalLineRef, className: "horizontal", onMouseUp: handleUpLine })));
-    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact },
-        React.createElement("div", { className: "layers", ref: layersRef },
-            React.createElement(StyledBGLayer, { style: {
-                    backgroundImage: image ? `url(${image})` : 'unset',
-                    backgroundSize: imageSize === 'fill' ? '100% 100%' : imageSize,
-                    backgroundPosition: imagePosition,
-                } }),
-            React.createElement(StyledMiddleLayer, { style: {
-                    borderTopLeftRadius,
-                    borderTopRightRadius,
-                    borderBottomRightRadius,
-                    borderBottomLeftRadius,
-                    borderTopWidth,
-                    borderRightWidth,
-                    borderBottomWidth,
-                    borderLeftWidth,
-                    borderStyle,
-                    borderColor,
-                } }),
-            renderGrid(Object.assign(Object.assign({}, rest), { borderTopLeftRadius,
-                borderTopRightRadius,
-                borderBottomRightRadius,
-                borderBottomLeftRadius }))),
-        renderLines()));
+    const { borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, borderColor, ...rest } = containerStyle || {};
+    const renderLines = () => (_jsxs(_Fragment, { children: [_jsx(StyledLine, { ref: verticalLineRef, className: "vertical", onMouseUp: handleUpLine }), _jsx(StyledLine, { ref: horizontalLineRef, className: "horizontal", onMouseUp: handleUpLine })] }));
+    return (_jsxs(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact, children: [_jsxs("div", { className: "layers", ref: layersRef, children: [_jsx(StyledBGLayer, { style: {
+                            backgroundImage: image ? `url(${image})` : 'unset',
+                            backgroundSize: imageSize === 'fill' ? '100% 100%' : imageSize,
+                            backgroundPosition: imagePosition,
+                        } }), _jsx(StyledMiddleLayer, { style: {
+                            borderTopLeftRadius,
+                            borderTopRightRadius,
+                            borderBottomRightRadius,
+                            borderBottomLeftRadius,
+                            borderTopWidth,
+                            borderRightWidth,
+                            borderBottomWidth,
+                            borderLeftWidth,
+                            borderStyle,
+                            borderColor,
+                        } }), renderGrid({
+                        ...rest,
+                        borderTopLeftRadius,
+                        borderTopRightRadius,
+                        borderBottomRightRadius,
+                        borderBottomLeftRadius,
+                    })] }), renderLines()] }));
 };
 ResizeGrid.defaultProps = defaultProps;

package/es/components/molecules/ResizeGrid/components/Cell/Cell.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { buildGridArea, buildTranform } from '../../constant';
 import { StyledCell } from './styled';
 import { useDeepCompareEffect } from '../../../../../hooks/useDeepCompareEffect';
@@ -36,7 +37,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
             bottom: cell.rowEnd,
             left: cell.colStart,
         }[direction];
-        if ((ctrlKeyRef === null || ctrlKeyRef === void 0 ? void 0 : ctrlKeyRef.current) ||
+        if (ctrlKeyRef?.current ||
             (direction === 'top' && cell.movedTop) ||
             (direction === 'right' && cell.movedRight) ||
             (direction === 'bottom' && cell.movedBottom) ||
@@ -59,8 +60,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     const renderCellContent = () => renderCell
         ? renderCell(cell, idx, { isPreview })
         : !!image &&
-            image.imageUrl && (React.createElement("div", { className: "imageWrapper" },
-            React.createElement("img", { src: image.imageUrl, alt: "menu", style: image.imageStyles })));
+            image.imageUrl && (_jsx("div", { className: "imageWrapper", children: _jsx("img", { src: image.imageUrl, alt: "menu", style: image.imageStyles }) }));
     // const handleActiveCell = e => {
     //   activeCell(e, cell, idx);
     // };
@@ -70,18 +70,24 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     //   drag(e, direction, idx)
     // }
     // console.log('TRANSFORM', idx, buildTranform(cell))
-    return (React.createElement(StyledCell, { ref: cellRef, className: "cell", 
+    return (_jsxs(StyledCell, { ref: cellRef, className: "cell", 
         // onClick={handleActiveCell}
-        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (allowActive && cell.active &&
-            !isPreview &&
-            (activeStyle || {
-                outline: '1px solid #005eb8',
-            }))), style) },
-        React.createElement("div", { className: "cell-content" }, renderCellContent()),
-        React.createElement("div", { className: "cell-border", style: {
-                borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
-                borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
-                display: isPreview ? 'none' : 'block',
-            } }),
-        ['top', 'right', 'bottom', 'left'].map(direction => (React.createElement("div", { key: direction, className: `resize-${direction}`, onMouseDown: e => handleDown(e, direction, idx), onMouseUp: e => handleUp(e, direction, idx) })))));
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: {
+            gridArea: buildGridArea(cell),
+            width: cell.sizeX ? `${cell.sizeX}px` : 'unset',
+            height: cell.sizeY ? `${cell.sizeY}px` : 'unset',
+            transform: buildTranform(cell),
+            // borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
+            // borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
+            ...(allowActive && cell.active &&
+                !isPreview &&
+                (activeStyle || {
+                    outline: '1px solid #005eb8',
+                })),
+            ...style,
+        }, children: [_jsx("div", { className: "cell-content", children: renderCellContent() }), _jsx("div", { className: "cell-border", style: {
+                    borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
+                    borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
+                    display: isPreview ? 'none' : 'block',
+                } }), ['top', 'right', 'bottom', 'left'].map(direction => (_jsx("div", { className: `resize-${direction}`, onMouseDown: e => handleDown(e, direction, idx), onMouseUp: e => handleUp(e, direction, idx) }, direction)))] }));
 };

package/es/components/molecules/ResizeGrid/constant.js

@@ -35,7 +35,11 @@ export const GRID_TEMPLATE = {
         ],
     },
 };
-export const buildCell = cell => (Object.assign({ rowEnd: cell.rowEnd || cell.rowStart + 1, colEnd: cell.colEnd || cell.colStart + 1 }, cell));
+export const buildCell = cell => ({
+    rowEnd: cell.rowEnd || cell.rowStart + 1,
+    colEnd: cell.colEnd || cell.colStart + 1,
+    ...cell,
+});
 export const buildGrid = (inputGrid) => {
     let childs = [];
     const grid = JSON.parse(JSON.stringify(inputGrid));
@@ -79,9 +83,14 @@ export const buildGrid = (inputGrid) => {
             buildCol = false;
         });
     }
-    return Object.assign(Object.assign({ rows: grid.rows || 1, cols: grid.rows || 1 }, grid), { gridTemplateColumns,
+    return {
+        rows: grid.rows || 1,
+        cols: grid.rows || 1,
+        ...grid,
+        gridTemplateColumns,
         gridTemplateRows,
-        childs });
+        childs,
+    };
 };
 export const buildGridArea = box => 
 // console.log('area', box, `${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`)

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneDeep, pick } from 'lodash';
 // Components
 import { ResizeGrid } from '@antscorp/antsomi-ui/es/components';
@@ -31,23 +30,30 @@ export const RichMenuBlock = props => {
     const handleGridChange = tryCatchWrapper((gridInfo, ctx, source) => {
         if (richMenu) {
             const { rows, cols, gridTemplateRows, gridTemplateColumns, childs } = gridInfo;
-            const gridTemplateColsUnit = (gridTemplateColumns === null || gridTemplateColumns === void 0 ? void 0 : gridTemplateColumns.map(col => `${col}%`)) || [];
-            const gridTemplateRowsUnit = (gridTemplateRows === null || gridTemplateRows === void 0 ? void 0 : gridTemplateRows.map(row => `${row}%`)) || [];
-            const cells = childs === null || childs === void 0 ? void 0 : childs.map((child, idx) => {
+            const gridTemplateColsUnit = gridTemplateColumns?.map(col => `${col}%`) || [];
+            const gridTemplateRowsUnit = gridTemplateRows?.map(row => `${row}%`) || [];
+            const cells = childs?.map((child, idx) => {
                 const item = cloneDeep(child);
                 const cellBounds = pick(ctx[idx], ['x', 'y', 'width', 'height']);
-                return Object.assign(Object.assign({}, item), cellBounds);
+                return { ...item, ...cellBounds };
             });
-            const newRichMenu = Object.assign(Object.assign({}, richMenu), { rows: rows || 1, cols: cols || 1, gridTemplateRows: gridTemplateRowsUnit, gridTemplateCols: gridTemplateColsUnit, cells: cells });
+            const newRichMenu = {
+                ...richMenu,
+                rows: rows || 1,
+                cols: cols || 1,
+                gridTemplateRows: gridTemplateRowsUnit,
+                gridTemplateCols: gridTemplateColsUnit,
+                cells: cells,
+            };
             if (onChange) {
                 onChange(newRichMenu, source);
             }
         }
     }, PATH);
-    const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
-    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, (isSingleUploadMode && {
-        image: imageUrl,
-        imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
-        imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit,
-    }))));
+    const renderCell = (cellInfo, ctx) => (_jsx(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
+    return (_jsx(ResizeGrid, { grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag, ...(isSingleUploadMode && {
+            image: imageUrl,
+            imagePosition: imageStyles?.objectPosition,
+            imageSize: imageStyles?.objectFit,
+        }) }));
 };

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/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, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
 // Components
 import { Icon } from '@antscorp/antsomi-ui/es/components';
@@ -35,7 +25,7 @@ export const RichMenuCell = props => {
         try {
             e.stopPropagation();
             if (videoRef.current) {
-                setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'playing' })));
+                setVideoState(prev => ({ ...prev, status: 'playing' }));
                 videoRef.current.play();
             }
         }
@@ -48,7 +38,7 @@ export const RichMenuCell = props => {
         try {
             e.stopPropagation();
             if (videoRef.current) {
-                setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
+                setVideoState(prev => ({ ...prev, status: 'idle' }));
                 videoRef.current.pause();
             }
         }
@@ -59,17 +49,15 @@ export const RichMenuCell = props => {
     };
     const renderCellContent = (isShow, cellInfo) => {
         if (!isShow ||
-            (layerActive === 'video' && +context === cellActiveIdx && (action === null || action === void 0 ? void 0 : action.type) === 'video'))
+            (layerActive === 'video' && +context === cellActiveIdx && action?.type === 'video'))
             return null;
         const { image, active } = cellInfo;
         const { imageUrl, imageStyles } = image;
-        const { objectPosition, objectFit } = imageStyles, restImageStyles = __rest(imageStyles, ["objectPosition", "objectFit"]);
+        const { objectPosition, objectFit, ...restImageStyles } = imageStyles;
         const isBlank = isEmpty(imageUrl);
         if (isBlank)
-            return (React.createElement(AddContainer, { className: "cell-add-container" },
-                React.createElement(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }),
-                React.createElement(AddLabel, null, t(translations.cellAction).toString())));
-        return (React.createElement(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
+            return (_jsxs(AddContainer, { className: "cell-add-container", children: [_jsx(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }), _jsx(AddLabel, { children: t(translations.cellAction).toString() })] }));
+        return (_jsx(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
     };
     const renderVideoLayer = (action, cell) => {
         if (!action ||
@@ -80,31 +68,16 @@ export const RichMenuCell = props => {
         const { active } = cell;
         if (!previewImage && !videoUrl)
             return null;
-        return (React.createElement(LayerVideoContainer, { active: active && !isPreview && videoState.status === 'idle' },
-            !isPreview && videoUrl && (React.createElement(Video, { ref: videoRef, style: { width: '100%', height: '100%', objectFit: 'cover' }, onEnded: () => {
-                    setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
-                }, onClick: handleVideoStop, onLoadedData: () => {
-                    setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
-                } },
-                React.createElement("source", { src: videoUrl, type: "video/mp4" }))),
-            previewImage && (videoState.status === 'idle' || isPreview) && (React.createElement(ThumbnailBox, null,
-                React.createElement(Image, { src: previewImage, alt: "thumbnail" }))),
-            (videoState.status === 'idle' || isPreview) && videoUrl && (React.createElement(VideoAction, { className: "video-capture-action-ignore" },
-                React.createElement(ActionButton, { id: "video-capture-action-play", onClick: handleVideoPlay },
-                    React.createElement(Icon, { type: "icon-ants-play-circle", size: 24, style: { width: 26, color: '#fff' } }),
-                    isAddLabel && React.createElement(ActionButtonLabel, null, "Play")),
-                isAddLabel && action.label && (React.createElement(Link, Object.assign({ id: "video-capture-action-external" }, (isActionLink
-                    ? { href: action.externalUrl, target: '_blank', rel: 'noreferrer' }
-                    : {})),
-                    React.createElement("div", { style: { width: 26 } },
-                        React.createElement(CircleBorder, null,
-                            React.createElement(Icon, { type: "icon-ants-redo", size: 14, style: { color: '#fff', height: '17px' } }))),
-                    React.createElement(ActionButtonLabel, null, action.label)))))));
+        return (_jsxs(LayerVideoContainer, { active: active && !isPreview && videoState.status === 'idle', children: [!isPreview && videoUrl && (_jsx(Video, { ref: videoRef, style: { width: '100%', height: '100%', objectFit: 'cover' }, onEnded: () => {
+                        setVideoState(prev => ({ ...prev, status: 'idle' }));
+                    }, onClick: handleVideoStop, onLoadedData: () => {
+                        setVideoState(prev => ({ ...prev, status: 'idle' }));
+                    }, children: _jsx("source", { src: videoUrl, type: "video/mp4" }) })), previewImage && (videoState.status === 'idle' || isPreview) && (_jsx(ThumbnailBox, { children: _jsx(Image, { src: previewImage, alt: "thumbnail" }) })), (videoState.status === 'idle' || isPreview) && videoUrl && (_jsxs(VideoAction, { className: "video-capture-action-ignore", children: [_jsxs(ActionButton, { id: "video-capture-action-play", onClick: handleVideoPlay, children: [_jsx(Icon, { type: "icon-ants-play-circle", size: 24, style: { width: 26, color: '#fff' } }), isAddLabel && _jsx(ActionButtonLabel, { children: "Play" })] }), isAddLabel && action.label && (_jsxs(Link, { id: "video-capture-action-external", ...(isActionLink
+                                ? { href: action.externalUrl, target: '_blank', rel: 'noreferrer' }
+                                : {}), children: [_jsx("div", { style: { width: 26 }, children: _jsx(CircleBorder, { children: _jsx(Icon, { type: "icon-ants-redo", size: 14, style: { color: '#fff', height: '17px' } }) }) }), _jsx(ActionButtonLabel, { children: action.label })] }))] }))] }));
     };
-    return (React.createElement(CellContainer, { key: context, style: !isSingleMode ? areaStyles : {}, onClick: e => {
+    return (_jsxs(CellContainer, { style: !isSingleMode ? areaStyles : {}, onClick: e => {
             e.stopPropagation();
             tryCatchWrapper(onClick, PATH)(context);
-        } },
-        renderCellContent(!isSingleMode, cell),
-        renderVideoLayer(action, cell)));
+        }, children: [renderCellContent(!isSingleMode, cell), renderVideoLayer(action, cell)] }, context));
 };

package/es/components/molecules/RichMenu/RichMenuBlock/styled.js

@@ -5,8 +5,8 @@ export const StyledRichMenu = styled.div `
   width: 100%;
   grid-gap: 1px;
   aspect-ratio: ${({ $isCompact }) => ($isCompact ? '3 / 1' : '3/ 2')};
-  grid-template-columns: ${({ $gridTemplateCols }) => $gridTemplateCols === null || $gridTemplateCols === void 0 ? void 0 : $gridTemplateCols.map(col => col).join(' ')};
-  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows === null || $gridTemplateRows === void 0 ? void 0 : $gridTemplateRows.map(row => row).join(' ')};
+  grid-template-columns: ${({ $gridTemplateCols }) => $gridTemplateCols?.map(col => col).join(' ')};
+  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows?.map(row => row).join(' ')};
 `;
 export const StyledCell = styled.div `
   display: flex;

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.js

@@ -1,16 +1,4 @@
-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;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Components
 import { Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styles
@@ -23,11 +11,7 @@ const defaultProps = {
     showTypingChat: false,
 };
 export const RichMenuChatBar = props => {
-    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "size", "onToggleRichMenu", "onToggleTypingChat"]);
-    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }),
-        React.createElement(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu) },
-            React.createElement(Typography.Text, { className: "ants-text-sm" }, label),
-            label && React.createElement(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 }))))));
+    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { }, ...restOfProps } = props;
+    return (_jsx(ChatBarWrapper, { "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}`, ...restOfProps, children: showTypingChat ? (_jsx(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }), _jsxs(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu), children: [_jsx(Typography.Text, { className: "ants-text-sm", children: label }), label && _jsx(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 })] })] })) }));
 };
 RichMenuChatBar.defaultProps = defaultProps;

package/es/components/molecules/RichMenu/RichMenuChatBar/TypingChat/index.js

@@ -1,15 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Styled
 import { TypingChatWrapper, TypingInput, TypingWrapper } from './styled';
 export const TypingChat = memo(props => {
     const { onClickMenu } = props;
-    return (React.createElement(TypingChatWrapper, { gap: 8, justify: "space-between", align: "center" },
-        React.createElement(Icon, { type: "icon-ants-list-view-thumbnail", className: "ants-cursor-pointer", onClick: () => onClickMenu && onClickMenu() }),
-        React.createElement(Icon, { type: "icon-ants-angle-right", className: "icon-angle", size: 14 }),
-        React.createElement(TypingWrapper, null,
-            React.createElement(TypingInput, { placeholder: "Aa" }),
-            React.createElement(Icon, { type: "icon-ants-smile-face", size: 16 })),
-        React.createElement(Icon, { type: "icon-ants-big-search", className: "icon-search" })));
+    return (_jsxs(TypingChatWrapper, { gap: 8, justify: "space-between", align: "center", children: [_jsx(Icon, { type: "icon-ants-list-view-thumbnail", className: "ants-cursor-pointer", onClick: () => onClickMenu && onClickMenu() }), _jsx(Icon, { type: "icon-ants-angle-right", className: "icon-angle", size: 14 }), _jsxs(TypingWrapper, { children: [_jsx(TypingInput, { placeholder: "Aa" }), _jsx(Icon, { type: "icon-ants-smile-face", size: 16 })] }), _jsx(Icon, { type: "icon-ants-big-search", className: "icon-search" })] }));
 });