publ-echo 0.0.78 → 0.0.80

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

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

package/dist/lib/FlexGridLayout/FlexGridLayout.js

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

package/dist/lib/GridItem/GridItem.js

@@ -31,7 +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, activeResizeObserver = props.activeResizeObserver, activeContentObserver = props.activeContentObserver;
+    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];
@@ -39,7 +39,7 @@ 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([isDragging, isResizing]), gridItemHeight = _q.gridItemHeight, gridItemWidth = _q.gridItemWidth;
+    var gridItemHeight = useResizeObserver([isDragging, isResizing]).gridItemHeight;
     var isHoveredRef = useRef(false);
     useEffect(function () {
         var node = elementRef.current;
@@ -60,6 +60,7 @@ var GridItem = function (_a) {
         };
     }, []);
     useEffect(function () {
+        // NOTE: 표현길이 높이맞춤
         if (isDragging || isResizing) {
             return;
         }
@@ -70,7 +71,10 @@ var GridItem = function (_a) {
             return;
         }
         if (isHoveredRef.current) {
-            console.log('early- return hover is true');
+            return;
+        }
+        var target = elementRef.current.querySelector(".cb-text-content");
+        if (!target) {
             return;
         }
         var observer = new ResizeObserver(function (_a) {
@@ -83,16 +87,14 @@ var GridItem = function (_a) {
                 return;
             }
             if (isHoveredRef.current) {
-                console.log('disconnect from observer');
                 return;
             }
             ;
             var _d = calcWH(getPositionParams(), { width: newClientWidth, height: newClientHeight }, x, y, 'se', props.w, props.h), w = _d.w, h = _d.h;
             props.onContentSizeChange(props.i, { x: x, y: y, w: w, h: h });
         });
-        observer.observe(elementRef.current.children[0].children[0].children[0], { box: 'border-box' });
+        observer.observe(target, { box: 'border-box' });
         if (isHoveredRef.current) {
-            console.log('disconnect observer');
             observer.disconnect();
         }
         ;
@@ -317,20 +319,11 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResizeStart = function (e, callbackData) {
-        // 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");
-        // NOTE: 확인필요
         shouldAutoShrink.current.initialHeight = gridItemHeight;
     };
     var onResize = function (e, callbackData, contentSize) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        console.log(contentSize);
         setIsResizing(true);
         var _j = getDirectionOfMouseEvent(e), dirX = _j.dirX, dirY = _j.dirY;
         var oneLetterSize = (_a = calculateCharacterWidthInDiv()) !== null && _a !== void 0 ? _a : 0;
@@ -458,7 +451,6 @@ var GridItem = function (_a) {
     if (className === 'placeholder') {
         return newChild;
     }
-    console.log(activeResizeObserver);
     newChild = mixinResizable(newChild, pos, isResizable);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -279,7 +279,7 @@ var ReactGridLayout = function (_a) {
             return;
         }
         setLayout(newLayout);
-        props.onLayoutChange && props.onLayoutChange(newLayout);
+        props.onAutoResizedToFit && props.onAutoResizedToFit(newLayout);
     };
     var onResizeHandler = function (i, w, h, _a, x, y) {
         var e = _a.e, node = _a.node;
@@ -395,7 +395,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, activeResizeObserver: child.props.className === 'react-grid-item-selected', 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' && l.activeAutoResize, children: child }, l.i));
     };
     var onDragOverHandler = function (e) {
         var _a;

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

@@ -21,6 +21,7 @@ export type LayoutItem = {
     isBounded?: boolean;
     autoExpandOnContentChanged?: boolean;
     groupLayouts?: LayoutItem[];
+    activeAutoResize?: boolean;
 };
 export type Layout = LayoutItem[];
 export type DroppedEvent = {
@@ -56,6 +57,7 @@ export type ReactGridLayoutProps = {
     resizeHandle?: ResizeHandleType;
     allowOverlap?: boolean;
     onLayoutChange?: (layout: Layout) => void;
+    onAutoResizedToFit?: (layout: Layout) => void;
     onDrag?: EventCallback;
     onDragStart?: EventCallback;
     onDragStop?: EventCallback;

package/dist/lib/Resizable/Resizable.js

@@ -35,7 +35,8 @@ import React, { useEffect, useRef, useState } 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 _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 handleRefs = useRef({
         s: useRef(null),
@@ -51,18 +52,13 @@ var Resizable = function (_a) {
     var startSize = useRef(null);
     var lastHandleRect = null;
     var slack = null;
-    var _j = useState({ width: 0, height: 0 }), content = _j[0], setContent = _j[1];
-    var placeholder = document.querySelector('.placeholder');
+    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 () {
-        var _a;
         if (!placeholderObserver) {
             return;
         }
-        if (!placeholder) {
-            return;
-        }
-        var content = (_a = placeholder.children[0].children[0]) === null || _a === void 0 ? void 0 : _a.children[0];
-        if (!content) {
+        if (!target) {
             return;
         }
         var observer = new ResizeObserver(function (_a) {
@@ -71,11 +67,11 @@ var Resizable = function (_a) {
             var contentWidth = entry.target.clientWidth;
             setContent({ width: contentWidth, height: contentHeight });
         });
-        observer.observe(content, { box: 'border-box' });
+        observer.observe(target, { box: 'border-box' });
         return function () {
             observer.disconnect();
         };
-    }, [placeholderObserver, placeholder]);
+    }, [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;

package/dist/lib/hooks/useResizeobserver.js

@@ -32,29 +32,27 @@ export function useResizeObserver(deps) {
     var refvalue = useRef({ myHeight: 0 });
     var isMounted = useIsMounted();
     useLayoutEffect(function () {
-        var placeholder = document.querySelector('.placeholder');
-        if (!placeholder) {
+        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, _c, _d, _e;
+            var _b;
             var entry = _a[0];
             var newWidth = extractSize(entry, 'contentBoxSize', 'inlineSize');
             var newHeight = extractSize(entry, 'borderBoxSize', 'blockSize');
             var newScrollHeight = entry.target.scrollHeight;
-            var newClientHeight = entry.target.clientHeight;
-            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;
+            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: newClientHeight };
+            var newSize = { gridItemWidth: newWidth, gridItemHeight: newHeight, scrollHeight: newScrollHeight, clientHeight: newContentHeight };
             previousSize.current = newSize;
             setSize(newSize);
         });
-        observer.observe(placeholder.children[0], { box: 'border-box' });
-        console.log('target', placeholder.children[0]);
+        observer.observe(target, { box: 'border-box' });
         return function () {
             observer.disconnect();
         };

package/package.json

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