@reltio/components 1.4.699 → 1.4.703

package/components/VirtualGroupedList/VirtualGroupedList.js

@@ -0,0 +1,223 @@
+"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 __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.isTitleItem = void 0;
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_window_1 = require("react-window");
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var styles_1 = require("./styles");
+var helpers_1 = require("./helpers");
+/*
+items = [
+    {
+        item: {
+            item: {},
+            level: number
+        },
+        titleItemIndex: number,
+        index: number,
+        moveTo: true|false,
+        items: [...]
+        ...
+    }
+]
+*/
+var OVERSCAN_COUNT = 5;
+var isTitleItem = function (listItem) { return listItem.titleItemIndex === listItem.index; };
+exports.isTitleItem = isTitleItem;
+var VirtualGroupedList = function (_a) {
+    var items = _a.items, getItemSize = _a.getItemSize, renderItem = _a.renderItem, renderGroupTitle = _a.renderGroupTitle, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, _c = _a.fixedTitle, fixedTitle = _c === void 0 ? true : _c, _d = _a.itemKey, itemKey = _d === void 0 ? function (i) { return i; } : _d, disableHorizontalScrollbar = _a.disableHorizontalScrollbar, hideSubtitles = _a.hideSubtitles, _e = _a.focusIndex, focusIndex = _e === void 0 ? null : _e, onInnerContainerResize = _a.onInnerContainerResize;
+    var styles = styles_1.useStyles();
+    var listRef = react_1.useRef(null);
+    var itemsRef = react_1.useRef(null);
+    var titlesRef = react_1.useRef(null);
+    var itemOffsets = react_1.useRef([0]);
+    var stepCalcOffset = 10;
+    var stickyItemClass = 'stickyTitleItem';
+    var currentTitleParams = {
+        topMargin: 0
+    };
+    var isGroupHasSubTitles = function (groupedItems) { return (groupedItems || []).some(function (item) { return item.titleItemIndex !== null; }); };
+    var hasSubTitles = react_1.useMemo(function () { return !hideSubtitles || isGroupHasSubTitles(items); }, [items, hideSubtitles]);
+    var calcOffsetsToIndex = react_1.useCallback(function (index) {
+        var curItemsLength = itemOffsets.current.length;
+        var prevItemSize = 0;
+        items.slice(curItemsLength - 1, index + 1).forEach(function (listItem, i) {
+            var realIndex = curItemsLength + i - 1;
+            if (i > 0)
+                itemOffsets.current[realIndex] = itemOffsets.current[realIndex - 1] + prevItemSize;
+            prevItemSize = getItemSize(realIndex, listItem.item);
+        });
+    }, [getItemSize, items]);
+    var getTitleByIndex = react_1.useCallback(function (index) { return items[index].titleItemIndex; }, [items]);
+    var getItemByIndex = react_1.useCallback(function (index) { return items[index]; }, [items]);
+    react_1.useEffect(function () {
+        requestAnimationFrame(function () {
+            listRef.current && listRef.current.scrollTo(0);
+        });
+    }, [items.length]);
+    react_1.useEffect(function () {
+        var calcMoveToOffset = function (items) {
+            var indexItem = items.findIndex(function (listItem) { return listItem.item.moveTo; });
+            if (indexItem > -1) {
+                calcOffsetsToIndex(indexItem);
+                var titleIndex = getTitleByIndex(indexItem);
+                return {
+                    offset: itemOffsets.current[indexItem],
+                    titleHeight: getItemSize(titleIndex, getItemByIndex(titleIndex).item)
+                };
+            }
+        };
+        listRef.current && listRef.current.resetAfterIndex(0);
+        setTitleWidth();
+        var scrollToOffset = calcMoveToOffset(items);
+        if (scrollToOffset && scrollToOffset.offset && listRef.current) {
+            var titleHeight_1 = scrollToOffset.titleHeight;
+            var offset_1 = scrollToOffset.offset - titleHeight_1;
+            if (offset_1 < listRef.current.state.scrollOffset || offset_1 > listRef.current.state.scrollOffset + height) {
+                requestAnimationFrame(function () {
+                    listRef.current && listRef.current.scrollTo(offset_1 - (height - titleHeight_1) / 2);
+                });
+            }
+        }
+    }, [calcOffsetsToIndex, getItemByIndex, getItemSize, getTitleByIndex, height, itemOffsets, items, listRef]);
+    var setTitleWidth = function () {
+        if (titlesRef.current && itemsRef.current) {
+            titlesRef.current.style.width = itemsRef.current.offsetWidth + 'px';
+        }
+    };
+    var getNextTitleIndex = function (fromIndex) {
+        return items.findIndex(function (listItem, index) { return isTitleItem(listItem) && fromIndex < index; });
+    };
+    var getItemByOffset = react_1.useCallback(function (scrollOffset) {
+        var result = null;
+        var offset = 0;
+        items.some(function (listItem, index) {
+            calcOffsetsToIndex(index + stepCalcOffset);
+            var nextOffset = itemOffsets.current[index + 1];
+            if (scrollOffset >= offset && scrollOffset < nextOffset)
+                result = {
+                    index: index,
+                    offset: offset,
+                    listItem: listItem
+                };
+            offset = nextOffset;
+            return result;
+        });
+        return result;
+    }, [calcOffsetsToIndex, itemOffsets, items]);
+    var setTitleTopMargin = function (topMargin) {
+        if (titlesRef.current) {
+            currentTitleParams.topMargin = -topMargin;
+            titlesRef.current.style.top = -topMargin + 'px';
+        }
+    };
+    var setTitleByIndex = function (index) {
+        titlesRef.current &&
+            __spreadArray([], titlesRef.current.querySelectorAll('.' + stickyItemClass)).forEach(function (title) {
+                if (title.dataset.index === index.toString()) {
+                    title.style.visibility = 'visible';
+                    currentTitleParams.index = index;
+                }
+                else
+                    title.style.visibility = 'hidden';
+            });
+    };
+    var getOffsetByIndex = function (index) {
+        calcOffsetsToIndex(index);
+        return itemOffsets.current[index];
+    };
+    var onScroll = function (_a) {
+        var scrollOffset = _a.scrollOffset, scrollDirection = _a.scrollDirection;
+        if (!fixedTitle || !hasSubTitles)
+            return;
+        var topItem = getItemByOffset(scrollOffset);
+        var currentTitleIndex = topItem && getTitleByIndex(topItem.index);
+        currentTitleIndex !== null && setTitleByIndex(currentTitleIndex);
+        setTitleWidth();
+        var titleHeight = currentTitleIndex !== null && getItemSize(currentTitleIndex, getItemByIndex(currentTitleIndex).item);
+        var itemAfterTitle = getItemByOffset(scrollOffset + titleHeight + currentTitleParams.topMargin);
+        var topMargin = 0;
+        if (itemAfterTitle) {
+            switch (scrollDirection) {
+                case 'forward':
+                    if (itemAfterTitle.offset - scrollOffset > 0 && isTitleItem(itemAfterTitle.listItem))
+                        topMargin = titleHeight - (itemAfterTitle.offset - scrollOffset);
+                    break;
+                case 'backward':
+                    {
+                        var nextTitleIndex = currentTitleIndex > -1 && getNextTitleIndex(currentTitleIndex);
+                        var nextTitleOffset = getOffsetByIndex(nextTitleIndex);
+                        if (nextTitleIndex > -1 &&
+                            scrollOffset < nextTitleOffset &&
+                            titleHeight >= nextTitleOffset - scrollOffset)
+                            topMargin = titleHeight - (nextTitleOffset - scrollOffset);
+                    }
+                    break;
+            }
+            setTitleTopMargin(topMargin);
+        }
+    };
+    var _getItemSize = react_1.useCallback(function (index) { return getItemSize(index, getItemByIndex(index).item); }, [
+        getItemByIndex,
+        getItemSize
+    ]);
+    var render = react_1.useCallback(function (_a) {
+        var index = _a.index, style = _a.style, data = _a.data;
+        var listItem = getItemByIndex(index);
+        return (listItem.item &&
+            ((isTitleItem(listItem) && renderGroupTitle(style, listItem.item)) ||
+                renderItem(style, listItem.item, index, data)));
+    }, [getItemByIndex, renderGroupTitle, renderItem]);
+    var handleOnItemsRendered = helpers_1.useScrollToFocusItem({ items: items, focusIndex: focusIndex, listRef: listRef }).handleOnItemsRendered;
+    var renderTitles = react_1.useCallback(function () {
+        var renderTitle = function (listItem) { return (react_1.default.createElement("div", { className: stickyItemClass, style: { visibility: 'hidden' }, "data-index": listItem.index, key: listItem.index }, renderGroupTitle({ height: getItemSize(listItem.index, listItem.item) }, listItem.item))); };
+        return items.filter(function (listItem) { return isTitleItem(listItem); }).map(function (listItem) { return renderTitle(listItem); });
+    }, [getItemSize, items, renderGroupTitle]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: titlesRef, className: styles.stickyTitlesWrapper }, fixedTitle && renderTitles()),
+        onInnerContainerResize && itemsRef.current && (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: onInnerContainerResize, targetDomEl: itemsRef.current })),
+        react_1.default.createElement(react_window_1.VariableSizeList, { ref: listRef, itemCount: items.length, itemSize: _getItemSize, width: width, height: height, itemKey: itemKey, innerRef: itemsRef, onScroll: onScroll, style: disableHorizontalScrollbar ? { overflowX: 'hidden' } : undefined, overscanCount: OVERSCAN_COUNT, onItemsRendered: handleOnItemsRendered }, render)));
+};
+VirtualGroupedList.propTypes = {
+    items: prop_types_1.default.arrayOf(prop_types_1.default.object).isRequired,
+    getItemSize: prop_types_1.default.func.isRequired,
+    renderItem: prop_types_1.default.func.isRequired,
+    width: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+    height: prop_types_1.default.number.isRequired,
+    renderGroupTitle: prop_types_1.default.func,
+    fixedTitle: prop_types_1.default.bool,
+    hideSubtitles: prop_types_1.default.bool,
+    itemKey: prop_types_1.default.func,
+    disableHorizontalScrollbar: prop_types_1.default.bool,
+    focusIndex: prop_types_1.default.number,
+    onInnerContainerResize: prop_types_1.default.func
+};
+exports.default = VirtualGroupedList;

package/components/VirtualGroupedList/helpers.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollToFocusItem = exports.flattenGroupedItemsData = exports.SCROLL_COUNT = void 0;
+var ramda_1 = require("ramda");
+var react_1 = require("react");
+exports.SCROLL_COUNT = 3;
+var flattenGroupedItemsData = function (groupedItems) {
+    var getFlattenedItems = function (items) {
+        return ramda_1.flatten(items.map(function (item) { return [item].concat(item.items ? getFlattenedItems(item.items) : []); }));
+    };
+    var titleItemIndex = null;
+    var items = getFlattenedItems(groupedItems).map(function (item, index) {
+        if (item && item.items) {
+            titleItemIndex = index;
+        }
+        return { item: item, index: index, titleItemIndex: titleItemIndex };
+    });
+    return items;
+};
+exports.flattenGroupedItemsData = flattenGroupedItemsData;
+var useScrollToFocusItem = function (_a) {
+    var focusIndex = _a.focusIndex, listRef = _a.listRef, items = _a.items;
+    var visibleStartIndexRef = react_1.useRef(null);
+    var visibleStopIndexRef = react_1.useRef(null);
+    var handleOnItemsRendered = react_1.useCallback(function (_a) {
+        var visibleStartIndex = _a.visibleStartIndex, visibleStopIndex = _a.visibleStopIndex;
+        visibleStartIndexRef.current = visibleStartIndex;
+        visibleStopIndexRef.current = visibleStopIndex;
+    }, []);
+    react_1.useEffect(function () {
+        if (!listRef.current || focusIndex === null || items.length === 0) {
+            return;
+        }
+        if (focusIndex < Math.max(visibleStartIndexRef.current + exports.SCROLL_COUNT, 0)) {
+            listRef.current.scrollToItem(Math.max(focusIndex - exports.SCROLL_COUNT, 0), 'start');
+        }
+        else if (focusIndex > Math.min(visibleStopIndexRef.current - exports.SCROLL_COUNT, items.length - 1)) {
+            listRef.current.scrollToItem(Math.min(focusIndex + exports.SCROLL_COUNT, items.length - 1), 'end');
+        }
+    }, [focusIndex, items.length, listRef]);
+    return { handleOnItemsRendered: handleOnItemsRendered };
+};
+exports.useScrollToFocusItem = useScrollToFocusItem;

package/components/VirtualGroupedList/styles.js

@@ -0,0 +1,17 @@
+"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({
+    stickyTitlesWrapper: {
+        position: 'absolute',
+        top: 0,
+        '& > div': {
+            zIndex: 1,
+            position: 'absolute',
+            top: 0,
+            width: '100%',
+            visibility: 'hidden'
+        }
+    }
+});

package/components/activityLog/ActivityExportButton/ActivityExportButton.js

@@ -0,0 +1,80 @@
+"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 react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
+var Snackbar_1 = __importDefault(require("@material-ui/core/Snackbar"));
+var GetApp_1 = __importDefault(require("@material-ui/icons/GetApp"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var ErrorPopup_1 = __importDefault(require("../../ErrorPopup/ErrorPopup"));
+var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var filters_1 = require("../utils/filters");
+var styles_1 = require("./styles");
+var ActivityExportButton = function (_a) {
+    var filters = _a.filters, _b = _a.exportTypes, exportTypes = _b === void 0 ? [] : _b;
+    var styles = styles_1.useStyles();
+    var dispatch = react_redux_1.useDispatch();
+    var _c = react_1.useState(false), showSnackbar = _c[0], setShowSnackbar = _c[1];
+    var exportPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getExportPath);
+    var handleClickExport = react_1.useCallback(function (type) {
+        var options = {
+            filter: filters_1.buildActivitiesFilterString(filters),
+            fileFormat: type
+        };
+        mdm_sdk_1.exportActivities({ exportPath: exportPath, options: options })
+            .then(function () { return setShowSnackbar(true); })
+            .catch(onError);
+    }, [filters, exportPath]);
+    var onError = function (error) {
+        console.error(error);
+        ErrorPopup_1.default.addError({
+            title: ui_i18n_1.default.text('Error'),
+            message: mdm_sdk_1.getRequestErrorMessage(error, ui_i18n_1.default.text("Can't export activities"))
+        });
+    };
+    var handleOpenAppClick = react_1.useCallback(function () {
+        dispatch(mdm_module_1.ui.actions.openConsoleApp('Export'));
+    }, [dispatch]);
+    var menuItems = react_1.useMemo(function () {
+        return exportTypes.map(function (type) { return ({
+            text: type.toUpperCase(),
+            onClick: function () { return handleClickExport(type); }
+        }); });
+    }, [exportTypes, handleClickExport]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        menuItems.length ? (react_1.default.createElement(DropDownMenuButton_1.default, { buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
+                icon: GetApp_1.default,
+                tooltipTitle: ui_i18n_1.default.text('Export'),
+                size: 'L',
+                className: styles.icon
+            }, menuItems: menuItems, menuId: "export-menu" })) : (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: GetApp_1.default, size: "L", onClick: function () { return handleClickExport(); }, tooltipTitle: ui_i18n_1.default.text('Export'), className: styles.icon })),
+        react_1.default.createElement(Portal_1.default, { container: document.body },
+            react_1.default.createElement(Snackbar_1.default, { open: showSnackbar, autoHideDuration: 5000, className: styles.snackbar, onClose: function () { return setShowSnackbar(false); }, message: ui_i18n_1.default.text('Export operation is currently in progress. You will receive an email notification once completed. Go to Export Application to view the status.'), action: react_1.default.createElement(Button_1.default, { className: styles.exportButton, onClick: handleOpenAppClick }, ui_i18n_1.default.text('Export application')) }))));
+};
+exports.default = ActivityExportButton;

package/components/activityLog/ActivityExportButton/styles.js

@@ -0,0 +1,15 @@
+"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 ({
+    snackbar: {
+        maxWidth: 500
+    },
+    icon: {
+        margin: '4px'
+    },
+    exportButton: {
+        color: theme.palette.primary.main
+    }
+}); });

package/components/activityLog/ActivityFilterEditor/ActivityDateRangeEditor.js

@@ -0,0 +1,85 @@
+"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 moment_1 = __importDefault(require("moment"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var Menu_1 = __importDefault(require("@material-ui/core/Menu"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var DateRangePicker_1 = __importDefault(require("../../DateRangePicker/DateRangePicker"));
+var styles_1 = require("./styles");
+var localeFormat = moment_1.default.localeData().longDateFormat('L');
+var formatValue = function (value, placeholder) {
+    return ramda_1.isNil(value)
+        ? "" + placeholder
+        : "" + mdm_sdk_1.formatDataTypeValue({ dataTypeDefinition: { type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE } }, value);
+};
+var ActivityDateRangeEditor = function (_a) {
+    var values = _a.values, onChange = _a.onChange, onFocus = _a.onFocus;
+    var placeholder = localeFormat;
+    var inputRef = react_1.useRef(null);
+    var _b = react_1.useState(false), open = _b[0], setOpen = _b[1];
+    var styles = styles_1.useStyles();
+    var onApply = function (values) {
+        onChange(values);
+        setOpen(false);
+    };
+    var handleToggle = react_1.useCallback(function () {
+        setOpen(function (open) { return !open; });
+        onFocus();
+    }, [onFocus]);
+    var onCancel = function () {
+        setOpen(false);
+    };
+    return (react_1.default.createElement("div", { className: styles.dateRangeRoot },
+        react_1.default.createElement(TextField_1.default, { fullWidth: true, value: values.map(function (value) { return formatValue(value, placeholder); }).join(' \u2014 '), onClick: handleToggle, variant: "filled", margin: "dense", ref: inputRef, InputProps: {
+                endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: { classes: styles, menuIsOpen: open }, innerProps: {} })),
+                disableUnderline: ramda_1.isNil(values),
+                readOnly: true,
+                classes: {
+                    root: styles.labels
+                }
+            }, InputLabelProps: {
+                shrink: false
+            }, placeholder: ui_i18n_1.default.text(placeholder + " \u2014 " + placeholder) }),
+        react_1.default.createElement(Menu_1.default, { variant: "menu", open: open, autoFocus: false, classes: { paper: styles.paper }, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left'
+            }, elevation: 2, getContentAnchorEl: null, MenuListProps: {
+                autoFocusItem: open,
+                style: { width: '100%' }
+            } },
+            react_1.default.createElement(DateRangePicker_1.default
+            // @ts-ignore
+            , { 
+                // @ts-ignore
+                values: values, onCancel: onCancel, onApply: onApply, type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE }))));
+};
+exports.default = ActivityDateRangeEditor;

package/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.js

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var types_1 = require("../types");
+var getSelectorActivityTypes_1 = require("./utils/getSelectorActivityTypes");
+var ActivitySelector_1 = __importDefault(require("./ActivitySelector"));
+var AttributeSelector_1 = __importDefault(require("./AttributeSelector"));
+var SourceSelector_1 = __importDefault(require("./SourceSelector"));
+var UserSelector_1 = __importDefault(require("./UserSelector"));
+var DateRangeSelector_1 = __importDefault(require("./DateRangeSelector"));
+var hooks_1 = require("../../../hooks");
+var styles_1 = require("./styles");
+var ActivityFilterEditor = function (_a) {
+    var value = _a.value, open = _a.open, entityType = _a.entityType, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
+    var styles = styles_1.useStyles();
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var _b = react_1.useState(value), currentValue = _b[0], setCurrentValue = _b[1];
+    var handleDateRangeChange = function (value) {
+        setCurrentValue(function (filterValue) { return (__assign(__assign({}, filterValue), { dateRange: value })); });
+    };
+    var handleActivityChange = function (activities) {
+        setCurrentValue(function (filterValue) { return (__assign(__assign({}, filterValue), { activities: activities })); });
+    };
+    var handleUserChange = function (users) {
+        setCurrentValue(function (filterValue) { return (__assign(__assign({}, filterValue), { users: users })); });
+    };
+    var handleAttributeChange = function (attributes) {
+        setCurrentValue(function (filterValue) { return (__assign(__assign({}, filterValue), { attributes: attributes })); });
+    };
+    var handleSourceChange = function (sources) {
+        setCurrentValue(function (filterValue) { return (__assign(__assign({}, filterValue), { sources: sources })); });
+    };
+    hooks_1.useDidUpdateEffect(function () {
+        setCurrentValue(value);
+    }, [value]);
+    var activities = currentValue.activities, attributes = currentValue.attributes, sources = currentValue.sources, dateRange = currentValue.dateRange, users = currentValue.users;
+    var hasEntityChanged = activities.includes(types_1.ActivityTypes.ENTITY_CHANGED);
+    var ActivityFilterRenderer = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ActivitySelector_1.default, { activityTypes: getSelectorActivityTypes_1.getSelectorActivityTypes(metadata, entityType), selectedActivityTypes: activities, onChange: handleActivityChange }),
+        hasEntityChanged && entityType && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handleAttributeChange }),
+            react_1.default.createElement(SourceSelector_1.default, { selectedSources: sources, onChange: handleSourceChange }))),
+        react_1.default.createElement(DateRangeSelector_1.default, { value: dateRange, onChange: handleDateRangeChange }),
+        react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handleUserChange }),
+        react_1.default.createElement("div", { className: classnames_1.default(styles.borderBottom, styles.filterControls) },
+            react_1.default.createElement(Button_1.default, { onClick: onClear, className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
+            react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
+            react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return onApply(currentValue); } }, ui_i18n_1.default.text('Apply')))));
+    return open && react_1.default.createElement("div", { className: styles.container }, ActivityFilterRenderer);
+};
+exports.default = ActivityFilterEditor;

package/components/activityLog/ActivityFilterEditor/ActivitySelector.js

@@ -0,0 +1,30 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var activities_1 = require("../utils/activities");
+var styles_1 = require("./styles");
+var ActivitySelector = function (_a) {
+    var activityTypes = _a.activityTypes, selectedActivityTypes = _a.selectedActivityTypes, onChange = _a.onChange;
+    var styles = styles_1.useStyles();
+    var valueToOption = function (value) { return ({ value: value, label: activities_1.getActivityLabel(value) }); };
+    var prepareValues = function (values) { return values.map(valueToOption); };
+    var options = ramda_1.pipe(ramda_1.sortBy(function (option) { return activities_1.getActivityLabel(option); }), prepareValues)(activityTypes);
+    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('Activity')),
+        react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedActivityTypes), onChange: ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('value'), onChange), options: options, TextFieldProps: {
+                InputProps: { disableUnderline: true },
+                classes: { root: styles.dropDownInput }
+            }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton_1.default
+            }, styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom" })));
+};
+exports.default = ActivitySelector;