@reltio/components 1.4.876 → 1.4.880

package/components/history/HistoryGraph/HistoryGraph.js

@@ -1,33 +1,9 @@
-"use strict";
-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 react_1 = __importStar(require("react"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var HistoryLink_1 = __importDefault(require("./HistoryLink"));
-var HistoryCircle_1 = __importDefault(require("./HistoryCircle"));
-var types_1 = require("../types");
-var helpers_1 = require("./helpers");
+import React, { memo } from 'react';
+import { getContributorColor } from '@reltio/mdm-sdk';
+import HistoryLink from './HistoryLink';
+import HistoryCircle from './HistoryCircle';
+import { HistoryChangeTypes } from '../types';
+import { isFakeHistoryType } from './helpers';
 var COL_WIDTH = 16;
 var COL_MARGIN = 24;
 var ROW_MARGIN = 16;
@@ -41,12 +17,12 @@ var HistoryGraph = function (_a) {
         var x = historyLanes[uri].index * COL_WIDTH + COL_MARGIN;
         var y = rowPositions[i];
         rowPositions.push(y + height);
-        var isFakeType = helpers_1.isFakeHistoryType(type);
+        var isFakeType = isFakeHistoryType(type);
         var circleUri = isFakeType ? uris[0] : uri;
         var isCollapsed = !(uris === null || uris === void 0 ? void 0 : uris.some(function (uri) { return historyLanes[uri]; }));
-        acc.circles.push(react_1.default.createElement(HistoryCircle_1.default, { key: "circle-" + circleUri + "-" + i, x: x, y: y, color: mdm_sdk_1.getContributorColor(circleUri), isDashed: isFakeType, isCollapsed: isCollapsed, showCollapseIcon: !!uris, showLine: type === types_1.HistoryChangeTypes.FAKE_NAVIGATE_PROFILE }));
-        acc.rowLines.push(react_1.default.createElement("rect", { key: circleUri + "-" + index, x: x, y: y - ROW_HEIGHT / 2, width: '100%', height: ROW_HEIGHT, fill: mdm_sdk_1.getContributorColor(circleUri), opacity: 0.06 }));
-        var isUpRight = type === types_1.HistoryChangeTypes.ENTITIES_SPLITTED;
+        acc.circles.push(React.createElement(HistoryCircle, { key: "circle-" + circleUri + "-" + i, x: x, y: y, color: getContributorColor(circleUri), isDashed: isFakeType, isCollapsed: isCollapsed, showCollapseIcon: !!uris, showLine: type === HistoryChangeTypes.FAKE_NAVIGATE_PROFILE }));
+        acc.rowLines.push(React.createElement("rect", { key: circleUri + "-" + index, x: x, y: y - ROW_HEIGHT / 2, width: '100%', height: ROW_HEIGHT, fill: getContributorColor(circleUri), opacity: 0.06 }));
+        var isUpRight = type === HistoryChangeTypes.ENTITIES_SPLITTED;
         uris === null || uris === void 0 ? void 0 : uris.forEach(function (contributorUri) {
             var contributorLane = historyLanes[contributorUri];
             if (!contributorLane)
@@ -55,7 +31,7 @@ var HistoryGraph = function (_a) {
             var toX = contributorLane.index * COL_WIDTH + COL_MARGIN;
             var toY = isUpRight ? y - rowHeight : y + rowHeight;
             if (x !== toX)
-                acc.links.push(react_1.default.createElement(HistoryLink_1.default, { key: "link-" + contributorUri + "-" + index, x: x, y: y, toX: toX, toY: toY, isDashed: helpers_1.isFakeHistoryType(type), color: mdm_sdk_1.getContributorColor(contributorUri) }));
+                acc.links.push(React.createElement(HistoryLink, { key: "link-" + contributorUri + "-" + index, x: x, y: y, toX: toX, toY: toY, isDashed: isFakeHistoryType(type), color: getContributorColor(contributorUri) }));
         });
         return acc;
     }, { links: [], circles: [], rowLines: [] }), links = _b.links, rowLines = _b.rowLines, circles = _b.circles;
@@ -67,20 +43,20 @@ var HistoryGraph = function (_a) {
         contributorLane.lifeTime.forEach(function (_a, i) {
             var _b;
             var start = _a.start, end = _a.end;
-            if (((_b = rows[end === null || end === void 0 ? void 0 : end.index]) === null || _b === void 0 ? void 0 : _b.type) === types_1.HistoryChangeTypes.ENTITIES_SPLITTED)
+            if (((_b = rows[end === null || end === void 0 ? void 0 : end.index]) === null || _b === void 0 ? void 0 : _b.type) === HistoryChangeTypes.ENTITIES_SPLITTED)
                 return;
             var startY = rowPositions[start === null || start === void 0 ? void 0 : start.index] || height;
             var endY = rowPositions[(end === null || end === void 0 ? void 0 : end.index) + 1] || ROW_MARGIN;
-            var color = mdm_sdk_1.getContributorColor(contributorUri);
+            var color = getContributorColor(contributorUri);
             if (!end && contributorLane.index > 0) {
-                circles.push(react_1.default.createElement(HistoryCircle_1.default, { key: "initCircle-" + contributorUri + "-" + i, x: x, y: endY, color: color, showLine: true }));
+                circles.push(React.createElement(HistoryCircle, { key: "initCircle-" + contributorUri + "-" + i, x: x, y: endY, color: color, showLine: true }));
             }
-            links.push(react_1.default.createElement("path", { key: "line-" + contributorUri + "-" + i, d: "M" + x + " " + startY + " L" + x + " " + endY, stroke: color, strokeWidth: 2 }));
+            links.push(React.createElement("path", { key: "line-" + contributorUri + "-" + i, d: "M" + x + " " + startY + " L" + x + " " + endY, stroke: color, strokeWidth: 2 }));
         });
     });
-    return (react_1.default.createElement("svg", { className: "chart", width: width, height: height },
-        react_1.default.createElement("g", { id: "rowLines" }, rowLines),
-        react_1.default.createElement("g", { id: "links" }, links),
-        react_1.default.createElement("g", { id: "circles" }, circles)));
+    return (React.createElement("svg", { className: "chart", width: width, height: height },
+        React.createElement("g", { id: "rowLines" }, rowLines),
+        React.createElement("g", { id: "links" }, links),
+        React.createElement("g", { id: "circles" }, circles)));
 };
-exports.default = react_1.memo(HistoryGraph);
+export default memo(HistoryGraph);

package/components/history/HistoryGraph/HistoryLink.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var helpers_1 = require("./helpers");
+import React from 'react';
+import { getHistoryLinkCurve } from './helpers';
 var HistoryLink = function (_a) {
     var x = _a.x, y = _a.y, toX = _a.toX, toY = _a.toY, color = _a.color, isDashed = _a.isDashed;
-    var lineData = helpers_1.getHistoryLinkCurve(x, y, toX, toY);
-    return (react_1.default.createElement("path", { d: lineData, stroke: color, strokeWidth: 2, fill: 'none', strokeDasharray: isDashed ? '3,3' : undefined }));
+    var lineData = getHistoryLinkCurve(x, y, toX, toY);
+    return (React.createElement("path", { d: lineData, stroke: color, strokeWidth: 2, fill: 'none', strokeDasharray: isDashed ? '3,3' : undefined }));
 };
-exports.default = HistoryLink;
+export default HistoryLink;

package/components/history/HistoryGraph/helpers.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFakeHistoryType = exports.getHistoryLinkCurve = void 0;
-var HistoryChangeTypes_1 = require("../types/HistoryChangeTypes");
-var getHistoryLinkCurve = function (x, y, toX, toY) {
+import { HistoryChangeTypes } from '../types/HistoryChangeTypes';
+export var getHistoryLinkCurve = function (x, y, toX, toY) {
     var isUp = y > toY;
     var isLeft = x < toX;
     var curveStartX = isLeft ? toX - 12 : toX + 12;
@@ -11,8 +8,6 @@ var getHistoryLinkCurve = function (x, y, toX, toY) {
     var curve = isLeft ? "c 6 0 12 " + curveCenterY + " 12" : "c -6 0 -12 " + curveCenterY + " -12";
     return "M" + x + " " + y + " L" + curveStartX + " " + y + " " + curve + " " + curveEndY + " L" + toX + " " + toY;
 };
-exports.getHistoryLinkCurve = getHistoryLinkCurve;
-var isFakeHistoryType = function (type) {
-    return type === HistoryChangeTypes_1.HistoryChangeTypes.FAKE_FILTERED_INCOMING || type === HistoryChangeTypes_1.HistoryChangeTypes.FAKE_FILTERED_OUTGOING;
+export var isFakeHistoryType = function (type) {
+    return type === HistoryChangeTypes.FAKE_FILTERED_INCOMING || type === HistoryChangeTypes.FAKE_FILTERED_OUTGOING;
 };
-exports.isFakeHistoryType = isFakeHistoryType;

package/components/history/HistoryHeader/HistoryHeader.js

@@ -1,28 +1,23 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var ramda_1 = require("ramda");
-var Spacer_1 = __importDefault(require("../../Spacer/Spacer"));
-var HistoryFilterButton_1 = __importDefault(require("../HistoryFilterButton/HistoryFilterButton"));
-var HistoryMenuButton_1 = __importDefault(require("../HistoryMenuButton/HistoryMenuButton"));
-var styles_1 = require("./styles");
+import React from 'react';
+import i18n from 'ui-i18n';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+import { isNil } from 'ramda';
+import Spacer from '../../Spacer/Spacer';
+import HistoryFilterButton from '../HistoryFilterButton/HistoryFilterButton';
+import HistoryMenuButton from '../HistoryMenuButton/HistoryMenuButton';
+import { useStyles } from './styles';
 var HistoryHeader = function (_a) {
     var total = _a.total, entityType = _a.entityType, filter = _a.filter, onApplyFilter = _a.onApplyFilter;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('History')),
-        react_1.default.createElement(Divider_1.default, { orientation: "vertical", flexItem: true, className: styles.divider }),
-        !ramda_1.isNil(total) && (react_1.default.createElement(Typography_1.default, { variant: "body1", color: "textSecondary", className: styles.count }, total === 1
-            ? ui_i18n_1.default.text('${count} contributing profile', { count: total })
-            : ui_i18n_1.default.text('${count} contributing profiles', { count: total }))),
-        react_1.default.createElement(Spacer_1.default, null),
-        react_1.default.createElement(HistoryFilterButton_1.default, { entityType: entityType, filter: filter, onApplyFilter: onApplyFilter }),
-        react_1.default.createElement(HistoryMenuButton_1.default, null)));
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(Typography, { variant: "h6" }, i18n.text('History')),
+        React.createElement(Divider, { orientation: "vertical", flexItem: true, className: styles.divider }),
+        !isNil(total) && (React.createElement(Typography, { variant: "body1", color: "textSecondary", className: styles.count }, total === 1
+            ? i18n.text('${count} contributing profile', { count: total })
+            : i18n.text('${count} contributing profiles', { count: total }))),
+        React.createElement(Spacer, null),
+        React.createElement(HistoryFilterButton, { entityType: entityType, filter: filter, onApplyFilter: onApplyFilter }),
+        React.createElement(HistoryMenuButton, null)));
 };
-exports.default = HistoryHeader;
+export default HistoryHeader;

package/components/history/HistoryHeader/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     root: {
         display: 'flex',
         flex: 1,

package/components/history/HistoryMenuButton/HistoryMenuButton.js

@@ -1,14 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
-var SmallIconButton_1 = require("../../SmallIconButton");
-var styles_1 = require("./styles");
+import React from 'react';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { SmallIconButton } from '../../SmallIconButton';
+import { useStyles } from './styles';
 var HistoryMenuButton = function () {
-    var styles = styles_1.useStyles();
-    return react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: MoreVert_1.default, size: "XS", onClick: function () { }, className: styles.icon });
+    var styles = useStyles();
+    return React.createElement(SmallIconButton, { icon: MoreVertIcon, size: "XS", onClick: function () { }, className: styles.icon });
 };
-exports.default = HistoryMenuButton;
+export default HistoryMenuButton;

package/components/history/HistoryMenuButton/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     icon: {
         margin: 5
     }

package/components/history/HistoryRow/HistoryRow.js

@@ -1,48 +1,24 @@
-"use strict";
-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 react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var activities_1 = require("../../activityLog/utils/activities");
-var styles_1 = require("./styles");
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import { getContributorColor } from '@reltio/mdm-sdk';
+import Typography from '@material-ui/core/Typography';
+import { getActivityLabel } from '../../activityLog/utils/activities';
+import { useStyles } from './styles';
 var HistoryRow = function (_a) {
     var change = _a.change, isCurrent = _a.isCurrent;
     var uri = change.uri, type = change.type, matchGroups = change.matchGroups, user = change.user, timestamp = change.timestamp;
-    var color = mdm_sdk_1.getContributorColor(uri);
-    var styles = styles_1.useStyles({ color: color });
-    return (react_1.default.createElement("div", { className: styles.historyRow },
-        react_1.default.createElement("div", { className: styles.rowHeader },
-            react_1.default.createElement("div", { className: styles.badge }),
-            react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.title, { bold: isCurrent }) }, isCurrent ? ui_i18n_1.default.text('Current view') : activities_1.getActivityLabel(type)),
-            !isCurrent && react_1.default.createElement(Typography_1.default, { className: styles.date }, ui_i18n_1.default.date(timestamp, 'L LT'))),
-        matchGroups && (react_1.default.createElement(Typography_1.default, { className: styles.title },
-            ui_i18n_1.default.text('Match rule:'),
+    var color = getContributorColor(uri);
+    var styles = useStyles({ color: color });
+    return (React.createElement("div", { className: styles.historyRow },
+        React.createElement("div", { className: styles.rowHeader },
+            React.createElement("div", { className: styles.badge }),
+            React.createElement(Typography, { className: classnames(styles.title, { bold: isCurrent }) }, isCurrent ? i18n.text('Current view') : getActivityLabel(type)),
+            !isCurrent && React.createElement(Typography, { className: styles.date }, i18n.date(timestamp, 'L LT'))),
+        matchGroups && (React.createElement(Typography, { className: styles.title },
+            i18n.text('Match rule:'),
             " ",
             matchGroups.join(', '))),
-        react_1.default.createElement(Typography_1.default, { className: styles.user }, user)));
+        React.createElement(Typography, { className: styles.user }, user)));
 };
-exports.default = react_1.memo(HistoryRow);
+export default memo(HistoryRow);

package/components/history/HistoryRow/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     historyRow: {
         padding: '8px 12px 16px'
     },

package/components/history/HistoryTree/HistoryTree.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,50 +9,27 @@ 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 react_1 = __importStar(require("react"));
-var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var HistoryRow_1 = __importDefault(require("../HistoryRow/HistoryRow"));
-var HistoryGraph_1 = __importDefault(require("../HistoryGraph/HistoryGraph"));
-var LinearLoadIndicator_1 = __importDefault(require("../../LinearLoadIndicator/LinearLoadIndicator"));
-var styles_1 = require("./styles");
+import React, { useCallback, useRef, useState } from 'react';
+import ReactResizeDetector from 'react-resize-detector';
+import i18n from 'ui-i18n';
+import { isNil } from 'ramda';
+import classnames from 'classnames';
+import Button from '@material-ui/core/Button';
+import HistoryRow from '../HistoryRow/HistoryRow';
+import HistoryGraph from '../HistoryGraph/HistoryGraph';
+import LinearLoadIndicator from '../../LinearLoadIndicator/LinearLoadIndicator';
+import { useStyles } from './styles';
 var HistoryTree = function (_a) {
     var _b;
     var _c;
     var historyData = _a.historyData, isLoading = _a.isLoading, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore;
-    var styles = styles_1.useStyles();
-    var _d = react_1.useState({ historyLanes: {}, rows: [] }), graphData = _d[0], setGraphData = _d[1];
-    var _e = react_1.useState(false), isScrollable = _e[0], setIsScrollable = _e[1];
-    var graphRef = react_1.useRef(null);
-    var rowsRef = react_1.useCallback(function (node) {
+    var styles = useStyles();
+    var _d = useState({ historyLanes: {}, rows: [] }), graphData = _d[0], setGraphData = _d[1];
+    var _e = useState(false), isScrollable = _e[0], setIsScrollable = _e[1];
+    var graphRef = useRef(null);
+    var rowsRef = useCallback(function (node) {
         var _a;
-        if (!ramda_1.isNil(node)) {
+        if (!isNil(node)) {
             var rows = (_a = historyData.rows) === null || _a === void 0 ? void 0 : _a.map(function (item, i) { var _a; return (__assign(__assign({}, item), { height: (_a = node.childNodes[i]) === null || _a === void 0 ? void 0 : _a.clientHeight })); });
             setGraphData({ historyLanes: historyData.historyLanes, rows: rows });
         }
@@ -62,13 +38,13 @@ var HistoryTree = function (_a) {
         var _a = (graphRef === null || graphRef === void 0 ? void 0 : graphRef.current) || {}, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollLeft = _a.scrollLeft;
         setIsScrollable(scrollLeft < scrollWidth - clientWidth);
     };
-    return (react_1.default.createElement("div", { className: styles.historyTree },
-        isLoading && react_1.default.createElement(LinearLoadIndicator_1.default, null),
-        react_1.default.createElement("div", { className: classnames_1.default(styles.graph, (_b = {}, _b[styles.shadow] = isScrollable, _b)), onScroll: handleGraphScroll, ref: graphRef },
-            react_1.default.createElement(HistoryGraph_1.default, { graphData: graphData }),
-            react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: handleGraphScroll })),
-        react_1.default.createElement("div", { ref: rowsRef, className: styles.history }, (_c = historyData.rows) === null || _c === void 0 ? void 0 : _c.map(function (change, i) { return (react_1.default.createElement(HistoryRow_1.default, { key: "row-" + i, change: change, isCurrent: i === 0 })); })),
-        canLoadMore && (react_1.default.createElement("div", { className: styles.buttonContainer },
-            react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return onLoadMore(); } }, ui_i18n_1.default.text('Show more'))))));
+    return (React.createElement("div", { className: styles.historyTree },
+        isLoading && React.createElement(LinearLoadIndicator, null),
+        React.createElement("div", { className: classnames(styles.graph, (_b = {}, _b[styles.shadow] = isScrollable, _b)), onScroll: handleGraphScroll, ref: graphRef },
+            React.createElement(HistoryGraph, { graphData: graphData }),
+            React.createElement(ReactResizeDetector, { handleWidth: true, onResize: handleGraphScroll })),
+        React.createElement("div", { ref: rowsRef, className: styles.history }, (_c = historyData.rows) === null || _c === void 0 ? void 0 : _c.map(function (change, i) { return (React.createElement(HistoryRow, { key: "row-" + i, change: change, isCurrent: i === 0 })); })),
+        canLoadMore && (React.createElement("div", { className: styles.buttonContainer },
+            React.createElement(Button, { color: "primary", onClick: function () { return onLoadMore(); } }, i18n.text('Show more'))))));
 };
-exports.default = HistoryTree;
+export default HistoryTree;

package/components/history/HistoryTree/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     historyTree: {
         display: 'grid',
         gridTemplateColumns: 'auto 1fr',

package/components/history/HistoryView/HistoryView.js

@@ -1,42 +1,18 @@
-"use strict";
-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 react_1 = __importStar(require("react"));
-var HistoryTree_1 = __importDefault(require("../HistoryTree/HistoryTree"));
-var ContributorsPanel_1 = __importDefault(require("../ContributorsPanel/ContributorsPanel"));
-var useHistoryTree_1 = require("../hooks/useHistoryTree");
-var styles_1 = require("./styles");
+import React, { memo, useEffect, useState } from 'react';
+import HistoryTree from '../HistoryTree/HistoryTree';
+import ContributorsPanel from '../ContributorsPanel/ContributorsPanel';
+import { useHistoryTree } from '../hooks/useHistoryTree';
+import { useStyles } from './styles';
 var HistoryView = function (_a) {
     var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal, contributorsUris = _a.contributorsUris, entityUri = _a.entityUri, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore;
-    var styles = styles_1.useStyles();
-    var _b = react_1.useState(null), selectedUris = _b[0], setSelectedUris = _b[1];
-    react_1.useEffect(function () {
+    var styles = useStyles();
+    var _b = useState(null), selectedUris = _b[0], setSelectedUris = _b[1];
+    useEffect(function () {
         setSelectedUris(contributorsUris);
     }, [contributorsUris]);
-    var historyData = useHistoryTree_1.useHistoryTree({ entityUri: entityUri, historyChanges: historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.changes, selectedUris: selectedUris });
-    return (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(ContributorsPanel_1.default, { values: contributorsUris, selectedValues: selectedUris, onSelectValues: setSelectedUris, entityUri: entityUri, className: styles.borderBottom }),
-        react_1.default.createElement(HistoryTree_1.default, { historyData: historyData, isLoading: isLoading, onLoadMore: onLoadMore, canLoadMore: canLoadMore })));
+    var historyData = useHistoryTree({ entityUri: entityUri, historyChanges: historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.changes, selectedUris: selectedUris });
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(ContributorsPanel, { values: contributorsUris, selectedValues: selectedUris, onSelectValues: setSelectedUris, entityUri: entityUri, className: styles.borderBottom }),
+        React.createElement(HistoryTree, { historyData: historyData, isLoading: isLoading, onLoadMore: onLoadMore, canLoadMore: canLoadMore })));
 };
-exports.default = react_1.memo(HistoryView);
+export default memo(HistoryView);

package/components/history/HistoryView/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     root: {
         display: 'flex',
         flexDirection: 'column',

package/components/history/ProfileBandHistory/ProfileBandHistory.js

@@ -1,45 +1,21 @@
-"use strict";
-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 react_1 = __importDefault(require("react"));
-var react_redux_1 = require("react-redux");
-var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var ramda_1 = require("ramda");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var styles_1 = require("./styles");
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import mdmModule, { profile } from '@reltio/mdm-module';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { pipe } from 'ramda';
+import i18n from 'ui-i18n';
+import { useStyles } from './styles';
 var ProfileBandHistory = function () {
-    var styles = styles_1.useStyles();
-    var historyEvent = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryEvent);
-    var dispatch = react_redux_1.useDispatch();
-    var onCancel = ramda_1.pipe(mdm_module_1.profile.history.actions.clearHistoryEvent, dispatch);
-    return historyEvent ? (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(Typography_1.default, { component: 'div' },
-            ui_i18n_1.default.text('You are viewing a historic slice:'),
+    var styles = useStyles();
+    var historyEvent = useSelector(mdmModule.selectors.getHistoryEvent);
+    var dispatch = useDispatch();
+    var onCancel = pipe(profile.history.actions.clearHistoryEvent, dispatch);
+    return historyEvent ? (React.createElement("div", { className: styles.root },
+        React.createElement(Typography, { component: 'div' },
+            i18n.text('You are viewing a historic slice:'),
             ' ',
-            react_1.default.createElement("span", { className: styles.slice }, ui_i18n_1.default.date(historyEvent.aStamp, 'llll'))),
-        react_1.default.createElement(Button_1.default, { className: styles.cancelButton, variant: "contained", color: "primary", onClick: onCancel }, ui_i18n_1.default.text('Cancel')))) : null;
+            React.createElement("span", { className: styles.slice }, i18n.date(historyEvent.aStamp, 'llll'))),
+        React.createElement(Button, { className: styles.cancelButton, variant: "contained", color: "primary", onClick: onCancel }, i18n.text('Cancel')))) : null;
 };
-exports.default = ProfileBandHistory;
+export default ProfileBandHistory;

package/components/history/ProfileBandHistory/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     root: {
         display: 'flex',
         alignItems: 'flex-start'