publ-echo-test 0.0.1

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

@@ -0,0 +1,566 @@
+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";
+var isProduction = process.env.NODE_ENV === "production";
+var DEBUG = false;
+/**
+ * Return the bottom coordinate of the layout.
+ *
+ * @param  {Array} layout Layout array.
+ * @return {Number}       Bottom coordinate.
+ */
+export function bottom(layout) {
+    var max = 0, bottomY;
+    for (var i = 0, len = layout.length; i < len; i++) {
+        bottomY = layout[i].y + layout[i].h;
+        if (bottomY > max)
+            max = bottomY;
+    }
+    return max;
+}
+export function cloneLayout(layout) {
+    var newLayout = Array(layout.length);
+    for (var i = 0, len = layout.length; i < len; i++) {
+        newLayout[i] = cloneLayoutItem(layout[i]);
+    }
+    return newLayout;
+}
+export function modifyLayout(layout, layoutItem) {
+    var newLayout = Array(layout.length);
+    for (var i = 0, len = layout.length; i < len; i++) {
+        if (layoutItem.i === layout[i].i) {
+            newLayout[i] = layoutItem;
+        }
+        else {
+            newLayout[i] = layout[i];
+        }
+    }
+    return newLayout;
+}
+// Function to be called to modify a layout item.
+// Does defensive clones to ensure the layout is not modified.
+export function withLayoutItem(layout, itemKey, cb) {
+    var item = getLayoutItem(layout, itemKey);
+    if (!item)
+        return [layout, null];
+    item = cb(cloneLayoutItem(item)); // defensive clone then modify
+    // FIXME could do this faster if we already knew the index
+    layout = modifyLayout(layout, item);
+    return [layout, item];
+}
+// Fast path to cloning, since this is monomorphic
+export function cloneLayoutItem(layoutItem) {
+    return __assign(__assign({}, layoutItem), { w: layoutItem.w, h: layoutItem.h, x: layoutItem.x, y: layoutItem.y, z: layoutItem.z, i: layoutItem.i, minW: layoutItem.minW, maxW: layoutItem.maxW, minH: layoutItem.minH, maxH: layoutItem.maxH, moved: Boolean(layoutItem.moved), static: Boolean(layoutItem.static), isDraggable: layoutItem.isDraggable, isResizable: layoutItem.isResizable, resizeHandles: layoutItem.resizeHandles, isBounded: layoutItem.isBounded });
+}
+/**
+ * Comparing React `children` is a bit difficult. This is a good way to compare them.
+ * This will catch differences in keys, order, and length.
+ */
+// NOTE - 쓰이는 곳이 없음
+// export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
+//   return isEqual(
+//     React.Children.map(a, (c) => c?.["key"]),
+//     React.Children.map(b, (c) => c?.["key"])
+//   );
+// }
+export function fastPositionEqual(a, b) {
+    return (a.left === b.left &&
+        a.top === b.top &&
+        a.width === b.width &&
+        a.height === b.height);
+}
+/**
+ * Given two layoutItems, check if they collide.
+ */
+export function collides(l1, l2) {
+    if (l1.i === l2.i)
+        return false; // same element
+    if (l1.x + l1.w <= l2.x)
+        return false; // l1 is left of l2
+    if (l1.x >= l2.x + l2.w)
+        return false; // l1 is right of l2
+    if (l1.y + l1.h <= l2.y)
+        return false; // l1 is above l2
+    if (l1.y >= l2.y + l2.h)
+        return false; // l1 is below l2
+    return true; // boxes overlap
+}
+/**
+ * Given a layout, compact it. This involves going down each y coordinate and removing gaps
+ * between items.
+ *
+ * Does not modify layout items (clones). Creates a new layout array.
+ *
+ * @param  {Array} layout Layout.
+ * @param  {Boolean} verticalCompact Whether or not to compact the layout
+ *   vertically.
+ * @param  {Boolean} allowOverlap When `true`, allows overlapping grid items.
+ * @return {Array}       Compacted Layout.
+ */
+export function compact(layout, compactType, cols, allowOverlap) {
+    var compareWith = getStatics(layout);
+    var sorted = sortLayoutItems(layout, compactType);
+    var out = Array(layout.length);
+    for (var i = 0, len = sorted.length; i < len; i++) {
+        var l = cloneLayoutItem(sorted[i]);
+        // Don't move static elements
+        if (!l.static) {
+            l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap);
+            // Add to comparison array. We only collide with items before this one.
+            // Statics are already in this array.
+            compareWith.push(l);
+        }
+        // Add to output array to make sure they still come out in the right order.
+        out[layout.indexOf(sorted[i])] = l;
+        // Clear moved flag, if it exists.
+        l.moved = false;
+    }
+    return out;
+}
+var heightWidth = { x: "w", y: "h" };
+/**
+ * Before moving item down, it will check if the movement will cause collisions and move those items down before.
+ */
+function resolveCompactionCollision(layout, item, moveToCoord, axis) {
+    var sizeProp = heightWidth[axis];
+    item[axis] += 1;
+    var itemIndex = layout
+        .map(function (layoutItem) {
+        return layoutItem.i;
+    })
+        .indexOf(item.i);
+    for (var i = itemIndex + 1; i < layout.length; i++) {
+        var otherItem = layout[i];
+        // Ignore static items
+        if (otherItem.static)
+            continue;
+        if (otherItem.y > item.y + item.h)
+            break;
+        if (collides(item, otherItem)) {
+            resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis);
+        }
+    }
+    item[axis] = moveToCoord;
+}
+/**
+ * Compact an item in the layout.
+ *
+ * Modifies item.
+ *
+ */
+export function compactItem(compareWith, l, compactType, cols, fullLayout, allowOverlap) {
+    var compactV = compactType === "vertical";
+    var compactH = compactType === "horizontal";
+    if (compactV) {
+        l.y = Math.min(bottom(compareWith), l.y);
+        while (l.y > 0 && !getFirstCollision(compareWith, l)) {
+            l.y--;
+        }
+    }
+    else if (compactH) {
+        while (l.x > 0 && !getFirstCollision(compareWith, l)) {
+            l.x--;
+        }
+    }
+    var collides;
+    while ((collides = getFirstCollision(compareWith, l)) &&
+        !(compactType === null && allowOverlap)) {
+        if (compactH) {
+            resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x");
+        }
+        else {
+            resolveCompactionCollision(fullLayout, l, collides.y + collides.h, "y");
+        }
+        if (compactH && l.x + l.w > cols) {
+            l.x = cols - l.w;
+            l.y++;
+            while (l.x > 0 && !getFirstCollision(compareWith, l)) {
+                l.x--;
+            }
+        }
+    }
+    l.y = Math.max(l.y, 0);
+    l.x = Math.max(l.x, 0);
+    return l;
+}
+/**
+ * Given a layout, make sure all elements fit within its bounds.
+ *
+ * Modifies layout items.
+ *
+ * @param  {Array} layout Layout array.
+ * @param  {Number} bounds Number of columns.
+ */
+export function correctBounds(layout, bounds) {
+    var collidesWith = getStatics(layout);
+    for (var i = 0, len = layout.length; i < len; i++) {
+        var l = layout[i];
+        if (l.x + l.w > bounds.cols)
+            l.x = bounds.cols - l.w;
+        if (l.x < 0) {
+            l.x = 0;
+            l.w = bounds.cols;
+        }
+        if (l.z == null) {
+            l.z = 0;
+        }
+        if (!l.static)
+            collidesWith.push(l);
+        else {
+            while (getFirstCollision(collidesWith, l)) {
+                l.y++;
+            }
+        }
+    }
+    return layout;
+}
+/**
+ * Get a layout item by ID. Used so we can override later on if necessary.
+ *
+ * @param  {Array}  layout Layout array.
+ * @param  {String} id     ID
+ * @return {LayoutItem}    Item at ID.
+ */
+export function getLayoutItem(layout, id) {
+    for (var i = 0, len = layout.length; i < len; i++) {
+        if (layout[i].i === id)
+            return layout[i];
+    }
+}
+/**
+ * Returns the first item this layout collides with.
+ * It doesn't appear to matter which order we approach this from, although
+ * perhaps that is the wrong thing to do.
+ *
+ * @param  {Object} layoutItem Layout item.
+ * @return {Object|undefined}  A colliding layout item, or undefined.
+ */
+export function getFirstCollision(layout, layoutItem) {
+    for (var i = 0, len = layout.length; i < len; i++) {
+        if (collides(layout[i], layoutItem))
+            return layout[i];
+    }
+}
+export function getAllCollisions(layout, layoutItem) {
+    return layout.filter(function (l) { return collides(l, layoutItem); });
+}
+/**
+ * Get all static elements.
+ * @param  {Array} layout Array of layout objects.
+ * @return {Array}        Array of static layout items..
+ */
+export function getStatics(layout) {
+    return layout.filter(function (l) { return l.static; });
+}
+/**
+ * Move an element. Responsible for doing cascading movements of other elements.
+ *
+ * Modifies layout items.
+ *
+ * @param  {Array}      layout            Full layout to modify.
+ * @param  {LayoutItem} l                 element to move.
+ * @param  {Number}     [x]               X position in grid units.
+ * @param  {Number}     [y]               Y position in grid units.
+ */
+export function moveElement(properties) {
+    var l = properties.l, x = properties.x, y = properties.y, z = properties.z, isUserAction = properties.isUserAction, preventCollision = properties.preventCollision, cols = properties.cols, compactType = properties.compactType, allowOverlap = properties.allowOverlap, overrideZ = properties.overrideZ;
+    var layout = properties.layout;
+    if (l.static && l.isDraggable !== true)
+        return layout;
+    if (l.y === y && l.x === x && l.z === z)
+        return layout;
+    log("Moving element ".concat(l.i, " to [").concat(String(x), ",").concat(String(y), "] from [").concat(l.x, ",").concat(l.y, "]"));
+    var oldX = l.x;
+    var oldY = l.y;
+    var oldZ = l.z;
+    // This is quite a bit faster than extending the object
+    if (typeof x === "number")
+        l.x = x;
+    if (typeof y === "number")
+        l.y = y;
+    if (typeof z === "number")
+        l.z = y;
+    l.moved = true;
+    // If this collides with anything, move it.
+    // When doing this comparison, we have to sort the items we compare with
+    // to ensure, in the case of multiple collisions, that we're getting the
+    // nearest collision.
+    var sorted = sortLayoutItems(layout, compactType);
+    var movingUp = compactType === "vertical" && typeof y === "number"
+        ? oldY >= y
+        : compactType === "horizontal" && typeof x === "number"
+            ? oldX >= x
+            : false;
+    // $FlowIgnore acceptable modification of read-only array as it was recently cloned
+    if (movingUp)
+        sorted = sorted.reverse();
+    var collisions = getAllCollisions(sorted, l);
+    var hasCollisions = collisions.length > 0;
+    // We may have collisions. We can short-circuit if we've turned off collisions or
+    // allowed overlap.
+    if (hasCollisions && allowOverlap) {
+        // Easy, we don't need to resolve collisions. But we can make sure the newly movedo item appears on top!
+        var maxZ = Math.max.apply(Math, collisions.map(function (x) { var _a; return (_a = x.z) !== null && _a !== void 0 ? _a : Number.MIN_SAFE_INTEGER; }));
+        l.z = overrideZ !== undefined ? overrideZ : maxZ + 1;
+        return cloneLayout(layout);
+    }
+    else if (hasCollisions && preventCollision) {
+        // If we are preventing collision but not allowing overlap, we need to
+        // revert the position of this element so it goes to where it came from, rather
+        // than the user's desired location.
+        log("Collision prevented on ".concat(l.i, ", reverting."));
+        l.x = oldX;
+        l.y = oldY;
+        l.z = oldZ;
+        l.moved = false;
+        return layout; // did not change so don't clone
+    }
+    // Move each item that collides away from this element.
+    for (var i = 0, len = collisions.length; i < len; i++) {
+        var collision = collisions[i];
+        log("Resolving collision between ".concat(l.i, " at [").concat(l.x, ",").concat(l.y, "] and ").concat(collision.i, " at [").concat(collision.x, ",").concat(collision.y, "]"));
+        // Short circuit so we can't infinite loop
+        if (collision.moved)
+            continue;
+        // Don't move static items - we have to move *this* element away
+        if (collision.static) {
+            layout = moveElementAwayFromCollision({
+                layout: layout,
+                collidesWith: collision,
+                itemToMove: l,
+                isUserAction: isUserAction,
+                compactType: compactType,
+                cols: cols,
+            });
+        }
+        else {
+            layout = moveElementAwayFromCollision({
+                layout: layout,
+                collidesWith: l,
+                itemToMove: collision,
+                isUserAction: isUserAction,
+                compactType: compactType,
+                cols: cols,
+            });
+        }
+    }
+    return layout;
+}
+/**
+ * This is where the magic needs to happen - given a collision, move an element away from the collision.
+ * We attempt to move it up if there's room, otherwise it goes below.
+ *
+ * @param  {Array} layout            Full layout to modify.
+ * @param  {LayoutItem} collidesWith Layout item we're colliding with.
+ * @param  {LayoutItem} itemToMove   Layout item we're moving.
+ */
+export function moveElementAwayFromCollision(properties) {
+    var collidesWith = properties.collidesWith, cols = properties.cols, compactType = properties.compactType, itemToMove = properties.itemToMove, layout = properties.layout;
+    var isUserAction = properties.isUserAction;
+    var compactH = compactType === "horizontal";
+    var compactV = compactType !== "horizontal";
+    var preventCollision = collidesWith.static; // we're already colliding (not for static items)
+    if (isUserAction) {
+        isUserAction = false;
+        var fakeItem = {
+            x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
+            y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
+            z: itemToMove.z,
+            w: itemToMove.w,
+            h: itemToMove.h,
+            i: "-1",
+        };
+        if (!getFirstCollision(layout, fakeItem)) {
+            log("Doing reverse collision on ".concat(itemToMove.i, " up to [").concat(fakeItem.x, ",").concat(fakeItem.y, "]."));
+            return moveElement({
+                layout: layout,
+                l: itemToMove,
+                x: compactH ? fakeItem.x : undefined,
+                y: compactV ? fakeItem.y : undefined,
+                isUserAction: isUserAction,
+                preventCollision: preventCollision,
+                compactType: compactType,
+                cols: cols,
+            });
+        }
+    }
+    return moveElement({
+        layout: layout,
+        l: itemToMove,
+        x: compactH ? itemToMove.x + 1 : undefined,
+        y: compactV ? itemToMove.y + 1 : undefined,
+        isUserAction: isUserAction,
+        preventCollision: preventCollision,
+        compactType: compactType,
+        cols: cols,
+    });
+}
+/**
+ * Helper to convert a number to a percentage string.
+ *
+ * @param  {Number} num Any number
+ * @return {String}     That number as a percentage.
+ */
+export function perc(num) {
+    return num * 100 + "%";
+}
+export function setTransform(_a) {
+    var top = _a.top, left = _a.left, z = _a.z, width = _a.width, height = _a.height;
+    var translate = "translate(".concat(left, "px,").concat(top, "px)");
+    return {
+        transform: translate,
+        WebkitTransform: translate,
+        MozTransform: translate,
+        msTransform: translate,
+        OTransform: translate,
+        width: "".concat(width, "px"),
+        height: "".concat(height, "px"),
+        zIndex: z || 0,
+        position: "absolute",
+    };
+}
+export function setTopLeft(_a) {
+    var top = _a.top, left = _a.left, z = _a.z, width = _a.width, height = _a.height;
+    return {
+        top: "".concat(top, "px"),
+        left: "".concat(left, "px"),
+        width: "".concat(width, "px"),
+        height: "".concat(height, "px"),
+        zIndex: z || 0,
+        position: "absolute",
+    };
+}
+/**
+ * Get layout items sorted from top left to right and down.
+ *
+ * @return {Array} Array of layout objects.
+ * @return {Array}        Layout, sorted static items first.
+ */
+export function sortLayoutItems(layout, compactType) {
+    if (compactType === "horizontal")
+        return sortLayoutItemsByColRow(layout);
+    if (compactType === "vertical")
+        return sortLayoutItemsByRowCol(layout);
+    else
+        return layout;
+}
+/**
+ * Sort layout items by row ascending and column ascending.
+ *
+ * Does not modify Layout.
+ */
+export function sortLayoutItemsByRowCol(layout) {
+    return layout.slice(0).sort(function (a, b) {
+        if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
+            return 1;
+        }
+        else if (a.y === b.y && a.x === b.x) {
+            // Without this, we can get different sort results in IE vs. Chrome/FF
+            return 0;
+        }
+        return -1;
+    });
+}
+/**
+ * Sort layout items by column ascending then row ascending.
+ *
+ * Does not modify Layout.
+ */
+export function sortLayoutItemsByColRow(layout) {
+    return layout.slice(0).sort(function (a, b) {
+        if (a.x > b.x || (a.x === b.x && a.y > b.y)) {
+            return 1;
+        }
+        return -1;
+    });
+}
+/**
+ * Generate a layout using the initialLayout and children as a template.
+ * Missing entries will be added, extraneous ones will be truncated.
+ *
+ * Does not modify initialLayout.
+ *
+ * @param  {Array}  initialLayout Layout passed in through props.
+ * @param  {String} breakpoint    Current responsive breakpoint.
+ * @param  {?String} compact      Compaction option.
+ * @return {Array}                Working layout.
+ */
+export function synchronizeLayoutWithChildren(initialLayout, children, cols, compactType, allowOverlap) {
+    initialLayout = initialLayout || [];
+    var layout = [];
+    children &&
+        React.Children.forEach(Array.isArray(children) ? children : [children], function (child) {
+            if ((child === null || child === void 0 ? void 0 : child.key) == null)
+                return;
+            var exists = getLayoutItem(initialLayout, String(child.key));
+            if (exists) {
+                layout.push(cloneLayoutItem(exists));
+            }
+            else {
+                if (!isProduction && child.props._grid) {
+                    console.warn("`_grid` properties on children have been deprecated as of React 15.2. " +
+                        "Please use `data-grid` or add your properties directly to the `layout`.");
+                }
+                var g = child.props["data-grid"] || child.props._grid;
+                if (g) {
+                    if (!isProduction) {
+                        validateLayout([g], "GridLayout.children");
+                    }
+                    layout.push(cloneLayoutItem(__assign(__assign({}, g), { i: child.key })));
+                }
+                else {
+                }
+            }
+        });
+    var correctedLayout = correctBounds(layout, { cols: cols });
+    return allowOverlap
+        ? correctedLayout
+        : compact(correctedLayout, compactType, cols);
+}
+/**
+ * Validate a layout. Throws errors.
+ *
+ * @param  {Array}  layout        Array of layout items.
+ * @param  {String} [contextName] Context name for errors.
+ * @throw  {Error}                Validation error.
+ */
+export function validateLayout(layout, contextName) {
+    if (contextName === void 0) { contextName = "Layout"; }
+    var subProps = ["x", "y", "w", "h"];
+    if (!Array.isArray(layout)) {
+        throw new Error(contextName + " must be an array!");
+    }
+    for (var i = 0, len = layout.length; i < len; i++) {
+        var item = layout[i];
+        for (var j = 0; j < subProps.length; j++) {
+            if (typeof item[subProps[j]] !== "number") {
+                throw new Error("GridLayout: " +
+                    contextName +
+                    "[" +
+                    i +
+                    "]." +
+                    subProps[j] +
+                    " must be a number!");
+            }
+        }
+    }
+}
+function log() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    if (!DEBUG)
+        return;
+    console.log.apply(console, args);
+}
+export var noop = function (_args) { return undefined; };

package/dist/lib/GridLayoutEditor/utils/responsiveUtils.d.ts

@@ -0,0 +1,26 @@
+import { Breakpoint, Breakpoints, CompactType, Layout, Layouts } from "../types";
+/**
+ * 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 declare function getBreakpointFromWidth(breakpoints: Breakpoints<Breakpoint>, width: number): Breakpoint;
+/**
+ * Given a breakpoint, get the # of cols set for it.
+ */
+export declare function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints<Breakpoint>): number;
+/**
+ * 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 declare function findOrGenerateResponsiveLayout(layouts: Layouts, breakpoints: Breakpoints<Breakpoint>, breakpoint: Breakpoint, lastBreakpoint: Breakpoint, cols: number, compactType: CompactType, overlap: boolean): Layout;
+/**
+ * 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 declare function sortBreakpoints(breakpoints: Breakpoints<Breakpoint>): Array<Breakpoint>;

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, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default Resizable;