publ-echo-test 0.0.1

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -0,0 +1,456 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useRef, useLayoutEffect } from "react";
+import classNames from "../../external-lib/classnames";
+import { bottom, cloneLayoutItem, compact, getAllCollisions, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
+import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
+import GridItem from "../GridItem/GridItem";
+import isEqual from "../../external-lib/lodash.isEqual";
+var layoutClassName = "react-grid-layout";
+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 ? {
+        i: "__dropping-elem__",
+        h: 1,
+        w: 1,
+    } : _w, // TODO fix
+    _x = props.resizeHandles, // TODO fix
+    resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth;
+    var _0 = useState(), activeDrag = _0[0], setActiveDrag = _0[1];
+    var _1 = useState(), oldDragItem = _1[0], setOldDragItem = _1[1];
+    var _2 = useState(), oldLayout = _2[0], setOldLayout = _2[1];
+    var _3 = useState(), oldResizeItem = _3[0], setOldResizeItem = _3[1];
+    var _4 = useState(), droppingDOMNode = _4[0], setDroppingDOMNode = _4[1];
+    var _5 = useState(), droppingPosition = _5[0], setDroppingPosition = _5[1];
+    var _6 = useState(false), isMounted = _6[0], setIsMounted = _6[1];
+    var _7 = useState(function () {
+        return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
+    }), layout = _7[0], setLayout = _7[1];
+    var dragEnterCounter = useRef(0);
+    useLayoutEffect(function () {
+        setIsMounted(true);
+        onLayoutMaybeChanged(layout, layout);
+    }, []);
+    useLayoutEffect(function () {
+        if (props.layout && !Array.isArray(props.layout)) {
+            console.error("Expecting layout to be an Array but got: ", props.layout);
+        }
+        setLayout(synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap));
+    }, [props.layout]);
+    useLayoutEffect(function () {
+        var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || "vertical", props.allowOverlap);
+        setLayout(newLayout);
+    }, [children]);
+    var getPositionParams = function () {
+        return {
+            cols: cols,
+            margin: margin,
+            maxRows: maxRows,
+            rowHeight: rowHeight,
+            containerWidth: width,
+            containerPadding: containerPadding || margin,
+        };
+    };
+    var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
+    /**
+     * Calculates a pixel value for the container.
+     * @return {String} Container height in pixels.
+     */
+    var containerHeight = function () {
+        if (!autoSize)
+            return;
+        var nbRow = bottom(layout);
+        var biggerNbRow = minNbRow ? Math.max(nbRow, minNbRow) : nbRow;
+        var containerPaddingY = containerPadding
+            ? containerPadding[1]
+            : margin[1];
+        return (biggerNbRow *
+            resolveRowHeight(rowHeight, colWidth) +
+            (biggerNbRow - 1) * margin[1] +
+            containerPaddingY * 2 +
+            "px");
+    };
+    var getBackgroundHeight = function () {
+        if (!autoSize)
+            return;
+        var nbRow = bottom(layout);
+        var biggerNbRow = minNbRow ? Math.max(nbRow, minNbRow) : nbRow;
+        var containerPaddingY = containerPadding
+            ? containerPadding[1]
+            : margin[1];
+        return (biggerNbRow *
+            resolveRowHeight(rowHeight, colWidth) +
+            (biggerNbRow - 1) * margin[1] +
+            containerPaddingY * 2 -
+            2 * margin[1] +
+            "px");
+    };
+    var getBackgroundWidth = function () {
+        if (!autoSize)
+            return;
+        return width - margin[0] * 2 + "px";
+    };
+    /**
+     * When dragging starts
+     * @param {String} i Id of the child
+     * @param {Number} x X position of the move
+     * @param {Number} y Y position of the move
+     * @param {Event} e The mousedown event
+     * @param {Element} node The current dragging DOM element
+     */
+    var onDragStartHandler = function (i, x, y, _a) {
+        var e = _a.e, node = _a.node;
+        var l = getLayoutItem(layout, i);
+        if (!l)
+            return;
+        setOldDragItem(cloneLayoutItem(l));
+        setOldLayout(layout);
+        props.onDragStart &&
+            props.onDragStart({
+                layout: layout,
+                prev: l,
+                item: l,
+                placeholder: undefined,
+                e: e,
+                node: node,
+            });
+    };
+    /**
+     * Each drag movement create a new dragelement and move the element to the dragged location
+     * @param {String} i Id of the child
+     * @param {Number} x X position of the move
+     * @param {Number} y Y position of the move
+     * @param {Event} e The mousedown event
+     * @param {Element} node The current dragging DOM element
+     */
+    var onDragHandler = function (i, x, y, _a) {
+        var e = _a.e, node = _a.node;
+        var l = getLayoutItem(layout, i);
+        if (!l)
+            return;
+        var placeholder = {
+            w: l.w,
+            h: l.h,
+            x: l.x,
+            y: l.y,
+            z: l.z,
+            placeholder: true,
+            i: i,
+        };
+        var isUserAction = true;
+        var newLayout = moveElement({
+            layout: layout,
+            l: l,
+            x: x,
+            y: y,
+            isUserAction: isUserAction,
+            preventCollision: preventCollision,
+            compactType: compactType,
+            cols: cols,
+            allowOverlap: allowOverlap,
+        });
+        props.onDrag &&
+            props.onDrag({
+                layout: newLayout,
+                prev: oldDragItem,
+                item: l,
+                placeholder: placeholder,
+                e: e,
+                node: node,
+            });
+        setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
+        setActiveDrag(placeholder);
+    };
+    /**
+     * When dragging stops, figure out which position the element is closest to and update its x and y.
+     * @param {String} i Index of the child.
+     * @param {Number} x X position of the move
+     * @param {Number} y Y position of the move
+     * @param {Event} e The mousedown event
+     * @param {Element} node The current dragging DOM element
+     */
+    var onDragStopHandler = function (i, x, y, _a) {
+        var e = _a.e, node = _a.node;
+        if (!activeDrag || !oldDragItem) {
+            return;
+        }
+        ;
+        var l = getLayoutItem(layout, i);
+        if (!l)
+            return;
+        // NOTE: z-index 원래대로 복귀
+        l.z = oldDragItem.z;
+        var isUserAction = true;
+        var movedLayout = moveElement({
+            layout: layout,
+            l: l,
+            x: x,
+            y: y,
+            isUserAction: isUserAction,
+            preventCollision: preventCollision,
+            compactType: compactType,
+            cols: cols,
+            allowOverlap: allowOverlap,
+            overrideZ: oldDragItem.z
+        });
+        props.onDragStop &&
+            props.onDragStop({
+                layout: movedLayout,
+                prev: oldDragItem,
+                item: l,
+                placeholder: undefined,
+                e: e,
+                node: node,
+            });
+        var newLayout = allowOverlap
+            ? movedLayout
+            : compact(movedLayout, compactType, cols);
+        setActiveDrag(undefined);
+        setLayout(newLayout);
+        setOldDragItem(undefined);
+        setOldLayout(undefined);
+        props.onLayoutChange && props.onLayoutChange(newLayout);
+    };
+    var onLayoutMaybeChanged = function (newLayout, oldLayout) {
+        if (!oldLayout) {
+            oldLayout = layout;
+        }
+        if (!isEqual(oldLayout, newLayout)) {
+            props.onLayoutChange && props.onLayoutChange(newLayout);
+        }
+    };
+    var onResizeStartHandler = function (i, x, y, _a) {
+        var e = _a.e, node = _a.node;
+        var l = getLayoutItem(layout, i);
+        if (!l)
+            return;
+        setOldResizeItem(cloneLayoutItem(l));
+        setOldLayout(layout);
+        props.onResizeStart &&
+            props.onResizeStart({
+                layout: layout,
+                prev: l,
+                item: l,
+                e: e,
+                node: node,
+            });
+    };
+    var onResizeHandler = function (i, w, h, _a, x, y) {
+        var e = _a.e, node = _a.node;
+        var _b = withLayoutItem(layout, i, function (l) {
+            var hasCollisions;
+            if (preventCollision && !allowOverlap) {
+                var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
+                hasCollisions = collisions.length > 0;
+                if (hasCollisions) {
+                    var leastX_1 = Infinity, leastY_1 = Infinity;
+                    collisions.forEach(function (layoutItem) {
+                        if (layoutItem.x > l.x)
+                            leastX_1 = Math.min(leastX_1, layoutItem.x);
+                        if (layoutItem.y > l.y)
+                            leastY_1 = Math.min(leastY_1, layoutItem.y);
+                    });
+                    if (Number.isFinite(leastX_1))
+                        l.w = leastX_1 - l.x;
+                    if (Number.isFinite(leastY_1))
+                        l.h = leastY_1 - l.y;
+                }
+            }
+            if (!hasCollisions) {
+                // NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
+                l.w = w;
+                l.h = h;
+                l.x = x;
+                l.y = y;
+            }
+            return l;
+        }), newLayout = _b[0], l = _b[1];
+        if (!l)
+            return;
+        var placeholder = {
+            w: l.w,
+            h: l.h,
+            x: l.x,
+            y: l.y,
+            z: l.z,
+            static: true,
+            i: i,
+        };
+        props.onResize &&
+            props.onResize({
+                layout: newLayout,
+                prev: oldResizeItem,
+                item: l,
+                placeholder: placeholder,
+                e: e,
+                node: node,
+            });
+        setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
+        setActiveDrag(placeholder);
+    };
+    var onResizeStopHandler = function (i, x, y, _a) {
+        var e = _a.e, node = _a.node;
+        var l = getLayoutItem(layout, i);
+        props.onResizeStop &&
+            props.onResizeStop({ layout: layout, prev: oldResizeItem, item: l, e: e, node: node });
+        var newLayout = allowOverlap
+            ? layout
+            : compact(layout, compactType, cols);
+        setActiveDrag(undefined);
+        setLayout(newLayout);
+        setOldResizeItem(undefined);
+        setOldLayout(undefined);
+        onLayoutMaybeChanged(newLayout, oldLayout);
+    };
+    /**
+     * Create a placeholder object.
+     * @return {Element} Placeholder div.
+     */
+    var placeholder = function () {
+        if (!activeDrag)
+            return;
+        // {...activeDrag} is pretty slow, actually
+        var l = getLayoutItem(props.layout, String(activeDrag.i));
+        if (!l) {
+            return null;
+        }
+        // NOTE: toChildren changes key
+        // LINK: https://legacy.reactjs.org/docs/react-api.html
+        var items = React.Children.toArray(children);
+        var item = items.find(function (child) {
+            var originalKey = String(child.key).split(".$");
+            return originalKey[1] === l.i;
+        });
+        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, autoResize: true, children: item && item }));
+    };
+    /**
+     * Given a grid item, set its style attributes & surround in a <Draggable>.
+     * @param  {Element} child React element.
+     * @return {Element}       Element wrapped in draggable and properly placed.
+     */
+    var processGridItem = function (child, isDroppingItem) {
+        if (!child || !child.key)
+            return;
+        var l = getLayoutItem(layout, String(child.key));
+        if (!l) {
+            return;
+        }
+        ;
+        var draggable = typeof l.isDraggable === "boolean"
+            ? l.isDraggable
+            : !l.static && isDraggable;
+        var resizable = typeof l.isResizable === "boolean"
+            ? l.isResizable
+            : !l.static && isResizable;
+        var resizeHandlesOptions = l.resizeHandles || resizeHandles;
+        var bounded = draggable && isBounded && l.isBounded !== false;
+        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, autoResize: true, children: child }, l.i));
+    };
+    var onDragOverHandler = function (e) {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        var onDragOverResult = (_a = props.onDropDragOver) === null || _a === void 0 ? void 0 : _a.call(props, e); // TODO fix
+        if (onDragOverResult === false) {
+            if (droppingDOMNode) {
+                removeDroppingPlaceholder();
+            }
+            return false;
+        }
+        var finalDroppingItem = __assign(__assign({}, droppingItem), onDragOverResult);
+        var _b = e.nativeEvent, layerX = _b.layerX, layerY = _b.layerY; // TODO fix
+        var droppingPosition = {
+            left: layerX / transformScale,
+            top: layerY / transformScale,
+            e: e,
+        };
+        if (!droppingDOMNode) {
+            var calculatedPosition = calcXY(getPositionParams(), layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
+            setDroppingDOMNode(_jsx("div", {}, finalDroppingItem.i));
+            setDroppingPosition(droppingPosition);
+            setLayout(__spreadArray(__spreadArray([], layout, true), [
+                __assign(__assign({}, finalDroppingItem), { x: calculatedPosition.x, y: calculatedPosition.y, static: false, isDraggable: true }),
+            ], false));
+        }
+        else if (droppingPosition) {
+            var left = droppingPosition.left, top_1 = droppingPosition.top;
+            var shouldUpdatePosition = left != layerX || top_1 != layerY;
+            if (shouldUpdatePosition) {
+                setDroppingPosition(droppingPosition);
+            }
+        }
+    };
+    var removeDroppingPlaceholder = function () {
+        var newLayout = compact(layout.filter(function (l) { return l.i !== droppingItem.i; }), compactType, cols, allowOverlap);
+        setLayout(newLayout);
+        setDroppingDOMNode(undefined);
+        setActiveDrag(undefined);
+        setDroppingPosition(undefined);
+    };
+    var onDragLeaveHandler = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dragEnterCounter.current = dragEnterCounter.current - 1;
+        if (dragEnterCounter.current === 0) {
+            removeDroppingPlaceholder();
+        }
+    };
+    var onDragEnterHandler = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dragEnterCounter.current += 1;
+    };
+    var onDropHandler = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var item = layout.find(function (l) { return l.i === droppingItem.i; });
+        dragEnterCounter.current = 0;
+        removeDroppingPlaceholder();
+        if (item) {
+            props.onDrop && props.onDrop(layout, item, e);
+        }
+    };
+    var mergedClassName = classNames(layoutClassName, className);
+    var mergedStyle = __assign({ height: containerHeight() }, style);
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
+                    marginTop: margin[1] + "px",
+                    marginBottom: margin[1] + "px",
+                    marginLeft: margin[0] + "px",
+                    marginRight: margin[0] + "px",
+                }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" })] }) }))] }));
+};
+export default ReactGridLayout;

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

@@ -0,0 +1,4 @@
+import { ResponsiveGridLayoutProps } from "./types";
+import { PropsWithChildren } from "../types";
+export declare const ResponsiveGridLayout: ({ children, ...props }: PropsWithChildren<ResponsiveGridLayoutProps>) => React.ReactElement;
+export default ResponsiveGridLayout;

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js

@@ -0,0 +1,117 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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";
+/**
+ * Get a value of margin or containerPadding.
+ *
+ * @param  {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
+ * @param  {String} breakpoint   Breakpoint: lg, md, sm, xs and etc.
+ * @return {Array}
+ */
+function getIndentationValue(param, breakpoint) {
+    return Array.isArray(param) ? param : param[breakpoint];
+}
+export var ResponsiveGridLayout = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var breakpoint = props.breakpoint, compactType = props.compactType, _b = props.breakpoints, breakpoints = _b === void 0 ? { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } : _b, _c = props.cols, cols = _c === void 0 ? { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } : _c, _d = props.containerPadding, containerPadding = _d === void 0 ? {} : _d, _e = props.layouts, layouts = _e === void 0 ? {} : _e, _f = props.width, width = _f === void 0 ? 0 : _f, _g = props.margin, margin = _g === void 0 ? [10, 10] : _g, _h = props.onBreakpointChange, onBreakpointChange = _h === void 0 ? noop : _h, _j = props.onLayoutChange, onLayoutChange = _j === void 0 ? noop : _j, _k = props.onWidthChange, onWidthChange = _k === void 0 ? noop : _k, restProps = __rest(props, ["breakpoint", "compactType", "breakpoints", "cols", "containerPadding", "layouts", "width", "margin", "onBreakpointChange", "onLayoutChange", "onWidthChange"]);
+    var _l = useState({ width: width, breakpoints: breakpoints, cols: cols }), prevProps = _l[0], setPrevProps = _l[1];
+    var generateInitialState = function () {
+        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);
+        return {
+            layout: initialLayout,
+            layouts: layouts,
+            breakpoint: breakpoint,
+            cols: colNo,
+        };
+    };
+    var _m = useState(function () {
+        return generateInitialState();
+    }), state = _m[0], setState = _m[1];
+    var emittedBreakpointChangeOnce = useRef(breakpoint != null);
+    useLayoutEffect(function () {
+        if (!state || !isEqual(state.layouts, layouts)) {
+            setState(generateInitialState());
+        }
+    }, [layouts]);
+    useLayoutEffect(function () {
+        onWidthChangeHandler();
+    }, [width, breakpoint, JSON.stringify(breakpoints), cols]);
+    var onLayoutChangeHandler = function (layout) {
+        var _a;
+        var newLayouts = __assign(__assign({}, layouts), (_a = {}, _a[state.breakpoint] = layout, _a));
+        setState({
+            breakpoint: state.breakpoint,
+            cols: state.cols,
+            layout: layout,
+            layouts: newLayouts,
+        });
+        onLayoutChange({
+            layout: layout,
+            layouts: newLayouts,
+        });
+    };
+    var onWidthChangeHandler = function () {
+        var newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
+        var lastBreakpoint = state.breakpoint;
+        var newCols = getColsFromBreakpoint(newBreakpoint, cols);
+        var newLayouts = __assign({}, layouts);
+        if (!emittedBreakpointChangeOnce.current ||
+            lastBreakpoint !== newBreakpoint ||
+            !isEqual(prevProps.breakpoints, breakpoints) ||
+            !isEqual(prevProps.cols, cols)) {
+            emittedBreakpointChangeOnce.current = true;
+            if (!(lastBreakpoint in newLayouts)) {
+                newLayouts[lastBreakpoint] = cloneLayout(state.layout);
+            }
+            var newBreakpointIsBiggerOrEqual = lastBreakpoint === newBreakpoint ||
+                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);
+            newLayouts[newBreakpoint] = layout;
+            setState({
+                breakpoint: newBreakpoint,
+                layout: layout,
+                layouts: newLayouts,
+                cols: newCols,
+            });
+            onLayoutChange({ layout: layout, layouts: newLayouts });
+            onBreakpointChange(newBreakpoint, newCols);
+        }
+        setPrevProps({ breakpoints: breakpoints, cols: cols, width: width });
+        var modifiedMargin = getIndentationValue(margin, newBreakpoint);
+        var containerPaddingModified = getIndentationValue(containerPadding, newBreakpoint);
+        onWidthChange(width, modifiedMargin, newCols, containerPaddingModified);
+    };
+    return (_jsx(ReactGridLayout, __assign({}, restProps, { children: children, width: width, margin: getIndentationValue(margin, state.breakpoint), containerPadding: getIndentationValue(containerPadding, state.breakpoint), onLayoutChange: onLayoutChangeHandler, layout: state.layout, cols: state.cols })));
+};
+export default ResponsiveGridLayout;

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

@@ -0,0 +1,3 @@
+export { ResponsiveGridLayout as ResponsiveGridEditor } from "./ResponsiveGridLayout";
+export { default as GridEditor } from "./ReactGridLayout";
+export type { Breakpoint, Breakpoints, DefaultBreakpoints, OnLayoutChangeCallback, ResponsiveLayout, Layout, LayoutItem, } from "./types";

package/dist/lib/GridLayoutEditor/index.js

@@ -0,0 +1,2 @@
+export { ResponsiveGridLayout as ResponsiveGridEditor } from "./ResponsiveGridLayout";
+export { default as GridEditor } from "./ReactGridLayout";