@reltio/components 1.4.701 → 1.4.702

package/components/BasicTableView/BasicTable/hooks/useCollapsibleTableRows.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var dataHelpers_1 = require("../helpers/dataHelpers");
+var hooks_1 = require("../../../../hooks");
+var useCollapsibleTableRows = function (_a) {
+    var rowsData = _a.rowsData, columnsData = _a.columnsData, renderRowCell = _a.renderRowCell, getRowCellHeight = _a.getRowCellHeight, maxRowValuesCount = _a.maxRowValuesCount;
+    var _b = react_1.useState([]), expandedIndexes = _b[0], setExpandedIndexes = _b[1];
+    var getRowMaxValuesCount = react_1.useCallback(function (rowIndex) {
+        return expandedIndexes.includes(rowIndex) ? Infinity : maxRowValuesCount;
+    }, [expandedIndexes, maxRowValuesCount]);
+    var tableRowsData = react_1.useMemo(function () { return dataHelpers_1.getTableRowsData(rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount); }, [rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount]);
+    var toggleRowCollapse = react_1.useCallback(function (rowIndex) {
+        setExpandedIndexes(function (expandedIndexes) {
+            var index = expandedIndexes.findIndex(ramda_1.equals(rowIndex));
+            return index === -1 ? expandedIndexes.concat(rowIndex) : ramda_1.remove(index, 1, expandedIndexes);
+        });
+    }, []);
+    var getIsRowCollapsible = react_1.useCallback(function (rowValue) {
+        return dataHelpers_1.getMaxRowValuesCount(columnsData, rowValue) > maxRowValuesCount;
+    }, [maxRowValuesCount, columnsData]);
+    var getIsRowCollapsed = react_1.useCallback(function (rowIndex) {
+        return !expandedIndexes.includes(rowIndex);
+    }, [expandedIndexes]);
+    var collapseContextValue = react_1.useMemo(function () { return ({
+        toggleRowCollapse: toggleRowCollapse,
+        getIsRowCollapsible: getIsRowCollapsible,
+        getIsRowCollapsed: getIsRowCollapsed
+    }); }, [toggleRowCollapse, getIsRowCollapsible, getIsRowCollapsed]);
+    var prevRowsData = hooks_1.usePrevious(rowsData);
+    hooks_1.useDidUpdateEffect(function () {
+        if (expandedIndexes.length > 0) {
+            setExpandedIndexes(ramda_1.filter(function (index) {
+                var rowValue = rowsData[index] || {};
+                var prevRowValue = prevRowsData[index] || {};
+                return rowValue.rawValue === prevRowValue.rawValue && getIsRowCollapsible(rowValue);
+            }));
+        }
+    }, [rowsData]);
+    return { tableRowsData: tableRowsData, collapseContextValue: collapseContextValue };
+};
+exports.default = useCollapsibleTableRows;

package/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.js

@@ -0,0 +1,37 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var getRowCellKey = function (_a) {
+    var rowIndex = _a.rowIndex, id = _a.columnData.id, cellIndex = _a.cellIndex;
+    return id + "[" + rowIndex + "][" + cellIndex + "]";
+};
+var useDynamicRowCellHeight = function () {
+    var _a = react_1.useState({}), rowCellHeightsMap = _a[0], setRowCellHeightsMap = _a[1];
+    var rowCellHeightsMapCache = react_1.useRef({});
+    var batchHeightUpdate = function (key, value) {
+        rowCellHeightsMapCache.current[key] = value;
+    };
+    var flushHeightUpdates = react_1.useCallback(mdm_sdk_1.debounce(function () {
+        setRowCellHeightsMap(__assign({}, rowCellHeightsMapCache.current));
+    }), []);
+    var clearHeightsCache = react_1.useCallback(function () {
+        rowCellHeightsMapCache.current = {};
+    }, []);
+    var getDynamicRowCellHeight = react_1.useCallback(ramda_1.pipe(getRowCellKey, ramda_1.prop(ramda_1.__, rowCellHeightsMap)), [rowCellHeightsMap]);
+    var changeRowCellHeight = react_1.useCallback(ramda_1.curry(ramda_1.useWith(ramda_1.pipe(batchHeightUpdate, flushHeightUpdates), [getRowCellKey, ramda_1.identity])), []);
+    return { getDynamicRowCellHeight: getDynamicRowCellHeight, changeRowCellHeight: changeRowCellHeight, clearHeightsCache: clearHeightsCache };
+};
+exports.default = useDynamicRowCellHeight;

package/components/BasicTableView/BasicTableHeader/ColumnsSettings/ColumnListItem.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 prop_types_1 = __importDefault(require("prop-types"));
+var AttributeListItem_1 = __importDefault(require("../../../AttributeListItem/AttributeListItem"));
+var Highlighter_1 = __importDefault(require("../../../Highlighter/Highlighter"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var ColumnListItem = function (_a) {
+    var _b;
+    var item = _a.item, onClick = _a.onClick, checked = _a.checked, level = _a.level, style = _a.style, isFocused = _a.isFocused, isGroupItem = _a.isGroupItem;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(AttributeListItem_1.default, { key: item.id, onClick: onClick, checked: checked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.default, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: isGroupItem, className: classnames_1.default((_b = {}, _b[styles.groupItem] = isGroupItem, _b)) }));
+};
+ColumnListItem.propTypes = {
+    item: prop_types_1.default.shape({
+        label: prop_types_1.default.string,
+        filterText: prop_types_1.default.string
+    }),
+    level: prop_types_1.default.number,
+    onClick: prop_types_1.default.func,
+    checked: prop_types_1.default.bool,
+    style: prop_types_1.default.object,
+    isGroupItem: prop_types_1.default.bool,
+    isFocused: prop_types_1.default.bool
+};
+exports.default = ColumnListItem;

package/components/BasicTableView/BasicTableHeader/ColumnsSettings/ColumnsSettings.js

@@ -0,0 +1,91 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var constants_1 = require("../../../../constants");
+var Table_1 = __importDefault(require("../../../../icons/Table"));
+var ramda_1 = require("ramda");
+var columnHelpers_1 = require("./columnHelpers");
+var SmallIconButton_1 = require("../../../SmallIconButton");
+var SelectionPopup_1 = __importDefault(require("../../../SelectionPopup/SelectionPopup"));
+var VirtualGroupedList_1 = __importDefault(require("../../../VirtualGroupedList/VirtualGroupedList"));
+var helpers_1 = require("../../../SelectionPopup/helpers");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var helpers_2 = require("../../../VirtualGroupedList/helpers");
+var ColumnListItem_1 = __importDefault(require("./ColumnListItem"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var ITEM_HEIGHT = 32;
+var MAX_LIST_CONTAINER_HEIGHT = 300;
+var DEFAULT_MIN_CONTAINER_WIDTH = 308;
+var CONTAINER_HEADER_HEIGHT = 108;
+var MIN_CONTAINER_HEIGHT = 140;
+var ColumnsSettings = function (_a) {
+    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle;
+    var styles = styles_1.useStyles();
+    var _b = react_1.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
+    var closePopup = function () { return setAnchorEl(null); };
+    var _c = react_1.useState(''), filterText = _c[0], setFilterText = _c[1];
+    var clearFilter = function () { return setFilterText(''); };
+    var groupedItems = react_1.useMemo(function () { return columnHelpers_1.buildColumnItems(columnsData, filterText); }, [columnsData, filterText]);
+    var containerWidth = mdm_sdk_1.getMaxItemWidth('label')(groupedItems) || DEFAULT_MIN_CONTAINER_WIDTH;
+    var items = react_1.useMemo(function () { return helpers_2.flattenGroupedItemsData(groupedItems); }, [groupedItems]);
+    var handleColumnClick = react_1.useCallback(function (column) {
+        var changedColumns = ramda_1.pipe(columnHelpers_1.getChildColumns, ramda_1.pluck('id'))(column);
+        var wasSelected = columnHelpers_1.isColumnSelected(selectedColumns, column);
+        onChangeColumns(wasSelected
+            ? ramda_1.difference(selectedColumns, changedColumns)
+            : ramda_1.uniq(ramda_1.concat(selectedColumns, changedColumns)));
+    }, [selectedColumns, onChangeColumns]);
+    var handleSearchOnEnter = react_1.useCallback(function (_a) {
+        var item = _a.item;
+        return handleColumnClick(item);
+    }, [handleColumnClick]);
+    var _d = helpers_1.useKeyboardNavigation({
+        items: items,
+        open: open,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedColumns
+    }), focusIndex = _d.focusIndex, handleKeyDown = _d.handleKeyDown;
+    var renderColumnItem = function (style, _a, index) {
+        var item = _a.item, _b = _a.level, level = _b === void 0 ? 0 : _b;
+        return (react_1.default.createElement(ColumnListItem_1.default, { style: style, item: item, level: level, isFocused: focusIndex === index, checked: columnHelpers_1.isColumnSelected(selectedColumns, item), isGroupItem: columnHelpers_1.isGroupColumn(item), onClick: handleColumnClick }));
+    };
+    var listHeight = Math.min(MAX_LIST_CONTAINER_HEIGHT, ITEM_HEIGHT * items.length);
+    var containerHeight = Math.max(MIN_CONTAINER_HEIGHT, listHeight + CONTAINER_HEADER_HEIGHT);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Show/hide columns'), size: "L", icon: Table_1.default, onClick: openPopup }),
+        react_1.default.createElement(SelectionPopup_1.default, { className: styles.popup, open: !!anchorEl, anchorEl: anchorEl, onClose: ramda_1.pipe(closePopup, clearFilter), onSearch: setFilterText, title: title || ui_i18n_1.default.text('Show/hide columns'), containerWidth: containerWidth, containerHeight: containerHeight, searchInputOnKeyDown: handleKeyDown },
+            react_1.default.createElement(VirtualGroupedList_1.default, { fixedTitle: false, height: listHeight, renderItem: renderColumnItem, items: items, getItemSize: function () { return ITEM_HEIGHT; }, containerWidth: containerWidth, focusIndex: focusIndex }))));
+};
+ColumnsSettings.propTypes = {
+    columnsData: constants_1.ColumnsDataType,
+    selectedColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    onChangeColumns: prop_types_1.default.func,
+    title: prop_types_1.default.string,
+    tooltipTitle: prop_types_1.default.string
+};
+exports.default = ColumnsSettings;

package/components/BasicTableView/BasicTableHeader/ColumnsSettings/columnHelpers.js

@@ -0,0 +1,86 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isColumnSelected = exports.isGroupColumn = exports.getChildColumns = exports.buildColumnItems = void 0;
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var isGroupColumn = function (column) { return column.id === column.groupId; };
+exports.isGroupColumn = isGroupColumn;
+var isParentToColumn = ramda_1.curry(function (_a, parent) {
+    var id = _a.id, groupId = _a.groupId;
+    return parent.groupId === groupId && (id === parent.id || id.startsWith(parent.id + "."));
+});
+var isGroupToColumn = ramda_1.curry(function (_a, group) {
+    var groupId = _a.groupId;
+    return groupId === group.id;
+});
+var isHideableColumn = ramda_1.propOr(true, 'hideable');
+var getColumnRoot = function (columns, column) { return columns.find(ramda_1.either(isGroupToColumn(column), isParentToColumn(column))); };
+var addColumn = function (columns, column) {
+    var root = getColumnRoot(columns, column);
+    if (root) {
+        root.children = addColumn(root.children || [], column);
+        return columns;
+    }
+    else {
+        return columns.concat(column);
+    }
+};
+var filterColumnsByLabel = ramda_1.curry(function (filterText, column) {
+    return mdm_sdk_1.utils.strings.search(column.label, filterText) || (column.children || []).some(filterColumnsByLabel(filterText));
+});
+var buildColumnsTrees = ramda_1.reduce(function (acc, columnData) {
+    return addColumn(acc, {
+        id: columnData.id,
+        groupId: columnData.groupId,
+        label: columnData.label,
+        attrType: columnData.dataTypeDefinition
+    });
+}, []);
+var buildFilteredColumnItems = ramda_1.curry(function (filterText, columns, level) {
+    if (level === void 0) { level = 0; }
+    return ramda_1.pipe(ramda_1.filter(filterColumnsByLabel(filterText)), ramda_1.chain(function (column) {
+        var item = {
+            item: __assign(__assign({}, column), { filterText: filterText }),
+            level: level
+        };
+        var childrenItems = column.children
+            ? buildFilteredColumnItems(filterText, column.children, level + 1)
+            : [];
+        return __spreadArray([item], childrenItems);
+    }))(columns);
+});
+var isGroupedColumnsData = ramda_1.has('columns');
+var flattenGroupedColumnsData = function (_a) {
+    var id = _a.id, label = _a.label, columns = _a.columns;
+    return __spreadArray([
+        { id: id, groupId: id, label: label }
+    ], columns.map(ramda_1.assoc('groupId', id)));
+};
+var buildColumnItems = function (columnsData, filterText) {
+    return ramda_1.pipe(ramda_1.chain(ramda_1.when(isGroupedColumnsData, flattenGroupedColumnsData)), ramda_1.filter(ramda_1.either(isGroupColumn, isHideableColumn)), buildColumnsTrees, buildFilteredColumnItems(filterText))(columnsData);
+};
+exports.buildColumnItems = buildColumnItems;
+var getChildColumns = function (column) { return (column.children ? ramda_1.chain(getChildColumns, column.children) : [column]); };
+exports.getChildColumns = getChildColumns;
+var isColumnSelected = function (selectedColumns, column) {
+    var childColumns = getChildColumns(column);
+    var isColumnSelected = function (column) { return selectedColumns.includes(column.id); };
+    return isGroupColumn(column) ? childColumns.every(isColumnSelected) : childColumns.some(isColumnSelected);
+};
+exports.isColumnSelected = isColumnSelected;

package/components/BasicTableView/BasicTableHeader/ColumnsSettings/styles.js

@@ -0,0 +1,12 @@
+"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({
+    popup: {
+        minWidth: '200px'
+    },
+    groupItem: {
+        backgroundColor: 'rgba(0,0,0,0.04)'
+    }
+});

package/components/BasicTableView/BasicTableHeader/FilterButton/FilterButton.js

@@ -0,0 +1,26 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var IconButton_1 = __importDefault(require("@material-ui/core/IconButton"));
+var Close_1 = __importDefault(require("@material-ui/icons/Close"));
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Filter_1 = __importDefault(require("../../../../icons/Filter"));
+var styles_1 = require("./styles");
+var FilterButton = function (_a) {
+    var enabled = _a.enabled, onClick = _a.onClick;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Tooltip_1.default, { title: enabled ? ui_i18n_1.default.text('Clear all filters') : ui_i18n_1.default.text('Filter') },
+        react_1.default.createElement(IconButton_1.default, { onClick: onClick, classes: { root: styles.button } }, enabled ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Filter_1.default, { className: styles['filterIcon--enabled'] }),
+            react_1.default.createElement(Close_1.default, { color: "primary", className: styles.closeIcon }))) : (react_1.default.createElement(Filter_1.default, null)))));
+};
+FilterButton.propTypes = {
+    enabled: prop_types_1.default.bool,
+    onClick: prop_types_1.default.func
+};
+exports.default = FilterButton;

package/components/BasicTableView/BasicTableHeader/FilterButton/styles.js

@@ -0,0 +1,18 @@
+"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 ({
+    'filterIcon--enabled': {
+        color: theme.palette.primary.main
+    },
+    closeIcon: {
+        position: 'absolute',
+        right: '3px',
+        bottom: '3px',
+        transform: 'scale(0.5)'
+    },
+    button: {
+        padding: '11px'
+    }
+}); });

package/components/BasicTableView/BasicTablePagination/BasicTablePagination.js

@@ -0,0 +1,80 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var TablePagination_1 = __importDefault(require("@material-ui/core/TablePagination"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var utils_1 = require("../../../core/utils");
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var BasicTablePagination = function (_a) {
+    var _b = _a.classes, classes = _b === void 0 ? {} : _b, count = _a.count, rowsPerPageOptions = _a.rowsPerPageOptions, page = _a.page, onChangePage = _a.onChangePage, rowsPerPage = _a.rowsPerPage, onChangeRowsPerPage = _a.onChangeRowsPerPage, basicTableRef = _a.basicTableRef, labelRowsPerPage = _a.labelRowsPerPage;
+    var labelDisplayedRows = function (_a) {
+        var from = _a.from, to = _a.to, count = _a.count;
+        return ui_i18n_1.default.text('${fromRow}-${toRow} of ${countRows}', {
+            fromRow: ui_i18n_1.default.number(from, '0,0'),
+            toRow: ui_i18n_1.default.number(to, '0,0'),
+            countRows: ui_i18n_1.default.number(count, '0,0')
+        });
+    };
+    var styles = styles_1.useStyles();
+    var resetScrollbarPosition = react_1.useCallback(function () {
+        ramda_1.pathOr(ramda_1.identity, ['current', 'resetScrollbarPosition'], basicTableRef)();
+    }, [basicTableRef]);
+    var handleChangePage = react_1.useCallback(function (value) {
+        onChangePage(value);
+        resetScrollbarPosition();
+    }, [onChangePage, resetScrollbarPosition]);
+    var handleChangeRowsPerPage = react_1.useCallback(function (value) {
+        onChangePage(0);
+        onChangeRowsPerPage(value);
+        resetScrollbarPosition();
+    }, [onChangePage, onChangeRowsPerPage, resetScrollbarPosition]);
+    return (react_1.default.createElement(TablePagination_1.default, { classes: __assign(__assign({}, classes), { root: classnames_1.default(styles.pagination, classes.root), select: classnames_1.default(styles.select, classes.select), caption: styles.caption, selectRoot: styles.selectRoot, actions: styles.actions }), component: "div", labelRowsPerPage: labelRowsPerPage || ui_i18n_1.default.text('Rows per page:'), labelDisplayedRows: labelDisplayedRows, count: count, rowsPerPageOptions: rowsPerPageOptions, page: page, onChangePage: ramda_1.pipe(ramda_1.nthArg(1), handleChangePage), rowsPerPage: rowsPerPage, onChangeRowsPerPage: ramda_1.pipe(utils_1.getValue, handleChangeRowsPerPage) }));
+};
+BasicTablePagination.propTypes = {
+    classes: prop_types_1.default.object,
+    rowsPerPageOptions: prop_types_1.default.arrayOf(prop_types_1.default.number),
+    count: prop_types_1.default.number,
+    page: prop_types_1.default.number,
+    onChangePage: prop_types_1.default.func,
+    rowsPerPage: prop_types_1.default.number,
+    onChangeRowsPerPage: prop_types_1.default.func,
+    basicTableRef: prop_types_1.default.shape({ current: prop_types_1.default.object }),
+    labelRowsPerPage: prop_types_1.default.string
+};
+exports.default = react_1.default.memo(BasicTablePagination);

package/components/BasicTableView/BasicTablePagination/styles.js

@@ -0,0 +1,32 @@
+"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({
+    pagination: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        height: '56px',
+        borderTop: '1px solid rgba(0,0,0,0.12)',
+        boxShadow: 'none'
+    },
+    caption: {
+        color: 'rgba(0,0,0,0.6)',
+        fontSize: '12px',
+        lineHeight: '16px'
+    },
+    selectRoot: {
+        marginLeft: '5px',
+        marginRight: '36px'
+    },
+    select: {
+        color: 'rgba(0,0,0,0.6)',
+        fontSize: '12px',
+        lineHeight: '16px',
+        textAlign: 'right'
+    },
+    actions: {
+        marginLeft: '32px'
+    }
+});

package/components/BasicTableView/CollapseRowButton/CollapseRowButton.js

@@ -0,0 +1,48 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var RowCollapseContext_1 = require("../BasicTable/contexts/RowCollapseContext");
+var CollapseButton_1 = __importDefault(require("../../CollapseButton/CollapseButton"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var CollapseRowButton = function (_a) {
+    var _b;
+    var rowIndex = _a.rowIndex, rowValue = _a.rowValue, className = _a.className;
+    var styles = styles_1.useStyles();
+    var _c = react_1.useContext(RowCollapseContext_1.RowCollapseContext), toggleRowCollapse = _c.toggleRowCollapse, getIsRowCollapsible = _c.getIsRowCollapsible, getIsRowCollapsed = _c.getIsRowCollapsed;
+    var isCollapsibleRow = getIsRowCollapsible(rowValue);
+    var isCollapsedRow = getIsRowCollapsed(rowIndex);
+    return (react_1.default.createElement(CollapseButton_1.default, { className: classnames_1.default(className, (_b = {}, _b[styles.hidden] = !isCollapsibleRow, _b)), isOpen: !isCollapsedRow, onClick: function (e) {
+            toggleRowCollapse(rowIndex);
+            e.stopPropagation();
+        } }));
+};
+CollapseRowButton.propTypes = {
+    rowIndex: prop_types_1.default.number,
+    rowValue: prop_types_1.default.object,
+    className: prop_types_1.default.string
+};
+exports.default = CollapseRowButton;

package/components/BasicTableView/CollapseRowButton/styles.js

@@ -0,0 +1,9 @@
+"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 ({
+    hidden: {
+        visibility: 'hidden'
+    }
+}); });

package/components/BasicTableView/ColumnFilter/ColumnFilter.js

@@ -0,0 +1,113 @@
+"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 ArrowDropDown_1 = __importDefault(require("@material-ui/icons/ArrowDropDown"));
+var FilterChip_1 = __importDefault(require("./FilterChip/FilterChip"));
+var FilterEditor_1 = __importDefault(require("../../editors/FilterEditor/FilterEditor"));
+var IconButton_1 = __importDefault(require("@material-ui/core/IconButton"));
+var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var constants_1 = require("../../../constants");
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var helpers_1 = require("./helpers");
+var ColumnFilter = function (_a) {
+    var columnId = _a.columnId, dataTypeDefinition = _a.dataTypeDefinition, filter = _a.filter, filterOptionsData = _a.filterOptionsData, onFilter = _a.onFilter;
+    var styles = styles_1.useStyles();
+    var _b = react_1.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var openFilterPopup = function (event) { return setAnchorEl(event.currentTarget); };
+    var closeFilterPopup = function () { return setAnchorEl(null); };
+    var _c = react_1.useState(filter), columnFilter = _c[0], setColumnFilter = _c[1];
+    var initColumnFilter = function () { return setColumnFilter(filter); };
+    var containerRef = react_1.useRef(null);
+    var mdmFilter = helpers_1.columnFilterToMdmFilter({ id: columnId, dataTypeDefinition: dataTypeDefinition }, columnFilter);
+    var applyFilterChange = function (newFilter) {
+        if (newFilter !== filter) {
+            onFilter({ columnId: columnId, filter: newFilter });
+        }
+    };
+    var clearFilter = function () { return applyFilterChange(); };
+    var applyChangesAndClose = function () {
+        var isValidFilter = mdm_sdk_1.validateFilter(mdmFilter);
+        isValidFilter ? applyFilterChange(columnFilter) : clearFilter();
+        closeFilterPopup();
+    };
+    var handleValueEditorKeyPress = function (event) {
+        if (event.key !== 'Enter')
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        applyChangesAndClose();
+    };
+    var getFilterOptionData = function (filterOption) {
+        return filterOptionsData && filterOptionsData.find(ramda_1.propEq('value', filterOption));
+    };
+    var getFilterLabel = function (filterOption) {
+        return ramda_1.pipe(getFilterOptionData, ramda_1.prop('label'), ramda_1.defaultTo(mdm_sdk_1.getFilterOptionLabel(filterOption)))(filterOption);
+    };
+    var getFilterDataTypeDefinition = function (filterOption) {
+        return ramda_1.pipe(getFilterOptionData, ramda_1.prop('dataTypeDefinition'), ramda_1.defaultTo(mdm_sdk_1.getDataTypeDefinitionForFilterValue(dataTypeDefinition, filterOption)))(filterOption);
+    };
+    var filterOptions = mdm_sdk_1.Maybe.fromNull(filterOptionsData)
+        .map(ramda_1.pluck('value'))
+        .orSome(mdm_sdk_1.getFilterOptionsForDataTypeDefinition(dataTypeDefinition))
+        .map(function (value) { return ({
+        value: value,
+        label: getFilterLabel(value)
+    }); });
+    return (react_1.default.createElement("div", { ref: containerRef, className: styles.columnFilter },
+        filter && (react_1.default.createElement(FilterChip_1.default, { filterValue: filter.value, filterOption: filterOptions.find(ramda_1.propEq('value', filter.filter)), onDelete: clearFilter, dataTypeDefinition: getFilterDataTypeDefinition(filter.filter) })),
+        react_1.default.createElement(IconButton_1.default, { className: styles.dropDownButton, onClick: openFilterPopup, disableFocusRipple: true },
+            react_1.default.createElement(ArrowDropDown_1.default, null)),
+        react_1.default.createElement(Popover_1.default, { PaperProps: {
+                style: {
+                    width: (containerRef.current ? containerRef.current.getBoundingClientRect().width : 0) + "px"
+                }
+            }, open: !!anchorEl, anchorEl: anchorEl, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            }, classes: { paper: styles.filterMenu }, onEnter: initColumnFilter, onClose: applyChangesAndClose },
+            react_1.default.createElement(FilterEditor_1.default, { classes: { option: styles['filter-editor__option'] }, value: mdmFilter, onChange: ramda_1.pipe(helpers_1.mdmFilterToColumnFilter, setColumnFilter), filterOptions: filterOptions, dataTypeDefinition: getFilterDataTypeDefinition(mdmFilter.filter), valueEditorProps: {
+                    TextFieldProps: {
+                        onKeyPress: handleValueEditorKeyPress
+                    }
+                } }))));
+};
+ColumnFilter.propTypes = {
+    columnId: prop_types_1.default.string,
+    dataTypeDefinition: prop_types_1.default.object,
+    filter: constants_1.ColumnFilterType,
+    onFilter: prop_types_1.default.func,
+    filterOptionsData: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        value: prop_types_1.default.string,
+        label: prop_types_1.default.string,
+        dataTypeDefinition: prop_types_1.default.object
+    }))
+};
+exports.default = ColumnFilter;