publ-echo-test 0.0.243 → 0.0.245

package/css/gle-styles.css

@@ -13,6 +13,7 @@
   top: 0;
   left: 0;
   z-index: 1;
+  margin: 10px;
 }
 
 .react-grid-item.react-draggable.react-resizable {

package/dist/lib/GridItem/GridItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { GridItemProps } from './types';
-import { PropsWithChildren } from '../types';
+import React from "react";
+import { GridItemProps } from "./types";
+import { PropsWithChildren } from "../types";
 declare const GridItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default GridItem;

package/dist/lib/GridItem/GridItem.js

@@ -21,23 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from 'react';
-import { DraggableCore } from '../Draggable';
-import classNames from '../../external-lib/classnames';
-import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
-import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/renderHelpers';
-import { Resizable } from '../Resizable';
+import React, { useEffect, useRef, useState } from "react";
+import { DraggableCore } from "../Draggable";
+import classNames from "../../external-lib/classnames";
+import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
+import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
+import { Resizable } from "../Resizable";
 var GridItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? '' : _d, _e = props.handle, handle = _e === void 0 ? '' : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
+    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
     var _l = useState(), resizing = _l[0], setResizing = _l[1];
     var _m = useState(), dragging = _m[0], setDragging = _m[1];
     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 elementRef = useRef(null);
-    var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
+    var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains("react-grid-item-selected");
     useEffect(function () {
         var _a;
         if (!isSelected || !autoResize) {
@@ -47,7 +47,7 @@ var GridItem = function (_a) {
         if (!targetNode || isDragging || isResizing) {
             return;
         }
-        if (targetNode.id === 'contentslist-box') {
+        if (targetNode.id === "contentslist-box") {
             return;
         }
         var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
@@ -58,7 +58,7 @@ var GridItem = function (_a) {
         var callback = function (mutationsList) {
             for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
                 var mutation = mutationsList_1[_i];
-                var isCharacterChanged = mutation.type === 'characterData';
+                var isCharacterChanged = mutation.type === "characterData";
                 var keepWidth = true;
                 var hasPaddingChanged = false;
                 var height = isCharacterChanged
@@ -89,14 +89,14 @@ var GridItem = function (_a) {
                 var _a = calcWH(getPositionParams(), {
                     width: width,
                     height: height,
-                }, x, y, 'e', props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
+                }, x, y, "e", props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
                 if (keepWidth) {
                     w_1 = prevW;
                 }
                 if (prevH > h_1) {
                     h_1 = prevH;
                 }
-                var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
+                var _b = getResizableXYPosition("e", w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
                 if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
                     return;
                 }
@@ -112,7 +112,7 @@ var GridItem = function (_a) {
         observer.observe(targetNode, config);
         // 정리 함수에서 MutationObserver 해제
         return function () {
-            if (targetNode.id === 'contentslist-box') {
+            if (targetNode.id === "contentslist-box") {
                 return;
             }
             observer.disconnect();
@@ -127,7 +127,7 @@ var GridItem = function (_a) {
         if (!targetNode || isDragging || isResizing) {
             return;
         }
-        if (targetNode.id !== 'contentslist-box') {
+        if (targetNode.id !== "contentslist-box") {
             return;
         }
         var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
@@ -138,7 +138,8 @@ var GridItem = function (_a) {
         var callback = function (mutationsList) {
             for (var _i = 0, mutationsList_2 = mutationsList; _i < mutationsList_2.length; _i++) {
                 var mutation = mutationsList_2[_i];
-                var isSizeChanged = mutation.attributeName === 'data-min-width' || mutation.attributeName === 'data-min-height';
+                var isSizeChanged = mutation.attributeName === "data-min-width" ||
+                    mutation.attributeName === "data-min-height";
                 var keepWidth = true;
                 var hasPaddingChanged = true;
                 var insetTop = Number(mutation.target.dataset.insetTop);
@@ -173,14 +174,14 @@ var GridItem = function (_a) {
                 var _a = calcWH(getPositionParams(), {
                     width: minWidth,
                     height: minHeight,
-                }, x, y, 'e', props.w, props.h, true), w_2 = _a.w, h_2 = _a.h;
+                }, x, y, "e", props.w, props.h, true), w_2 = _a.w, h_2 = _a.h;
                 if (keepWidth) {
                     w_2 = prevW;
                 }
                 if (prevH > h_2) {
                     h_2 = prevH;
                 }
-                var _b = getResizableXYPosition('e', w_2, h_2, prevW, prevH), newX = _b.newX, newY = _b.newY;
+                var _b = getResizableXYPosition("e", w_2, h_2, prevW, prevH), newX = _b.newX, newY = _b.newY;
                 if (prevH === h_2 && prevW === w_2 && newX === x && newY === y) {
                     return;
                 }
@@ -196,37 +197,32 @@ var GridItem = function (_a) {
         observer.observe(targetNode, config);
         // 정리 함수에서 MutationObserver 해제
         return function () {
-            if (targetNode.id !== 'contentslist-box') {
+            if (targetNode.id !== "contentslist-box") {
                 return;
             }
             observer.disconnect();
         };
     }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
     useEffect(function () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (!isSelected || !autoResize) {
             return;
         }
         var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
         if (!targetNode || isDragging || isResizing) {
-            console.log('cancelled 1');
             return;
         }
-        if (targetNode.id !== 'contentslist-box') {
-            console.log('cancelled 2');
+        if (targetNode.id !== "contentslist-box") {
             return;
         }
         var minWidth = Number((_c = (_b = targetNode.dataset) === null || _b === void 0 ? void 0 : _b.minWidth) !== null && _c !== void 0 ? _c : 0);
         var minHeight = Number((_e = (_d = targetNode.dataset) === null || _d === void 0 ? void 0 : _d.minHeight) !== null && _e !== void 0 ? _e : 0);
         var insetTop = Number(targetNode.dataset.insetTop);
         var insetBottom = Number(targetNode.dataset.insetBottom);
-        console.log('ref', (_f = elementRef.current) === null || _f === void 0 ? void 0 : _f.children[0].children[0]);
-        console.log(targetNode);
-        var _g = calcWH(getPositionParams(), {
+        var _f = calcWH(getPositionParams(), {
             width: minWidth,
             height: minHeight + insetTop + insetBottom,
-        }, x, y, 'e', props.w, props.h, true), w = _g.w, h = _g.h;
-        console.log('newH, newW', h, w);
+        }, x, y, "e", props.w, props.h, true), w = _f.w, h = _f.h;
         var prevW = props.w;
         var prevH = props.h;
         if (prevW > w) {
@@ -236,10 +232,9 @@ var GridItem = function (_a) {
             h = prevH;
         }
         if (prevH === h && prevW === w) {
-            console.log('cancelled 3');
+            console.log("cancelled 3");
             return;
         }
-        console.log('call onfitToContent');
         props.onFitToContent &&
             props.onFitToContent(i, w, h, x, y, { hasPaddingChanged: true });
     }, [isSelected]);
@@ -294,7 +289,7 @@ var GridItem = function (_a) {
             style = setTopLeft(pos);
             if (usePercentages) {
                 if (containerWidth == null) {
-                    throw new Error('Container width is missing!');
+                    throw new Error("Container width is missing!");
                 }
                 style.left = perc(pos.left / containerWidth);
                 style.width = perc(pos.width / containerWidth);
@@ -308,7 +303,7 @@ var GridItem = function (_a) {
      * @return {Element}          Child wrapped in Draggable.
      */
     var mixinDraggable = function (child, isDraggable) {
-        return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: '.react-resizable-handle' + (cancel ? ',' + cancel : ''), scale: transformScale, nodeRef: elementRef, children: child }));
+        return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
     };
     /**
      * Mix a Resizable instance into a child.
@@ -335,7 +330,7 @@ var GridItem = function (_a) {
         ];
         return (_jsx(Resizable, { draggableOpts: {
                 disabled: !isResizable,
-            }, className: isResizable ? undefined : 'react-resizable-hide', width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
+            }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
     };
     /**
      * onDragStart event handler
@@ -370,7 +365,7 @@ var GridItem = function (_a) {
     var onDrag = function (e, _a) {
         var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
         if (!dragging) {
-            throw new Error('onDrag called before onDragStart.');
+            throw new Error("onDrag called before onDragStart.");
         }
         setIsDragging(true);
         var top = dragging.top + deltaY;
@@ -403,7 +398,7 @@ var GridItem = function (_a) {
     var onDragStop = function (e, _a) {
         var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
         if (!dragging) {
-            throw new Error('onDragEnd called before onDragStart.');
+            throw new Error("onDragEnd called before onDragStart.");
         }
         var w = props.w, h = props.h, i = props.i;
         var left = dragging.left, top = dragging.top;
@@ -419,7 +414,7 @@ var GridItem = function (_a) {
     var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
         var newX = x;
         var newY = y;
-        if (handle === 'nw') {
+        if (handle === "nw") {
             // NOTE - nw left(X)와 top(Y) 둘다 변경
             if (width > prevW) {
                 newX = x - (width - prevW);
@@ -434,7 +429,7 @@ var GridItem = function (_a) {
                 newY = y + (prevH - height);
             }
         }
-        if (handle === 'n' || handle === 'ne') {
+        if (handle === "n" || handle === "ne") {
             // NOTE - n, ne left(X) 고정 & top(Y) 변경
             if (height > prevH) {
                 newY = y - (height - prevH);
@@ -443,7 +438,7 @@ var GridItem = function (_a) {
                 newY = y + (prevH - height);
             }
         }
-        if (handle === 'w' || handle === 'sw') {
+        if (handle === "w" || handle === "sw") {
             // NOTE - s, sw left(X) 변경 top(Y) 고정
             if (width > prevW) {
                 newX = x - (width - prevW);
@@ -460,7 +455,7 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResizeStart = function (e, callbackData) {
-        onResizeHandler(e, callbackData, 'onResizeStart');
+        onResizeHandler(e, callbackData, "onResizeStart");
     };
     /**
      * onResize event handler
@@ -469,7 +464,7 @@ var GridItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
-        onResizeHandler(e, callbackData, 'onResize');
+        onResizeHandler(e, callbackData, "onResize");
     };
     /**
      * onResizeStop event handler
@@ -478,7 +473,7 @@ var GridItem = function (_a) {
      */
     var onResizeStop = function (e, callbackData) {
         setIsResizing(false);
-        onResizeHandler(e, callbackData, 'onResizeStop');
+        onResizeHandler(e, callbackData, "onResizeStop");
     };
     /**
      * Wrapper around drag events to provide more useful data.
@@ -512,7 +507,7 @@ var GridItem = function (_a) {
         // maxW = Math.min(maxW, cols - x);
         w = clamp(w, minW, maxW);
         h = clamp(h, tempMinH, maxH);
-        setResizing(handlerName === 'onResizeStop' ? undefined : size);
+        setResizing(handlerName === "onResizeStop" ? undefined : size);
         var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
         handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
     };
@@ -520,22 +515,26 @@ var GridItem = function (_a) {
         dragging: dragging,
         resizing: resizing,
     }, colWidth);
+    pos.left = pos.left + 10; // Adjust for margin
+    pos.top = pos.top + 10; // Adjust for margin
+    pos.width = pos.width - 20; // Adjust for margin
+    pos.height = pos.height - 20; // Adjust for margin
     var child = React.Children.only(children);
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,
-        'data-grid-id': i,
-        'data-z-index': z,
-        'data-z-order': zOrder,
-        'data-z-order-internal': zOrderInternal,
-        className: classNames('react-grid-item', child.props.className, className, {
+        "data-grid-id": i,
+        "data-z-index": z,
+        "data-z-order": zOrder,
+        "data-z-order-internal": zOrderInternal,
+        className: classNames("react-grid-item", child.props.className, className, {
             static: props.static,
             isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
             resizing: Boolean(resizing),
-            'react-draggable': isDraggable,
-            'editable-grid-item': isResizable && isDraggable,
+            "react-draggable": isDraggable,
+            "editable-grid-item": isResizable && isDraggable,
             isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
-            'react-draggable-dragging': Boolean(dragging),
+            "react-draggable-dragging": Boolean(dragging),
             // dropping: Boolean(droppingPosition),
             cssTransforms: useCSSTransforms,
         }),

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),
@@ -71,13 +71,13 @@ var Resizable = function (_a) {
         if (!elementRef.current) {
             return;
         }
-        var placeholder = document.querySelector('.placeholder');
+        var placeholder = document.querySelector(".placeholder");
         if (!placeholder) {
             return;
         }
         var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
-        var oneComposition = target.querySelector('.composition-container');
-        var isContentsList = target.id === 'contentslist-box';
+        var oneComposition = target.querySelector(".composition-container");
+        var isContentsList = target.id === "contentslist-box";
         if (isContentsList && !oneComposition) {
             return;
         }
@@ -87,30 +87,45 @@ var Resizable = function (_a) {
         if (isContentsList && oneComposition) {
             // NOTE: 이건 좀 확인 필요. 근데 지금스팩엔 이게 맞아보임 (gap때문)
             var minCellWidth = 10;
-            var minCollHeight = 11;
-            var numberOfItems = Number(target.getAttribute('data-number-of-items'));
-            var numberOfColumns = Number(target.getAttribute('data-number-of-columns'));
-            var rowGap = Number(target.getAttribute('data-row-gap'));
-            var columnGap = Number(target.getAttribute('data-column-gap'));
-            var insetTop = Number(target.getAttribute('data-inset-top'));
-            var insetBottom = Number(target.getAttribute('data-inset-bottom'));
-            var compositionCols = Number(oneComposition.getAttribute('data-cols'));
-            var compositionRows = Number(oneComposition.getAttribute('data-rows'));
-            var oneCompositionMinWidth = minCellWidth * compositionCols + 20 /* 20px padding */;
-            var oneCompositionMinHeight = minCollHeight * compositionRows + 20 /* 20px padding */;
-            var styles = getComputedStyle(target);
-            var paddingL = parseFloat(styles.paddingLeft);
-            var paddingR = parseFloat(styles.paddingRight);
-            var paddingT = parseFloat(styles.paddingTop);
-            var paddingB = parseFloat(styles.paddingBottom);
-            var paddingLR = paddingL + paddingR;
-            var paddingTB = paddingT + paddingB;
-            var listMinWidth = oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap + paddingLR;
-            var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
-            var listMinHeight = oneCompositionMinHeight * numberOfRows + (numberOfRows - 1) * rowGap + paddingTB + insetTop + insetBottom;
-            minWidth.current = listMinWidth;
-            minHeight.current = listMinHeight;
-            return;
+            var minColHeight = 11;
+            var numberOfItems = Number(target.getAttribute("data-number-of-items"));
+            var numberOfColumns = Number(target.getAttribute("data-number-of-columns"));
+            var rowGap = Number(target.getAttribute("data-row-gap"));
+            var columnGap = Number(target.getAttribute("data-column-gap"));
+            var insetTop = Number(target.getAttribute("data-inset-top"));
+            var insetBottom = Number(target.getAttribute("data-inset-bottom"));
+            var compositionCols = Number(oneComposition.getAttribute("data-cols"));
+            var compositionRows = Number(oneComposition.getAttribute("data-rows"));
+            var oneCompositionMinWidth = minCellWidth * compositionCols + 20; /* 20px padding */
+            var oneCompositionMinHeight = minColHeight * compositionRows + 20; /* 20px padding */
+            var contentsWrapper = placeholder.querySelector(".cb-contentslist-wrapper");
+            if (contentsWrapper) {
+                var wrapperH = contentsWrapper.clientHeight;
+                var tempCompositionH = oneComposition.clientHeight;
+                console.log("wrapperH, tempCompositionH:", wrapperH, tempCompositionH);
+                if (tempCompositionH > wrapperH) {
+                    oneCompositionMinHeight = tempCompositionH;
+                }
+                var styles = getComputedStyle(target);
+                var paddingL = parseFloat(styles.paddingLeft);
+                var paddingR = parseFloat(styles.paddingRight);
+                var paddingT = parseFloat(styles.paddingTop);
+                var paddingB = parseFloat(styles.paddingBottom);
+                var paddingLR = paddingL + paddingR;
+                var paddingTB = paddingT + paddingB;
+                var listMinWidth = oneCompositionMinWidth * numberOfColumns +
+                    (numberOfColumns - 1) * columnGap +
+                    paddingLR;
+                var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
+                var listMinHeight = oneCompositionMinHeight * numberOfRows +
+                    (numberOfRows - 1) * rowGap +
+                    paddingTB +
+                    insetTop +
+                    insetBottom;
+                minWidth.current = listMinWidth;
+                minHeight.current = listMinHeight;
+                return;
+            }
         }
         // target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
         if (target.clientHeight > elementRef.current.clientHeight) {
@@ -124,8 +139,8 @@ var Resizable = function (_a) {
             target.clientHeight < elementRef.current.clientHeight) {
             minHeight.current = target.clientHeight;
         }
-        var minWidthStyle = target.computedStyleMap().get('min-width');
-        if (typeof minWidthStyle.value === 'number' && margin && colWidth) {
+        var minWidthStyle = target.computedStyleMap().get("min-width");
+        if (typeof minWidthStyle.value === "number" && margin && colWidth) {
             var minWidthBase = minWidthStyle.value;
             var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
             var minW = Math.ceil(minColWidth);
@@ -190,28 +205,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);
                 }
@@ -224,7 +239,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 = {
@@ -233,12 +248,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];
@@ -256,20 +271,20 @@ var Resizable = function (_a) {
             //   }
             // }
             lastHandleRectRef.current = handleRect;
-            if (axisH === 'w') {
+            if (axisH === "w") {
                 deltaX = -deltaX;
             }
-            if (axisV === 'n') {
+            if (axisV === "n") {
                 deltaY = -deltaY;
             }
             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];
@@ -278,12 +293,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();
@@ -294,27 +309,27 @@ 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);
     };
-    return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : 'react-resizable'), children: __spreadArray([
+    return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : "react-resizable"), children: __spreadArray([
             // ...children.props.children,
             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) {
     switch (axis) {
-        case 'ne':
-            return 'e';
-        case 'nw':
-            return 'w';
+        case "ne":
+            return "e";
+        case "nw":
+            return "w";
         default:
             return axis;
     }

package/package.json

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