publ-echo 0.0.67 → 0.0.69

package/dist/lib/GridItem/GridItem.js

@@ -31,8 +31,7 @@ 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;
-    var child = React.Children.only(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 _k = useState(), resizing = _k[0], setResizing = _k[1];
     var _l = useState(), dragging = _l[0], setDragging = _l[1];
@@ -40,43 +39,42 @@ var GridItem = function (_a) {
     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 _q = useResizeObserver({
-        ref: elementRef,
-        box: 'border-box',
-    }, [isDragging, isResizing]), _r = _q.width, width = _r === void 0 ? 0 : _r, _s = _q.height, height = _s === void 0 ? 0 : _s, _t = _q.clientHeight, clientHeight = _t === void 0 ? 0 : _t, _u = _q.scrollHeight, scrollHeight = _u === void 0 ? 0 : _u, textContentHeight = _q.contentHeight;
+    var _q = useResizeObserver([isDragging, isResizing]), contentHeight = _q.contentHeight, contentWidth = _q.contentWidth, gridItemHeight = _q.gridItemHeight, gridItemWidth = _q.gridItemWidth;
     useEffect(function () {
-        var _a;
-        if (!((_a = child.props.className) === null || _a === void 0 ? void 0 : _a.includes('react-grid-item-selected'))) {
+        if (isDragging || isResizing) {
+            return;
+        }
+        if (!activeResizeObserver) {
             return;
         }
         if (!elementRef.current || !props.onContentSizeChange) {
             return;
         }
-        console.log(elementRef.current);
         var observer = new ResizeObserver(function (_a) {
-            var _b, _c, _d, _e;
+            var _b, _c;
             var entry = _a[0];
             var newClientHeight = entry.target.clientHeight;
             var newClientWidth = entry.target.clientWidth;
-            var _f = entry.target, clientTop = _f.clientTop, clientLeft = _f.clientLeft;
             var containerHeight = (_c = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0;
-            var containerWidth = (_e = (_d = elementRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) !== null && _e !== void 0 ? _e : 0;
-            console.log('entry.target', entry.target);
-            console.log('entry.clientHeight', newClientHeight);
-            console.log('entry.clientWidth', newClientWidth);
-            console.log('container-height', containerHeight);
-            console.log('container-width', containerWidth);
             if (newClientHeight < containerHeight) {
                 return;
             }
-            var _g = calcWH(getPositionParams(), { width: newClientWidth, height: newClientHeight }, x, y, 'se', props.w, props.h), w = _g.w, h = _g.h;
-            props.onContentSizeChange(props.i, { x: x, y: y, w: w, h: h });
+            // let { w, h } = calcWH(
+            //   getPositionParams(),
+            //   { width: newClientWidth, height: newClientHeight },
+            //   x,
+            //   y,
+            //   'se',
+            //   props.w,
+            //   props.h 
+            // );
+            // props.onContentSizeChange(props.i, { x, y, w, h });
         });
         observer.observe(elementRef.current.children[0].children[0].children[0], { box: 'border-box' });
         return function () {
             observer.disconnect();
         };
-    }, [scrollHeight, props.i, props.w, props.h, x, y, child.props.className]);
+    }, [props.i, props.w, props.h, x, y, activeResizeObserver, isDragging, isResizing]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -150,7 +148,7 @@ var GridItem = function (_a) {
      * @param  {Object} position  Position object (pixel values)
      * @return {Element}          Child wrapped in Resizable.
      */
-    var mixinResizable = function (child, position, isResizable, placeholderHeight) {
+    var mixinResizable = function (child, position, isResizable) {
         var positionParams = getPositionParams();
         // const maxWidth = calcGridItemPosition(
         //   positionParams,
@@ -294,76 +292,18 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResizeStart = function (e, callbackData) {
-        var isOverflowingVertically = scrollHeight > clientHeight;
-        var isHandleVertical = callbackData.handle.includes('n') || callbackData.handle.includes('s');
+        // const isOverflowingVertically = scrollHeight > clientHeight;
+        // const isHandleVertical = callbackData.handle.includes('n') || callbackData.handle.includes('s')
         // const isOverflowingHorizontally = scrollWidth > clientWidth;
         // if (isOverflowingVertically && isHandleVertical) {
         //   elementRef.current?.classList.add(`resize-notallowed-${callbackData.handle}`)
         //   return;
         // }
         onResizeHandler(e, callbackData, "onResizeStart");
-        shouldAutoShrink.current.initialHeight = height;
+        // NOTE: 확인필요
+        shouldAutoShrink.current.initialHeight = gridItemHeight;
     };
-    /**
-     * onResize event handler
-     * @param  {ResizeEventType}  e             event data
-     * @param  {Object} callbackData  an object with node and size information
-     */
-    // const onResizeCallback = useCallback((
-    //   e:ResizeEventType,
-    //   callbackData:ResizeCallbackData
-    // ) => {
-    //   setIsResizing(true);
-    //   const { dirX, dirY } = getDirectionOfMouseEvent(e as MouseEvent);
-    //   const shouldBlock = shouldBlockResize({
-    //     handle: callbackData.handle, 
-    //     direction: dirY!, 
-    //     contentHeight: textContentHeight!,
-    //     gridItemHeight: callbackData.size.height,
-    //     shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
-    //     initialHeight: shouldAutoShrink.current.initialHeight,
-    //     colHeight: rowHeight as number
-    //   })
-    //   if (resizing?.top) {
-    //     callbackData.size.top = resizing?.top
-    //   }
-    //   const shouldResize = shouldAutoResize({ 
-    //     handle: callbackData.handle, 
-    //     dirX: dirX!, 
-    //     dirY: dirY!,
-    //     contentHeight: textContentHeight!,
-    //     gridItemHeight: callbackData.size.height,
-    //     shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
-    //     initialHeight: shouldAutoShrink.current.initialHeight
-    //   })
-    //   console.log(shouldResize)
-    //   if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK') {
-    //     callbackData.size.height = textContentHeight!;
-    //   }
-    //   if (shouldResize === 'EXPAND') {
-    //     callbackData.size.height = textContentHeight!;
-    //     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, textContentHeight!);
-    //     // NOTE: 배포전에 무조건 변경
-    //     if (callbackData.handle === 'nw') {
-    //       callbackData.handle = 'sw'
-    //     }
-    //     if (callbackData.handle === 'ne') {
-    //       callbackData.handle = 'se'
-    //     }
-    //   }
-    //   onResizeHandler(e, callbackData, "onResize");
-    // }, [textContentHeight])
-    var onResize = function (e, callbackData, contentSize) {
+    var onResize = function (e, callbackData) {
         var _a;
         setIsResizing(true);
         var _b = getDirectionOfMouseEvent(e), dirX = _b.dirX, dirY = _b.dirY;
@@ -372,14 +312,14 @@ var GridItem = function (_a) {
             handle: callbackData.handle,
             dirY: dirY,
             dirX: dirX,
-            contentHeight: contentSize === null || contentSize === void 0 ? void 0 : contentSize.height,
+            contentHeight: contentHeight,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight,
             colHeight: rowHeight,
             gridItemWidth: callbackData.size.width,
             colWidth: colWidth,
-            contentWidth: contentSize === null || contentSize === void 0 ? void 0 : contentSize.width,
+            contentWidth: contentWidth,
             oneLetterSize: oneLetterSize
         });
         if (resizing === null || resizing === void 0 ? void 0 : resizing.top) {
@@ -389,19 +329,20 @@ var GridItem = function (_a) {
             handle: callbackData.handle,
             dirX: dirX,
             dirY: dirY,
-            contentHeight: contentSize === null || contentSize === void 0 ? void 0 : contentSize.height,
+            contentHeight: contentHeight,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight
         });
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-HEIGHT') {
-            callbackData.size.height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
+            callbackData.size.height = contentHeight;
         }
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-WIDTH') {
-            callbackData.size.width = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width;
+            // console.log('hold width', contentSize)
+            callbackData.size.width = contentWidth;
         }
         if (shouldResize === 'EXPAND') {
-            callbackData.size.height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
+            callbackData.size.height = contentHeight;
             shouldAutoShrink.current.shouldAutoShrink = true;
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
@@ -412,7 +353,7 @@ var GridItem = function (_a) {
             }
         }
         if (shouldResize === 'SHRINK') {
-            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, contentSize === null || contentSize === void 0 ? void 0 : contentSize.height);
+            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, contentHeight);
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
                 callbackData.handle = 'sw';
@@ -471,6 +412,7 @@ var GridItem = function (_a) {
         dragging: dragging,
         resizing: resizing,
     }, colWidth);
+    var child = React.Children.only(children);
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,
@@ -491,7 +433,7 @@ var GridItem = function (_a) {
     if (className === 'placeholder') {
         return newChild;
     }
-    newChild = mixinResizable(newChild, pos, isResizable, textContentHeight !== null && textContentHeight !== void 0 ? textContentHeight : 0);
+    newChild = mixinResizable(newChild, pos, isResizable);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
 };

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

@@ -78,6 +78,7 @@ export type GridItemProps = {
     onContentSizeChange?: any;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
+    activeResizeObserver?: boolean;
 };
 export type GridItemDefaultProps = {
     className: string;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -279,6 +279,7 @@ var ReactGridLayout = function (_a) {
             return;
         }
         setLayout(newLayout);
+        props.onLayoutChange && props.onLayoutChange(newLayout);
     };
     var onResizeHandler = function (i, w, h, _a, x, y) {
         var e = _a.e, node = _a.node;
@@ -392,7 +393,7 @@ 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, children: child }, l.i));
+        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', children: child }, l.i));
     };
     var onDragOverHandler = function (e) {
         var _a;

package/dist/lib/Resizable/Resizable.js

@@ -34,7 +34,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useRef } from "react";
 import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
-import { useResizeObserver } from "../hooks/useResizeobserver";
 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 handleRefs = useRef({
@@ -47,11 +46,6 @@ var Resizable = function (_a) {
         ne: useRef(null),
         nw: useRef(null),
     });
-    var elementRef = useRef({ isOkay: true });
-    var _j = useResizeObserver({
-        ref: elementRef,
-        box: 'border-box',
-    }, [props.onResize]), contentHeight = _j.contentHeight, contentWidth = _j.contentWidth;
     var startPosition = useRef(null);
     var startSize = useRef(null);
     var lastHandleRect = null;
@@ -215,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, { height: contentHeight !== null && contentHeight !== void 0 ? contentHeight : 0, width: contentWidth !== null && contentWidth !== void 0 ? contentWidth : 0 }) }), 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/hooks/useResizeobserver.d.ts

@@ -1,43 +1,16 @@
 import type { RefObject } from 'react';
 type Size = {
-    width: number | undefined;
-    height: number | undefined;
-    scrollHeight: number | undefined;
-    clientHeight: number | undefined;
-    contentHeight: number | undefined;
-    contentWidth: number | undefined;
-};
-type ResizeHandler = (size: Size) => void;
-type BoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
-type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
-    ref: RefObject<T>;
-    onResize?: ResizeHandler;
-    box?: BoxOptions;
+    gridItemWidth: number;
+    gridItemHeight: number;
+    scrollHeight: number;
+    clientHeight: number;
+    contentHeight: number;
+    contentWidth: number;
 };
 type UseResizeObserverResult = Size & {
     myHeightRef: RefObject<{
         myHeight: number;
     }>;
 };
-/**
- * Custom hook for observing the size of an element using the ResizeObserver API.
- *
- * @template T - The type of the element to observe.
- * @param {UseResizeObserverOptions<T>} options - The options for the ResizeObserver. (default is `{}`).
- * @param {RefObject<T>} options.ref - The ref of the element to observe.
- * @param {ResizeHandler} [options.onResize] - When using `onResize`, the hook doesn't re-render on element size changes; it delegates handling to the provided callback . (default is `undefined`).
- * @param {string} [options.box] - The box model to use for the ResizeObserver. (default is `'content-box'`).
- * @returns {UseResizeObserverResult} - The size of the observed element.
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-resize-observer)
- * @see [MDN ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- * @example
- * const myRef = useRef(null);
- * const { width = 0, height = 0 } = useResizeObserver({
- *   ref: myRef,
- *   box: 'content-box',
- * });
- *
- * <div ref={myRef}>Hello, world!</div>
- */
-export declare function useResizeObserver<T extends HTMLElement = HTMLElement>(options: UseResizeObserverOptions<T>, deps: any[]): UseResizeObserverResult;
+export declare function useResizeObserver(deps: any[]): UseResizeObserverResult;
 export {};

package/dist/lib/hooks/useResizeobserver.js

@@ -21,44 +21,19 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useIsMounted } from './useIsMounted';
 var initialSize = {
-    width: undefined,
-    height: undefined,
-    scrollHeight: undefined,
-    clientHeight: undefined,
-    contentHeight: undefined,
-    contentWidth: undefined,
+    gridItemWidth: 0,
+    gridItemHeight: 0,
+    scrollHeight: 0,
+    clientHeight: 0,
+    contentHeight: 0,
+    contentWidth: 0,
 };
-/**
- * Custom hook for observing the size of an element using the ResizeObserver API.
- *
- * @template T - The type of the element to observe.
- * @param {UseResizeObserverOptions<T>} options - The options for the ResizeObserver. (default is `{}`).
- * @param {RefObject<T>} options.ref - The ref of the element to observe.
- * @param {ResizeHandler} [options.onResize] - When using `onResize`, the hook doesn't re-render on element size changes; it delegates handling to the provided callback . (default is `undefined`).
- * @param {string} [options.box] - The box model to use for the ResizeObserver. (default is `'content-box'`).
- * @returns {UseResizeObserverResult} - The size of the observed element.
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-resize-observer)
- * @see [MDN ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- * @example
- * const myRef = useRef(null);
- * const { width = 0, height = 0 } = useResizeObserver({
- *   ref: myRef,
- *   box: 'content-box',
- * });
- *
- * <div ref={myRef}>Hello, world!</div>
- */
-export function useResizeObserver(options, deps) {
-    var ref = options.ref, _a = options.box, box = _a === void 0 ? 'content-box' : _a;
+export function useResizeObserver(deps) {
     var previousSize = useRef(initialSize);
-    var _b = useState(initialSize), size = _b[0], setSize = _b[1];
+    var _a = useState(initialSize), size = _a[0], setSize = _a[1];
     var refvalue = useRef({ myHeight: 0 });
     var isMounted = useIsMounted();
-    var onResize = useRef(undefined);
-    onResize.current = options === null || options === void 0 ? void 0 : options.onResize;
     useLayoutEffect(function () {
-        if (!(ref === null || ref === void 0 ? void 0 : ref.current))
-            return;
         var placeholder = document.querySelector('.placeholder');
         if (!placeholder) {
             return;
@@ -67,47 +42,24 @@ export function useResizeObserver(options, deps) {
             return;
         }
         var observer = new ResizeObserver(function (_a) {
-            var _b, _c, _d, _e, _f, _g;
+            var _b, _c, _d, _e;
             var entry = _a[0];
-            var boxProp = box === 'border-box'
-                ? 'borderBoxSize'
-                : box === 'device-pixel-content-box'
-                    ? 'devicePixelContentBoxSize'
-                    : 'contentBoxSize';
-            var newWidth = extractSize(entry, boxProp, 'inlineSize');
-            var newHeight = extractSize(entry, boxProp, 'blockSize');
+            var newWidth = extractSize(entry, 'contentBoxSize', 'inlineSize');
+            var newHeight = extractSize(entry, 'borderBoxSize', 'blockSize');
             var newScrollHeight = entry.target.scrollHeight;
             var newClientHeight = entry.target.clientHeight;
-            var newContentHeight = (_d = (_c = (_b = entry.target.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
-            var newContentWidth = (_g = (_f = (_e = entry.target.children[0]) === null || _e === void 0 ? void 0 : _e.children[0]) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 0;
+            var newContentHeight = (_c = (_b = entry.target.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.clientHeight;
+            var newContentWidth = (_e = (_d = entry.target.children[0]) === null || _d === void 0 ? void 0 : _d.children[0]) === null || _e === void 0 ? void 0 : _e.clientWidth;
             refvalue.current.myHeight = newContentHeight;
-            // const hasChanged =
-            //   previousSize.current.width !== newWidth ||
-            //   previousSize.current.height !== newHeight ||
-            //   previousSize.current.scrollHeight !== newScrollHeight ||
-            //   previousSize.current.clientHeight !== newClientHeight ||
-            //   previousSize.current.textContentHeight !== newTextContentHeight
-            var newSize = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, contentHeight: newContentHeight, contentWidth: newContentWidth };
+            var newSize = { gridItemWidth: newWidth, gridItemHeight: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, contentHeight: newContentHeight, contentWidth: newContentWidth };
             previousSize.current = newSize;
             setSize(newSize);
-            // if (hasChanged) {
-            // const newSize: Size = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, textContentHeight: newTextContentHeight }
-            // previousSize.current = newSize;
-            //   if (onResize?.current) {
-            //     onResize.current(newSize)
-            //   } else {
-            //     if (isMounted()) {
-            //       console.log('set- new -size')
-            //       setSize(newSize)
-            //     }
-            //   }
-            // }
         });
-        observer.observe(placeholder.children[0], { box: box });
+        observer.observe(placeholder.children[0], { box: 'border-box' });
         return function () {
             observer.disconnect();
         };
-    }, __spreadArray([box, ref, isMounted], deps, true));
+    }, __spreadArray([isMounted], deps, true));
     return __assign(__assign({}, size), { myHeightRef: refvalue });
 }
 function extractSize(entry, box, sizeType) {
@@ -115,7 +67,7 @@ function extractSize(entry, box, sizeType) {
         if (box === 'contentBoxSize') {
             return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
         }
-        return undefined;
+        return 0;
     }
     return Array.isArray(entry[box])
         ? entry[box][0][sizeType]

package/package.json

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