publ-echo-test 0.0.142 → 0.0.143

package/dist/lib/GridItem/GridItem.js

@@ -30,7 +30,7 @@ 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];
@@ -396,6 +396,7 @@ var GridItem = function (_a) {
         ref: elementRef,
         'data-grid-id': i,
         '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),

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.js

@@ -711,7 +711,7 @@ var ReactGridLayout = function (_a) {
                     '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, 
+                }), 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}

package/package.json

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