publ-echo 0.0.120 → 0.0.122

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
-import { cloneLayout, noop, synchronizeLayoutWithChildren, } from './utils/renderHelpers';
-import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from './utils/responsiveUtils';
-import isEqual from '../../external-lib/lodash.isEqual';
-import ReactGridLayout from './ReactGridLayout';
+import { useLayoutEffect, useRef, useState } from "react";
+import { cloneLayout, noop, synchronizeLayoutWithChildren, } from "./utils/renderHelpers";
+import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from "./utils/responsiveUtils";
+import isEqual from "../../external-lib/lodash.isEqual";
+import ReactGridLayout from "./ReactGridLayout";
 /**
  * Get a value of margin or containerPadding.
  *
@@ -44,7 +44,7 @@ export var ResponsiveGridLayout = function (_a) {
         var breakpoint = getBreakpointFromWidth(breakpoints, width);
         var colNo = getColsFromBreakpoint(breakpoint, cols);
         var compactType = props.compactType;
-        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || 'vertical', false);
+        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || "vertical", false);
         return {
             layout: initialLayout,
             layouts: layouts,
@@ -95,8 +95,8 @@ export var ResponsiveGridLayout = function (_a) {
                 breakpoints[newBreakpoint] > breakpoints[lastBreakpoint];
             var isNewLayout = layouts[newBreakpoint] == null;
             var overlap = !!props.allowOverlap && (!isNewLayout || newBreakpointIsBiggerOrEqual); //  allow resize overlap only if we are going into a larger screen
-            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || 'vertical', overlap);
-            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || 'vertical', overlap);
+            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || "vertical", overlap);
+            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || "vertical", overlap);
             newLayouts[newBreakpoint] = layout;
             setState({
                 breakpoint: newBreakpoint,

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

@@ -22,6 +22,8 @@ export type ComponentBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     componentBlockId: number;
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export type GroupBlock = {
     blockId: string;
@@ -29,6 +31,8 @@ export type GroupBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export type RootBlock = {
     blockId: "ROOT";
@@ -36,6 +40,8 @@ export type RootBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export type BulkBlockInternal = {
     blockId: "BULK";
@@ -43,6 +49,8 @@ export type BulkBlockInternal = {
     zOrderDesktopInternal: number;
     zOrderMobileInternal: number;
     children: (ComponentBlock | GroupBlock)[];
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export declare const findBlockByBlockId: (block: Block, blockId: string) => Block | null;
 export declare const findDirectChildrenCbIds: (block: Block, targetId: string) => number[];
@@ -54,5 +62,14 @@ export declare const addBulkToTarget: (block: Block, targetId: string, bulkBlock
 export declare function getBlockWorkDirPath(blockStructure: Block, targetBlockId: string): string;
 export declare function formatBlockIdToCbId(blockId: string): number | null;
 export declare function formatCbIdToBlockId(cbId: number): string;
+export declare function getBlockIdKind(blockId: string): {
+    type: "GB";
+    blockId: string;
+    cbId: string | null;
+} | {
+    type: "CB";
+    blockId: string;
+    cbId: string;
+} | null;
 export declare function findParentGroupBlock(current: Block, targetBlockId: string): GroupBlock | null;
 export declare function findOneComponentBlock(current: Block, targetBlockId: string): number | null;

package/dist/lib/GridLayoutEditor/group.js

@@ -217,6 +217,8 @@ export var addBulkToTarget = function (block, targetId, bulkBlockIds) {
         zOrderDesktopInternal: zOrderDesktopInternal,
         zOrderMobileInternal: zOrderMobileInternal,
         children: bulkBlocks,
+        isHeightVariableDesktop: false,
+        isHeightVariableMobile: false,
     };
     // Add the bulkBlock to the target's children
     targetBlock.children.push(bulkBlock);
@@ -248,6 +250,23 @@ export function formatBlockIdToCbId(blockId) {
 export function formatCbIdToBlockId(cbId) {
     return "CB_".concat(cbId);
 }
+export function getBlockIdKind(blockId) {
+    if (/^GB_.+$/i.test(blockId)) {
+        return {
+            type: "GB",
+            cbId: null,
+            blockId: blockId,
+        };
+    }
+    if (/^CB_\d+$/i.test(blockId)) {
+        return {
+            type: "CB",
+            cbId: formatBlockIdToCbId(blockId).toString(),
+            blockId: blockId,
+        };
+    }
+    return null;
+}
 // export const findAccessibleChildrenBlocks = (
 //   block: Block,
 //   targetGroupId: string,

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

@@ -1,8 +1,8 @@
-import { DragEvent, ReactElement, RefObject } from 'react';
-import { ResizeHandleAxis, ResizeHandleType } from '../Resizable/types';
-import { ResizeEventType } from '../GridItem/types';
-import { Block } from './group';
-export type CompactType = 'vertical' | 'horizontal';
+import { DragEvent, ReactElement, RefObject } from "react";
+import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
+import { ResizeEventType } from "../GridItem/types";
+import { Block } from "./group";
+export type CompactType = "vertical" | "horizontal";
 export type LayoutItem = {
     w: number;
     h: number;
@@ -22,6 +22,9 @@ export type LayoutItem = {
     isBounded?: boolean;
     groupLayouts?: LayoutItem[];
     autoResize?: boolean;
+    isHeightVariableDesktop?: boolean;
+    isHeightVariableMobile?: boolean;
+    heightFitContent?: boolean;
 };
 export type Layout = LayoutItem[];
 export type DroppedEvent = {
@@ -35,6 +38,7 @@ export type UpdatedItem = {
     y: number;
 };
 export type ReactGridLayoutProps = {
+    selectedBlockId: string | null;
     sectionId: string;
     children: ReactElement<any> | ReactElement[];
     className?: string;
@@ -82,12 +86,13 @@ export type ReactGridLayoutProps = {
     onFitToContent?: OnFitContentCallBack;
     blockStructure?: Block;
     onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
-    selectedGroupBlock?: 'ROOT' | string;
-    editingGroupBlock?: 'ROOT' | string;
+    selectedGroupBlock?: "ROOT" | string;
+    editingGroupBlock?: "ROOT" | string;
     onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
     bulkIds?: string[];
     onDoubleClickOutsideGroup: () => void;
     onContextGroup?: (e: React.MouseEvent, blockId: string, isEditingGroup: boolean) => void;
+    device: "DESKTOP" | "MOBILE";
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {
@@ -143,7 +148,7 @@ export type ResponsiveGridLayoutStateType = {
     layout: Layout;
     layouts?: ResponsiveLayout<string>;
 };
-type CoreType = Omit<ReactGridLayoutProps, 'cols' | 'layout' | 'margin' | 'containerPadding' | 'transformScale' | 'onLayoutChange' | 'isHiddenVisibility'>;
+type CoreType = Omit<ReactGridLayoutProps, "cols" | "layout" | "margin" | "containerPadding" | "transformScale" | "onLayoutChange" | "isHiddenVisibility">;
 export type ResponsiveGridLayoutProps = {
     breakpoint?: Breakpoint;
     breakpoints?: Breakpoints<Breakpoint>;
@@ -157,7 +162,7 @@ export type ResponsiveGridLayoutProps = {
     zoom?: number;
 } & CoreType;
 export type Breakpoint = string;
-export type DefaultBreakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
 export type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
 export type Breakpoints<T extends Breakpoint> = Record<T, number>;
 export type OnLayoutChangeCallback = (properties: {

package/dist/lib/GridLayoutEditor/utils/renderHelpers.js

@@ -565,7 +565,9 @@ function log() {
 }
 export var noop = function (_args) { return undefined; };
 export function getBoundingArea(layout, ids) {
-    var layoutItems = ids.map(function (id) { return getLayoutItem(layout, id); }).filter(function (item) { return item !== undefined; });
+    var layoutItems = ids
+        .map(function (id) { return getLayoutItem(layout, id); })
+        .filter(function (item) { return item !== undefined; });
     if (layoutItems.length === 0) {
         return null;
     }

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

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

package/dist/lib/Resizable/Resizable.js

@@ -31,12 +31,12 @@ 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, } from 'react';
-import { cloneElement } from './utils/cloneElement';
-import { DraggableCore } from '../Draggable';
-import classNames from '../../external-lib/classnames';
+import React, { useEffect, useRef, } from "react";
+import { cloneElement } from "./utils/cloneElement";
+import { DraggableCore } from "../Draggable";
+import classNames from "../../external-lib/classnames";
 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, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
+    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -66,17 +66,22 @@ var Resizable = function (_a) {
             extendedHeightRef.current = null;
             minWidth.current = 0;
             shouldShrinkRef.current = false;
+            minHeight.current = 0;
             return;
         }
         if (!elementRef.current) {
             return;
         }
-        var placeholder = document.querySelector('.placeholder');
+        var placeholder = document.querySelector(".placeholder");
         if (!placeholder) {
             return;
         }
         var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
-        if (target.clientHeight) {
+        var isCCBLayoutbox = target.classList.contains("ccb-layout-box");
+        if (isCCBLayoutbox) {
+            return;
+        }
+        if (target.clientHeight && !isCCBLayoutbox) {
             minHeight.current = target.clientHeight;
         }
         // target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
@@ -91,8 +96,8 @@ var Resizable = function (_a) {
             target.clientHeight < elementRef.current.clientHeight) {
             minHeight.current = target.clientHeight;
         }
-        var minWidthStyle = target.computedStyleMap().get('min-width');
-        if (typeof minWidthStyle.value === 'number' && margin && colWidth) {
+        var minWidthStyle = target.computedStyleMap().get("min-width");
+        if (typeof minWidthStyle.value === "number" && margin && colWidth) {
             var minWidthBase = minWidthStyle.value;
             var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
             var minW = Math.ceil(minColWidth);
@@ -100,6 +105,96 @@ var Resizable = function (_a) {
             minWidth.current = Math.round(minWidthPx);
         }
     }, [isResizing, autoResize, children, elementRef]);
+    useEffect(function () {
+        if (!autoResize) {
+            return;
+        }
+        if (!isResizing) {
+            extendedHeightRef.current = null;
+            minWidth.current = 0;
+            shouldShrinkRef.current = false;
+            minHeight.current = 0;
+            return;
+        }
+        if (!elementRef.current) {
+            return;
+        }
+        setTimeout(function () {
+            var _a;
+            var placeholder = document.querySelector(".placeholder");
+            if (!placeholder) {
+                return;
+            }
+            var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
+            // const oneComposition = target.querySelector(".composition-container");
+            var isCCBLayoutbox = target.classList.contains("ccb-layout-box");
+            var layoutBox = target.children[0];
+            var contentsWrapper = layoutBox.children[0];
+            var oneComposition = contentsWrapper.querySelector(".composition-container");
+            // const oneComposition =
+            //   contentsWrapper.children[0].children[0].children[0].children[2];
+            if (!isCCBLayoutbox || !oneComposition) {
+                return;
+            }
+            if (isCCBLayoutbox && oneComposition) {
+                var minCellWidth = 10;
+                var numberOfItems = Number(target.getAttribute("data-number-of-items"));
+                var numberOfColumns = Number(target.getAttribute("data-number-of-columns"));
+                var rowGap = Number(target.getAttribute("data-row-gap"));
+                var columnGap = Number(target.getAttribute("data-column-gap"));
+                var insetTop = Number(target.getAttribute("data-inset-top"));
+                var insetBottom = Number(target.getAttribute("data-inset-bottom"));
+                var compositionCols = Number(oneComposition.getAttribute("data-cols"));
+                // const compositionRows = Number(
+                //   oneComposition.getAttribute("data-rows")!
+                // );
+                var oneCompositionMinWidth = minCellWidth * compositionCols + 20; /* 20px padding */
+                // let oneCompositionMinHeight =
+                //   minColHeight * compositionRows + 20; /* 20px padding */
+                // const contentsWrapper = placeholder.querySelector(
+                //   ".cb-contentslist-wrapper"
+                // );
+                if (contentsWrapper) {
+                    var gridWrapperInnerH = contentsWrapper.clientHeight;
+                    var oneCompositionH = oneComposition.scrollHeight;
+                    console.log("scrollHeight", oneCompositionH);
+                    console.log("clientHeight", oneComposition.clientHeight);
+                    console.log("gap", oneCompositionH - oneComposition.clientHeight);
+                    var compositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingt"));
+                    var compositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingb"));
+                    var compositionBGwrapperPaddingL = Number(oneComposition.getAttribute("data-wrapper-paddingl"));
+                    var compositionBGwrapperPaddingR = Number(oneComposition.getAttribute("data-wrapper-paddingr"));
+                    var oneCompositionMinHeight = oneCompositionH +
+                        compositionBGwrapperPaddingT +
+                        compositionBGwrapperPaddingB;
+                    var styles = getComputedStyle(target);
+                    var paddingL = parseFloat(styles.paddingLeft);
+                    var paddingR = parseFloat(styles.paddingRight);
+                    var paddingT = parseFloat(styles.paddingTop);
+                    var paddingB = parseFloat(styles.paddingBottom);
+                    var paddingLR = paddingL + paddingR;
+                    var paddingTB = paddingT + paddingB;
+                    var compositionWrapperPaddingLR = (compositionBGwrapperPaddingL + compositionBGwrapperPaddingR) *
+                        numberOfColumns;
+                    var listMinWidth = oneCompositionMinWidth * numberOfColumns +
+                        (numberOfColumns - 1) * columnGap +
+                        paddingLR +
+                        compositionWrapperPaddingLR;
+                    var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
+                    var gridWrapperTotalH = gridWrapperInnerH + insetTop + insetBottom;
+                    var listMinHeight = oneCompositionMinHeight * numberOfRows +
+                        (numberOfRows - 1) * rowGap +
+                        paddingTB +
+                        insetTop +
+                        insetBottom;
+                    if (listMinHeight > gridWrapperTotalH) {
+                        minHeight.current = listMinHeight;
+                    }
+                    minWidth.current = listMinWidth;
+                }
+            }
+        }, 0);
+    }, [isResizing, autoResize, children, elementRef]);
     var resetData = function () {
         lastHandleRectRef.current = null;
         slack.current = null;
@@ -143,6 +238,7 @@ var Resizable = function (_a) {
             height = Math.min(maxConstraints[1], height);
         }
         slack.current = [slackW + (oldW - width), slackH + (oldH - height)];
+        console.log("minH", minHeight.current);
         return [width, height];
     };
     var checkTopLeft = function (deltaX, deltaY, top, left, width, height, handleAxis) {
@@ -157,28 +253,28 @@ var Resizable = function (_a) {
         var resizableLeft = startPosition.current.left + (startSize.current.width - width);
         var resizableTop = startPosition.current.top + (startSize.current.height - height);
         if (deltaX < 0) {
-            if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
+            if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
                 if (currentSumOfLeftAndWidth > startSumOfLeftAndWidth) {
                     newLeft = Math.min(left, resizableLeft);
                 }
             }
         }
         if (deltaY < 0) {
-            if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
+            if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
                 if (currentSumOfTopAndHeight > startSumOfTopAndHeight) {
                     newTop = Math.min(top, resizableTop);
                 }
             }
         }
         if (deltaX > 0) {
-            if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
+            if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
                 if (width >= minConstraints[0]) {
                     newLeft = Math.max(left, resizableLeft);
                 }
             }
         }
         if (deltaY > 0) {
-            if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
+            if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
                 if (height >= minConstraints[1]) {
                     newTop = Math.max(top, resizableTop);
                 }
@@ -191,7 +287,7 @@ var Resizable = function (_a) {
             var _b, _c;
             var _d, _e, _f, _g, _h, _j;
             var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
-            if (handlerName === 'onResizeStart') {
+            if (handlerName === "onResizeStart") {
                 var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
                 startPosition.current = position;
                 startSize.current = {
@@ -200,12 +296,12 @@ var Resizable = function (_a) {
                 };
                 resetData();
             }
-            var canDragX = (axis === 'both' || axis === 'x') &&
-                handleAxis !== 'n' &&
-                handleAxis !== 's';
-            var canDragY = (axis === 'both' || axis === 'y') &&
-                handleAxis !== 'e' &&
-                handleAxis !== 'w';
+            var canDragX = (axis === "both" || axis === "x") &&
+                handleAxis !== "n" &&
+                handleAxis !== "s";
+            var canDragY = (axis === "both" || axis === "y") &&
+                handleAxis !== "e" &&
+                handleAxis !== "w";
             if (!canDragX && !canDragY)
                 return;
             var axisV = handleAxis[0];
@@ -223,34 +319,35 @@ var Resizable = function (_a) {
             //   }
             // }
             lastHandleRectRef.current = handleRect;
-            if (axisH === 'w') {
+            if (axisH === "w") {
                 deltaX = -deltaX;
             }
-            if (axisV === 'n') {
+            if (axisV === "n") {
                 deltaY = -deltaY;
             }
             var width = props.width + (canDragX ? deltaX / transformScale : 0);
             var height = props.height + (canDragY ? deltaY / transformScale : 0);
             var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
             var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
-            if (axisV === 'n') {
+            if (axisV === "n") {
                 top = top - deltaY;
             }
-            if (axisH === 'w') {
+            if (axisH === "w") {
                 left = left - deltaX;
             }
             _b = checkConstraints(width, height), width = _b[0], height = _b[1];
             if (autoResize && minHeight.current === height) {
                 handleAxis = removeNorthHandle(handleAxis);
             }
+            console.log("deltax deltay", deltaX, deltaY);
             _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
             var isDimensionsChanged = width !== props.width || height !== props.height;
-            var cb = typeof props[handlerName] === 'function' ? props[handlerName] : null;
-            var isCbSkipped = handlerName === 'onResize' && !isDimensionsChanged;
+            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 });
             }
-            if (handlerName === 'onResizeStop') {
+            if (handlerName === "onResizeStop") {
                 startPosition.current = null;
                 startSize.current = null;
                 resetData();
@@ -261,27 +358,27 @@ var Resizable = function (_a) {
         if (!handle) {
             return (_jsx("span", { className: "react-resizable-handle react-resizable-handle-".concat(handleAxis), ref: ref }));
         }
-        if (typeof handle === 'function') {
+        if (typeof handle === "function") {
             return handle(handleAxis, ref);
         }
-        var isDOMElement = typeof handle.type === 'string';
+        var isDOMElement = typeof handle.type === "string";
         var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
         return React.cloneElement(handle, props);
     };
-    return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : 'react-resizable'), children: __spreadArray([
+    return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : "react-resizable"), children: __spreadArray([
             // ...children.props.children,
             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) }), 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) }));
 };
 function removeNorthHandle(axis) {
     switch (axis) {
-        case 'ne':
-            return 'e';
-        case 'nw':
-            return 'w';
+        case "ne":
+            return "e";
+        case "nw":
+            return "w";
         default:
             return axis;
     }

package/package.json

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