publ-echo-test 0.0.350 → 0.0.353

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, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
+    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, heightFitContent = props.heightFitContent;
     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];
@@ -604,6 +604,7 @@ var GridItem = function (_a) {
         "data-z-index": z,
         "data-z-order": zOrder,
         "data-is-pinned": props.isPinned,
+        "data-height-fit-content": heightFitContent,
         "data-z-order-internal": zOrderInternal,
         className: classNames("react-grid-item", child.props.className, className, {
             static: props.static,

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

@@ -84,6 +84,7 @@ export type GridItemProps = {
     zOrder?: number;
     zOrderInternal?: string;
     isPinned: boolean;
+    heightFitContent: boolean;
 };
 export type GridItemDefaultProps = {
     className: string;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -53,7 +53,6 @@ var ReactGridLayout = function (_a) {
     _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";
-    console.log("selectedBlockId", 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];
@@ -534,7 +533,7 @@ var ReactGridLayout = function (_a) {
         if (!item) {
             return null;
         }
-        return (_jsx(GridItem, { isPinned: false, 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, minH: l.minH, minW: l.minW, children: item && item }));
+        return (_jsx(GridItem, { isPinned: 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>.
@@ -591,13 +590,32 @@ var ReactGridLayout = function (_a) {
             return z;
         })();
         var zIndex = editorMode === "EDIT" ? editorZIndex : z;
-        return (_jsx(GridItem, { isPinned: device === "DESKTOP"
+        // Check if a layout item overlaps any of the activeRows (vertical overlap)
+        var isOverlappingActiveRows = function (item) {
+            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,
+        });
+        return (_jsx(GridItem, { heightFitContent: !!(l === null || l === void 0 ? void 0 : l.heightFitContent), isPinned: device === "DESKTOP"
                 ? !!block.isPinnedDesktop
                 : !!block.isPinnedMobile, className: classNames({
                 "editable-grid-item": !isRoot && editable,
                 "not-editable-grid-item": !isRoot && !editable,
                 "bulk-child-item": isInBulk,
                 "outside-of-editing-group": !isInsideOfEditingGroup,
+                "show-block-data": overlapsActiveRows,
             }), z: zIndex, zOrder: l.z, zOrderInternal: parent
                 ? "".concat(parent[device === "DESKTOP"
                     ? "zOrderDesktopInternal"
@@ -722,7 +740,7 @@ var ReactGridLayout = function (_a) {
         var parent = blockStructure
             ? findParentGroupBlock(blockStructure, block.blockId)
             : null;
-        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { isPinned: device === "DESKTOP"
+        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { heightFitContent: false, isPinned: device === "DESKTOP"
                     ? !!block.isPinnedDesktop
                     : !!block.isPinnedMobile, className: classNames({
                     "bulk-child-item": isInBulk,
@@ -750,6 +768,8 @@ var ReactGridLayout = function (_a) {
     var selectedLayoutItem = selectedBlockId
         ? getLayoutItem(layout, selectedBlockId)
         : null;
+    var activeRows = activeDrag &&
+        Array.from({ length: activeDrag.h }, function (_, i) { return activeDrag.y + i; });
     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(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin, 
                 // width={width}
                 rowHeight: rowHeight, colWidth: colWidth, activeDrag: activeDrag, selectedBlockId: selectedBlockId, totalCols: cols })), selectedLayoutItem && (_jsx(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin, 

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

@@ -23,6 +23,7 @@ export type LayoutItem = {
     groupLayouts?: LayoutItem[];
     autoResize?: boolean;
     isPinned?: boolean;
+    heightFitContent?: boolean;
 };
 export type Layout = LayoutItem[];
 export type DroppedEvent = {

package/package.json

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