publ-echo 0.0.120 → 0.0.122

package/dist/lib/GridItem/GroupItem.js

@@ -21,22 +21,22 @@ 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, 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, minZ = props.minZ, onContextGroup = props.onContextGroup;
+    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, minZ = props.minZ, onContextGroup = props.onContextGroup, isheightVariable = props.isheightVariable;
     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) {
@@ -54,7 +54,7 @@ var GroupItem = 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
@@ -85,14 +85,14 @@ var GroupItem = 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;
                 }
@@ -162,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);
@@ -176,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.
@@ -263,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;
@@ -278,7 +278,6 @@ var GroupItem = function (_a) {
                 var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
                 var bottomBoundary = offsetParent.clientHeight -
                     calcGridItemWHPx(h, rowHeightNumber, margin[1]);
-                console.log('bb', bottomBoundary);
                 top = clamp(top, 0, bottomBoundary);
                 var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
                 left = clamp(left, 0, rightBoundary);
@@ -297,7 +296,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;
@@ -313,7 +312,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);
@@ -328,7 +327,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);
@@ -337,7 +336,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);
@@ -354,7 +353,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
@@ -363,7 +362,7 @@ var GroupItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
-        onResizeHandler(e, callbackData, 'onResize');
+        onResizeHandler(e, callbackData, "onResize");
     };
     /**
      * onResizeStop event handler
@@ -372,7 +371,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.
@@ -406,7 +405,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);
     };
@@ -415,22 +414,23 @@ var GroupItem = function (_a) {
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,
-        'data-group-block-id': i,
-        'data-z-index': z,
-        'data-z-order': zOrder,
-        'data-z-order-internal': zOrderInternal,
-        'data-min-z': minZ,
-        className: classNames('react-group-block', child.props.className, className, {
+        "data-group-block-id": i,
+        "data-z-index": z,
+        "data-z-order": zOrder,
+        "data-z-order-internal": zOrderInternal,
+        "data-min-z": minZ,
+        "data-is-height-variable": isheightVariable,
+        className: classNames("react-group-block", child.props.className, className, {
             static: props.static,
             isResizing: Boolean(resizing) &&
                 Boolean(isResizing) &&
                 Boolean(isHiddenVisibility),
             resizing: Boolean(resizing),
-            'react-draggable': isDraggable,
+            "react-draggable": isDraggable,
             isDragging: Boolean(isDragging) &&
                 Boolean(dragging) &&
                 Boolean(isHiddenVisibility),
-            'react-draggable-dragging': Boolean(dragging),
+            "react-draggable-dragging": Boolean(dragging),
             // dropping: Boolean(droppingPosition),
             cssTransforms: useCSSTransforms,
         }),
@@ -444,25 +444,25 @@ var GroupItem = function (_a) {
             }
             // 일시적으로 pointer-events 비활성화
             if (elementRef.current) {
-                elementRef.current.style.pointerEvents = 'none';
+                elementRef.current.style.pointerEvents = "none";
             }
             // 현재 마우스 위치에서 실제 요소 찾기
             var underlyingElement = document.elementFromPoint(e.clientX, e.clientY);
             // pointer-events 복구
             if (elementRef.current) {
-                elementRef.current.style.pointerEvents = 'auto';
+                elementRef.current.style.pointerEvents = "auto";
             }
-            document.querySelectorAll('.cb-layout-box.hovered').forEach(function (el) {
-                el.classList.remove('hovered');
+            document.querySelectorAll(".cb-layout-box.hovered").forEach(function (el) {
+                el.classList.remove("hovered");
             });
             if (underlyingElement &&
-                underlyingElement.classList.contains('cb-layout-box')) {
-                underlyingElement.classList.add('hovered');
+                underlyingElement.classList.contains("cb-layout-box")) {
+                underlyingElement.classList.add("hovered");
             }
         },
         onMouseLeave: function () {
-            document.querySelectorAll('.cb-layout-box.hovered').forEach(function (el) {
-                el.classList.remove('hovered');
+            document.querySelectorAll(".cb-layout-box.hovered").forEach(function (el) {
+                el.classList.remove("hovered");
             });
         },
     });

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;
@@ -83,6 +83,10 @@ export type GridItemProps = {
     autoResize: boolean;
     zOrder?: number;
     zOrderInternal?: string;
+    isheightVariable: boolean;
+    heightFitContent: boolean;
+    isGroupChild?: boolean;
+    parentGroupId?: string;
 };
 export type GridItemDefaultProps = {
     className: string;
@@ -108,5 +112,5 @@ export type ReactDraggableCallbackData = {
     lastX: number;
     lastY: number;
 };
-export type ResizeHandlerNameType = 'onResizeStart' | 'onResize' | 'onResizeStop';
+export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
 export {};

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

@@ -1,5 +1,5 @@
 import { ResizeHandleAxis } from "../../Resizable/types";
-import { Position, PositionParams } from "../../GridLayoutEditor/types";
+import { Layout, Position, PositionParams } from "../../GridLayoutEditor/types";
 export type RowHeight = number | ((width: number) => number);
 export declare function calcGridColWidth(positionParams: PositionParams): number;
 export declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
@@ -28,3 +28,11 @@ export declare function calcWH(positionParams: PositionParams, { width, height }
     h: number;
 };
 export declare function clamp(num: number, lowerBound: number, upperBound: number): number;
+/**
+ * layout 배열을 분석하여 'heightFitContent'가 true인 모든 아이템이
+ * 차지하고 있는 Row 인덱스 배열을 반환합니다.
+ *
+ * @param layout - 현재 그리드 레이아웃 (LayoutItem 배열)
+ * @returns 중복이 제거되고 정렬된 Row 인덱스 배열 (예: [0, 1, 2, 5, 6])
+ */
+export declare const getRowsForHeightFitContentItems: (layout: Layout) => number[];

package/dist/lib/GridItem/utils/calculateUtils.js

@@ -113,3 +113,30 @@ function roundToOneDecimal(num) {
 function truncateToOneDecimal(num) {
     return Math.floor(num * 10) / 10;
 }
+// ReactGridLayout.tsx 파일 상단이나, 임포트하는 유틸리티 파일에
+/**
+ * layout 배열을 분석하여 'heightFitContent'가 true인 모든 아이템이
+ * 차지하고 있는 Row 인덱스 배열을 반환합니다.
+ *
+ * @param layout - 현재 그리드 레이아웃 (LayoutItem 배열)
+ * @returns 중복이 제거되고 정렬된 Row 인덱스 배열 (예: [0, 1, 2, 5, 6])
+ */
+export var getRowsForHeightFitContentItems = function (layout) {
+    // Set을 사용하여 Row 인덱스의 중복을 자동으로 처리합니다.
+    var activeRows = new Set();
+    // 1. heightFitContent가 true인 아이템들만 필터링합니다.
+    var fitContentItems = layout.filter(function (item) { return item.heightFitContent === true; });
+    // 2. 필터링된 각 아이템을 순회합니다.
+    for (var _i = 0, fitContentItems_1 = fitContentItems; _i < fitContentItems_1.length; _i++) {
+        var item = fitContentItems_1[_i];
+        // 3. 아이템이 차지하는 모든 Row를 Set에 추가합니다.
+        // (예: y=2, h=3 이면 2, 3, 4 행을 추가)
+        var startRow = item.y;
+        var endRow = item.y + item.h;
+        for (var row = startRow; row < endRow; row++) {
+            activeRows.add(row);
+        }
+    }
+    // 4. Set을 배열로 변환하고 오름차순으로 정렬하여 반환합니다.
+    return Array.from(activeRows).sort(function (a, b) { return a - b; });
+};

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

@@ -0,0 +1,20 @@
+import { ComponentBlock, GroupBlock } from "./group";
+import { LayoutItem } from "./types";
+type PlaceholderProps = {
+    device: "DESKTOP" | "MOBILE";
+    margin: [number, number];
+    rowHeight: number;
+    colWidth: number;
+    backgroundWidth: string | undefined;
+    backgroundHeight: string | undefined;
+    activeDrag: LayoutItem;
+    selectedBlockId: string | null;
+    totalCols: number;
+    activeRows: number[];
+    activeBlock?: ComponentBlock | GroupBlock | null;
+    layout: LayoutItem[];
+};
+export declare function GridBackgroundPlaceholder({ device, margin, rowHeight, colWidth, backgroundWidth, backgroundHeight, activeDrag, selectedBlockId, activeRows, totalCols, // 💡 새로 받은 totalCols 사용
+activeBlock, layout, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export declare function getShowActiveRows(block: ComponentBlock | GroupBlock, layout: LayoutItem[]): boolean;
+export {};

package/dist/lib/GridLayoutEditor/Placeholder.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getLayoutItem } from "./utils/renderHelpers";
+export function GridBackgroundPlaceholder(_a) {
+    // 활성화된 행(row) 인덱스 배열
+    // const activeRows = Array.from(
+    //   { length: activeDrag.h },
+    //   (_, i) => activeDrag.y + i
+    // );
+    var device = _a.device, margin = _a.margin, 
+    // width, // 🚨 제거
+    rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId, activeRows = _a.activeRows, totalCols = _a.totalCols, // 💡 새로 받은 totalCols 사용
+    activeBlock = _a.activeBlock, layout = _a.layout;
+    // 🚨 activeCols도 totalCols prop으로 받아서 사용
+    // const activeCols = Array.from({ length: 24 }, (_, i) => 0 + i);
+    var activeCols = Array.from({ length: totalCols }, function (_, i) { return 0 + i; });
+    var textPadding = 10;
+    // 💡 SVG 캔버스 내부에서 그리드가 차지하는 '실제' 너비를 계산
+    // (총 열 수 * (각 열의 너비 + 가로 마진)) - 마지막 열의 추가 마진
+    // 패턴은 colWidth + margin[0] 단위로 반복되므로, 마지막 열에서는 margin[0]이 필요 없습니다.
+    // 또는, 마지막 요소에는 margin[0]이 없다고 가정하고 계산합니다.
+    var gridContentWidth = totalCols * (colWidth + margin[0]) - margin[0];
+    var isHeightVariable = device === "DESKTOP"
+        ? !!(activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableDesktop)
+        : !!(activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableMobile);
+    // const showActiveRows = !!activeDrag.heightFitContent || isHeightVariable;
+    var showActiveRows = activeBlock && activeBlock.type === "GROUP_BLOCK"
+        ? getShowActiveRows(activeBlock, layout)
+        : !!activeDrag.heightFitContent || isHeightVariable;
+    return (_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", 
+            // 💡 backgroundWidth는 string("100%")으로 사용하되,
+            //    내부 요소 배치에는 gridContentWidth를 사용합니다.
+            width: backgroundWidth, height: backgroundHeight, overflow: "visible", 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: gridContentWidth, height: "100%", fill: "url(#grid-pattern)" }), showActiveRows &&
+                    activeRows.map(function (row) {
+                        var y_top = row * (rowHeight + margin[1]) + 0.5;
+                        var y_center = y_top + rowHeight / 2;
+                        return (_jsxs("g", { children: [activeCols.map(function (col) {
+                                    var x = col * (colWidth + margin[0]) + 0.5;
+                                    return (_jsx("rect", { x: x, y: y_top, width: colWidth, height: rowHeight, className: "grid-active-cell-placeholder" }, "active-".concat(row, "-").concat(col)));
+                                }), _jsx("foreignObject", { x: gridContentWidth + textPadding, y: y_top, width: colWidth, height: rowHeight, style: { overflow: "visible" }, children: _jsx("div", { className: "grid-indicator-text" }) })] }, "active-row-".concat(row)));
+                    })] }) }));
+}
+export function getShowActiveRows(block, layout) {
+    if (block.type === "GROUP_BLOCK") {
+        var hasFitContentCB = block.children.some(function (child) {
+            if (child.type === "COMPONENT_BLOCK") {
+                var item = getLayoutItem(layout, child.componentBlockId.toString());
+                return (item === null || item === void 0 ? void 0 : item.heightFitContent) || false;
+            }
+            if (child.type === "GROUP_BLOCK") {
+                return getShowActiveRows(child, layout);
+            }
+            return false;
+        });
+        return hasFitContentCB;
+    }
+    return false;
+}

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -34,23 +34,25 @@ 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 { calcGridColWidth, calcXY, getRowsForHeightFitContentItems, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
+// NOTE: 필수 변경하기
 import GridItem from "../GridItem/GridItem";
 import isEqual from "../../external-lib/lodash.isEqual";
-import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from "./group";
+import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockIdKind, getBlockSpecificType, zIndexMap, } from "./group";
 import GroupItem from "../GridItem/GroupItem";
 import OutsideClickHandler from "../GridItem/OutsideClickHandler";
+import { getShowActiveRows, GridBackgroundPlaceholder } from "./Placeholder";
 var layoutClassName = "react-grid-layout";
 var ReactGridLayout = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var sectionId = props.sectionId, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
+    var selectedBlockId = props.selectedBlockId, sectionId = props.sectionId, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
         i: "__dropping-elem__",
         h: 1,
         w: 1,
     } : _w, // TODO fix
     _x = props.resizeHandles, // TODO fix
-    resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? "ROOT" : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? "ROOT" : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
-    var device = cols === 24 ? "DESKTOP" : "MOBILE";
+    resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? "ROOT" : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? "ROOT" : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup, device = props.device;
+    var parsedSelectedBlockId = getBlockIdKind(selectedBlockId !== null && selectedBlockId !== void 0 ? selectedBlockId : "");
     var _2 = useState(), activeDrag = _2[0], setActiveDrag = _2[1];
     var _3 = useState(), oldDragItem = _3[0], setOldDragItem = _3[1];
     var _4 = useState(), oldLayout = _4[0], setOldLayout = _4[1];
@@ -207,9 +209,8 @@ var ReactGridLayout = function (_a) {
      * @param {Element} node The current dragging DOM element
      */
     var onDragHandler = function (i, x, y, _a, isGroup) {
-        var _b;
         var e = _a.e, node = _a.node;
-        var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
+        var l = isGroup ? generateGrouplayout(i) : getLayoutItem(layout, i);
         if (!l)
             return;
         if (!oldDragItem) {
@@ -217,15 +218,7 @@ var ReactGridLayout = function (_a) {
         }
         var xgap = x - oldDragItem.x;
         var ygap = y - oldDragItem.y;
-        var placeholder = {
-            w: l.w,
-            h: l.h,
-            x: l.x,
-            y: l.y,
-            z: l.z,
-            placeholder: true,
-            i: i,
-        };
+        var placeholder = __assign(__assign({}, l), { w: l.w, h: l.h, x: l.x, y: l.y, z: l.z, placeholder: true, i: i, heightFitContent: l.heightFitContent });
         var isUserAction = true;
         var newLayout = isGroup
             ? layout
@@ -427,15 +420,7 @@ var ReactGridLayout = function (_a) {
         }), newLayout = _b[0], l = _b[1];
         if (!l)
             return;
-        var placeholder = {
-            w: l.w,
-            h: l.h,
-            x: l.x,
-            y: l.y,
-            z: l.z,
-            static: true,
-            i: i,
-        };
+        var placeholder = __assign(__assign({}, l), { w: l.w, h: l.h, x: l.x, y: l.y, z: l.z, static: true, i: i, heightFitContent: l.heightFitContent });
         props.onResize &&
             props.onResize({
                 layout: newLayout,
@@ -528,7 +513,7 @@ var ReactGridLayout = function (_a) {
         if (!item) {
             return null;
         }
-        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, children: item && item }));
+        return (_jsx(GridItem, { isheightVariable: false, w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, heightFitContent: false, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, minH: l.minH, minW: l.minW, children: item && item }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -554,6 +539,9 @@ var ReactGridLayout = function (_a) {
         var editable = editableBlockIds.includes(Number(l.i));
         var z = l.z || 0;
         var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(l.i))));
+        var isInGroup = blockStructure &&
+            selectedGroupBlock !== "ROOT" &&
+            findAllChildrenCbIds(blockStructure, selectedGroupBlock).includes(Number(l.i));
         var isRoot = editingGroupBlock === "ROOT";
         var block = blockStructure
             ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i)))
@@ -585,11 +573,49 @@ var ReactGridLayout = function (_a) {
             return z;
         })();
         var zIndex = editorMode === "EDIT" ? editorZIndex : z;
-        return (_jsx(GridItem, { className: classNames({
+        // Check if a layout item overlaps any of the activeRows (vertical overlap)
+        var isOverlappingActiveRows = function (item) {
+            if ((activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.type) === "COMPONENT_BLOCK") {
+                if ((parsedSelectedBlockId === null || parsedSelectedBlockId === void 0 ? void 0 : parsedSelectedBlockId.cbId) === item.i) {
+                    return false;
+                }
+                if (!(activeDragItemOrSelectedItem === null || activeDragItemOrSelectedItem === void 0 ? void 0 : activeDragItemOrSelectedItem.heightFitContent)) {
+                    return false;
+                }
+            }
+            if ((activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.type) === "GROUP_BLOCK") {
+                var hasFitContentCB = getShowActiveRows(activeBlock, layout);
+                if (!hasFitContentCB) {
+                    return false;
+                }
+            }
+            if (!activeRows || activeRows.length === 0) {
+                return false;
+            }
+            var minActive = Math.min.apply(Math, activeRows);
+            var maxActive = Math.max.apply(Math, activeRows);
+            var itemTop = item.y;
+            var itemBottom = item.y + item.h - 1;
+            // overlap if ranges [itemTop, itemBottom] and [minActive, maxActive] intersect
+            return !(itemBottom < minActive || itemTop > maxActive);
+        };
+        var overlapsActiveRows = isOverlappingActiveRows({
+            w: l.w,
+            h: l.h,
+            x: l.x,
+            y: l.y,
+            i: l.i,
+        });
+        var showBlockData = editable && !isInBulk && overlapsActiveRows;
+        return (_jsx(GridItem, { heightFitContent: !!(l === null || l === void 0 ? void 0 : l.heightFitContent), isheightVariable: device === "DESKTOP"
+                ? !!block.isHeightVariableDesktop
+                : !!block.isHeightVariableMobile, parentGroupId: parent ? parent.blockId : undefined, className: classNames({
                 "editable-grid-item": !isRoot && editable,
-                "not-editable-grid-item": !editable,
+                "not-editable-grid-item": !isRoot && !editable,
                 "bulk-child-item": isInBulk,
                 "outside-of-editing-group": !isInsideOfEditingGroup,
+                "show-block-data": showBlockData,
+                "is-in-group": isInGroup,
             }), z: zIndex, zOrder: l.z, zOrderInternal: parent
                 ? "".concat(parent[device === "DESKTOP"
                     ? "zOrderDesktopInternal"
@@ -696,7 +722,7 @@ var ReactGridLayout = function (_a) {
                 return zIndexMap.EDITABLE_GROUP + internalZOrder;
             }
             if (type === "GROUP_BLOCK") {
-                return zIndexMap.ROOT + internalZOrder;
+                return zIndexMap.GROUP;
             }
             return -1; // NOTE: ERROR
         })();
@@ -714,7 +740,9 @@ var ReactGridLayout = function (_a) {
         var parent = blockStructure
             ? findParentGroupBlock(blockStructure, block.blockId)
             : null;
-        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
+        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { heightFitContent: false, isheightVariable: device === "DESKTOP"
+                    ? !!block.isHeightVariableDesktop
+                    : !!block.isHeightVariableMobile, className: classNames({
                     "bulk-child-item": isInBulk,
                     "grid-bulk-block": block.blockId === "BULK",
                     editing: editingGroupBlock === block.blockId,
@@ -737,11 +765,39 @@ var ReactGridLayout = function (_a) {
     var currentGroupBlocks = blockStructure
         ? findGroupBlocks(blockStructure, editingGroupBlock)
         : [];
-    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
-                    marginTop: margin[1] + "px",
-                    marginBottom: margin[1] + "px",
-                    marginLeft: margin[0] + "px",
-                    marginRight: margin[0] + "px",
-                }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" })] }) }))] }));
+    function generateGrouplayout(groupblockId) {
+        if (!blockStructure) {
+            return null;
+        }
+        var childrenIds = findAllChildrenCbIds(blockStructure, groupblockId).map(function (i) { return i.toString(); });
+        var groupItem = getBoundingArea(layout, childrenIds);
+        if (!groupItem) {
+            return null;
+        }
+        return __assign({ i: groupblockId }, groupItem);
+    }
+    var selectedLayoutItem = (parsedSelectedBlockId === null || parsedSelectedBlockId === void 0 ? void 0 : parsedSelectedBlockId.type) === "CB"
+        ? getLayoutItem(layout, parsedSelectedBlockId.cbId)
+        : (parsedSelectedBlockId === null || parsedSelectedBlockId === void 0 ? void 0 : parsedSelectedBlockId.type) === "GB"
+            ? generateGrouplayout(parsedSelectedBlockId.blockId)
+            : null;
+    var activeDragItemOrSelectedItem = activeDrag || selectedLayoutItem;
+    var activeBlock = activeDragItemOrSelectedItem && parsedSelectedBlockId
+        ? blockStructure
+            ? findBlockByBlockId(blockStructure, parsedSelectedBlockId.blockId)
+            : null
+        : null;
+    var activeRows = activeDragItemOrSelectedItem &&
+        Array.from({ length: activeDragItemOrSelectedItem.h }, function (_, i) { return activeDragItemOrSelectedItem.y + i; });
+    var heightVariableRows = getRowsForHeightFitContentItems(layout);
+    var shouldShowAllHeightVariableRows = device === "DESKTOP"
+        ? activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableDesktop
+        : activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableMobile;
+    var activeRowsFiltered = shouldShowAllHeightVariableRows
+        ? heightVariableRows
+        : activeRows;
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDragItemOrSelectedItem && (_jsx(GridBackgroundPlaceholder, { device: device, backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin, 
+                // width={width}
+                rowHeight: rowHeight, activeRows: activeRowsFiltered !== null && activeRowsFiltered !== void 0 ? activeRowsFiltered : [], colWidth: colWidth, activeDrag: activeDragItemOrSelectedItem, activeBlock: activeBlock, selectedBlockId: selectedBlockId, totalCols: cols, layout: layout }))] }));
 };
 export default ReactGridLayout;

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

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