@reltio/components 1.4.874 → 1.4.878

package/components/ReactSortableTree/utils/tree-data-utils.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -15,8 +14,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         to[j] = from[i];
     return to;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.find = exports.getDepth = exports.isDescendant = exports.getTreeFromFlatData = exports.getFlatDataFromTree = exports.insertNode = exports.addNodeUnderParent = exports.getNodeAtPath = exports.removeNode = exports.removeNodeAtPath = exports.changeNodeAtPath = exports.RESULT_MISS_ERROR_MESSAGE = exports.toggleExpandedForAll = exports.map = exports.walk = exports.getVisibleNodeInfoAtIndex = exports.getVisibleNodeCount = exports.getDescendantCount = void 0;
 /**
  * Performs a depth-first traversal over all of the node descendants,
  * incrementing currentIndex by 1 for each
@@ -59,7 +56,7 @@ function getNodeDataAtTreeIndexOrNextIndex(_a) {
     // If the target node is not found, return the farthest traversed index
     return { nextIndex: childIndex };
 }
-function getDescendantCount(_a) {
+export function getDescendantCount(_a) {
     var node = _a.node, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     return (getNodeDataAtTreeIndexOrNextIndex({
         getNodeKey: function () { },
@@ -69,7 +66,6 @@ function getDescendantCount(_a) {
         targetIndex: -1
     }).nextIndex - 1);
 }
-exports.getDescendantCount = getDescendantCount;
 /**
  * Walk all descendants of the given node, depth-first
  *
@@ -205,7 +201,7 @@ function mapDescendants(_a) {
  *
  * @return {number} count
  */
-function getVisibleNodeCount(_a) {
+export function getVisibleNodeCount(_a) {
     var treeData = _a.treeData;
     var traverse = function (node) {
         if (!node.children || node.expanded !== true || typeof node.children === 'function') {
@@ -215,7 +211,6 @@ function getVisibleNodeCount(_a) {
     };
     return treeData.reduce(function (total, currentNode) { return total + traverse(currentNode); }, 0);
 }
-exports.getVisibleNodeCount = getVisibleNodeCount;
 /**
  * Get the <targetIndex>th visible node in the tree data.
  *
@@ -229,7 +224,7 @@ exports.getVisibleNodeCount = getVisibleNodeCount;
  *      lowerSiblingCounts: []number
  *  }|null} node - The node at targetIndex, or null if not found
  */
-function getVisibleNodeInfoAtIndex(_a) {
+export function getVisibleNodeInfoAtIndex(_a) {
     var treeData = _a.treeData, targetIndex = _a.index, getNodeKey = _a.getNodeKey;
     if (!treeData || treeData.length < 1) {
         return null;
@@ -252,7 +247,6 @@ function getVisibleNodeInfoAtIndex(_a) {
     }
     return null;
 }
-exports.getVisibleNodeInfoAtIndex = getVisibleNodeInfoAtIndex;
 /**
  * Walk descendants depth-first and call a callback on each
  *
@@ -263,7 +257,7 @@ exports.getVisibleNodeInfoAtIndex = getVisibleNodeInfoAtIndex;
  *
  * @return void
  */
-function walk(_a) {
+export function walk(_a) {
     var treeData = _a.treeData, getNodeKey = _a.getNodeKey, callback = _a.callback, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     if (!treeData || treeData.length < 1) {
         return;
@@ -279,7 +273,6 @@ function walk(_a) {
         lowerSiblingCounts: []
     });
 }
-exports.walk = walk;
 /**
  * Perform a depth-first transversal of the descendants and
  *  make a change to every node in the tree
@@ -291,7 +284,7 @@ exports.walk = walk;
  *
  * @return {Object[]} changedTreeData - The changed tree data
  */
-function map(_a) {
+export function map(_a) {
     var treeData = _a.treeData, getNodeKey = _a.getNodeKey, callback = _a.callback, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     if (!treeData || treeData.length < 1) {
         return [];
@@ -307,7 +300,6 @@ function map(_a) {
         lowerSiblingCounts: []
     }).node.children;
 }
-exports.map = map;
 /**
  * Expand or close every node in the tree
  *
@@ -316,7 +308,7 @@ exports.map = map;
  *
  * @return {Object[]} changedTreeData - The changed tree data
  */
-function toggleExpandedForAll(_a) {
+export function toggleExpandedForAll(_a) {
     var treeData = _a.treeData, _b = _a.expanded, expanded = _b === void 0 ? true : _b;
     return map({
         treeData: treeData,
@@ -331,8 +323,7 @@ function toggleExpandedForAll(_a) {
         ignoreCollapsed: false
     });
 }
-exports.toggleExpandedForAll = toggleExpandedForAll;
-exports.RESULT_MISS_ERROR_MESSAGE = 'No node found at the given path.';
+export var RESULT_MISS_ERROR_MESSAGE = 'No node found at the given path.';
 /**
  * Replaces node at path with object, or callback-defined object
  *
@@ -344,7 +335,7 @@ exports.RESULT_MISS_ERROR_MESSAGE = 'No node found at the given path.';
  *
  * @return {Object[]} changedTreeData - The changed tree data
  */
-function changeNodeAtPath(_a) {
+export function changeNodeAtPath(_a) {
     var treeData = _a.treeData, path = _a.path, newNode = _a.newNode, getNodeKey = _a.getNodeKey, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     var RESULT_MISS = 'RESULT_MISS';
     var traverse = function (_a) {
@@ -390,11 +381,10 @@ function changeNodeAtPath(_a) {
         isPseudoRoot: true
     });
     if (result === RESULT_MISS) {
-        throw new Error(exports.RESULT_MISS_ERROR_MESSAGE);
+        throw new Error(RESULT_MISS_ERROR_MESSAGE);
     }
     return result.children;
 }
-exports.changeNodeAtPath = changeNodeAtPath;
 /**
  * Removes the node at the specified path and returns the resulting treeData.
  *
@@ -405,7 +395,7 @@ exports.changeNodeAtPath = changeNodeAtPath;
  *
  * @return {Object[]} changedTreeData - The tree data with the node removed
  */
-function removeNodeAtPath(_a) {
+export function removeNodeAtPath(_a) {
     var treeData = _a.treeData, path = _a.path, getNodeKey = _a.getNodeKey, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     return changeNodeAtPath({
         treeData: treeData,
@@ -415,7 +405,6 @@ function removeNodeAtPath(_a) {
         newNode: null // Delete the node
     });
 }
-exports.removeNodeAtPath = removeNodeAtPath;
 /**
  * Removes the node at the specified path and returns the resulting treeData.
  *
@@ -429,7 +418,7 @@ exports.removeNodeAtPath = removeNodeAtPath;
  * @return {Object} result.node - The node that was removed
  * @return {number} result.treeIndex - The previous treeIndex of the removed node
  */
-function removeNode(_a) {
+export function removeNode(_a) {
     var treeData = _a.treeData, path = _a.path, getNodeKey = _a.getNodeKey, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     var removedNode = null;
     var removedTreeIndex = null;
@@ -452,7 +441,6 @@ function removeNode(_a) {
         treeIndex: removedTreeIndex
     };
 }
-exports.removeNode = removeNode;
 /**
  * Gets the node at the specified path
  *
@@ -463,7 +451,7 @@ exports.removeNode = removeNode;
  *
  * @return {Object|null} nodeInfo - The node info at the given path, or null if not found
  */
-function getNodeAtPath(_a) {
+export function getNodeAtPath(_a) {
     var treeData = _a.treeData, path = _a.path, getNodeKey = _a.getNodeKey, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     var foundNodeInfo = null;
     try {
@@ -484,7 +472,6 @@ function getNodeAtPath(_a) {
     }
     return foundNodeInfo;
 }
-exports.getNodeAtPath = getNodeAtPath;
 /**
  * Adds the node to the specified parent and returns the resulting treeData.
  *
@@ -500,7 +487,7 @@ exports.getNodeAtPath = getNodeAtPath;
  * @return {Object[]} result.treeData - The updated tree data
  * @return {number} result.treeIndex - The tree index at which the node was inserted
  */
-function addNodeUnderParent(_a) {
+export function addNodeUnderParent(_a) {
     var treeData = _a.treeData, newNode = _a.newNode, _b = _a.parentKey, parentKey = _b === void 0 ? null : _b, getNodeKey = _a.getNodeKey, _c = _a.ignoreCollapsed, ignoreCollapsed = _c === void 0 ? true : _c, _d = _a.expandParent, expandParent = _d === void 0 ? false : _d, _e = _a.addAsFirstChild, addAsFirstChild = _e === void 0 ? false : _e;
     if (parentKey === null) {
         return addAsFirstChild
@@ -556,7 +543,6 @@ function addNodeUnderParent(_a) {
         treeIndex: insertedTreeIndex
     };
 }
-exports.addNodeUnderParent = addNodeUnderParent;
 function addNodeAtDepthAndIndex(_a) {
     var targetDepth = _a.targetDepth, minimumTreeIndex = _a.minimumTreeIndex, newNode = _a.newNode, ignoreCollapsed = _a.ignoreCollapsed, expandParent = _a.expandParent, _b = _a.isPseudoRoot, isPseudoRoot = _b === void 0 ? false : _b, isLastChild = _a.isLastChild, node = _a.node, currentIndex = _a.currentIndex, currentDepth = _a.currentDepth, getNodeKey = _a.getNodeKey, _c = _a.path, path = _c === void 0 ? [] : _c;
     var selfPath = function (n) { return (isPseudoRoot ? [] : __spreadArray(__spreadArray([], path), [getNodeKey({ node: n, treeIndex: currentIndex })])); };
@@ -690,7 +676,7 @@ function addNodeAtDepthAndIndex(_a) {
  * @return {number[]|string[]} result.path - Array of keys leading to the node location after insertion
  * @return {Object} result.parentNode - The parent node of the inserted node
  */
-function insertNode(_a) {
+export function insertNode(_a) {
     var treeData = _a.treeData, targetDepth = _a.depth, minimumTreeIndex = _a.minimumTreeIndex, newNode = _a.newNode, _b = _a.getNodeKey, getNodeKey = _b === void 0 ? function () { } : _b, _c = _a.ignoreCollapsed, ignoreCollapsed = _c === void 0 ? true : _c, _d = _a.expandParent, expandParent = _d === void 0 ? false : _d;
     if (!treeData && targetDepth === 0) {
         return {
@@ -724,7 +710,6 @@ function insertNode(_a) {
         parentNode: insertResult.parentNode
     };
 }
-exports.insertNode = insertNode;
 /**
  * Get tree data flattened.
  *
@@ -738,7 +723,7 @@ exports.insertNode = insertNode;
  *      lowerSiblingCounts: []number
  *  }}[] nodes - The node array
  */
-function getFlatDataFromTree(_a) {
+export function getFlatDataFromTree(_a) {
     var treeData = _a.treeData, getNodeKey = _a.getNodeKey, _b = _a.ignoreCollapsed, ignoreCollapsed = _b === void 0 ? true : _b;
     if (!treeData || treeData.length < 1) {
         return [];
@@ -754,7 +739,6 @@ function getFlatDataFromTree(_a) {
     });
     return flattened;
 }
-exports.getFlatDataFromTree = getFlatDataFromTree;
 /**
  * Generate a tree structure from flat data.
  *
@@ -766,7 +750,7 @@ exports.getFlatDataFromTree = getFlatDataFromTree;
  *
  * @return {Object[]} treeData - The flat data represented as a tree
  */
-function getTreeFromFlatData(_a) {
+export function getTreeFromFlatData(_a) {
     var flatData = _a.flatData, _b = _a.getKey, getKey = _b === void 0 ? function (node) { return node.id; } : _b, _c = _a.getParentKey, getParentKey = _c === void 0 ? function (node) { return node.parentId; } : _c, _d = _a.rootKey, rootKey = _d === void 0 ? '0' : _d;
     if (!flatData) {
         return [];
@@ -793,7 +777,6 @@ function getTreeFromFlatData(_a) {
     };
     return childrenToParents[rootKey].map(function (child) { return trav(child); });
 }
-exports.getTreeFromFlatData = getTreeFromFlatData;
 /**
  * Check if a node is a descendant of another node.
  *
@@ -802,12 +785,11 @@ exports.getTreeFromFlatData = getTreeFromFlatData;
  *
  * @return {boolean}
  */
-function isDescendant(older, younger) {
+export function isDescendant(older, younger) {
     return (!!older.children &&
         typeof older.children !== 'function' &&
         older.children.some(function (child) { return child === younger || isDescendant(child, younger); }));
 }
-exports.isDescendant = isDescendant;
 /**
  * Get the maximum depth of the children (the depth of the root node is 0).
  *
@@ -816,7 +798,7 @@ exports.isDescendant = isDescendant;
  *
  * @return {number} maxDepth - The deepest depth in the tree
  */
-function getDepth(node, depth) {
+export function getDepth(node, depth) {
     if (depth === void 0) { depth = 0; }
     if (!node.children) {
         return depth;
@@ -826,7 +808,6 @@ function getDepth(node, depth) {
     }
     return node.children.reduce(function (deepest, child) { return Math.max(deepest, getDepth(child, depth + 1)); }, depth);
 }
-exports.getDepth = getDepth;
 /**
  * Find nodes matching a search query in the tree,
  *
@@ -844,7 +825,7 @@ exports.getDepth = getDepth;
  *                               If expandAllMatchPaths and expandFocusMatchPaths are both false,
  *                               it will be the same as the original tree data.
  */
-function find(_a) {
+export function find(_a) {
     var getNodeKey = _a.getNodeKey, treeData = _a.treeData, searchQuery = _a.searchQuery, searchMethod = _a.searchMethod, searchFocusOffset = _a.searchFocusOffset, _b = _a.expandAllMatchPaths, expandAllMatchPaths = _b === void 0 ? false : _b, _c = _a.expandFocusMatchPaths, expandFocusMatchPaths = _c === void 0 ? true : _c;
     var matchCount = 0;
     var trav = function (_a) {
@@ -938,8 +919,7 @@ function find(_a) {
         treeData: result.node.children
     };
 }
-exports.find = find;
-exports.default = {
+export default {
     find: find,
     getDepth: getDepth,
     isDescendant: isDescendant,

package/components/ReltioGridLayout/ReltioGridLayout.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,59 +9,36 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var prop_types_1 = __importDefault(require("prop-types"));
-var react_1 = __importStar(require("react"));
-var react_grid_layout_1 = __importDefault(require("react-grid-layout"));
-var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
-var ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
-var helpers_1 = require("./helpers");
-var styles_1 = require("./styles");
+import PropTypes from 'prop-types';
+import React, { useCallback, useMemo, useRef, useState, memo } from 'react';
+import GridLayout from 'react-grid-layout';
+import ReactResizeDetector from 'react-resize-detector';
+import { identity, pipe } from 'ramda';
+import classnames from 'classnames';
+import { reltioLayoutToReactGridLayout, reactGridLayoutToReltioLayout, reactGridLayoutItemToReltioLayoutItem, copyPropsFromPreviousLayout, calcHeight, getReltioLayoutItemById } from './helpers';
+import { useStyles } from './styles';
 var ReltioGridLayout = function (_a) {
     var _b;
     var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, classes = _a.classes;
-    var ref = react_1.useRef();
-    var styles = styles_1.useStyles();
-    var _c = react_1.useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
-    var _d = react_1.useState(0), width = _d[0], setWidth = _d[1];
+    var ref = useRef();
+    var styles = useStyles();
+    var _c = useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
+    var _d = useState(0), width = _d[0], setWidth = _d[1];
     var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
-    var processedLayout = react_1.useMemo(function () { return helpers_1.reltioLayoutToReactGridLayout(layout); }, [layout]);
-    var onReltioLayoutChanged = ramda_1.pipe(helpers_1.reactGridLayoutToReltioLayout, helpers_1.copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
+    var processedLayout = useMemo(function () { return reltioLayoutToReactGridLayout(layout); }, [layout]);
+    var onReltioLayoutChanged = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
     var handleDrop = function (layout, layoutItem, e) {
         if (onDrop) {
-            onDrop(helpers_1.reactGridLayoutToReltioLayout(layout), helpers_1.reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
+            onDrop(reactGridLayoutToReltioLayout(layout), reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
         }
     };
-    var onToggleFullscreen = react_1.useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
+    var onToggleFullscreen = useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
     var isFullscreenEnabled = fullscreenItemId !== null;
-    var onItemHeightResize = react_1.useCallback(function (height, layoutId) {
+    var onItemHeightResize = useCallback(function (height, layoutId) {
         var isLayoutChanged = false;
         var newLayout = layout.map(function (layoutItem) {
             if (layoutItem.id === layoutId && height) {
-                var newHeight = helpers_1.calcHeight(height, layoutOptions);
+                var newHeight = calcHeight(height, layoutOptions);
                 if (layoutItem.height !== newHeight) {
                     isLayoutChanged = true;
                     return __assign(__assign({}, layoutItem), { minHeight: newHeight, maxHeight: newHeight, height: newHeight });
@@ -75,17 +51,17 @@ var ReltioGridLayout = function (_a) {
         }
     }, [layout, layoutOptions, onLayoutChanged]);
     var getAutosizeComponent = function (layoutItemId) {
-        return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (width, height) {
+        return (React.createElement(ReactResizeDetector, { handleHeight: true, onResize: function (width, height) {
                 onItemHeightResize(height, layoutItemId);
             } }));
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
-        react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames_1.default(styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
+        React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames(styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
             var isItemFullscreen = fullscreenItemId === layoutItem.i;
-            var isAutosize = (helpers_1.getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
+            var isAutosize = (getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
             var autosizeComponent = isAutosize ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) } : {};
-            return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames_1.default({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
+            return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
         }))));
 };
 ReltioGridLayout.defaultProps = {
@@ -94,24 +70,24 @@ ReltioGridLayout.defaultProps = {
         rowHeight: 30,
         margin: [15, 15]
     },
-    onConfigChanged: ramda_1.identity,
-    onLayoutChanged: ramda_1.identity,
+    onConfigChanged: identity,
+    onLayoutChanged: identity,
     classes: {}
 };
 ReltioGridLayout.propTypes = {
-    views: prop_types_1.default.array,
-    layout: prop_types_1.default.array,
-    layoutOptions: prop_types_1.default.object,
-    onConfigChanged: prop_types_1.default.func,
-    onLayoutChanged: prop_types_1.default.func,
-    onDrop: prop_types_1.default.func,
-    onRemove: prop_types_1.default.func,
-    LayoutItem: prop_types_1.default.elementType,
-    draggableHandle: prop_types_1.default.string,
-    isDroppable: prop_types_1.default.bool,
-    droppingItem: prop_types_1.default.object,
-    classes: prop_types_1.default.shape({
-        item: prop_types_1.default.string
+    views: PropTypes.array,
+    layout: PropTypes.array,
+    layoutOptions: PropTypes.object,
+    onConfigChanged: PropTypes.func,
+    onLayoutChanged: PropTypes.func,
+    onDrop: PropTypes.func,
+    onRemove: PropTypes.func,
+    LayoutItem: PropTypes.elementType,
+    draggableHandle: PropTypes.string,
+    isDroppable: PropTypes.bool,
+    droppingItem: PropTypes.object,
+    classes: PropTypes.shape({
+        item: PropTypes.string
     })
 };
-exports.default = react_1.memo(ReltioGridLayout);
+export default memo(ReltioGridLayout);

package/components/ReltioGridLayout/helpers.js

@@ -1,4 +1,3 @@
-"use strict";
 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)
@@ -10,12 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
-var ramda_1 = require("ramda");
-var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
-exports.getReltioViewId = getReltioViewId;
-var reltioLayoutItemToReactGridLayoutItem = function (_a) {
+import { curry, defaultTo, mergeAll, pick, pipe, prop, propEq, __ } from 'ramda';
+export var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
+export var reltioLayoutItemToReactGridLayoutItem = function (_a) {
     var x = _a.x, y = _a.y, width = _a.width, height = _a.height, id = _a.id, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, isStatic = _a.isStatic;
     return ({
         x: x,
@@ -30,8 +26,7 @@ var reltioLayoutItemToReactGridLayoutItem = function (_a) {
         static: isStatic
     });
 };
-exports.reltioLayoutItemToReactGridLayoutItem = reltioLayoutItemToReactGridLayoutItem;
-var reactGridLayoutItemToReltioLayoutItem = function (_a) {
+export var reactGridLayoutItemToReltioLayoutItem = function (_a) {
     var x = _a.x, y = _a.y, w = _a.w, h = _a.h, maxW = _a.maxW, minW = _a.minW, minH = _a.minH, maxH = _a.maxH, i = _a.i, obj = __rest(_a, ["x", "y", "w", "h", "maxW", "minW", "minH", "maxH", "i"]);
     return ({
         x: x,
@@ -46,20 +41,16 @@ var reactGridLayoutItemToReltioLayoutItem = function (_a) {
         isStatic: obj.static
     });
 };
-exports.reactGridLayoutItemToReltioLayoutItem = reactGridLayoutItemToReltioLayoutItem;
-var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).map(exports.reltioLayoutItemToReactGridLayoutItem); };
-exports.reltioLayoutToReactGridLayout = reltioLayoutToReactGridLayout;
-var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(exports.reactGridLayoutItemToReltioLayoutItem); };
-exports.reactGridLayoutToReltioLayout = reactGridLayoutToReltioLayout;
-exports.getReltioLayoutItemById = ramda_1.curry(function (layout, id) { return (layout || []).find(ramda_1.propEq('id', id)); });
-var updateExtraPropsInLayoutItem = ramda_1.curry(function (props, from, to) { return ramda_1.mergeAll([to, ramda_1.pick(props, from)]); });
-exports.copyPropsFromPreviousLayout = ramda_1.curry(function (props, oldReltioLayout, reltioLayout) {
+export var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).map(reltioLayoutItemToReactGridLayoutItem); };
+export var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(reactGridLayoutItemToReltioLayoutItem); };
+export var getReltioLayoutItemById = curry(function (layout, id) { return (layout || []).find(propEq('id', id)); });
+var updateExtraPropsInLayoutItem = curry(function (props, from, to) { return mergeAll([to, pick(props, from)]); });
+export var copyPropsFromPreviousLayout = curry(function (props, oldReltioLayout, reltioLayout) {
     return (reltioLayout || []).map(function (layoutItem) {
-        return ramda_1.pipe(ramda_1.prop('id'), exports.getReltioLayoutItemById(oldReltioLayout), ramda_1.defaultTo({}), updateExtraPropsInLayoutItem(props, ramda_1.__, layoutItem))(layoutItem);
+        return pipe(prop('id'), getReltioLayoutItemById(oldReltioLayout), defaultTo({}), updateExtraPropsInLayoutItem(props, __, layoutItem))(layoutItem);
     });
 });
-var calcHeight = function (height, options) {
+export var calcHeight = function (height, options) {
     var margin = options.margin, rowHeight = options.rowHeight;
     return Math.ceil((height + margin[1]) / (rowHeight + margin[1]));
 };
-exports.calcHeight = calcHeight;

package/components/ReltioGridLayout/icons/ResizeIcon.svg.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RESIZE_ICON = void 0;
-exports.RESIZE_ICON = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path stroke=\"#505050\" stroke-opacity=\".54\" d=\"M9.5 0v10M0 9.5h9M7.5 4v4M4 7.5h3\"/>\n</svg>";
+export var RESIZE_ICON = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path stroke=\"#505050\" stroke-opacity=\".54\" d=\"M9.5 0v10M0 9.5h9M7.5 4v4M4 7.5h3\"/>\n</svg>";

package/components/ReltioGridLayout/styles.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ResizeIcon_svg_1 = require("./icons/ResizeIcon.svg");
-exports.useStyles = styles_1.makeStyles(function (_) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+import { svg2Url } from '@reltio/mdm-sdk';
+import { RESIZE_ICON } from './icons/ResizeIcon.svg';
+export var useStyles = makeStyles(function (_) { return ({
     gridLayout: {
         position: 'relative',
         width: '100%',
@@ -46,7 +43,7 @@ exports.useStyles = styles_1.makeStyles(function (_) { return ({
                 bottom: 0,
                 right: 0,
                 zIndex: 20,
-                backgroundImage: "url('" + mdm_sdk_1.svg2Url(ResizeIcon_svg_1.RESIZE_ICON) + "')",
+                backgroundImage: "url('" + svg2Url(RESIZE_ICON) + "')",
                 backgroundRepeat: 'no-repeat',
                 backgroundOrigin: 'content-box',
                 boxSizing: 'border-box',