publ-echo 0.0.85 → 0.0.91

package/dist/lib/GridItem/GridItem.js

@@ -21,21 +21,77 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef, useState } from "react";
+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, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth;
-    var _k = useState(), resizing = _k[0], setResizing = _k[1];
-    var _l = useState(), dragging = _l[0], setDragging = _l[1];
-    var _m = useState(), dragStart = _m[0], setDragStart = _m[1];
-    var _o = useState(false), isDragging = _o[0], setIsDragging = _o[1];
-    var _p = useState(false), isResizing = _p[0], setIsResizing = _p[1];
+    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 _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');
+    useEffect(function () {
+        var _a;
+        if (!isSelected || !autoResize) {
+            return;
+        }
+        var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
+        if (!targetNode || isDragging || isResizing) {
+            return;
+        }
+        // MutationObserver 콜백 함수
+        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 keepWidth = true;
+                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);
+                    var minWidth = parseFloat(styles.minWidth);
+                    if (minWidth > width) {
+                        keepWidth = false;
+                    }
+                }
+                var prevW = props.w;
+                var prevH = props.h;
+                var _a = calcWH(getPositionParams(), {
+                    width: width,
+                    height: height,
+                }, x, y, 'e', props.w, props.h, true), 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;
+                if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
+                    return;
+                }
+                props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY);
+            }
+        };
+        // MutationObserver 인스턴스 생성
+        var observer = new MutationObserver(callback);
+        // 관찰할 DOM 변이 설정
+        var config = { characterData: true, attributes: true, subtree: true };
+        // 대상 노드와 설정으로 관찰 시작
+        observer.observe(targetNode, config);
+        // 정리 함수에서 MutationObserver 해제
+        return function () {
+            observer.disconnect();
+        };
+    }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -128,7 +184,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, minConstraints: minConstraints, maxConstraints: maxConstraints, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, transformScale: transformScale, resizeHandles: props.resizeHandles, handle: resizeHandle, 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, children: child }));
     };
     /**
      * onDragStart event handler
@@ -282,21 +338,31 @@ var GridItem = function (_a) {
      * @return {Function}           Handler function.
      */
     var onResizeHandler = function (e, _a, handlerName) {
-        var node = _a.node, size = _a.size, handle = _a.handle;
+        var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth, minHeight = _a.minHeight;
         var handler = props[handlerName];
         if (!handler)
             return;
         var prevW = props.w, prevH = props.h;
         // Get new XY
-        var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH), w = _b.w, h = _b.h;
+        var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH, false), w = _b.w, h = _b.h;
+        var tempMinH = minH;
+        if (minWidth) {
+            var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { width: minWidth, height: minHeight !== null && minHeight !== void 0 ? minHeight : 0 }), x, y, handle, prevW, prevH, true), minW_1 = _c.w, newMinH = _c.h;
+            if (minW_1 > w) {
+                w = minW_1;
+            }
+            if (minH > 1) {
+                tempMinH = Math.max(1, newMinH);
+            }
+        }
         // minW should be at least 1
         // minW = Math.max(minW, 1);
         // maxW should be at most (cols - x)
         // maxW = Math.min(maxW, cols - x);
         w = clamp(w, minW, maxW);
-        h = clamp(h, minH, maxH);
+        h = clamp(h, tempMinH, maxH);
         setResizing(handlerName === "onResizeStop" ? undefined : size);
-        var _c = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _c.newX, newY = _c.newY;
+        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);
     };
     var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {

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

@@ -75,9 +75,10 @@ export type GridItemProps = {
     onResize?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
+    onFitToContent?: (i: string, w: number, h: number, x: number, y: number) => void;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
-    fitToContent?: boolean;
+    autoResize: boolean;
 };
 export type GridItemDefaultProps = {
     className: string;

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

@@ -23,7 +23,7 @@ export declare function calcXY(positionParams: PositionParams, top: number, left
 export declare function calcWH(positionParams: PositionParams, { width, height }: {
     width: number;
     height: number;
-}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number): {
+}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number, shouldCeil?: boolean): {
     w: number;
     h: number;
 };

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

@@ -52,13 +52,14 @@ export function calcXY(positionParams, top, left, w, h) {
     y = clamp(y, 0, maxRows - h);
     return { x: x, y: y };
 }
-export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH) {
+export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shouldCeil) {
     var width = _a.width, height = _a.height;
     var margin = positionParams.margin, maxRows = positionParams.maxRows, cols = positionParams.cols, rowHeight = positionParams.rowHeight;
     var colWidth = calcGridColWidth(positionParams);
     var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
-    var w = Math.round((width + margin[0]) / (colWidth + margin[0]));
-    var h = Math.round((height + margin[1]) / (rowHeightNumber + margin[1]));
+    var roundOrCeil = shouldCeil ? Math.ceil : Math.round;
+    var w = roundOrCeil((width + margin[0]) / (colWidth + margin[0]));
+    var h = roundOrCeil((height + margin[1]) / (rowHeightNumber + margin[1]));
     // // Capping
     // w = clamp(w, 0, cols - x);
     // h = clamp(h, 0, maxRows - y);

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -37,9 +37,7 @@ import { bottom, cloneLayoutItem, compact, getAllCollisions, getLayoutItem, move
 import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
 import GridItem from "../GridItem/GridItem";
 import isEqual from "../../external-lib/lodash.isEqual";
-import { WithFitToContent } from "../components";
 var layoutClassName = "react-grid-layout";
-var Placeholder = WithFitToContent(GridItem);
 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 ? {
@@ -335,6 +333,46 @@ var ReactGridLayout = function (_a) {
         setOldLayout(undefined);
         onLayoutMaybeChanged(newLayout, oldLayout);
     };
+    var onFitToContentHandler = function (i, w, h, x, y) {
+        var _a = withLayoutItem(layout, i, function (l) {
+            var hasCollisions;
+            if (preventCollision && !allowOverlap) {
+                var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
+                hasCollisions = collisions.length > 0;
+                if (hasCollisions) {
+                    var leastX_2 = Infinity, leastY_2 = Infinity;
+                    collisions.forEach(function (layoutItem) {
+                        if (layoutItem.x > l.x)
+                            leastX_2 = Math.min(leastX_2, layoutItem.x);
+                        if (layoutItem.y > l.y)
+                            leastY_2 = Math.min(leastY_2, layoutItem.y);
+                    });
+                    if (Number.isFinite(leastX_2))
+                        l.w = leastX_2 - l.x;
+                    if (Number.isFinite(leastY_2))
+                        l.h = leastY_2 - l.y;
+                }
+            }
+            if (!hasCollisions) {
+                // NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
+                l.w = w;
+                l.h = h;
+                l.x = x;
+                l.y = y;
+                l.minH = h;
+            }
+            return l;
+        }), newLayout = _a[0], l = _a[1];
+        if (!l)
+            return;
+        props.onFitToContent &&
+            props.onFitToContent({
+                layout: newLayout,
+                prev: oldResizeItem,
+                item: l,
+            });
+        setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
+    };
     /**
      * Create a placeholder object.
      * @return {Element} Placeholder div.
@@ -357,7 +395,7 @@ var ReactGridLayout = function (_a) {
         if (!item) {
             return null;
         }
-        return (_jsx(Placeholder, { setLayout: setLayout, w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, 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, children: item && item }));
+        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, 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 }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -380,10 +418,7 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        if (l.fitToContent) {
-            return (_jsx(Placeholder, { setLayout: setLayout, 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: props.onFitToContent, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, 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, children: child }));
-        }
-        return _jsx(GridItem, { 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, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, 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, children: child }, l.i);
+        return (_jsx(GridItem, { 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, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, 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));
     };
     var onDragOverHandler = function (e) {
         var _a;

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

@@ -20,7 +20,7 @@ export type LayoutItem = {
     resizeHandles?: ResizeHandleAxis[];
     isBounded?: boolean;
     groupLayouts?: LayoutItem[];
-    fitToContent?: boolean;
+    autoResize?: boolean;
 };
 export type Layout = LayoutItem[];
 export type DroppedEvent = {
@@ -67,11 +67,11 @@ export type ReactGridLayoutProps = {
         h?: number;
     } | false) | null;
     onDrop?: (layout: Layout, item: LayoutItem | null, e: ResizeEventType) => void;
-    onFitToContent: (item: LayoutItem) => void;
     isHiddenVisibility?: boolean;
     innerRef?: RefObject<HTMLDivElement>;
     minNbRow?: number;
     customColWidth?: number;
+    onFitToContent?: EventCallback;
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {

package/dist/lib/Resizable/Resizable.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 import { PropsWithChildren } from "../Draggable/types";
 import { ResizableProps } from "./types";
 type Props = ResizableProps;
-declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Resizable;

package/dist/lib/Resizable/Resizable.js

@@ -31,11 +31,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
 var Resizable = function (_a) {
-    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale"]);
+    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -51,6 +51,38 @@ var Resizable = function (_a) {
     var lastHandleRect = null;
     var slack = null;
     var className = props.className, draggableOpts = props.draggableOpts, width = props.width, height = props.height, handle = props.handle, onResize = props.onResize, onResizeStop = props.onResizeStop, onResizeStart = props.onResizeStart, restProps = __rest(props, ["className", "draggableOpts", "width", "height", "handle", "onResize", "onResizeStop", "onResizeStart"]);
+    var elementRef = children.ref;
+    var extendedHeightRef = useRef(null);
+    var minWidth = useRef(0);
+    useEffect(function () {
+        var _a;
+        if (!autoResize) {
+            return;
+        }
+        if (!isResizing) {
+            extendedHeightRef.current = null;
+            minWidth.current = 0;
+            return;
+        }
+        if (!elementRef.current) {
+            return;
+        }
+        var placeholder = document.querySelector('.placeholder');
+        if (!placeholder) {
+            return;
+        }
+        var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
+        if (target.clientHeight > elementRef.current.clientHeight) {
+            extendedHeightRef.current = target.clientHeight;
+        }
+        else {
+            extendedHeightRef.current = null;
+        }
+        var minWidthStyle = target.computedStyleMap().get('min-width');
+        if (typeof minWidthStyle.value === 'number') {
+            minWidth.current = minWidthStyle.value;
+        }
+    }, [isResizing, autoResize, children, elementRef]);
     var resetData = function () {
         lastHandleRect = slack = null;
     };
@@ -129,7 +161,7 @@ var Resizable = function (_a) {
     var resizeHandler = function (handlerName, handleAxis) {
         return function (e, _a) {
             var _b, _c;
-            var _d, _e, _f, _g, _h, _j;
+            var _d, _e, _f, _g, _h, _j, _k;
             var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
             if (handlerName === "onResizeStart") {
                 var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
@@ -178,13 +210,19 @@ var Resizable = function (_a) {
             if (axisH === "w") {
                 left = left - deltaX;
             }
+            // width = Math.max(width, minWidth.current);
+            // const isOverMin = calcWH()
+            if (extendedHeightRef.current) {
+                height = extendedHeightRef.current;
+                handleAxis = removeNorthHandle(handleAxis);
+            }
             _b = checkConstraints(width, height), width = _b[0], height = _b[1];
             _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
             var isDimensionsChanged = width !== props.width || height !== props.height;
             var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
             var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
             if (cb && !isCbSkipped) {
-                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
+                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis, minWidth: minWidth.current, minHeight: (_k = extendedHeightRef.current) !== null && _k !== void 0 ? _k : 0 });
             }
             if (handlerName === "onResizeStop") {
                 startPosition.current = null;
@@ -212,4 +250,14 @@ var Resizable = function (_a) {
             return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis) }), renderResizeHandle(handleAxis, ref)));
         }), true) }));
 };
+function removeNorthHandle(axis) {
+    switch (axis) {
+        case 'ne':
+            return 'e';
+        case 'nw':
+            return 'w';
+        default:
+            return axis;
+    }
+}
 export default Resizable;

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

@@ -29,6 +29,8 @@ export type ResizeCallbackData = {
         left: number;
     };
     handle: ResizeHandleAxis;
+    minWidth?: number;
+    minHeight?: number;
 };
 export type ResizableDefaultProps = {
     axis: Axis;
@@ -59,5 +61,7 @@ export type ResizableProps = {
     style?: CSSProperties;
     width: number;
     height: number;
+    isResizing?: boolean;
+    autoResize?: boolean;
 };
 export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);

package/dist/lib/components/index.d.ts

@@ -1,2 +1 @@
 export { default as WidthProvider } from "./WidthProvider";
-export { default as WithFitToContent } from "./WithFitToContent";

package/dist/lib/components/index.js

@@ -1,2 +1 @@
 export { default as WidthProvider } from "./WidthProvider";
-export { default as WithFitToContent } from "./WithFitToContent";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo",
-  "version": "0.0.85",
+  "version": "0.0.91",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",
@@ -42,7 +42,6 @@
     "@types/node": "^16.18.32",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
-    "@types/react-measure": "^2.0.12",
     "@types/styled-components": "^5.1.26",
     "commander": "^10.0.1",
     "lodash": "^4.17.21",
@@ -53,8 +52,5 @@
     "styled-components": "^5.3.10",
     "typescript": "^5.1.6",
     "web-vitals": "^2.1.4"
-  },
-  "dependencies": {
-    "react-measure": "^2.5.2"
   }
 }

package/dist/lib/components/WithFitToContent.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import { GridItemProps } from "../GridItem/types";
-import { PropsWithChildren } from "../types";
-import { Layout } from "../GridLayoutEditor";
-import { LayoutItem } from "../GridLayoutEditor/types";
-type ComposedProps<Config> = {
-    h: number;
-    setLayout: React.Dispatch<React.SetStateAction<Layout>>;
-    onFitToContent?: (layoutitem: LayoutItem) => void;
-} & Config;
-declare const WithFitToContent: (ComposedComponent: React.ComponentType<PropsWithChildren<GridItemProps>>) => (props: ComposedProps<PropsWithChildren<GridItemProps>>) => React.ReactElement;
-export default WithFitToContent;

package/dist/lib/components/WithFitToContent.js

@@ -1,117 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useRef, useState, useEffect } from "react";
-import Measure from 'react-measure';
-import styled from "styled-components";
-import { calcGridItemPosition } from "../GridItem/utils/calculateUtils";
-var layoutClassName = "react-grid-item";
-/*
- * A simple HOC that provides facility for listening to container resizes.
- */
-var WithFitToContent = function (ComposedComponent) {
-    return function (props) {
-        var _a, _b;
-        var elementRef = useRef(null);
-        var mounted = useRef(false);
-        var _c = useState({
-            h: props.h,
-        }), state = _c[0], setState = _c[1];
-        // const { measureBeforeMount = false } = props;
-        useEffect(function () {
-            if (mounted.current) {
-                return;
-            }
-            mounted.current = true;
-        }, []);
-        // NOTE: 임시
-        useEffect(function () {
-            setState({ h: props.h });
-        }, [props.h]);
-        // useEffect(() => {
-        //   if (!elementRef.current) return;
-        //   const resizeObserver = new ResizeObserver((callback) => {
-        //     const [object] = callback;
-        //     const { width } = object.contentRect;
-        //     setState({ width });
-        //   });
-        //   resizeObserver.observe(elementRef.current);
-        //   return () => resizeObserver.disconnect();
-        // }, [elementRef]);
-        // const onWindowResize = () => {
-        //   if (!mounted.current) return;
-        //   const node = elementRef.current;
-        //   if (node instanceof HTMLElement && node.offsetWidth) {
-        //     setState({ width: node.offsetWidth });
-        //   }
-        // };
-        function onResize(contentRect) {
-            var _a, _b;
-            if (!mounted.current) {
-                return;
-            }
-            var contentHeight = Math.round((_b = (_a = contentRect.bounds) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0);
-            var scrollHeight = Math.round((props.rowHeight * props.h) + (10 * (props.h - 1)));
-            if (contentHeight <= scrollHeight || props.rowHeight === 0) {
-                return;
-            }
-            var gap = contentHeight - scrollHeight;
-            var additionalColumns = Math.ceil(gap / props.rowHeight);
-            props.setLayout(function (layout) {
-                var targetIdx = layout.findIndex(function (layout) { return layout.i === props.i; });
-                if (targetIdx !== -1) {
-                    // layout을 복사하여 불변성을 유지
-                    var newLayout = __spreadArray([], layout, true);
-                    newLayout[targetIdx] = __assign(__assign({}, newLayout[targetIdx]), { h: props.h + additionalColumns, minH: props.h + additionalColumns });
-                    return newLayout;
-                }
-                return layout;
-            });
-            setState({ h: props.h + additionalColumns });
-            (props === null || props === void 0 ? void 0 : props.onFitToContent) && props.onFitToContent(__assign(__assign({}, props), { h: props.h + additionalColumns }));
-        }
-        var getPositionParams = function (prop) {
-            if (prop === void 0) { prop = props; }
-            return {
-                cols: prop.cols,
-                containerPadding: prop.containerPadding,
-                containerWidth: prop.containerWidth,
-                margin: prop.margin,
-                maxRows: prop.maxRows,
-                rowHeight: prop.rowHeight,
-            };
-        };
-        var pos = calcGridItemPosition(getPositionParams(), props.x, props.y, props.z, (_a = props === null || props === void 0 ? void 0 : props.minW) !== null && _a !== void 0 ? _a : 0, (_b = props === null || props === void 0 ? void 0 : props.minH) !== null && _b !== void 0 ? _b : 0);
-        var height = pos.height;
-        return _jsx(ComposedComponent, __assign({}, props, state, { className: "react-grid-item-selected", children: _jsx("div", { ref: elementRef, children: _jsx(Measure, { bounds: true, onResize: onResize, children: function (_a) {
-                        var measureRef = _a.measureRef;
-                        return (_jsx(S_MeasureDiv, { ref: measureRef, children: props.children }));
-                    } }) }) }));
-    };
-};
-var S_MeasureDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* max-height: fit-content;\n  height: inherit;\n\n  & > div {\n    max-height: fit-content;\n    height: inherit;\n  }\n\n  & > div > div{\n    max-height: fit-content;\n    height: inherit;\n    overflow: visible;\n  } */\n  min-height: 100%; \n  display: flex; \n  width: 100%;\n\n  & > div {\n    height: unset;\n    width: 100%;\n    min-height: 100%; \n    display: flex; \n  }\n  /* display: flex;\n  flex-direction: column;\n  height: ;\n  width: 100%;\n\n  & > div {\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div > div {\n    height: 100%;\n    width: 100%;\n  } */\n\n  .grid-box {\n    height: unset;\n    min-height: 100%; \n    display: flex; \n    width: 100%;\n  }\n"], ["\n  /* max-height: fit-content;\n  height: inherit;\n\n  & > div {\n    max-height: fit-content;\n    height: inherit;\n  }\n\n  & > div > div{\n    max-height: fit-content;\n    height: inherit;\n    overflow: visible;\n  } */\n  min-height: 100%; \n  display: flex; \n  width: 100%;\n\n  & > div {\n    height: unset;\n    width: 100%;\n    min-height: 100%; \n    display: flex; \n  }\n  /* display: flex;\n  flex-direction: column;\n  height: ;\n  width: 100%;\n\n  & > div {\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div > div {\n    height: 100%;\n    width: 100%;\n  } */\n\n  .grid-box {\n    height: unset;\n    min-height: 100%; \n    display: flex; \n    width: 100%;\n  }\n"])));
-export default WithFitToContent;
-var templateObject_1;