publ-echo-test 0.0.141 → 0.0.143

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,16 +21,16 @@ 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, 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, 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];
@@ -59,7 +59,9 @@ var GridItem = function (_a) {
                 var isCharacterChanged = mutation.type === 'characterData';
                 var keepWidth = true;
                 var hasPaddingChanged = false;
-                var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
+                var height = isCharacterChanged
+                    ? mutation.target.parentNode.clientHeight
+                    : mutation.target.clientHeight;
                 var width = targetNode.clientWidth;
                 if (!isCharacterChanged && mutation.target instanceof Element) {
                     var styles = getComputedStyle(mutation.target);
@@ -72,7 +74,10 @@ var GridItem = function (_a) {
                     var paddingR = parseFloat(styles.paddingRight);
                     var paddingT = parseFloat(styles.paddingTop);
                     var paddingB = parseFloat(styles.paddingBottom);
-                    if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
+                    if (prevPaddingL !== paddingL ||
+                        prevPaddingR !== paddingR ||
+                        prevPaddingT !== paddingT ||
+                        prevPaddingB !== paddingB) {
                         hasPaddingChanged = true;
                         keepWidth = false;
                     }
@@ -93,7 +98,8 @@ var GridItem = function (_a) {
                 if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
                     return;
                 }
-                props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
+                props.onFitToContent &&
+                    props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
             }
         };
         // MutationObserver 인스턴스 생성
@@ -158,7 +164,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);
@@ -172,7 +178,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.
@@ -199,7 +205,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
@@ -234,7 +240,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;
@@ -267,7 +273,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;
@@ -283,7 +289,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);
@@ -298,7 +304,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);
@@ -307,7 +313,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);
@@ -324,7 +330,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
@@ -333,7 +339,7 @@ var GridItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
-        onResizeHandler(e, callbackData, "onResize");
+        onResizeHandler(e, callbackData, 'onResize');
     };
     /**
      * onResizeStop event handler
@@ -342,7 +348,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.
@@ -376,7 +382,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);
     };
@@ -389,14 +395,16 @@ var GridItem = function (_a) {
         key: i,
         ref: elementRef,
         'data-grid-id': i,
-        className: classNames("react-grid-item", child.props.className, className, {
+        'data-z-index': z,
+        'data-z-order': zOrder,
+        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/GridItem/GroupItem.d.ts

@@ -1,7 +1,8 @@
-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 GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & {
     onContextGroup: (e: React.MouseEvent) => void;
+    zOrder: number;
 }>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default GroupItem;

package/dist/lib/GridItem/GroupItem.js

@@ -21,15 +21,15 @@ 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 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';
 var GroupItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, 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, onContextGroup = props.onContextGroup;
+    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, 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, onContextGroup = props.onContextGroup;
     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];
@@ -57,7 +57,9 @@ var GroupItem = function (_a) {
                 var isCharacterChanged = mutation.type === 'characterData';
                 var keepWidth = true;
                 var hasPaddingChanged = false;
-                var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
+                var height = isCharacterChanged
+                    ? mutation.target.parentNode.clientHeight
+                    : mutation.target.clientHeight;
                 var width = targetNode.clientWidth;
                 if (!isCharacterChanged && mutation.target instanceof Element) {
                     var styles = getComputedStyle(mutation.target);
@@ -70,7 +72,10 @@ var GroupItem = function (_a) {
                     var paddingR = parseFloat(styles.paddingRight);
                     var paddingT = parseFloat(styles.paddingTop);
                     var paddingB = parseFloat(styles.paddingBottom);
-                    if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
+                    if (prevPaddingL !== paddingL ||
+                        prevPaddingR !== paddingR ||
+                        prevPaddingT !== paddingT ||
+                        prevPaddingB !== paddingB) {
                         hasPaddingChanged = true;
                         keepWidth = false;
                     }
@@ -91,7 +96,8 @@ var GroupItem = function (_a) {
                 if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
                     return;
                 }
-                props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
+                props.onFitToContent &&
+                    props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
             }
         };
         // MutationObserver 인스턴스 생성
@@ -156,7 +162,7 @@ var GroupItem = 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);
@@ -170,7 +176,7 @@ var GroupItem = 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.
@@ -257,7 +263,7 @@ var GroupItem = 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;
@@ -291,7 +297,7 @@ var GroupItem = 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;
@@ -307,7 +313,7 @@ var GroupItem = 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);
@@ -322,7 +328,7 @@ var GroupItem = 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);
@@ -331,7 +337,7 @@ var GroupItem = 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);
@@ -348,7 +354,7 @@ var GroupItem = 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
@@ -357,7 +363,7 @@ var GroupItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
-        onResizeHandler(e, callbackData, "onResize");
+        onResizeHandler(e, callbackData, 'onResize');
     };
     /**
      * onResizeStop event handler
@@ -366,7 +372,7 @@ var GroupItem = 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.
@@ -400,7 +406,7 @@ var GroupItem = 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);
     };
@@ -410,13 +416,19 @@ var GroupItem = function (_a) {
         key: i,
         ref: elementRef,
         'data-group-block-id': i,
-        className: classNames("react-group-block", child.props.className, className, {
+        'data-z-index': z,
+        'data-z-order': zOrder,
+        className: classNames('react-group-block', child.props.className, className, {
             static: props.static,
-            isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
+            isResizing: Boolean(resizing) &&
+                Boolean(isResizing) &&
+                Boolean(isHiddenVisibility),
             resizing: Boolean(resizing),
-            "react-draggable": isDraggable,
-            isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
-            "react-draggable-dragging": Boolean(dragging),
+            'react-draggable': isDraggable,
+            isDragging: Boolean(isDragging) &&
+                Boolean(dragging) &&
+                Boolean(isHiddenVisibility),
+            'react-draggable-dragging': Boolean(dragging),
             // dropping: Boolean(droppingPosition),
             cssTransforms: useCSSTransforms,
         }),

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

@@ -1,6 +1,6 @@
-import { DragEvent, SyntheticEvent } from "react";
-import { RowHeight } from "../GridLayoutEditor/types";
-import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
+import { DragEvent, SyntheticEvent } from 'react';
+import { RowHeight } from '../GridLayoutEditor/types';
+import { ResizeHandleAxis, ResizeHandleType } from '../Resizable/types';
 export type PartialPosition = {
     top: number;
     left: number;
@@ -81,6 +81,7 @@ export type GridItemProps = {
     isHiddenVisibility?: boolean;
     customColWidth?: number;
     autoResize: boolean;
+    zOrder?: number;
 };
 export type GridItemDefaultProps = {
     className: string;
@@ -106,5 +107,5 @@ export type ReactDraggableCallbackData = {
     lastX: number;
     lastY: number;
 };
-export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
+export type ResizeHandlerNameType = 'onResizeStart' | 'onResize' | 'onResizeStop';
 export {};

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,26 +30,26 @@ 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, 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, 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 _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 _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;
+    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];
@@ -59,8 +59,14 @@ var ReactGridLayout = function (_a) {
     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 editableBlockIds = blockStructure ? findDirectChildrenCbIds(blockStructure, editingGroupBlock) : [];
-    var editingGroupAllChildren = (blockStructure && editingGroupBlock) ? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) { return i.toString(); }) : [];
+    var editableBlockIds = blockStructure
+        ? findDirectChildrenCbIds(blockStructure, editingGroupBlock)
+        : [];
+    var editingGroupAllChildren = blockStructure && editingGroupBlock
+        ? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) {
+            return i.toString();
+        })
+        : [];
     var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
     var _10 = useState(function () {
         return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
@@ -72,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 () {
@@ -103,11 +109,10 @@ var ReactGridLayout = function (_a) {
         var containerPaddingY = containerPadding
             ? containerPadding[1]
             : margin[1];
-        return (biggerNbRow *
-            resolveRowHeight(rowHeight, colWidth) +
+        return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
             (biggerNbRow - 1) * margin[1] +
             containerPaddingY * 2 +
-            "px");
+            'px');
     };
     var getBackgroundHeight = function () {
         if (!autoSize)
@@ -117,17 +122,16 @@ var ReactGridLayout = function (_a) {
         var containerPaddingY = containerPadding
             ? containerPadding[1]
             : margin[1];
-        return (biggerNbRow *
-            resolveRowHeight(rowHeight, colWidth) +
+        return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
             (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
@@ -149,7 +153,9 @@ var ReactGridLayout = function (_a) {
             if (!blockStructure) {
                 return;
             }
-            var childrenIds = findAllChildrenCbIds(blockStructure, i).map(function (i) { return i.toString(); });
+            var childrenIds = findAllChildrenCbIds(blockStructure, i).map(function (i) {
+                return i.toString();
+            });
             var children_1 = childrenIds.map(function (id) {
                 var item = getLayoutItem(layout, id);
                 return cloneLayoutItem(item);
@@ -221,17 +227,19 @@ var ReactGridLayout = function (_a) {
             i: i,
         };
         var isUserAction = true;
-        var newLayout = isGroup ? layout : moveElement({
-            layout: layout,
-            l: l,
-            x: x,
-            y: y,
-            isUserAction: isUserAction,
-            preventCollision: preventCollision,
-            compactType: compactType,
-            cols: cols,
-            allowOverlap: allowOverlap,
-        });
+        var newLayout = isGroup
+            ? layout
+            : moveElement({
+                layout: layout,
+                l: l,
+                x: x,
+                y: y,
+                isUserAction: isUserAction,
+                preventCollision: preventCollision,
+                compactType: compactType,
+                cols: cols,
+                allowOverlap: allowOverlap,
+            });
         if (isGroup) {
             oldGroupChildren.forEach(function (item) {
                 var layoutItem = getLayoutItem(layout, item.i);
@@ -274,7 +282,6 @@ var ReactGridLayout = function (_a) {
         if (!activeDrag || !oldDragItem) {
             return;
         }
-        ;
         var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
         if (!l)
             return;
@@ -291,7 +298,7 @@ var ReactGridLayout = function (_a) {
             compactType: compactType,
             cols: cols,
             allowOverlap: allowOverlap,
-            overrideZ: oldDragItem.z
+            overrideZ: oldDragItem.z,
         });
         props.onDragStop &&
             props.onDragStop({
@@ -318,7 +325,6 @@ var ReactGridLayout = function (_a) {
         if (!activeDrag || !oldDragItem) {
             return;
         }
-        ;
         var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
         if (!l)
             return;
@@ -335,7 +341,7 @@ var ReactGridLayout = function (_a) {
             compactType: compactType,
             cols: cols,
             allowOverlap: allowOverlap,
-            overrideZ: oldDragItem.z
+            overrideZ: oldDragItem.z,
         });
         var updatedItems = oldGroupChildren.map(function (item) {
             var layoutItem = getLayoutItem(layout, item.i);
@@ -353,7 +359,7 @@ var ReactGridLayout = function (_a) {
                 placeholder: undefined,
                 e: e,
                 node: node,
-                updatedItems: updatedItems
+                updatedItems: updatedItems,
             });
         var newLayout = allowOverlap
             ? movedLayout
@@ -494,7 +500,7 @@ var ReactGridLayout = function (_a) {
                 layout: newLayout,
                 prev: oldResizeItem,
                 item: l,
-                hasPaddingChanged: hasPaddingChanged
+                hasPaddingChanged: hasPaddingChanged,
             });
         setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
     };
@@ -514,10 +520,11 @@ 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 && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(activeDrag.i))));
+        var isInBulk = blockStructure &&
+            (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(activeDrag.i))));
         if (!item) {
             return null;
         }
@@ -536,11 +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;
@@ -549,7 +555,9 @@ var ReactGridLayout = function (_a) {
         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 block = blockStructure ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i))) : undefined;
+        var block = blockStructure
+            ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i)))
+            : undefined;
         if (!block) {
             return _jsx(_Fragment, { children: "NO-BLOCK-FOUND" });
         }
@@ -575,8 +583,8 @@ var ReactGridLayout = function (_a) {
         var outsideOfEditingGroup = !editingGroupAllChildren.includes(l.i);
         var zIndex = editorMode === 'EDIT' ? editorZIndex : z;
         return (_jsx(GridItem, { className: classNames({
-                'editable-grid-item': (!isRoot && editable),
-                'not-editable-grid-item': (!isRoot && !editable),
+                'editable-grid-item': !isRoot && editable,
+                'not-editable-grid-item': !isRoot && !editable,
                 'bulk-child-item': isInBulk,
                 'outside-of-editing-group': outsideOfEditingGroup,
             }), z: zIndex, 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));
@@ -670,7 +678,8 @@ var ReactGridLayout = function (_a) {
             if (isBulk) {
                 return zIndexMap.EDITING_GROUP_CHILD + zOrder;
             }
-            if (isInBulk) { // 위와 같지만 이것은 not-editable이긴 함.
+            if (isInBulk) {
+                // 위와 같지만 이것은 not-editable이긴 함.
                 // const bulkBlock = findBlockByBlockId(blockStructure, 'BULK');
                 // const bulkZOrder = bulkBlock?.[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal'] ?? 0;
                 return zIndexMap.EDITING_GROUP_CHILD + zOrder;
@@ -694,14 +703,15 @@ var ReactGridLayout = function (_a) {
             onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
         };
         var handleClickContextGroup = function (e) {
-            (props === null || props === void 0 ? void 0 : props.onContextGroup) && props.onContextGroup(e, block.blockId, isEditingGroup);
+            (props === null || props === void 0 ? void 0 : props.onContextGroup) &&
+                props.onContextGroup(e, block.blockId, isEditingGroup);
         };
         return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
                     'bulk-child-item': isInBulk,
                     'grid-bulk-block': block.blockId === 'BULK',
-                    'editing': editingGroupBlock === block.blockId,
-                    'selected': selectedGroupBlock === block.blockId
-                }), z: zIndex, 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, 
+                    editing: editingGroupBlock === block.blockId,
+                    selected: selectedGroupBlock === block.blockId,
+                }), z: zIndex, zOrder: zOrder, 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}
                 // maxH={l.maxH}
@@ -712,12 +722,14 @@ var ReactGridLayout = function (_a) {
                 // resizeHandle={resizeHandle}
                 isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, onContextGroup: handleClickContextGroup, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
     };
-    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, 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)" })] }) }))] }));
+    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, 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/package.json

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