@reltio/components 1.4.876 → 1.4.880

package/components/activityLog/ActivityFilterEditor/DateRangeSelector.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,70 +9,47 @@ 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 ui_i18n_1 = __importDefault(require("ui-i18n"));
-var ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
-var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
-var Radio_1 = __importDefault(require("@material-ui/core/Radio"));
-var RadioGroup_1 = __importDefault(require("@material-ui/core/RadioGroup"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var types_1 = require("../../../types");
-var DateIntervalSelector_1 = __importDefault(require("../../DateIntervalSelector/DateIntervalSelector"));
-var utils_1 = require("../../../core/utils");
-var CustomDateRangeEditor_1 = __importDefault(require("../../editors/CustomDateRangeEditor/CustomDateRangeEditor"));
-var hooks_1 = require("../../../hooks");
-var styles_1 = require("./styles");
+import React, { useState } from 'react';
+import i18n from 'ui-i18n';
+import { pipe } from 'ramda';
+import classnames from 'classnames';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Typography from '@material-ui/core/Typography';
+import { DateRangeTypes } from '../../../types';
+import DateIntervalSelector from '../../DateIntervalSelector/DateIntervalSelector';
+import { getValue } from '../../../core/utils';
+import CustomDateRangeEditor from '../../editors/CustomDateRangeEditor/CustomDateRangeEditor';
+import { useDidUpdateEffect } from '../../../hooks';
+import { useStyles } from './styles';
 var emptyDates = [null, null];
 var emptyInterval = [null, 'minutes'];
 var DateRangeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var getInitPeriodByType = function (type) {
         if ((value === null || value === void 0 ? void 0 : value.type) === type) {
             return value.period;
         }
-        else if (type === types_1.DateRangeTypes.WITHIN || type === types_1.DateRangeTypes.AGO) {
+        else if (type === DateRangeTypes.WITHIN || type === DateRangeTypes.AGO) {
             return emptyInterval;
         }
-        else if (type === types_1.DateRangeTypes.BETWEEN) {
+        else if (type === DateRangeTypes.BETWEEN) {
             return emptyDates;
         }
     };
-    var _b = react_1.useState(getInitPeriodByType(types_1.DateRangeTypes.BETWEEN)), datesInterval = _b[0], setDatesInterval = _b[1];
-    var _c = react_1.useState(getInitPeriodByType(types_1.DateRangeTypes.WITHIN)), withinInterval = _c[0], setWithinInterval = _c[1];
-    var _d = react_1.useState(getInitPeriodByType(types_1.DateRangeTypes.AGO)), agoInterval = _d[0], setAgoInterval = _d[1];
+    var _b = useState(getInitPeriodByType(DateRangeTypes.BETWEEN)), datesInterval = _b[0], setDatesInterval = _b[1];
+    var _c = useState(getInitPeriodByType(DateRangeTypes.WITHIN)), withinInterval = _c[0], setWithinInterval = _c[1];
+    var _d = useState(getInitPeriodByType(DateRangeTypes.AGO)), agoInterval = _d[0], setAgoInterval = _d[1];
     var getCurrentPeriodByType = function (type) {
-        if (type === types_1.DateRangeTypes.WITHIN) {
+        if (type === DateRangeTypes.WITHIN) {
             return withinInterval;
         }
-        else if (type === types_1.DateRangeTypes.AGO) {
+        else if (type === DateRangeTypes.AGO) {
             return agoInterval;
         }
-        else if (type === types_1.DateRangeTypes.BETWEEN) {
+        else if (type === DateRangeTypes.BETWEEN) {
             return datesInterval;
         }
     };
@@ -85,15 +61,15 @@ var DateRangeSelector = function (_a) {
     var changePeriod = function (period) {
         onChange(__assign(__assign({}, value), { period: period }));
     };
-    hooks_1.useDidUpdateEffect(function () {
+    useDidUpdateEffect(function () {
         if (value) {
-            if (value.type === types_1.DateRangeTypes.WITHIN) {
+            if (value.type === DateRangeTypes.WITHIN) {
                 setWithinInterval(value.period);
             }
-            else if (value.type === types_1.DateRangeTypes.AGO) {
+            else if (value.type === DateRangeTypes.AGO) {
                 setAgoInterval(value.period);
             }
-            else if (value.type === types_1.DateRangeTypes.BETWEEN) {
+            else if (value.type === DateRangeTypes.BETWEEN) {
                 setDatesInterval(value.period);
             }
         }
@@ -103,18 +79,18 @@ var DateRangeSelector = function (_a) {
             setAgoInterval(emptyInterval);
         }
     }, [value]);
-    return (react_1.default.createElement("div", { className: styles.borderBottom },
-        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Date')),
-        react_1.default.createElement(RadioGroup_1.default, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: ramda_1.pipe(utils_1.getValue, changeType) },
-            react_1.default.createElement("div", { className: styles.dateOptionWithin },
-                react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.WITHIN, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('Within the last'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
-                react_1.default.createElement(DateIntervalSelector_1.default, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.WITHIN); } })),
-            react_1.default.createElement("div", { className: styles.dateOptionAgo },
-                react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.AGO, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('More than'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
-                react_1.default.createElement(DateIntervalSelector_1.default, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.AGO); } }),
-                react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.agoLabel, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Ago'))),
-            react_1.default.createElement("div", { className: styles.dateOption },
-                react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.BETWEEN, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('Date range'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
-                react_1.default.createElement(CustomDateRangeEditor_1.default, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.BETWEEN); } })))));
+    return (React.createElement("div", { className: styles.borderBottom },
+        React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Date')),
+        React.createElement(RadioGroup, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: pipe(getValue, changeType) },
+            React.createElement("div", { className: styles.dateOptionWithin },
+                React.createElement(FormControlLabel, { value: DateRangeTypes.WITHIN, control: React.createElement(Radio, null), label: i18n.text('Within the last'), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
+                React.createElement(DateIntervalSelector, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.WITHIN); } })),
+            React.createElement("div", { className: styles.dateOptionAgo },
+                React.createElement(FormControlLabel, { value: DateRangeTypes.AGO, control: React.createElement(Radio, null), label: i18n.text('More than'), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
+                React.createElement(DateIntervalSelector, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.AGO); } }),
+                React.createElement(Typography, { className: classnames(styles.agoLabel, styles.labels), variant: 'subtitle1' }, i18n.text('Ago'))),
+            React.createElement("div", { className: styles.dateOption },
+                React.createElement(FormControlLabel, { value: DateRangeTypes.BETWEEN, control: React.createElement(Radio, null), label: i18n.text('Date range'), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
+                React.createElement(CustomDateRangeEditor, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.BETWEEN); } })))));
 };
-exports.default = DateRangeSelector;
+export default DateRangeSelector;

package/components/activityLog/ActivityFilterEditor/SourceSelector.js

@@ -1,30 +1,25 @@
-"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 ramda_1 = require("ramda");
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
-var react_redux_1 = require("react-redux");
-var classnames_1 = __importDefault(require("classnames"));
-var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
-var styles_1 = require("./styles");
+import React from 'react';
+import i18n from 'ui-i18n';
+import { defaultTo, pipe, sortBy, prop } from 'ramda';
+import Typography from '@material-ui/core/Typography';
+import MultiSelect from '../../ReactSelect/MultiSelect';
+import { useSelector } from 'react-redux';
+import classnames from 'classnames';
+import mdmModule from '@reltio/mdm-module';
+import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
+import { customStyles, useStyles } from './styles';
 var SourceSelector = function (_a) {
     var selectedSources = _a.selectedSources, onChange = _a.onChange;
-    var styles = styles_1.useStyles();
-    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
-    var options = ramda_1.sortBy(function (option) { return option.label; })(metadata.sources);
-    return (react_1.default.createElement("div", { className: styles.borderBottom },
-        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Source')),
-        react_1.default.createElement(MultiSelect_1.default, { value: selectedSources, onChange: ramda_1.pipe(ramda_1.defaultTo([]), onChange), options: options, TextFieldProps: {
+    var styles = useStyles();
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    var options = sortBy(function (option) { return option.label; })(metadata.sources);
+    return (React.createElement("div", { className: styles.borderBottom },
+        React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Source')),
+        React.createElement(MultiSelect, { value: selectedSources, onChange: pipe(defaultTo([]), onChange), options: options, TextFieldProps: {
                 InputProps: { disableUnderline: true },
                 classes: { root: styles.dropDownInput }
             }, components: {
-                DropdownIndicator: DropdownIndicatorWithIconButton_1.default
-            }, styles: styles_1.customStyles, classes: styles, getOptionValue: ramda_1.prop('abbreviation'), menuPlacement: "bottom" })));
+                DropdownIndicator: DropdownIndicatorWithIconButton
+            }, styles: customStyles, classes: styles, getOptionValue: prop('abbreviation'), menuPlacement: "bottom" })));
 };
-exports.default = SourceSelector;
+export default SourceSelector;

package/components/activityLog/ActivityFilterEditor/styles.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,13 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = exports.customStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.customStyles = {
+import { makeStyles } from '@material-ui/core/styles';
+export var customStyles = {
     input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); }
 };
-exports.useStyles = styles_1.makeStyles({
+export var useStyles = makeStyles({
     container: {
         padding: '24px 10px 0px',
         margin: '0 6px'

package/components/activityLog/ActivityFilterEditor/utils/getSelectorActivityTypes.js

@@ -1,35 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectorActivityTypes = void 0;
-var ramda_1 = require("ramda");
-var types_1 = require("../../types");
+import { pipe, filter, has, isEmpty, includes } from 'ramda';
+import { ActivityTypes } from '../../types';
 var profileRelatedActivityTypes = [
-    types_1.ActivityTypes.ENTITY_CREATED,
-    types_1.ActivityTypes.ENTITY_CHANGED,
-    types_1.ActivityTypes.ENTITIES_MERGED,
-    types_1.ActivityTypes.ENTITIES_SPLITTED,
-    types_1.ActivityTypes.ENTITY_LOST_MERGE,
-    types_1.ActivityTypes.RELATIONSHIP_CREATED,
-    types_1.ActivityTypes.RELATIONSHIP_REMOVED,
-    types_1.ActivityTypes.RELATIONSHIP_CHANGED,
-    types_1.ActivityTypes.POTENTIAL_MATCHES_FOUND,
-    types_1.ActivityTypes.POTENTIAL_MATCHES_REMOVED,
-    types_1.ActivityTypes.NOT_MATCHES_SET,
-    types_1.ActivityTypes.NOT_MATCHES_RESET,
-    types_1.ActivityTypes.ENTITIES_MERGED_MANUALLY,
-    types_1.ActivityTypes.ENTITIES_MERGED_ON_THE_FLY
+    ActivityTypes.ENTITY_CREATED,
+    ActivityTypes.ENTITY_CHANGED,
+    ActivityTypes.ENTITIES_MERGED,
+    ActivityTypes.ENTITIES_SPLITTED,
+    ActivityTypes.ENTITY_LOST_MERGE,
+    ActivityTypes.RELATIONSHIP_CREATED,
+    ActivityTypes.RELATIONSHIP_REMOVED,
+    ActivityTypes.RELATIONSHIP_CHANGED,
+    ActivityTypes.POTENTIAL_MATCHES_FOUND,
+    ActivityTypes.POTENTIAL_MATCHES_REMOVED,
+    ActivityTypes.NOT_MATCHES_SET,
+    ActivityTypes.NOT_MATCHES_RESET,
+    ActivityTypes.ENTITIES_MERGED_MANUALLY,
+    ActivityTypes.ENTITIES_MERGED_ON_THE_FLY
 ];
 var groupRelatedActivityTypes = [
-    types_1.ActivityTypes.GROUP_CREATED,
-    types_1.ActivityTypes.GROUP_REMOVED,
-    types_1.ActivityTypes.GROUP_CHANGED
+    ActivityTypes.GROUP_CREATED,
+    ActivityTypes.GROUP_REMOVED,
+    ActivityTypes.GROUP_CHANGED
 ];
-var getSelectorActivityTypes = function (metadata, entityType) {
+export var getSelectorActivityTypes = function (metadata, entityType) {
     return entityType
         ? profileRelatedActivityTypes
-        : ramda_1.pipe(Object.keys, ramda_1.filter(function (option) {
-            return (ramda_1.has('groupTypes', metadata) && !ramda_1.isEmpty(metadata.groupTypes)) ||
-                !ramda_1.includes(option, groupRelatedActivityTypes);
-        }))(types_1.ActivityTypes);
+        : pipe(Object.keys, filter(function (option) {
+            return (has('groupTypes', metadata) && !isEmpty(metadata.groupTypes)) ||
+                !includes(option, groupRelatedActivityTypes);
+        }))(ActivityTypes);
 };
-exports.getSelectorActivityTypes = getSelectorActivityTypes;

package/components/activityLog/ActivityLog/ActivityLog.js

@@ -1,67 +1,43 @@
-"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 Divider_1 = __importDefault(require("@material-ui/core/Divider"));
-var react_1 = __importStar(require("react"));
-var BasicTablePagination_1 = __importDefault(require("../../BasicTableView/BasicTablePagination/BasicTablePagination"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var AutoSizeList_1 = __importDefault(require("../../AutoSizeList/AutoSizeList"));
-var helpers_1 = require("./helpers");
-var ramda_1 = require("ramda");
-var activities_1 = require("../utils/activities");
-var GroupItem_1 = __importDefault(require("./items/GroupItem/GroupItem"));
-var ActivityItem_1 = __importDefault(require("./items/ActivityItem/ActivityItem"));
-var classnames_1 = __importDefault(require("classnames"));
-var CollapsibleItemsContext_1 = require("../contexts/CollapsibleItemsContext");
-var styles_1 = require("./styles");
+import Divider from '@material-ui/core/Divider';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import BasicTablePagination from '../../BasicTableView/BasicTablePagination/BasicTablePagination';
+import i18n from 'ui-i18n';
+import AutoSizeList from '../../AutoSizeList/AutoSizeList';
+import { buildGroupedItems, flattenGroupedItems, getItemKey, isGroupItem } from './helpers';
+import { adjust, evolve, filter, not, pipe } from 'ramda';
+import { isValidActivity } from '../utils/activities';
+import GroupItem from './items/GroupItem/GroupItem';
+import ActivityItem from './items/ActivityItem/ActivityItem';
+import classnames from 'classnames';
+import { CollapsibleItemsProvider } from '../contexts/CollapsibleItemsContext';
+import { useStyles } from './styles';
 var PAGINATION_HEIGHT = 60;
 var ActivityLog = function (_a) {
     var width = _a.width, height = _a.height, activities = _a.activities, count = _a.count, page = _a.page, onChangePage = _a.onChangePage, rowsPerPage = _a.rowsPerPage, onChangeRowsPerPage = _a.onChangeRowsPerPage, rowsPerPageOptions = _a.rowsPerPageOptions;
-    var styles = styles_1.useStyles();
-    var _b = react_1.useState([]), groupedItems = _b[0], setGroupedItems = _b[1];
+    var styles = useStyles();
+    var _b = useState([]), groupedItems = _b[0], setGroupedItems = _b[1];
     var toggleGroupedItem = function (index) {
-        setGroupedItems(ramda_1.adjust(index, ramda_1.evolve({ collapsed: ramda_1.not })));
+        setGroupedItems(adjust(index, evolve({ collapsed: not })));
     };
-    react_1.useEffect(function () {
-        ramda_1.pipe(ramda_1.filter(activities_1.isValidActivity), helpers_1.buildGroupedItems, setGroupedItems)(activities);
+    useEffect(function () {
+        pipe(filter(isValidActivity), buildGroupedItems, setGroupedItems)(activities);
     }, [activities]);
-    var flatItems = react_1.useMemo(function () { return helpers_1.flattenGroupedItems(groupedItems); }, [groupedItems]);
-    var renderRow = react_1.useCallback(function (_a) {
+    var flatItems = useMemo(function () { return flattenGroupedItems(groupedItems); }, [groupedItems]);
+    var renderRow = useCallback(function (_a) {
         var _b;
         var data = _a.data, index = _a.index;
         var item = data[index];
-        return (react_1.default.createElement("div", { className: classnames_1.default(styles.listRow, (_b = {},
+        return (React.createElement("div", { className: classnames(styles.listRow, (_b = {},
                 _b[styles.singleRow] = data.length === 1,
                 _b[styles.firstRow] = index === 0,
                 _b[styles.lastRow] = index === data.length - 1,
-                _b)) }, helpers_1.isGroupItem(item) ? (react_1.default.createElement(GroupItem_1.default, { item: item, onToggle: toggleGroupedItem })) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(ActivityItem_1.default, { item: item }),
-            react_1.default.createElement(Divider_1.default, { className: styles.rowDivider, light: true, variant: 'inset' })))));
+                _b)) }, isGroupItem(item) ? (React.createElement(GroupItem, { item: item, onToggle: toggleGroupedItem })) : (React.createElement(React.Fragment, null,
+            React.createElement(ActivityItem, { item: item }),
+            React.createElement(Divider, { className: styles.rowDivider, light: true, variant: 'inset' })))));
     }, []); // eslint-disable-line
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(CollapsibleItemsContext_1.CollapsibleItemsProvider, null,
-            react_1.default.createElement(AutoSizeList_1.default, { width: width, height: height - PAGINATION_HEIGHT, data: flatItems, defaultItemSize: 40, itemKey: helpers_1.getItemKey }, renderRow)),
-        react_1.default.createElement(BasicTablePagination_1.default, { count: count, onChangePage: onChangePage, page: page, rowsPerPage: rowsPerPage, onChangeRowsPerPage: onChangeRowsPerPage, rowsPerPageOptions: rowsPerPageOptions, labelRowsPerPage: ui_i18n_1.default.text('Events per page:') })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CollapsibleItemsProvider, null,
+            React.createElement(AutoSizeList, { width: width, height: height - PAGINATION_HEIGHT, data: flatItems, defaultItemSize: 40, itemKey: getItemKey }, renderRow)),
+        React.createElement(BasicTablePagination, { count: count, onChangePage: onChangePage, page: page, rowsPerPage: rowsPerPage, onChangeRowsPerPage: onChangeRowsPerPage, rowsPerPageOptions: rowsPerPageOptions, labelRowsPerPage: i18n.text('Events per page:') })));
 };
-exports.default = ActivityLog;
+export default ActivityLog;

package/components/activityLog/ActivityLog/helpers.js

@@ -1,38 +1,31 @@
-"use strict";
 var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
         to[j] = from[i];
     return to;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemKey = exports.isGroupItem = exports.flattenGroupedItems = exports.buildGroupedItems = void 0;
-var ramda_1 = require("ramda");
-var moment_1 = __importDefault(require("moment"));
+import { addIndex, chain, groupBy, has, map, pipe, toPairs } from 'ramda';
+import moment from 'moment';
 var buildGroupedItem = function (_a) {
     var day = _a[0], children = _a[1];
     return ({
-        timestamp: moment_1.default(day).valueOf(),
+        timestamp: moment(day).valueOf(),
         collapsed: false,
         children: children
     });
 };
 var getDay = function (_a) {
     var timestamp = _a.timestamp;
-    return moment_1.default(timestamp).startOf('day');
+    return moment(timestamp).startOf('day');
 };
-exports.buildGroupedItems = ramda_1.pipe(ramda_1.groupBy(getDay), ramda_1.toPairs, ramda_1.map(buildGroupedItem));
-var chainIndexed = ramda_1.addIndex(ramda_1.chain);
-exports.flattenGroupedItems = chainIndexed(function (_a, index) {
+export var buildGroupedItems = pipe(groupBy(getDay), toPairs, map(buildGroupedItem));
+var chainIndexed = addIndex(chain);
+export var flattenGroupedItems = chainIndexed(function (_a, index) {
     var children = _a.children, collapsed = _a.collapsed, timestamp = _a.timestamp;
     var groupItem = { collapsed: collapsed, timestamp: timestamp, index: index };
     return collapsed ? [groupItem] : __spreadArray([groupItem], children);
 });
-exports.isGroupItem = ramda_1.has('collapsed');
-var getItemKey = function (index, data) {
+export var isGroupItem = has('collapsed');
+export var getItemKey = function (index, data) {
     var item = data[index];
     return 'uri' in item ? item.uri : "" + item.index;
 };
-exports.getItemKey = getItemKey;

package/components/activityLog/ActivityLog/items/ActivityItem/ActivityItem.js

@@ -1,30 +1,25 @@
-"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 Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var activities_1 = require("../../../utils/activities");
-var ActivitiesFactory_1 = __importDefault(require("../../../activities/ActivitiesFactory"));
-var ramda_1 = require("ramda");
-var styles_1 = require("./styles");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { getActivityType, isValidActivity, splitActivityByType } from '../../../utils/activities';
+import ActivitiesFactory from '../../../activities/ActivitiesFactory';
+import { filter, pipe } from 'ramda';
+import { useStyles } from './styles';
+import i18n from 'ui-i18n';
 var ActivityItem = function (_a) {
     var item = _a.item;
-    var styles = styles_1.useStyles();
-    var type = activities_1.getActivityType(item);
-    var activities = ramda_1.pipe(activities_1.splitActivityByType, ramda_1.filter(activities_1.isValidActivity))(item);
-    return (react_1.default.createElement("div", { className: styles.activityItem },
-        react_1.default.createElement("div", { className: styles.activityIcon }, ActivitiesFactory_1.default.getIcon(type)),
-        react_1.default.createElement("div", { className: styles.activityInfo },
-            react_1.default.createElement(Typography_1.default, { className: styles.activityUser }, item.user),
-            react_1.default.createElement("span", { className: styles.date }, ui_i18n_1.default.date(item.timestamp, 'LT')),
+    var styles = useStyles();
+    var type = getActivityType(item);
+    var activities = pipe(splitActivityByType, filter(isValidActivity))(item);
+    return (React.createElement("div", { className: styles.activityItem },
+        React.createElement("div", { className: styles.activityIcon }, ActivitiesFactory.getIcon(type)),
+        React.createElement("div", { className: styles.activityInfo },
+            React.createElement(Typography, { className: styles.activityUser }, item.user),
+            React.createElement("span", { className: styles.date }, i18n.date(item.timestamp, 'LT')),
             activities.map(function (activity, index) {
-                return (react_1.default.createElement("div", { key: index, className: styles.activityEvent }, ActivitiesFactory_1.default.getComponent({
-                    type: activities_1.getActivityType(activity),
+                return (React.createElement("div", { key: index, className: styles.activityEvent }, ActivitiesFactory.getComponent({
+                    type: getActivityType(activity),
                     data: activity
                 })));
             }))));
 };
-exports.default = ActivityItem;
+export default ActivityItem;

package/components/activityLog/ActivityLog/items/ActivityItem/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 (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     activityItem: {
         display: 'flex',
         minHeight: '40px',

package/components/activityLog/ActivityLog/items/GroupItem/GroupItem.js

@@ -1,22 +1,17 @@
-"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 Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Spacer_1 = __importDefault(require("../../../../Spacer/Spacer"));
-var CollapseButton_1 = __importDefault(require("../../../../CollapseButton/CollapseButton"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var styles_1 = require("./styles");
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import i18n from 'ui-i18n';
+import Spacer from '../../../../Spacer/Spacer';
+import CollapseButton from '../../../../CollapseButton/CollapseButton';
+import { isToday } from '@reltio/mdm-sdk';
+import { useStyles } from './styles';
 var GroupItem = function (_a) {
     var _b = _a.item, index = _b.index, timestamp = _b.timestamp, collapsed = _b.collapsed, onToggle = _a.onToggle;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: styles.groupItem },
-        react_1.default.createElement("div", { className: styles.groupIcon }),
-        react_1.default.createElement(Typography_1.default, { className: styles.groupTitle, variant: 'subtitle1' }, mdm_sdk_1.isToday(timestamp) ? ui_i18n_1.default.text('Today') : ui_i18n_1.default.date(timestamp, 'LL')),
-        react_1.default.createElement(Spacer_1.default, null),
-        react_1.default.createElement(CollapseButton_1.default, { isOpen: !collapsed, onClick: function () { return onToggle(index); } })));
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.groupItem },
+        React.createElement("div", { className: styles.groupIcon }),
+        React.createElement(Typography, { className: styles.groupTitle, variant: 'subtitle1' }, isToday(timestamp) ? i18n.text('Today') : i18n.date(timestamp, 'LL')),
+        React.createElement(Spacer, null),
+        React.createElement(CollapseButton, { isOpen: !collapsed, onClick: function () { return onToggle(index); } })));
 };
-exports.default = GroupItem;
+export default GroupItem;

package/components/activityLog/ActivityLog/items/GroupItem/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({
     groupItem: {
         display: 'flex',
         height: '40px',

package/components/activityLog/ActivityLog/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({
     rowDivider: {
         marginLeft: '28px'
     },