@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,23 +1,9 @@
-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 } from "react/jsx-runtime";
 // Components
 import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
 import { RadioGroupWrapper, StyledRadioGroup } from './styled';
 export const RadioGroup = props => {
-    const { label } = props, restOf = __rest(props, ["label"]);
-    return (React.createElement(RadioGroupWrapper, null,
-        label ? React.createElement(Text, null, label) : null,
-        React.createElement(StyledRadioGroup, Object.assign({}, restOf))));
+    const { label, ...restOf } = props;
+    return (_jsxs(RadioGroupWrapper, { children: [label ? _jsx(Text, { children: label }) : null, _jsx(StyledRadioGroup, { ...restOf })] }));
 };

package/es/components/molecules/RequestAccess/RequestAccess.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import { Button, Flex, TextArea, Typography } from '@antscorp/antsomi-ui/es/components';
 // Styled
 import { RequestAccessStyled } from './styled';
@@ -13,8 +14,7 @@ export const RequestAccess = props => {
     const [isLoading, setIsLoading] = useState(false);
     const messageRef = useRef(null);
     const handleClickRequest = () => {
-        var _a, _b;
-        const message = ((_b = (_a = messageRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea.value) || '';
+        const message = messageRef.current?.resizableTextArea?.textArea.value || '';
         if (onRequest) {
             try {
                 setIsLoading(true);
@@ -36,15 +36,5 @@ export const RequestAccess = props => {
         if (onSwitchAccount)
             onSwitchAccount();
     };
-    return (React.createElement(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}` },
-        React.createElement(Flex, { vertical: true, gap: 20 },
-            React.createElement(Flex, { vertical: true, gap: 5 },
-                React.createElement(Typography.Text, { className: "denied-title" }, isSentRequest ? (sentTitle) : (React.createElement(React.Fragment, null,
-                    deniedTitle,
-                    React.createElement(BlockIcon, null)))),
-                React.createElement(Typography.Text, { className: "denied-sub-title" }, isSentRequest ? sentSubTitle : deniedSubTitle)),
-            !isSentRequest ? (React.createElement(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null,
-            React.createElement(Flex, { className: "action-buttons", gap: 10 },
-                isSentRequest ? null : (React.createElement(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading }, requestText)),
-                React.createElement(Button, { onClick: handleSwitchAccount }, switchAccountText)))));
+    return (_jsx(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}`, children: _jsxs(Flex, { vertical: true, gap: 20, children: [_jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Typography.Text, { className: "denied-title", children: isSentRequest ? (sentTitle) : (_jsxs(_Fragment, { children: [deniedTitle, _jsx(BlockIcon, {})] })) }), _jsx(Typography.Text, { className: "denied-sub-title", children: isSentRequest ? sentSubTitle : deniedSubTitle })] }), !isSentRequest ? (_jsx(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null, _jsxs(Flex, { className: "action-buttons", gap: 10, children: [isSentRequest ? null : (_jsx(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading, children: requestText })), _jsx(Button, { onClick: handleSwitchAccount, children: switchAccountText })] })] }) }));
 };

package/es/components/molecules/RequestAccess/styled.js

@@ -19,22 +19,22 @@ export const RequestAccessStyled = styled.div `
       font-size: 20px;
       line-height: 24px;
       font-weight: 700;
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.orange6};
+      color: ${globalToken?.orange6};
 
       & > svg {
-        color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5};
+        color: ${globalToken?.bw5};
       }
     }
 
     .denied-sub-title {
       line-height: 14px;
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+      color: ${globalToken?.bw8};
     }
 
     .antsomi-input {
       height: 150px;
-      border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1} !important;
-      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border: 1px solid ${globalToken?.blue1} !important;
+      border-radius: ${globalToken?.borderRadius}px;
       padding: 10px;
     }
   }

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,
+        }) }));
 };