publ-echo 0.0.83 → 0.0.85

package/dist/lib/GridItem/GridItem.js

@@ -21,90 +21,21 @@ 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 React, { useRef, useState } from "react";
 import { DraggableCore } from "../Draggable";
 import classNames from "../../external-lib/classnames";
-import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, calculateCharacterWidthInDiv, clamp, resolveRowHeight, } from "./utils/calculateUtils";
+import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
 import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
 import { Resizable } from "../Resizable";
-import { useResizeObserver } from "../hooks/useResizeobserver";
-import { shouldAutoResize, shouldBlockResize } from "./utils/autoResizeUtils";
 var GridItem = function (_a) {
     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, rowHeight = props.rowHeight, activeResizeObserver = props.activeResizeObserver;
-    var shouldAutoShrink = useRef({ shouldAutoShrink: false, initialHeight: 0 });
+    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 elementRef = useRef(null);
-    var gridItemHeight = useResizeObserver([isDragging, isResizing]).gridItemHeight;
-    var _q = useState(false), isHovered = _q[0], setIsHovered = _q[1];
-    useEffect(function () {
-        var node = elementRef.current;
-        if (!node) {
-            return;
-        }
-        var handleMouseEnter = function () {
-            setIsHovered(true);
-        };
-        var handleMouseLeave = function () {
-            setIsHovered(false);
-        };
-        node.addEventListener('mouseenter', handleMouseEnter);
-        node.addEventListener('mouseleave', handleMouseLeave);
-        return function () {
-            node.removeEventListener('mouseenter', handleMouseEnter);
-            node.removeEventListener('mouseleave', handleMouseLeave);
-        };
-    }, []);
-    useEffect(function () {
-        // NOTE: 표현길이 높이맞춤
-        if (isDragging || isResizing) {
-            return;
-        }
-        if (!activeResizeObserver) {
-            return;
-        }
-        if (!elementRef.current || !props.onContentSizeChange) {
-            return;
-        }
-        if (isHovered) {
-            return;
-        }
-        var target = elementRef.current.querySelector(".cb-text-content");
-        if (!target) {
-            return;
-        }
-        var observer = new ResizeObserver(function (_a) {
-            var _b, _c;
-            var entry = _a[0];
-            var newClientHeight = entry.target.clientHeight;
-            var newClientWidth = entry.target.clientWidth;
-            var containerHeight = (_c = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0;
-            if (newClientHeight < containerHeight) {
-                return;
-            }
-            if (isHovered) {
-                return;
-            }
-            ;
-            var _d = calcWH(getPositionParams(), { width: newClientWidth, height: newClientHeight }, x, y, 'se', props.w, props.h), w = _d.w, h = _d.h;
-            if (props.w === w && props.h === h) {
-                return;
-            }
-            props.onContentSizeChange(props.i, { x: x, y: y, w: w, h: h });
-        });
-        observer.observe(target, { box: 'border-box' });
-        if (isHovered) {
-            observer.disconnect();
-        }
-        ;
-        return function () {
-            observer.disconnect();
-        };
-    }, [props.i, props.w, props.h, x, y, activeResizeObserver, isDragging, isResizing, isHovered]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -197,7 +128,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, placeholderObserver: activeResizeObserver, children: child }));
+            }, 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 }));
     };
     /**
      * onDragStart event handler
@@ -242,9 +173,9 @@ var GridItem = function (_a) {
         if (isBounded) {
             var offsetParent = node.offsetParent;
             if (offsetParent) {
-                var margin = props.margin, rowHeight_1 = props.rowHeight;
+                var margin = props.margin, rowHeight = props.rowHeight;
                 // const colWidth =  calcGridColWidth(positionParams);
-                var rowHeightNumber = resolveRowHeight(rowHeight_1, colWidth);
+                var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
                 var bottomBoundary = offsetParent.clientHeight -
                     calcGridItemWHPx(h, rowHeightNumber, margin[1]);
                 top = clamp(top, 0, bottomBoundary);
@@ -323,66 +254,14 @@ var GridItem = function (_a) {
      */
     var onResizeStart = function (e, callbackData) {
         onResizeHandler(e, callbackData, "onResizeStart");
-        shouldAutoShrink.current.initialHeight = gridItemHeight;
     };
-    var onResize = function (e, callbackData, contentSize) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+    /**
+     * onResize event handler
+     * @param  {ResizeEventType}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
+     */
+    var onResize = function (e, callbackData) {
         setIsResizing(true);
-        var _j = getDirectionOfMouseEvent(e), dirX = _j.dirX, dirY = _j.dirY;
-        var oneLetterSize = (_a = calculateCharacterWidthInDiv()) !== null && _a !== void 0 ? _a : 0;
-        var shouldBlock = shouldBlockResize({
-            handle: callbackData.handle,
-            dirY: dirY,
-            dirX: dirX,
-            contentHeight: (_b = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _b !== void 0 ? _b : 0,
-            gridItemHeight: callbackData.size.height,
-            shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
-            initialHeight: shouldAutoShrink.current.initialHeight,
-            colHeight: rowHeight,
-            gridItemWidth: callbackData.size.width,
-            colWidth: colWidth,
-            contentWidth: (_c = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) !== null && _c !== void 0 ? _c : 0,
-            oneLetterSize: oneLetterSize
-        });
-        if (resizing === null || resizing === void 0 ? void 0 : resizing.top) {
-            callbackData.size.top = resizing === null || resizing === void 0 ? void 0 : resizing.top;
-        }
-        var shouldResize = shouldAutoResize({
-            handle: callbackData.handle,
-            dirX: dirX,
-            dirY: dirY,
-            contentHeight: (_d = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _d !== void 0 ? _d : 0,
-            gridItemHeight: callbackData.size.height,
-            shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
-            initialHeight: shouldAutoShrink.current.initialHeight
-        });
-        if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-HEIGHT') {
-            callbackData.size.height = (_e = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _e !== void 0 ? _e : 0;
-        }
-        if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-WIDTH') {
-            callbackData.size.width = (_f = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) !== null && _f !== void 0 ? _f : 0;
-        }
-        if (shouldResize === 'EXPAND') {
-            callbackData.size.height = (_g = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _g !== void 0 ? _g : 0;
-            shouldAutoShrink.current.shouldAutoShrink = true;
-            // NOTE: 배포전에 무조건 변경
-            if (callbackData.handle === 'nw') {
-                callbackData.handle = 'w';
-            }
-            if (callbackData.handle === 'ne') {
-                callbackData.handle = 'se';
-            }
-        }
-        if (shouldResize === 'SHRINK') {
-            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, (_h = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _h !== void 0 ? _h : 0);
-            // NOTE: 배포전에 무조건 변경
-            if (callbackData.handle === 'nw') {
-                callbackData.handle = 'sw';
-            }
-            if (callbackData.handle === 'ne') {
-                callbackData.handle = 'se';
-            }
-        }
         onResizeHandler(e, callbackData, "onResize");
     };
     /**
@@ -393,10 +272,6 @@ var GridItem = function (_a) {
     var onResizeStop = function (e, callbackData) {
         setIsResizing(false);
         onResizeHandler(e, callbackData, "onResizeStop");
-        shouldAutoShrink.current = {
-            shouldAutoShrink: false,
-            initialHeight: 0,
-        };
     };
     /**
      * Wrapper around drag events to provide more useful data.
@@ -422,11 +297,6 @@ var GridItem = function (_a) {
         h = clamp(h, minH, maxH);
         setResizing(handlerName === "onResizeStop" ? undefined : size);
         var _c = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _c.newX, newY = _c.newY;
-        if (newY !== y) {
-            // Y 변화가 있다면 자동줄이기는 하지않는다.
-            shouldAutoShrink.current.shouldAutoShrink = false;
-            shouldAutoShrink.current.initialHeight = 0;
-        }
         handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
     };
     var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
@@ -450,21 +320,8 @@ var GridItem = function (_a) {
         }),
         style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
     });
-    // NOTE: 제외
-    if (className === 'placeholder') {
-        return newChild;
-    }
     newChild = mixinResizable(newChild, pos, isResizable);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
 };
 export default GridItem;
-// NOTE: 이동해야할 util
-var getDirectionOfMouseEvent = function (e) {
-    var dirX = e.movementX > 0 ? 'right' : e.movementX < 0 ? 'left' : null;
-    var dirY = e.movementY > 0 ? 'down' : e.movementY < 0 ? 'up' : null;
-    return {
-        dirX: dirX,
-        dirY: dirY
-    };
-};

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

@@ -75,11 +75,9 @@ export type GridItemProps = {
     onResize?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
-    onContentSizeChange?: any;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
-    activeResizeObserver?: boolean;
-    activeContentObserver?: boolean;
+    fitToContent?: boolean;
 };
 export type GridItemDefaultProps = {
     className: string;

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

@@ -28,4 +28,3 @@ export declare function calcWH(positionParams: PositionParams, { width, height }
     h: number;
 };
 export declare function clamp(num: number, lowerBound: number, upperBound: number): number;
-export declare function calculateCharacterWidthInDiv(): number | undefined;

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

@@ -106,31 +106,3 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH) {
 export function clamp(num, lowerBound, upperBound) {
     return Math.max(Math.min(num, upperBound), lowerBound);
 }
-export function calculateCharacterWidthInDiv() {
-    var _a, _b, _c, _d;
-    var div = document.querySelector('.react-grid-item.isResizing');
-    if (!div)
-        return;
-    var contentDiv = (_b = (_a = div.children[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0];
-    if (!contentDiv)
-        return;
-    // Clone the contentDiv for measurement
-    var span = document.createElement('span');
-    document.body.appendChild(span);
-    // Use a sample character for measurement
-    span.textContent = (_d = (_c = contentDiv.textContent) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : 'M';
-    // Apply necessary styles to mimic the original environment
-    // Note: Add any other styles that affect text size and rendering
-    var computedStyle = window.getComputedStyle(contentDiv);
-    span.style.fontFamily = computedStyle.fontFamily;
-    span.style.fontSize = computedStyle.fontSize;
-    span.style.fontWeight = computedStyle.fontWeight;
-    span.style.letterSpacing = computedStyle.letterSpacing;
-    span.style.padding = computedStyle.padding;
-    span.style.border = computedStyle.border;
-    span.style.position = 'absolute';
-    span.style.visibility = 'hidden';
-    var spanWidth = span.getBoundingClientRect().width;
-    document.body.removeChild(span);
-    return spanWidth;
-}

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -37,7 +37,9 @@ 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 ? {
@@ -266,27 +268,6 @@ var ReactGridLayout = function (_a) {
                 node: node,
             });
     };
-    // NOTE: 임시
-    var onContentSizeChange = function (i, pos) {
-        var targetLayoutItem = getLayoutItem(layout, i);
-        if ((targetLayoutItem === null || targetLayoutItem === void 0 ? void 0 : targetLayoutItem.h) === pos.h) {
-            return;
-        }
-        console.log('og-h: ', targetLayoutItem === null || targetLayoutItem === void 0 ? void 0 : targetLayoutItem.h);
-        console.log('new-h: ', pos.h);
-        var _a = withLayoutItem(layout, i, function (l) {
-            l.w = pos.w;
-            l.h = pos.h;
-            l.x = pos.x;
-            l.y = pos.y;
-            return l;
-        }), newLayout = _a[0], l = _a[1];
-        if (!l) {
-            return;
-        }
-        setLayout(newLayout);
-        props.onAutoResizedToFit && props.onAutoResizedToFit(newLayout);
-    };
     var onResizeHandler = function (i, w, h, _a, x, y) {
         var e = _a.e, node = _a.node;
         var _b = withLayoutItem(layout, i, function (l) {
@@ -376,9 +357,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: 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, 
-            // NOTE: text CB만
-            activeContentObserver: true, children: item && item }));
+        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 }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -401,7 +380,10 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        return (_jsx(GridItem, { className: "i-am-grid-item", 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, onContentSizeChange: onContentSizeChange, 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, activeResizeObserver: child.props.className === 'react-grid-item-selected' && l.activeAutoResize, children: child }, l.i));
+        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);
     };
     var onDragOverHandler = function (e) {
         var _a;

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

@@ -19,9 +19,8 @@ export type LayoutItem = {
     isResizable?: boolean;
     resizeHandles?: ResizeHandleAxis[];
     isBounded?: boolean;
-    autoExpandOnContentChanged?: boolean;
     groupLayouts?: LayoutItem[];
-    activeAutoResize?: boolean;
+    fitToContent?: boolean;
 };
 export type Layout = LayoutItem[];
 export type DroppedEvent = {
@@ -57,7 +56,6 @@ export type ReactGridLayoutProps = {
     resizeHandle?: ResizeHandleType;
     allowOverlap?: boolean;
     onLayoutChange?: (layout: Layout) => void;
-    onAutoResizedToFit?: (layout: Layout) => void;
     onDrag?: EventCallback;
     onDragStart?: EventCallback;
     onDragStop?: EventCallback;
@@ -69,6 +67,7 @@ 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;

package/dist/lib/Resizable/Resizable.js

@@ -31,13 +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, { useEffect, useRef, useState } from "react";
+import React, { useRef } from "react";
 import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
 var Resizable = function (_a) {
-    var _b;
-    var children = _a.children, _c = _a.axis, axis = _c === void 0 ? "both" : _c, _d = _a.handleSize, handleSize = _d === void 0 ? [20, 20] : _d, _e = _a.lockAspectRatio, lockAspectRatio = _e === void 0 ? false : _e, _f = _a.minConstraints, minConstraints = _f === void 0 ? [20, 20] : _f, _g = _a.maxConstraints, maxConstraints = _g === void 0 ? [Infinity, Infinity] : _g, _h = _a.resizeHandles, resizeHandles = _h === void 0 ? ["se"] : _h, _j = _a.transformScale, transformScale = _j === void 0 ? 1 : _j, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale"]);
-    var placeholderObserver = props.placeholderObserver;
+    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 handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -52,26 +50,6 @@ var Resizable = function (_a) {
     var startSize = useRef(null);
     var lastHandleRect = null;
     var slack = null;
-    var _k = useState({ width: 0, height: 0 }), content = _k[0], setContent = _k[1];
-    var target = (_b = document.querySelector('.placeholder')) === null || _b === void 0 ? void 0 : _b.querySelector('.cb-text-content');
-    useEffect(function () {
-        if (!placeholderObserver) {
-            return;
-        }
-        if (!target) {
-            return;
-        }
-        var observer = new ResizeObserver(function (_a) {
-            var entry = _a[0];
-            var contentHeight = entry.target.clientHeight;
-            var contentWidth = entry.target.clientWidth;
-            setContent({ width: contentWidth, height: contentHeight });
-        });
-        observer.observe(target, { box: 'border-box' });
-        return function () {
-            observer.disconnect();
-        };
-    }, [placeholderObserver, target]);
     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 resetData = function () {
         lastHandleRect = slack = null;
@@ -148,7 +126,7 @@ var Resizable = function (_a) {
         }
         return [newTop, newLeft];
     };
-    var resizeHandler = function (handlerName, handleAxis, contentSize) {
+    var resizeHandler = function (handlerName, handleAxis) {
         return function (e, _a) {
             var _b, _c;
             var _d, _e, _f, _g, _h, _j;
@@ -206,7 +184,7 @@ var Resizable = function (_a) {
             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 }, contentSize);
+                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
             }
             if (handlerName === "onResizeStop") {
                 startPosition.current = null;
@@ -231,7 +209,7 @@ var Resizable = function (_a) {
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {
             var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
-            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis, content) }), renderResizeHandle(handleAxis, ref)));
+            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) }));
 };
 export default Resizable;

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

@@ -49,10 +49,7 @@ export type ResizableProps = {
     handle?: ResizeHandleType;
     onResizeStop?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
     onResizeStart?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
-    onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData, contentSize?: {
-        height: number;
-        width: number;
-    }) => any;
+    onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
     handleSize?: [number, number];
     lockAspectRatio?: boolean;
     minConstraints?: [number, number];
@@ -62,6 +59,5 @@ export type ResizableProps = {
     style?: CSSProperties;
     width: number;
     height: number;
-    placeholderObserver?: boolean;
 };
 export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,117 @@
+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;

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

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

package/dist/lib/components/index.js

@@ -1 +1,2 @@
 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.83",
+  "version": "0.0.85",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",
@@ -42,6 +42,7 @@
     "@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",
@@ -52,5 +53,8 @@
     "styled-components": "^5.3.10",
     "typescript": "^5.1.6",
     "web-vitals": "^2.1.4"
+  },
+  "dependencies": {
+    "react-measure": "^2.5.2"
   }
 }

package/dist/lib/FlexGridLayout/FlexGridLayout.d.ts

@@ -1,2 +0,0 @@
-declare function FlexGridLayout(): import("react/jsx-runtime").JSX.Element;
-export default FlexGridLayout;

package/dist/lib/FlexGridLayout/FlexGridLayout.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function FlexGridLayout() {
-    return (_jsx("div", { children: "FlexGridLayout" }));
-}
-export default FlexGridLayout;

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

@@ -1,29 +0,0 @@
-export type Handle = 'n' | 's' | 'w' | 'e' | 'nw' | 'ne' | 'sw' | 'se';
-export type DirectionX = 'right' | 'left';
-export type DirectionY = 'up' | 'down';
-type Props = {
-    handle: Handle;
-    dirX: DirectionX;
-    dirY: DirectionY;
-    contentHeight: number;
-    gridItemHeight: number;
-    shouldAutoShrink: boolean;
-    initialHeight: number;
-};
-export declare function shouldAutoResize({ handle, dirX, dirY, contentHeight, gridItemHeight, shouldAutoShrink, initialHeight }: Props): "SHRINK" | "EXPAND" | "NONE";
-type BlockDetectProp = {
-    handle: Handle;
-    dirY: DirectionY;
-    dirX: DirectionX;
-    contentHeight: number;
-    gridItemHeight: number;
-    shouldAutoShrink: boolean;
-    initialHeight: number;
-    colHeight: number;
-    gridItemWidth: number;
-    colWidth: number;
-    contentWidth: number;
-    oneLetterSize: number;
-};
-export declare function shouldBlockResize({ handle, dirY, dirX, contentHeight, gridItemHeight, shouldAutoShrink, initialHeight, colHeight, gridItemWidth, colWidth, contentWidth, oneLetterSize }: BlockDetectProp): "NONE" | "BLOCK-HEIGHT" | "BLOCK-WIDTH";
-export {};

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

@@ -1,58 +0,0 @@
-export function shouldAutoResize(_a) {
-    var handle = _a.handle, dirX = _a.dirX, dirY = _a.dirY, contentHeight = _a.contentHeight, gridItemHeight = _a.gridItemHeight, shouldAutoShrink = _a.shouldAutoShrink, initialHeight = _a.initialHeight;
-    var shouldExpand = contentHeight > gridItemHeight;
-    var shouldShrink = gridItemHeight > contentHeight;
-    if (handle === 'nw') {
-        // if (dirY === 'up' || dirY === 'down') {
-        //   return 'NONE'
-        // }
-        if (dirX === 'left' && shouldShrink && shouldAutoShrink) {
-            return 'SHRINK';
-        }
-        if (dirX === 'right' && shouldExpand) {
-            return 'EXPAND';
-        }
-    }
-    if (handle.includes('e') && dirX === 'left' && shouldExpand) {
-        return 'EXPAND';
-    }
-    if (handle.includes('e') && dirX === 'right' && shouldShrink && shouldAutoShrink) {
-        return 'SHRINK';
-    }
-    if (handle.includes('w') && dirX === 'right' && shouldExpand) {
-        return 'EXPAND';
-    }
-    if (handle.includes('w') && dirX === 'left' && shouldShrink && shouldAutoShrink) {
-        return 'SHRINK';
-    }
-    return 'NONE';
-}
-export function shouldBlockResize(_a) {
-    var handle = _a.handle, dirY = _a.dirY, dirX = _a.dirX, contentHeight = _a.contentHeight, gridItemHeight = _a.gridItemHeight, shouldAutoShrink = _a.shouldAutoShrink, initialHeight = _a.initialHeight, colHeight = _a.colHeight, gridItemWidth = _a.gridItemWidth, colWidth = _a.colWidth, contentWidth = _a.contentWidth, oneLetterSize = _a.oneLetterSize;
-    var nextGridHeight = gridItemHeight - colHeight;
-    var shouldBlockHeight = contentHeight > nextGridHeight;
-    var nextGridWidth = gridItemWidth - colWidth;
-    var shouldBlockWidth = oneLetterSize > nextGridWidth;
-    if (handle.includes('n') && dirY === 'down' && shouldBlockHeight) {
-        return 'BLOCK-HEIGHT';
-    }
-    if (handle.includes('s') && dirY === 'up' && shouldBlockHeight) {
-        return 'BLOCK-HEIGHT';
-    }
-    if (handle.includes('e') && dirX === 'left' && shouldBlockWidth) {
-        return 'BLOCK-WIDTH';
-    }
-    if (handle.includes('w') && dirX === 'right' && shouldBlockWidth) {
-        return 'BLOCK-WIDTH';
-    }
-    // if (handle.includes('e') && direction === 'right' && shouldShrink && shouldAutoShrink) {
-    //   return 'SHRINK';
-    // }
-    // if (handle.includes('w') && direction === 'right' && shouldExpand) {
-    //   return 'EXPAND';
-    // }
-    // if (handle.includes('w') && direction === 'left' && shouldShrink && shouldAutoShrink) {
-    //   return 'SHRINK';
-    // }
-    return 'NONE';
-}

package/dist/lib/hooks/useIsMounted.d.ts

@@ -1,9 +0,0 @@
-/**
- * Custom hook for determining if the component is currently mounted.
- * @returns {() => boolean} A function that returns a boolean value indicating whether the component is mounted.
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-is-mounted)
- * @example
- * const isComponentMounted = useIsMounted();
- * // Use isComponentMounted() to check if the component is currently mounted before performing certain actions.
- */
-export declare function useIsMounted(): () => boolean;

package/dist/lib/hooks/useIsMounted.js

@@ -1,19 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-/**
- * Custom hook for determining if the component is currently mounted.
- * @returns {() => boolean} A function that returns a boolean value indicating whether the component is mounted.
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-is-mounted)
- * @example
- * const isComponentMounted = useIsMounted();
- * // Use isComponentMounted() to check if the component is currently mounted before performing certain actions.
- */
-export function useIsMounted() {
-    var isMounted = useRef(false);
-    useEffect(function () {
-        isMounted.current = true;
-        return function () {
-            isMounted.current = false;
-        };
-    }, []);
-    return useCallback(function () { return isMounted.current; }, []);
-}

package/dist/lib/hooks/useResizeobserver.d.ts

@@ -1,14 +0,0 @@
-import type { RefObject } from 'react';
-type Size = {
-    gridItemWidth: number;
-    gridItemHeight: number;
-    scrollHeight: number;
-    clientHeight: number;
-};
-type UseResizeObserverResult = Size & {
-    myHeightRef: RefObject<{
-        myHeight: number;
-    }>;
-};
-export declare function useResizeObserver(deps: any[]): UseResizeObserverResult;
-export {};

package/dist/lib/hooks/useResizeobserver.js

@@ -1,73 +0,0 @@
-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 { useLayoutEffect, useRef, useState } from 'react';
-import { useIsMounted } from './useIsMounted';
-var initialSize = {
-    gridItemWidth: 0,
-    gridItemHeight: 0,
-    scrollHeight: 0,
-    clientHeight: 0,
-};
-export function useResizeObserver(deps) {
-    var previousSize = useRef(initialSize);
-    var _a = useState(initialSize), size = _a[0], setSize = _a[1];
-    var refvalue = useRef({ myHeight: 0 });
-    var isMounted = useIsMounted();
-    useLayoutEffect(function () {
-        var _a;
-        var target = (_a = document.querySelector('.placeholder')) === null || _a === void 0 ? void 0 : _a.querySelector('.cb-text-box');
-        if (!target) {
-            return;
-        }
-        if (typeof window === 'undefined' || !('ResizeObserver' in window)) {
-            return;
-        }
-        var observer = new ResizeObserver(function (_a) {
-            var _b;
-            var entry = _a[0];
-            var newWidth = extractSize(entry, 'contentBoxSize', 'inlineSize');
-            var newHeight = extractSize(entry, 'borderBoxSize', 'blockSize');
-            var newScrollHeight = entry.target.scrollHeight;
-            var newContentHeight = (_b = entry.target.children[0]) === null || _b === void 0 ? void 0 : _b.clientHeight;
-            refvalue.current.myHeight = newContentHeight;
-            var newSize = { gridItemWidth: newWidth, gridItemHeight: newHeight, scrollHeight: newScrollHeight, clientHeight: newContentHeight };
-            previousSize.current = newSize;
-            setSize(newSize);
-        });
-        observer.observe(target, { box: 'border-box' });
-        return function () {
-            observer.disconnect();
-        };
-    }, __spreadArray([isMounted], deps, true));
-    return __assign(__assign({}, size), { myHeightRef: refvalue });
-}
-function extractSize(entry, box, sizeType) {
-    if (!entry[box]) {
-        if (box === 'contentBoxSize') {
-            return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
-        }
-        return 0;
-    }
-    return Array.isArray(entry[box])
-        ? entry[box][0][sizeType]
-        : // @ts-ignore Support Firefox's non-standard behavior
-            entry[box][sizeType];
-}