publ-echo 0.0.118 → 0.0.120

package/dist/lib/GridItem/GridItem.js

@@ -36,7 +36,6 @@ var GridItem = function (_a) {
     var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
     var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
     var _q = useState(false), isResizing = _q[0], setIsResizing = _q[1];
-    var _r = useState(false), pointerEventsNone = _r[0], setPointerEventsNone = _r[1];
     var elementRef = useRef(null);
     var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
     useEffect(function () {

package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import type { ReactElement } from 'react';
-import { PropsWithChildren } from '../types';
-import { ReactGridLayoutProps } from './types';
+import * as React from "react";
+import type { ReactElement } from "react";
+import { PropsWithChildren } from "../types";
+import { ReactGridLayoutProps } from "./types";
 declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
 export default ReactGridLayout;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -30,27 +30,27 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useState, useRef, useLayoutEffect } from 'react';
-import classNames from '../../external-lib/classnames';
-import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from './utils/renderHelpers';
-import { calcGridColWidth, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
-import GridItem from '../GridItem/GridItem';
-import isEqual from '../../external-lib/lodash.isEqual';
-import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from './group';
-import GroupItem from '../GridItem/GroupItem';
-import OutsideClickHandler from '../GridItem/OutsideClickHandler';
-var layoutClassName = 'react-grid-layout';
+import * as React from "react";
+import { useState, useRef, useLayoutEffect } from "react";
+import classNames from "../../external-lib/classnames";
+import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
+import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
+import GridItem from "../GridItem/GridItem";
+import isEqual from "../../external-lib/lodash.isEqual";
+import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from "./group";
+import GroupItem from "../GridItem/GroupItem";
+import OutsideClickHandler from "../GridItem/OutsideClickHandler";
+var layoutClassName = "react-grid-layout";
 var ReactGridLayout = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var sectionId = props.sectionId, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? '' : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? '' : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? 'vertical' : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
-        i: '__dropping-elem__',
+    var sectionId = props.sectionId, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
+        i: "__dropping-elem__",
         h: 1,
         w: 1,
     } : _w, // TODO fix
     _x = props.resizeHandles, // TODO fix
-    resizeHandles = _x === void 0 ? ['se'] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? 'ROOT' : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? 'ROOT' : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
-    var device = cols === 24 ? 'DESKTOP' : 'MOBILE';
+    resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? "ROOT" : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? "ROOT" : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
+    var device = cols === 24 ? "DESKTOP" : "MOBILE";
     var _2 = useState(), activeDrag = _2[0], setActiveDrag = _2[1];
     var _3 = useState(), oldDragItem = _3[0], setOldDragItem = _3[1];
     var _4 = useState(), oldLayout = _4[0], setOldLayout = _4[1];
@@ -58,7 +58,7 @@ var ReactGridLayout = function (_a) {
     var _6 = useState(), droppingDOMNode = _6[0], setDroppingDOMNode = _6[1];
     var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
     var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
-    var editorMode = props.isDraggable && props.isResizable ? 'EDIT' : 'VIEW';
+    var editorMode = props.isDraggable && props.isResizable ? "EDIT" : "VIEW";
     var editableBlockIds = blockStructure
         ? findDirectChildrenCbIds(blockStructure, editingGroupBlock)
         : [];
@@ -78,12 +78,12 @@ var ReactGridLayout = function (_a) {
     }, []);
     useLayoutEffect(function () {
         if (props.layout && !Array.isArray(props.layout)) {
-            console.error('Expecting layout to be an Array but got: ', props.layout);
+            console.error("Expecting layout to be an Array but got: ", props.layout);
         }
         setLayout(synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap));
     }, [props.layout]);
     useLayoutEffect(function () {
-        var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || 'vertical', props.allowOverlap);
+        var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || "vertical", props.allowOverlap);
         setLayout(newLayout);
     }, [children]);
     var getPositionParams = function () {
@@ -112,7 +112,7 @@ var ReactGridLayout = function (_a) {
         return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
             (biggerNbRow - 1) * margin[1] +
             containerPaddingY * 2 +
-            'px');
+            "px");
     };
     var getBackgroundHeight = function () {
         if (!autoSize)
@@ -126,12 +126,12 @@ var ReactGridLayout = function (_a) {
             (biggerNbRow - 1) * margin[1] +
             containerPaddingY * 2 -
             2 * margin[1] +
-            'px');
+            "px");
     };
     var getBackgroundWidth = function () {
         if (!autoSize)
             return;
-        return width - margin[0] * 2 + 'px';
+        return width - margin[0] * 2 + "px";
     };
     /**
      * When dragging starts
@@ -520,7 +520,7 @@ var ReactGridLayout = function (_a) {
         // LINK: https://legacy.reactjs.org/docs/react-api.html
         var items = React.Children.toArray(children);
         var item = items.find(function (child) {
-            var originalKey = String(child.key).split('.$');
+            var originalKey = String(child.key).split(".$");
             return originalKey[1] === l.i;
         });
         var isInBulk = blockStructure &&
@@ -528,7 +528,7 @@ var ReactGridLayout = function (_a) {
         if (!item) {
             return null;
         }
-        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, className: 'placeholder', containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, children: item && item }));
+        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, children: item && item }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -543,10 +543,10 @@ var ReactGridLayout = function (_a) {
         if (!l) {
             return;
         }
-        var draggable = typeof l.isDraggable === 'boolean'
+        var draggable = typeof l.isDraggable === "boolean"
             ? l.isDraggable
             : !l.static && isDraggable;
-        var resizable = typeof l.isResizable === 'boolean'
+        var resizable = typeof l.isResizable === "boolean"
             ? l.isResizable
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
@@ -554,7 +554,7 @@ var ReactGridLayout = function (_a) {
         var editable = editableBlockIds.includes(Number(l.i));
         var z = l.z || 0;
         var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(l.i))));
-        var isRoot = editingGroupBlock === 'ROOT';
+        var isRoot = editingGroupBlock === "ROOT";
         var block = blockStructure
             ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i)))
             : undefined;
@@ -564,11 +564,11 @@ var ReactGridLayout = function (_a) {
         if (!block) {
             return _jsx(_Fragment, { children: "NO-BLOCK-FOUND" });
         }
-        var zOrder = (_a = block[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal']) !== null && _a !== void 0 ? _a : 0;
+        var zOrder = (_a = block[device === "DESKTOP" ? "zOrderDesktopInternal" : "zOrderMobileInternal"]) !== null && _a !== void 0 ? _a : 0;
         var isInsideOfEditingGroup = editingGroupAllChildren.includes(l.i);
         var editorZIndex = (function () {
             if (isRoot && isInBulk) {
-                return z;
+                return zIndexMap.ROOT + z;
             }
             if (!isRoot && isInsideOfEditingGroup) {
                 return zIndexMap.CB_IN_EDITING_GROUP + z;
@@ -584,16 +584,16 @@ var ReactGridLayout = function (_a) {
             }
             return z;
         })();
-        var zIndex = editorMode === 'EDIT' ? editorZIndex : z;
+        var zIndex = editorMode === "EDIT" ? editorZIndex : z;
         return (_jsx(GridItem, { className: classNames({
-                'editable-grid-item': !isRoot && editable,
-                'not-editable-grid-item': !isRoot && !editable,
-                'bulk-child-item': isInBulk,
-                'outside-of-editing-group': !isInsideOfEditingGroup,
+                "editable-grid-item": !isRoot && editable,
+                "not-editable-grid-item": !editable,
+                "bulk-child-item": isInBulk,
+                "outside-of-editing-group": !isInsideOfEditingGroup,
             }), z: zIndex, zOrder: l.z, zOrderInternal: parent
-                ? "".concat(parent[device === 'DESKTOP'
-                    ? 'zOrderDesktopInternal'
-                    : 'zOrderMobileInternal'], " > ").concat(zOrder)
+                ? "".concat(parent[device === "DESKTOP"
+                    ? "zOrderDesktopInternal"
+                    : "zOrderMobileInternal"], " > ").concat(zOrder)
                 : zOrder.toString(), isDraggable: editable && !isInBulk, isResizable: editable && !isInBulk, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
     };
     var onDragOverHandler = function (e) {
@@ -672,12 +672,12 @@ var ReactGridLayout = function (_a) {
         if (!groupItem) {
             return _jsx(_Fragment, {});
         }
-        var internalZOrder = (_a = block[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal']) !== null && _a !== void 0 ? _a : 0;
+        var internalZOrder = (_a = block[device === "DESKTOP" ? "zOrderDesktopInternal" : "zOrderMobileInternal"]) !== null && _a !== void 0 ? _a : 0;
         var isEditingGroup = block.blockId === editingGroupBlock;
         var type = getBlockSpecificType(block);
-        var isRoot = editingGroupBlock === 'ROOT';
+        var isRoot = editingGroupBlock === "ROOT";
         var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(block.blockId);
-        var isBulk = block.blockId === 'BULK';
+        var isBulk = block.blockId === "BULK";
         var baseZ = (function () {
             if (isBulk) {
                 // groupItem.z : 그룹 내 CB중 가장 큰 zorder
@@ -692,15 +692,15 @@ var ReactGridLayout = function (_a) {
             if (isEditingGroup) {
                 return zIndexMap.EDITING_GROUP;
             }
-            if (!isRoot && type === 'GROUP_BLOCK') {
+            if (!isRoot && type === "GROUP_BLOCK") {
                 return zIndexMap.EDITABLE_GROUP + internalZOrder;
             }
-            if (type === 'GROUP_BLOCK') {
-                return zIndexMap.GROUP;
+            if (type === "GROUP_BLOCK") {
+                return zIndexMap.ROOT + internalZOrder;
             }
             return -1; // NOTE: ERROR
         })();
-        var zIndex = editorMode === 'EDIT' ? baseZ : internalZOrder;
+        var zIndex = editorMode === "EDIT" ? baseZ : internalZOrder;
         var handleClick = function (e) {
             onClickGroup && onClickGroup(e, block.blockId, type);
         };
@@ -715,14 +715,14 @@ var ReactGridLayout = function (_a) {
             ? findParentGroupBlock(blockStructure, block.blockId)
             : null;
         return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
-                    'bulk-child-item': isInBulk,
-                    'grid-bulk-block': block.blockId === 'BULK',
+                    "bulk-child-item": isInBulk,
+                    "grid-bulk-block": block.blockId === "BULK",
                     editing: editingGroupBlock === block.blockId,
                     selected: selectedGroupBlock === block.blockId,
                 }), z: zIndex, minZ: groupItem.minZ, zOrder: internalZOrder, zOrderInternal: parent
-                    ? "".concat(parent[device === 'DESKTOP'
-                        ? 'zOrderDesktopInternal'
-                        : 'zOrderMobileInternal'], " > ").concat(internalZOrder)
+                    ? "".concat(parent[device === "DESKTOP"
+                        ? "zOrderDesktopInternal"
+                        : "zOrderMobileInternal"], " > ").concat(internalZOrder)
                     : internalZOrder.toString(), containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId, 
                 // minH={l.minH}
                 // minW={l.minW}
@@ -737,11 +737,11 @@ var ReactGridLayout = function (_a) {
     var currentGroupBlocks = blockStructure
         ? findGroupBlocks(blockStructure, editingGroupBlock)
         : [];
-    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
-                    marginTop: margin[1] + 'px',
-                    marginBottom: margin[1] + 'px',
-                    marginLeft: margin[0] + 'px',
-                    marginRight: margin[0] + 'px',
-                }, children: _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: 'grid-pattern', height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: 'userSpaceOnUse', children: _jsx("rect", { x: 0.5, y: 0.5, className: 'grid-pattern-rect', height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: '100%', fill: 'url(#grid-pattern)' })] }) }))] }));
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
+                    marginTop: margin[1] + "px",
+                    marginBottom: margin[1] + "px",
+                    marginLeft: margin[0] + "px",
+                    marginRight: margin[0] + "px",
+                }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" })] }) }))] }));
 };
 export default ReactGridLayout;

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts

@@ -1,4 +1,4 @@
-import { ResponsiveGridLayoutProps } from "./types";
-import { PropsWithChildren } from "../types";
+import { ResponsiveGridLayoutProps } from './types';
+import { PropsWithChildren } from '../types';
 export declare const ResponsiveGridLayout: ({ children, ...props }: PropsWithChildren<ResponsiveGridLayoutProps>) => React.ReactElement;
 export default ResponsiveGridLayout;

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
-import { cloneLayout, noop, synchronizeLayoutWithChildren, } from "./utils/renderHelpers";
-import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from "./utils/responsiveUtils";
-import isEqual from "../../external-lib/lodash.isEqual";
-import ReactGridLayout from "./ReactGridLayout";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { cloneLayout, noop, synchronizeLayoutWithChildren, } from './utils/renderHelpers';
+import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from './utils/responsiveUtils';
+import isEqual from '../../external-lib/lodash.isEqual';
+import ReactGridLayout from './ReactGridLayout';
 /**
  * Get a value of margin or containerPadding.
  *
@@ -44,7 +44,7 @@ export var ResponsiveGridLayout = function (_a) {
         var breakpoint = getBreakpointFromWidth(breakpoints, width);
         var colNo = getColsFromBreakpoint(breakpoint, cols);
         var compactType = props.compactType;
-        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || "vertical", false);
+        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || 'vertical', false);
         return {
             layout: initialLayout,
             layouts: layouts,
@@ -95,8 +95,8 @@ export var ResponsiveGridLayout = function (_a) {
                 breakpoints[newBreakpoint] > breakpoints[lastBreakpoint];
             var isNewLayout = layouts[newBreakpoint] == null;
             var overlap = !!props.allowOverlap && (!isNewLayout || newBreakpointIsBiggerOrEqual); //  allow resize overlap only if we are going into a larger screen
-            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || "vertical", overlap);
-            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || "vertical", overlap);
+            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || 'vertical', overlap);
+            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || 'vertical', overlap);
             newLayouts[newBreakpoint] = layout;
             setState({
                 breakpoint: newBreakpoint,

package/dist/lib/GridLayoutEditor/group.d.ts

@@ -12,34 +12,34 @@ export declare function getBlockSpecificType(block: Block): "ROOT" | "BULK" | "C
 export type SectionPedigree = RootBlock;
 export type Block = ComponentBlock | GroupBlock | RootBlock;
 export type ZOrder = {
-    [platform in 'mobile' | 'desktop']: {
+    [platform in "mobile" | "desktop"]: {
         [componentBlockId: string]: number;
     };
 };
 export type ComponentBlock = {
     blockId: string;
-    type: 'COMPONENT_BLOCK';
+    type: "COMPONENT_BLOCK";
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     componentBlockId: number;
 };
 export type GroupBlock = {
     blockId: string;
-    type: 'GROUP_BLOCK';
+    type: "GROUP_BLOCK";
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
 };
 export type RootBlock = {
-    blockId: 'ROOT';
-    type: 'GROUP_BLOCK';
+    blockId: "ROOT";
+    type: "GROUP_BLOCK";
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
 };
 export type BulkBlockInternal = {
-    blockId: 'BULK';
-    type: 'GROUP_BLOCK';
+    blockId: "BULK";
+    type: "GROUP_BLOCK";
     zOrderDesktopInternal: number;
     zOrderMobileInternal: number;
     children: (ComponentBlock | GroupBlock)[];

package/dist/lib/GridLayoutEditor/group.js

@@ -15,27 +15,27 @@ export var zIndexMap = {
     EDITING_GROUP: 9000,
     GROUP: 5000,
     CB: 0,
-    ROOT: 0, //?
+    ROOT: 20000, //?
 };
 export function getBlockSpecificType(block) {
-    if (block.blockId === 'ROOT') {
-        return 'ROOT';
+    if (block.blockId === "ROOT") {
+        return "ROOT";
     }
-    if (block.blockId === 'BULK') {
-        return 'BULK';
+    if (block.blockId === "BULK") {
+        return "BULK";
     }
     return block.type;
 }
 var deepClone = function (blocks) { return JSON.parse(JSON.stringify(blocks)); };
 var collectChildrenCbIds = function (block, depth) {
     var ids = [];
-    if ('children' in block && block.children) {
+    if ("children" in block && block.children) {
         for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
             var child = _a[_i];
-            if (child.type === 'COMPONENT_BLOCK') {
+            if (child.type === "COMPONENT_BLOCK") {
                 ids.push(child.componentBlockId);
             }
-            if (depth === 'deep' && child.type === 'GROUP_BLOCK') {
+            if (depth === "deep" && child.type === "GROUP_BLOCK") {
                 ids = ids.concat(collectChildrenCbIds(child, depth));
             }
         }
@@ -44,11 +44,11 @@ var collectChildrenCbIds = function (block, depth) {
 };
 var collectChildrenBlockIds = function (block, depth) {
     var ids = [];
-    if ('children' in block && block.children) {
+    if ("children" in block && block.children) {
         for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
             var child = _a[_i];
             ids.push(child.blockId);
-            if (depth === 'deep') {
+            if (depth === "deep") {
                 ids = ids.concat(collectChildrenBlockIds(child, depth));
             }
         }
@@ -56,10 +56,10 @@ var collectChildrenBlockIds = function (block, depth) {
     return ids;
 };
 export var findBlockByBlockId = function (block, blockId) {
-    if (block.type !== 'GROUP_BLOCK' || block.children.length === 0) {
+    if (block.type !== "GROUP_BLOCK" || block.children.length === 0) {
         return null;
     }
-    if (block.blockId === 'ROOT' && blockId === 'ROOT') {
+    if (block.blockId === "ROOT" && blockId === "ROOT") {
         return block;
     }
     for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
@@ -67,7 +67,7 @@ export var findBlockByBlockId = function (block, blockId) {
         if (child.blockId === blockId) {
             return child;
         }
-        if (child.type === 'GROUP_BLOCK' && child.children) {
+        if (child.type === "GROUP_BLOCK" && child.children) {
             var found = findBlockByBlockId(child, blockId);
             if (found) {
                 return found;
@@ -78,31 +78,31 @@ export var findBlockByBlockId = function (block, blockId) {
 };
 export var findDirectChildrenCbIds = function (block, targetId) {
     var targetBlock = findBlockByBlockId(block, targetId);
-    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+    if (!targetBlock || targetBlock.type !== "GROUP_BLOCK") {
         return [];
     }
-    return collectChildrenCbIds(targetBlock, 'current');
+    return collectChildrenCbIds(targetBlock, "current");
 };
 export var findAllChildrenCbIds = function (block, targetId) {
     var targetBlock = findBlockByBlockId(block, targetId);
-    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+    if (!targetBlock || targetBlock.type !== "GROUP_BLOCK") {
         return [];
     }
-    return collectChildrenCbIds(targetBlock, 'deep');
+    return collectChildrenCbIds(targetBlock, "deep");
 };
 export var findAllChildrenBlockIds = function (block, targetId) {
     var targetBlock = findBlockByBlockId(block, targetId);
-    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+    if (!targetBlock || targetBlock.type !== "GROUP_BLOCK") {
         return [];
     }
-    return collectChildrenBlockIds(targetBlock, 'deep');
+    return collectChildrenBlockIds(targetBlock, "deep");
 };
 export var findDirectChildrenBlockIds = function (block, targetId) {
     var targetBlock = findBlockByBlockId(block, targetId);
-    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+    if (!targetBlock || targetBlock.type !== "GROUP_BLOCK") {
         return [];
     }
-    return collectChildrenBlockIds(targetBlock, 'current');
+    return collectChildrenBlockIds(targetBlock, "current");
 };
 // NOTE: 타겟과 하위 모두.
 export var findGroupBlocks = function (block, targetId) {
@@ -110,21 +110,21 @@ export var findGroupBlocks = function (block, targetId) {
     if (!targetBlock) {
         return [];
     }
-    if (targetBlock.type !== 'GROUP_BLOCK') {
+    if (targetBlock.type !== "GROUP_BLOCK") {
         return [];
     }
-    var groupBlocks = targetBlock.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; });
-    var bulkInTarget = targetBlock.children.find(function (block) { return block.blockId === 'BULK'; });
-    if (bulkInTarget && bulkInTarget.type === 'GROUP_BLOCK') {
-        var groupInBulk = bulkInTarget.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; });
-        if (targetBlock.blockId === 'ROOT') {
+    var groupBlocks = targetBlock.children.filter(function (child) { return child.type === "GROUP_BLOCK"; });
+    var bulkInTarget = targetBlock.children.find(function (block) { return block.blockId === "BULK"; });
+    if (bulkInTarget && bulkInTarget.type === "GROUP_BLOCK") {
+        var groupInBulk = bulkInTarget.children.filter(function (child) { return child.type === "GROUP_BLOCK"; });
+        if (targetBlock.blockId === "ROOT") {
             return groupBlocks.concat(groupInBulk);
         }
         if (groupInBulk && groupInBulk.length > 0) {
             return [targetBlock].concat(groupBlocks).concat(groupInBulk);
         }
     }
-    if (targetBlock.blockId === 'ROOT') {
+    if (targetBlock.blockId === "ROOT") {
         return groupBlocks;
     }
     return [targetBlock].concat(groupBlocks);
@@ -180,16 +180,16 @@ export var addBulkToTarget = function (block, targetId, bulkBlockIds) {
     var blockCopy = deepClone(block);
     var targetBlock = findBlockByBlockId(blockCopy, targetId);
     if (!targetBlock ||
-        targetBlock.type !== 'GROUP_BLOCK' ||
+        targetBlock.type !== "GROUP_BLOCK" ||
         !targetBlock.children) {
         return block;
     }
     var bulkBlocks = targetBlock.children.filter(function (child) {
-        if (child.type === 'COMPONENT_BLOCK' &&
+        if (child.type === "COMPONENT_BLOCK" &&
             bulkBlockIds.includes(child.blockId.toString())) {
             return true;
         }
-        if (child.type === 'GROUP_BLOCK' && bulkBlockIds.includes(child.blockId)) {
+        if (child.type === "GROUP_BLOCK" && bulkBlockIds.includes(child.blockId)) {
             return true;
         }
         return false;
@@ -212,8 +212,8 @@ export var addBulkToTarget = function (block, targetId, bulkBlockIds) {
     var zOrderMobileInternal = Math.max.apply(Math, zOrdersMobile);
     // Create the new bulkBlock
     var bulkBlock = {
-        blockId: 'BULK',
-        type: 'GROUP_BLOCK',
+        blockId: "BULK",
+        type: "GROUP_BLOCK",
         zOrderDesktopInternal: zOrderDesktopInternal,
         zOrderMobileInternal: zOrderMobileInternal,
         children: bulkBlocks,
@@ -226,7 +226,7 @@ function findPathHelper(current, targetBlockId) {
     if (current.blockId === targetBlockId) {
         return [current.blockId];
     }
-    if ('children' in current && Array.isArray(current.children)) {
+    if ("children" in current && Array.isArray(current.children)) {
         for (var _i = 0, _a = current.children; _i < _a.length; _i++) {
             var child = _a[_i];
             var result = findPathHelper(child, targetBlockId);
@@ -239,7 +239,7 @@ function findPathHelper(current, targetBlockId) {
 }
 export function getBlockWorkDirPath(blockStructure, targetBlockId) {
     var path = findPathHelper(blockStructure, targetBlockId);
-    return path ? '/' + path.join('/') : '';
+    return path ? "/" + path.join("/") : "";
 }
 export function formatBlockIdToCbId(blockId) {
     var match = blockId.match(/^CB_(\d+)$/);
@@ -284,22 +284,22 @@ export function formatCbIdToBlockId(cbId) {
 // };
 export function findParentGroupBlock(current, targetBlockId) {
     // 현재 블록이 그룹(또는 루트) 블록이고, 자식이 있다면 탐색합니다.
-    if ('children' in current && Array.isArray(current.children)) {
+    if ("children" in current && Array.isArray(current.children)) {
         for (var _i = 0, _a = current.children; _i < _a.length; _i++) {
             var child = _a[_i];
             // 자식 중에 targetBlockId를 가진 블록이 있다면,
             if (child.blockId === targetBlockId) {
                 // 현재 블록이 ROOT라면 부모가 ROOT이므로 null 반환
-                if (current.blockId === 'ROOT') {
+                if (current.blockId === "ROOT") {
                     return null;
                 }
                 // 그렇지 않다면 현재 블록이 부모 그룹 블록이므로 반환
-                if (current.type === 'GROUP_BLOCK') {
+                if (current.type === "GROUP_BLOCK") {
                     return current;
                 }
             }
             // 만약 자식이 그룹 블록이라면 재귀적으로 탐색
-            if (child.type === 'GROUP_BLOCK') {
+            if (child.type === "GROUP_BLOCK") {
                 var found = findParentGroupBlock(child, targetBlockId);
                 if (found !== null) {
                     return found;
@@ -313,24 +313,24 @@ export function findParentGroupBlock(current, targetBlockId) {
 export function findOneComponentBlock(current, targetBlockId) {
     var targetBlock = findBlockByBlockId(current, targetBlockId);
     if (!targetBlock) {
-        console.error('Target block not found');
+        console.error("Target block not found");
         return null;
     }
-    if (targetBlock.type !== 'GROUP_BLOCK') {
-        console.error('Target block is not a group block');
+    if (targetBlock.type !== "GROUP_BLOCK") {
+        console.error("Target block is not a group block");
         return null;
     }
     // 직속 하위에서 먼저 찾기
     for (var _i = 0, _a = targetBlock.children; _i < _a.length; _i++) {
         var child = _a[_i];
-        if (child.type === 'COMPONENT_BLOCK') {
+        if (child.type === "COMPONENT_BLOCK") {
             return child.componentBlockId;
         }
     }
     // 직속 하위에 없다면 재귀적으로 찾기
     for (var _b = 0, _c = targetBlock.children; _b < _c.length; _b++) {
         var child = _c[_b];
-        if (child.type === 'GROUP_BLOCK') {
+        if (child.type === "GROUP_BLOCK") {
             var found = findOneComponentBlock(child, child.blockId);
             if (found !== null) {
                 return found;

package/dist/lib/Resizable/Resizable.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import { PropsWithChildren } from "../Draggable/types";
-import { ResizableProps } from "./types";
+import React from 'react';
+import { PropsWithChildren } from '../Draggable/types';
+import { ResizableProps } from './types';
 type Props = ResizableProps;
 declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, colWidth, margin, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Resizable;

package/dist/lib/Resizable/Resizable.js

@@ -31,12 +31,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef } from "react";
-import { cloneElement } from "./utils/cloneElement";
-import { DraggableCore } from "../Draggable";
-import classNames from "../../external-lib/classnames";
+import React, { useEffect, useRef, } from 'react';
+import { cloneElement } from './utils/cloneElement';
+import { DraggableCore } from '../Draggable';
+import classNames from '../../external-lib/classnames';
 var Resizable = function (_a) {
-    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
+    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? 'both' : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ['se'] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -87,7 +87,8 @@ var Resizable = function (_a) {
         else {
             extendedHeightRef.current = null;
         }
-        if (shouldShrinkRef.current && (target.clientHeight < elementRef.current.clientHeight)) {
+        if (shouldShrinkRef.current &&
+            target.clientHeight < elementRef.current.clientHeight) {
             minHeight.current = target.clientHeight;
         }
         var minWidthStyle = target.computedStyleMap().get('min-width');
@@ -95,7 +96,7 @@ var Resizable = function (_a) {
             var minWidthBase = minWidthStyle.value;
             var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
             var minW = Math.ceil(minColWidth);
-            var minWidthPx = (minW * colWidth) + ((minW - 1) * margin[0]);
+            var minWidthPx = minW * colWidth + (minW - 1) * margin[0];
             minWidth.current = Math.round(minWidthPx);
         }
     }, [isResizing, autoResize, children, elementRef]);
@@ -156,28 +157,28 @@ var Resizable = function (_a) {
         var resizableLeft = startPosition.current.left + (startSize.current.width - width);
         var resizableTop = startPosition.current.top + (startSize.current.height - height);
         if (deltaX < 0) {
-            if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
+            if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
                 if (currentSumOfLeftAndWidth > startSumOfLeftAndWidth) {
                     newLeft = Math.min(left, resizableLeft);
                 }
             }
         }
         if (deltaY < 0) {
-            if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
+            if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
                 if (currentSumOfTopAndHeight > startSumOfTopAndHeight) {
                     newTop = Math.min(top, resizableTop);
                 }
             }
         }
         if (deltaX > 0) {
-            if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
+            if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
                 if (width >= minConstraints[0]) {
                     newLeft = Math.max(left, resizableLeft);
                 }
             }
         }
         if (deltaY > 0) {
-            if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
+            if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
                 if (height >= minConstraints[1]) {
                     newTop = Math.max(top, resizableTop);
                 }
@@ -190,7 +191,7 @@ var Resizable = function (_a) {
             var _b, _c;
             var _d, _e, _f, _g, _h, _j;
             var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
-            if (handlerName === "onResizeStart") {
+            if (handlerName === 'onResizeStart') {
                 var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
                 startPosition.current = position;
                 startSize.current = {
@@ -199,12 +200,12 @@ var Resizable = function (_a) {
                 };
                 resetData();
             }
-            var canDragX = (axis === "both" || axis === "x") &&
-                handleAxis !== "n" &&
-                handleAxis !== "s";
-            var canDragY = (axis === "both" || axis === "y") &&
-                handleAxis !== "e" &&
-                handleAxis !== "w";
+            var canDragX = (axis === 'both' || axis === 'x') &&
+                handleAxis !== 'n' &&
+                handleAxis !== 's';
+            var canDragY = (axis === 'both' || axis === 'y') &&
+                handleAxis !== 'e' &&
+                handleAxis !== 'w';
             if (!canDragX && !canDragY)
                 return;
             var axisV = handleAxis[0];
@@ -222,21 +223,20 @@ var Resizable = function (_a) {
             //   }
             // }
             lastHandleRectRef.current = handleRect;
-            if (axisH === "w") {
+            if (axisH === 'w') {
                 deltaX = -deltaX;
             }
-            if (axisV === "n") {
+            if (axisV === 'n') {
                 deltaY = -deltaY;
             }
-            console.log(deltaX);
             var width = props.width + (canDragX ? deltaX / transformScale : 0);
             var height = props.height + (canDragY ? deltaY / transformScale : 0);
             var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
             var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
-            if (axisV === "n") {
+            if (axisV === 'n') {
                 top = top - deltaY;
             }
-            if (axisH === "w") {
+            if (axisH === 'w') {
                 left = left - deltaX;
             }
             _b = checkConstraints(width, height), width = _b[0], height = _b[1];
@@ -245,12 +245,12 @@ var Resizable = function (_a) {
             }
             _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
             var isDimensionsChanged = width !== props.width || height !== props.height;
-            var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
-            var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
+            var cb = typeof props[handlerName] === 'function' ? props[handlerName] : null;
+            var isCbSkipped = handlerName === 'onResize' && !isDimensionsChanged;
             if (cb && !isCbSkipped) {
                 cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
             }
-            if (handlerName === "onResizeStop") {
+            if (handlerName === 'onResizeStop') {
                 startPosition.current = null;
                 startSize.current = null;
                 resetData();
@@ -261,10 +261,10 @@ var Resizable = function (_a) {
         if (!handle) {
             return (_jsx("span", { className: "react-resizable-handle react-resizable-handle-".concat(handleAxis), ref: ref }));
         }
-        if (typeof handle === "function") {
+        if (typeof handle === 'function') {
             return handle(handleAxis, ref);
         }
-        var isDOMElement = typeof handle.type === "string";
+        var isDOMElement = typeof handle.type === 'string';
         var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
         return React.cloneElement(handle, props);
     };
@@ -273,7 +273,7 @@ var Resizable = function (_a) {
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {
             var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
-            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis) }), renderResizeHandle(handleAxis, ref)));
+            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler('onResizeStop', handleAxis), onStart: resizeHandler('onResizeStart', handleAxis), onDrag: resizeHandler('onResize', handleAxis) }), renderResizeHandle(handleAxis, ref)));
         }), true) }));
 };
 function removeNorthHandle(axis) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo",
-  "version": "0.0.118",
+  "version": "0.0.120",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",