publ-echo-test 0.0.332 → 0.0.334

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

@@ -0,0 +1,77 @@
+import { cloneLayout, compact, correctBounds } from "./renderHelpers";
+/**
+ * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
+ *
+ * @param  {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
+ * @param  {Number} width Screen width.
+ */
+export function getBreakpointFromWidth(breakpoints, width) {
+    var sorted = sortBreakpoints(breakpoints);
+    var matching = sorted[0];
+    for (var i = 1, len = sorted.length; i < len; i++) {
+        var breakpointName = sorted[i];
+        if (width > breakpoints[breakpointName])
+            matching = breakpointName;
+    }
+    return matching;
+}
+/**
+ * Given a breakpoint, get the # of cols set for it.
+ */
+export function getColsFromBreakpoint(breakpoint, cols) {
+    if (!cols[breakpoint]) {
+        throw new Error("ResponsiveGridLayout: `cols` entry for breakpoint " +
+            breakpoint +
+            " is missing!");
+    }
+    return cols[breakpoint];
+}
+/**
+ * Given existing layouts and a new breakpoint, find or generate a new layout.
+ *
+ * This finds the layout above the new one and generates from it, if it exists.
+ */
+export function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType, overlap) {
+    // If it already exists, just return it.
+    if (layouts[breakpoint]) {
+        return cloneLayout(layouts[breakpoint]);
+    }
+    // Find or generate the next layout
+    var layout = layouts[lastBreakpoint];
+    var breakpointsSorted = sortBreakpoints(breakpoints);
+    // Above?
+    for (var i = breakpointsSorted.indexOf(breakpoint); i < breakpointsSorted.length; i++) {
+        var b = breakpointsSorted[i];
+        if (layouts[b]) {
+            layout = layouts[b];
+            break;
+        }
+    }
+    if (!layout) {
+        // below?
+        for (var i = breakpointsSorted.indexOf(breakpoint) - 1; i >= 0; i--) {
+            var b = breakpointsSorted[i];
+            if (layouts[b]) {
+                layout = layouts[b];
+                break;
+            }
+        }
+    }
+    layout = cloneLayout(layout || []); // clone layout so we don't modify existing items
+    return overlap
+        ? layout
+        : compact(correctBounds(layout, { cols: cols }), compactType, cols);
+}
+/**
+ * Given breakpoints, return an array of breakpoints sorted by width. This is usually
+ * e.g. ['xxs', 'xs', 'sm', ...]
+ *
+ * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
+ * @return {Array}              Sorted breakpoints.
+ */
+export function sortBreakpoints(breakpoints) {
+    var keys = Object.keys(breakpoints);
+    return keys.sort(function (a, b) {
+        return breakpoints[a] - breakpoints[b];
+    });
+}

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

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

@@ -0,0 +1,289 @@
+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 { 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';
+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 handleRefs = useRef({
+        s: useRef(null),
+        n: useRef(null),
+        e: useRef(null),
+        w: useRef(null),
+        se: useRef(null),
+        sw: useRef(null),
+        ne: useRef(null),
+        nw: useRef(null),
+    });
+    var startPosition = useRef(null);
+    var startSize = useRef(null);
+    var lastHandleRectRef = useRef(null);
+    var slack = useRef(null);
+    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 elementRef = children.ref;
+    var extendedHeightRef = useRef(null);
+    var shouldShrinkRef = useRef(false);
+    var minWidth = useRef(0);
+    var minHeight = useRef(0);
+    useEffect(function () {
+        var _a;
+        if (!autoResize) {
+            return;
+        }
+        if (!isResizing) {
+            extendedHeightRef.current = null;
+            minWidth.current = 0;
+            shouldShrinkRef.current = false;
+            return;
+        }
+        if (!elementRef.current) {
+            return;
+        }
+        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) {
+            minHeight.current = target.clientHeight;
+        }
+        // target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
+        if (target.clientHeight > elementRef.current.clientHeight) {
+            extendedHeightRef.current = target.clientHeight;
+            shouldShrinkRef.current = true;
+        }
+        else {
+            extendedHeightRef.current = null;
+        }
+        if (shouldShrinkRef.current &&
+            target.clientHeight < elementRef.current.clientHeight) {
+            minHeight.current = target.clientHeight;
+        }
+        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);
+            var minWidthPx = minW * colWidth + (minW - 1) * margin[0];
+            minWidth.current = Math.round(minWidthPx);
+        }
+    }, [isResizing, autoResize, children, elementRef]);
+    var resetData = function () {
+        lastHandleRectRef.current = null;
+        slack.current = null;
+    };
+    // NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
+    var checkConstraints = function (width, height) {
+        var _a;
+        if (!minConstraints && !maxConstraints && !lockAspectRatio) {
+            return [width, height];
+        }
+        if (lockAspectRatio) {
+            var ratio = props.width / props.height;
+            var deltaWidth = width - props.width;
+            var deltaHeight = height - props.height;
+            if (Math.abs(deltaWidth) > Math.abs(deltaHeight * ratio)) {
+                height = width / ratio;
+            }
+            else {
+                width = height * ratio;
+            }
+        }
+        var _b = [width, height], oldW = _b[0], oldH = _b[1];
+        var _c = (_a = slack.current) !== null && _a !== void 0 ? _a : [0, 0], slackW = _c[0], slackH = _c[1];
+        width += slackW;
+        height += slackH;
+        if (autoResize) {
+            width = Math.max(minWidth.current, width);
+            height = Math.max(minHeight.current, height);
+        }
+        else {
+            if (minConstraints) {
+                width = Math.max(minConstraints[0], width);
+                height = Math.max(minConstraints[1], height);
+            }
+        }
+        if (shouldShrinkRef.current) {
+            height = minHeight.current;
+        }
+        if (maxConstraints) {
+            width = Math.min(maxConstraints[0], width);
+            height = Math.min(maxConstraints[1], height);
+        }
+        slack.current = [slackW + (oldW - width), slackH + (oldH - height)];
+        return [width, height];
+    };
+    var checkTopLeft = function (deltaX, deltaY, top, left, width, height, handleAxis) {
+        var newTop = top;
+        var newLeft = left;
+        if (!startPosition.current || !startSize.current)
+            return [newTop, newLeft];
+        var currentSumOfLeftAndWidth = left + width;
+        var startSumOfLeftAndWidth = startPosition.current.left + startSize.current.width;
+        var currentSumOfTopAndHeight = top + height;
+        var startSumOfTopAndHeight = startPosition.current.top + startSize.current.height;
+        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 (currentSumOfLeftAndWidth > startSumOfLeftAndWidth) {
+                    newLeft = Math.min(left, resizableLeft);
+                }
+            }
+        }
+        if (deltaY < 0) {
+            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 (width >= minConstraints[0]) {
+                    newLeft = Math.max(left, resizableLeft);
+                }
+            }
+        }
+        if (deltaY > 0) {
+            if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
+                if (height >= minConstraints[1]) {
+                    newTop = Math.max(top, resizableTop);
+                }
+            }
+        }
+        return [newTop, newLeft];
+    };
+    var resizeHandler = function (handlerName, handleAxis) {
+        return function (e, _a) {
+            var _b, _c;
+            var _d, _e, _f, _g, _h, _j;
+            var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+            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 = {
+                    width: (_f = props.width) !== null && _f !== void 0 ? _f : 0,
+                    height: (_g = props.height) !== null && _g !== void 0 ? _g : 0,
+                };
+                resetData();
+            }
+            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];
+            var axisH = handleAxis[handleAxis.length - 1];
+            var handleRect = node.getBoundingClientRect();
+            // if (lastHandleRectRef.current !== null) {
+            //   if (axisH === "w") {
+            //     const deltaLeftSinceLast = handleRect.left - lastHandleRectRef.current.left;
+            //     console.log('delta, :', deltaLeftSinceLast);
+            //     deltaX += deltaLeftSinceLast;
+            //   }
+            //   if (axisV === "n") {
+            //     const deltaTopSinceLast = handleRect.top - lastHandleRectRef.current.top;
+            //     deltaY += deltaTopSinceLast;
+            //   }
+            // }
+            lastHandleRectRef.current = handleRect;
+            if (axisH === 'w') {
+                deltaX = -deltaX;
+            }
+            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') {
+                top = top - deltaY;
+            }
+            if (axisH === 'w') {
+                left = left - deltaX;
+            }
+            _b = checkConstraints(width, height), width = _b[0], height = _b[1];
+            if (autoResize && minHeight.current === height) {
+                handleAxis = removeNorthHandle(handleAxis);
+            }
+            _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;
+            if (cb && !isCbSkipped) {
+                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
+            }
+            if (handlerName === 'onResizeStop') {
+                startPosition.current = null;
+                startSize.current = null;
+                resetData();
+            }
+        };
+    };
+    var renderResizeHandle = function (handleAxis, ref) {
+        if (!handle) {
+            return (_jsx("span", { className: "react-resizable-handle react-resizable-handle-".concat(handleAxis), ref: ref }));
+        }
+        if (typeof handle === 'function') {
+            return handle(handleAxis, ref);
+        }
+        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([
+            // ...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)));
+        }), true) }));
+};
+function removeNorthHandle(axis) {
+    switch (axis) {
+        case 'ne':
+            return 'e';
+        case 'nw':
+            return 'w';
+        default:
+            return axis;
+    }
+}
+export default Resizable;

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

@@ -0,0 +1,7 @@
+import { ResizableProps } from "./types";
+import { PropsWithChildren } from "../Draggable/types";
+type ResizableBoxProps = ResizableProps & {
+    style?: Object;
+};
+declare const ResizableBox: ({ children, ...props }: PropsWithChildren<ResizableBoxProps>) => React.ReactElement;
+export default ResizableBox;

package/dist/lib/Resizable/ResizableBox.js

@@ -0,0 +1,57 @@
+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 { useState } from "react";
+import Resizable from "./Resizable";
+var ResizableBox = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var handle = props.handle, handleSize = props.handleSize, onResize = props.onResize, onResizeStart = props.onResizeStart, onResizeStop = props.onResizeStop, draggableOpts = props.draggableOpts, minConstraints = props.minConstraints, maxConstraints = props.maxConstraints, lockAspectRatio = props.lockAspectRatio, axis = props.axis, width = props.width, height = props.height, resizeHandles = props.resizeHandles, style = props.style, transformScale = props.transformScale, restProps = __rest(props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"]);
+    var _b = useState({
+        width: width,
+        height: height,
+        propsWidth: width,
+        propsHeight: height,
+    }), resizableBoxState = _b[0], setResizableBoxState = _b[1];
+    var handleResize = function (e, data) {
+        var size = data.size;
+        if (props.onResize) {
+            setResizableBoxState(function (prevState) { return (__assign(__assign({}, prevState), { width: size.width, height: size.height })); });
+            props.onResize(e, data);
+        }
+        else {
+            setResizableBoxState(function (prevState) { return (__assign(__assign({}, prevState), { width: size.width, height: size.height })); });
+        }
+    };
+    // NOTE - class형 컴포넌트에서 사용되는 getDerivedStateFromProps에 대응하기 위한 조건문입니다.
+    if (width !== resizableBoxState.propsWidth ||
+        height !== resizableBoxState.propsHeight) {
+        setResizableBoxState({
+            width: width,
+            height: height,
+            propsWidth: width,
+            propsHeight: height,
+        });
+    }
+    return (_jsx(Resizable, { axis: axis, draggableOpts: draggableOpts, handle: handle, handleSize: handleSize, height: resizableBoxState.height, lockAspectRatio: lockAspectRatio, maxConstraints: maxConstraints, minConstraints: minConstraints, onResizeStart: onResizeStart, onResize: handleResize, onResizeStop: onResizeStop, resizeHandles: resizeHandles, transformScale: transformScale, width: resizableBoxState.width, children: _jsx("div", __assign({}, restProps, { style: __assign(__assign({}, style), { width: resizableBoxState.width + "px", height: resizableBoxState.height + "px" }) })) }));
+};
+export default ResizableBox;

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

@@ -0,0 +1 @@
+export { default as Resizable } from "./Resizable";

package/dist/lib/Resizable/index.js

@@ -0,0 +1 @@
+export { default as Resizable } from "./Resizable";

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

@@ -0,0 +1,69 @@
+import { CSSProperties, ReactElement, Ref, SyntheticEvent } from "react";
+import { DraggableCoreDefaultProps } from "../Draggable/types";
+export type ReactRef<T> = {
+    current: T | null;
+};
+export type Axis = "both" | "x" | "y" | "none";
+export type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
+export type ResizableBoxState = {
+    width: number;
+    height: number;
+    propsWidth: number;
+    propsHeight: number;
+};
+export type DragCallbackData = {
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
+};
+export type ResizeCallbackData = {
+    node: HTMLElement;
+    size: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    handle: ResizeHandleAxis;
+    minWidth?: number;
+    minHeight?: number;
+};
+export type ResizableDefaultProps = {
+    axis: Axis;
+    handleSize: [number, number];
+    lockAspectRatio: boolean;
+    minConstraints: [number, number];
+    maxConstraints: [number, number];
+    resizeHandles: ResizeHandleAxis[];
+    transformScale: number;
+};
+export type ResizableProps = {
+    top?: number;
+    left?: number;
+    children?: ReactElement<any>;
+    axis?: Axis;
+    className?: string;
+    draggableOpts?: Partial<DraggableCoreDefaultProps>;
+    handle?: ResizeHandleType;
+    onResizeStop?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
+    onResizeStart?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
+    onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
+    handleSize?: [number, number];
+    lockAspectRatio?: boolean;
+    minConstraints?: [number, number];
+    maxConstraints?: [number, number];
+    resizeHandles?: ResizeHandleAxis[];
+    transformScale?: number;
+    style?: CSSProperties;
+    width: number;
+    height: number;
+    isResizing?: boolean;
+    autoResize?: boolean;
+    colWidth?: number;
+    margin?: [number, number];
+};
+export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);

package/dist/lib/Resizable/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import { PropsWithChildren, ReactElement } from "react";
+export declare function cloneElement(element: ReactElement<any>, props: PropsWithChildren<any>): ReactElement<any>;

package/dist/lib/Resizable/utils/cloneElement.js

@@ -0,0 +1,21 @@
+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);
+};
+import React from "react";
+export function cloneElement(element, props) {
+    if (props.style && element.props.style) {
+        props.style = __assign(__assign({}, element.props.style), props.style);
+    }
+    if (props.className && element.props.className) {
+        props.className = "".concat(element.props.className, " ").concat(props.className);
+    }
+    return React.cloneElement(element, props);
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+type ComposedProps<Config> = {
+    measureBeforeMount?: boolean;
+    className?: string;
+    style?: Object;
+    width?: number;
+} & Config;
+declare const WidthProvider: <Config>(ComposedComponent: React.ComponentType<Config>) => (props: ComposedProps<Config>) => React.ReactElement;
+export default WidthProvider;

package/dist/lib/components/WidthProvider.js

@@ -0,0 +1,65 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-hooks/rules-of-hooks */
+import classNames from "../../external-lib/classnames";
+import { useRef, useState, useEffect } from "react";
+var layoutClassName = "react-grid-layout";
+/*
+ * A simple HOC that provides facility for listening to container resizes.
+ */
+var WidthProvider = function (ComposedComponent) {
+    return function (props) {
+        var _a;
+        var elementRef = useRef(null);
+        var mounted = useRef(false);
+        var _b = useState({
+            width: (_a = props.width) !== null && _a !== void 0 ? _a : 1280,
+        }), state = _b[0], setState = _b[1];
+        var _c = props.measureBeforeMount, measureBeforeMount = _c === void 0 ? false : _c;
+        // useEffect(() => {
+        //   if (mounted.current) {
+        //     return;
+        //   }
+        //   mounted.current = true;
+        //   window.addEventListener("resize", onWindowResize);
+        //   onWindowResize();
+        //   return () => {
+        //     mounted.current = false;
+        //     window.removeEventListener("resize", onWindowResize);
+        //   };
+        // }, []);
+        useEffect(function () {
+            if (!elementRef.current)
+                return;
+            var resizeObserver = new ResizeObserver(function (callback) {
+                var object = callback[0];
+                var width = object.contentRect.width;
+                setState({ width: width });
+            });
+            resizeObserver.observe(elementRef.current);
+            return function () { return resizeObserver.disconnect(); };
+        }, [elementRef]);
+        // const onWindowResize = () => {
+        //   if (!mounted.current) return;
+        //   const node = elementRef.current;
+        //   if (node instanceof HTMLElement && node.offsetWidth) {
+        //     setState({ width: node.offsetWidth });
+        //   }
+        // };
+        if (measureBeforeMount && !mounted.current) {
+            return (_jsx("div", { className: classNames(props.className, layoutClassName), style: props.style, ref: elementRef }));
+        }
+        return _jsx(ComposedComponent, __assign({}, props, { innerRef: elementRef }, state));
+    };
+};
+export default WidthProvider;

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

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

package/dist/lib/components/index.js

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

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

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+export type WidthProviderProps = {
+    measureBeforeMount: boolean;
+    className?: string;
+    style?: Object;
+};
+export type WidthProviderState = {
+    width: number;
+};
+export type WidthProviderRef = {
+    innerRef?: RefObject<HTMLDivElement>;
+};
+export type ComposedProps = WidthProviderProps & WidthProviderState & WidthProviderRef;

package/dist/lib/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./GridLayoutEditor";
+export { GridItem } from "./GridItem";
+export * from "./Resizable";
+export * from "./Draggable";
+export { WidthProvider } from "./components";

package/dist/lib/index.js

@@ -0,0 +1,5 @@
+export * from "./GridLayoutEditor";
+export { GridItem } from "./GridItem";
+export * from "./Resizable";
+export * from "./Draggable";
+export { WidthProvider } from "./components";

package/dist/lib/types.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export type PropsWithChildren<P> = P & {
+    children: React.ReactElement | React.ReactElement[];
+};