publ-echo-test 0.0.351 → 0.0.354

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

@@ -14,6 +14,7 @@ export function GridBackgroundPlaceholder(_a) {
     // 패턴은 colWidth + margin[0] 단위로 반복되므로, 마지막 열에서는 margin[0]이 필요 없습니다.
     // 또는, 마지막 요소에는 margin[0]이 없다고 가정하고 계산합니다.
     var gridContentWidth = totalCols * (colWidth + margin[0]) - margin[0];
+    var showActiveRows = !!activeDrag.heightFitContent && activeRows.length > 0;
     return (_jsx("div", { className: "grid-placeholder", style: {
             marginTop: margin[1] + "px",
             marginBottom: margin[1] + "px",
@@ -22,7 +23,7 @@ export function GridBackgroundPlaceholder(_a) {
         }, 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)" }), activeDrag &&
+            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;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -533,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>.
@@ -608,7 +608,7 @@ var ReactGridLayout = function (_a) {
             y: l.y,
             i: l.i,
         });
-        return (_jsx(GridItem, { isPinned: device === "DESKTOP"
+        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,
@@ -740,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,
@@ -770,11 +770,8 @@ var ReactGridLayout = function (_a) {
         : null;
     var activeRows = activeDrag &&
         Array.from({ length: activeDrag.h }, function (_, i) { return activeDrag.y + i; });
-    console.log("activeRows", 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" }), 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, 
-                // width={width}
-                rowHeight: rowHeight, colWidth: colWidth, activeDrag: selectedLayoutItem, selectedBlockId: selectedBlockId, totalCols: cols }))] }));
+                rowHeight: rowHeight, colWidth: colWidth, activeDrag: activeDrag, selectedBlockId: selectedBlockId, totalCols: cols })), selectedLayoutItem && !activeDrag && (_jsx(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin, rowHeight: rowHeight, colWidth: colWidth, activeDrag: selectedLayoutItem, selectedBlockId: selectedBlockId, totalCols: cols }))] }));
 };
 export default ReactGridLayout;

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.351",
+  "version": "0.0.354",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",