@reltio/components 1.4.877 → 1.4.881

package/cjs/components/BasicTableView/BasicTable/helpers/defaultRenderRowCell.js

@@ -0,0 +1,33 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 defaultRenderRowCell = function (_a) {
+    var cell = _a.cell, CellValueRenderer = _a.CellValueRenderer, otherProps = __rest(_a, ["cell", "CellValueRenderer"]);
+    return cell.values.map(function (value, index) { return react_1.default.createElement(CellValueRenderer, __assign({ key: index, value: value }, otherProps)); });
+};
+exports.default = defaultRenderRowCell;

package/cjs/components/BasicTableView/BasicTable/helpers/nestedHelpers.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 __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.getNestedKeyForNestedColumnCell = exports.getParentRowKeyBySiblingsSubRowsKey = exports.getSiblingSubRowsKeyBySubRowKey = exports.flattenNestedColumnValues = exports.TOTAL_ROW_SPAN_KEY = exports.calcRowSpansForNestedKeys = void 0;
+var ramda_1 = require("ramda");
+var TOTAL_ROW_SPAN_KEY = 'total';
+exports.TOTAL_ROW_SPAN_KEY = TOTAL_ROW_SPAN_KEY;
+var NESTED_KEY_DELIMITER = '.';
+var getSiblingSubRowsKeyBySubRowKey = ramda_1.pipe(ramda_1.split(NESTED_KEY_DELIMITER), ramda_1.dropLast(1), ramda_1.join(NESTED_KEY_DELIMITER));
+exports.getSiblingSubRowsKeyBySubRowKey = getSiblingSubRowsKeyBySubRowKey;
+var getParentRowKeyBySiblingsSubRowsKey = ramda_1.pipe(ramda_1.split(NESTED_KEY_DELIMITER), ramda_1.dropLast(1), ramda_1.join(NESTED_KEY_DELIMITER), ramda_1.unless(ramda_1.length, ramda_1.always(TOTAL_ROW_SPAN_KEY)));
+exports.getParentRowKeyBySiblingsSubRowsKey = getParentRowKeyBySiblingsSubRowsKey;
+var getParentRowKeyBySubRowKey = ramda_1.pipe(getSiblingSubRowsKeyBySubRowKey, getParentRowKeyBySiblingsSubRowsKey);
+var countParentSpanByAllSubRows = function (rowSpanData, siblingSubRowsKey) {
+    return ramda_1.pipe(ramda_1.pickBy(function (_val, key) { return getSiblingSubRowsKeyBySubRowKey(key) === siblingSubRowsKey; }), ramda_1.values, ramda_1.sum)(rowSpanData);
+};
+var calcParentRowSpan = function (rowSpanData, subRowKey) {
+    var parentKey = getParentRowKeyBySubRowKey(subRowKey);
+    var currentParentSpan = ramda_1.propOr(0, parentKey, rowSpanData);
+    var actualParentSpan = countParentSpanByAllSubRows(rowSpanData, getSiblingSubRowsKeyBySubRowKey(subRowKey));
+    if (actualParentSpan > currentParentSpan) {
+        var nextRowSpanData = ramda_1.assoc(parentKey, actualParentSpan, rowSpanData);
+        return parentKey === TOTAL_ROW_SPAN_KEY ? nextRowSpanData : calcParentRowSpan(nextRowSpanData, parentKey);
+    }
+    else {
+        return rowSpanData;
+    }
+};
+var addNestedKey = function (rowSpanData, nestedKey) {
+    var _a;
+    return calcParentRowSpan(__assign(__assign({}, rowSpanData), (_a = {}, _a[nestedKey] = 1, _a)), nestedKey);
+};
+var validateParentRowSpan = function (rowSpanData, _a) {
+    var siblingSubRowsKey = _a[0], subRowsKeys = _a[1];
+    var parentKey = getParentRowKeyBySiblingsSubRowsKey(siblingSubRowsKey);
+    var currentParentSpan = ramda_1.propOr(0, parentKey, rowSpanData);
+    var actualParentSpan = countParentSpanByAllSubRows(rowSpanData, siblingSubRowsKey);
+    var spanDiff = currentParentSpan - actualParentSpan;
+    if (spanDiff > 0) {
+        var lowestSubRowKey = "" + siblingSubRowsKey + NESTED_KEY_DELIMITER + (subRowsKeys.length - 1);
+        var lowestSubRowSpan = rowSpanData[lowestSubRowKey];
+        return ramda_1.assoc(lowestSubRowKey, lowestSubRowSpan + spanDiff, rowSpanData);
+    }
+    else {
+        return rowSpanData;
+    }
+};
+var validateRowSpanData = function (rowSpanData) {
+    return ramda_1.pipe(ramda_1.omit([TOTAL_ROW_SPAN_KEY]), ramda_1.keys, ramda_1.groupBy(getSiblingSubRowsKeyBySubRowKey), ramda_1.toPairs, ramda_1.reduce(validateParentRowSpan, rowSpanData))(rowSpanData);
+};
+var calcRowSpansForNestedKeys = ramda_1.pipe(ramda_1.reduce(addNestedKey, {}), validateRowSpanData);
+exports.calcRowSpansForNestedKeys = calcRowSpansForNestedKeys;
+var chainWithIndex = ramda_1.addIndex(ramda_1.chain);
+var flattenNestedColumnValues = function (values, indexPath) {
+    if (indexPath === void 0) { indexPath = []; }
+    var head = values[0];
+    return Array.isArray(head)
+        ? chainWithIndex(function (value, index) { return flattenNestedColumnValues(value, __spreadArray(__spreadArray([], indexPath), [index])); }, values)
+        : { indexPath: indexPath, values: values };
+};
+exports.flattenNestedColumnValues = flattenNestedColumnValues;
+var getNestedKeyForNestedColumnCell = ramda_1.curry(function (columnNestedPath, cell) {
+    return ramda_1.pipe(ramda_1.zip(ramda_1.__, cell.indexPath), ramda_1.unnest, ramda_1.join(NESTED_KEY_DELIMITER))(columnNestedPath);
+});
+exports.getNestedKeyForNestedColumnCell = getNestedKeyForNestedColumnCell;

package/cjs/components/BasicTableView/BasicTable/hooks/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBasicTableCellRenderer = exports.useDynamicRowCellHeight = void 0;
+var useDynamicRowCellHeight_1 = require("./useDynamicRowCellHeight");
+Object.defineProperty(exports, "useDynamicRowCellHeight", { enumerable: true, get: function () { return __importDefault(useDynamicRowCellHeight_1).default; } });
+var useBasicTableCellRenderer_1 = require("./useBasicTableCellRenderer");
+Object.defineProperty(exports, "useBasicTableCellRenderer", { enumerable: true, get: function () { return __importDefault(useBasicTableCellRenderer_1).default; } });

package/cjs/components/BasicTableView/BasicTable/hooks/useBasicTableCellRenderer.js

@@ -0,0 +1,94 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 tableUtils_1 = require("react-components/dist/Table/tableUtils");
+var defaultRenderRowCell_1 = __importDefault(require("../helpers/defaultRenderRowCell"));
+var defaultGetRowCellHeight_1 = __importDefault(require("../helpers/defaultGetRowCellHeight"));
+var ramda_1 = require("ramda");
+var useCollapsibleTableRows_1 = __importDefault(require("./useCollapsibleTableRows"));
+var RowCollapseContext_1 = require("../contexts/RowCollapseContext");
+var useBasicTableCellRenderer = function (_a) {
+    var rowsData = _a.rowsData, columnsData = _a.columnsData, _b = _a.renderRowCell, renderRowCell = _b === void 0 ? defaultRenderRowCell_1.default : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight_1.default : _c, _d = _a.defaultRowHeight, defaultRowHeight = _d === void 0 ? 48 : _d, _e = _a.maxRowValuesCount, maxRowValuesCount = _e === void 0 ? Infinity : _e;
+    var _f = useCollapsibleTableRows_1.default({
+        rowsData: rowsData,
+        columnsData: columnsData,
+        renderRowCell: renderRowCell,
+        getRowCellHeight: getRowCellHeight,
+        maxRowValuesCount: maxRowValuesCount
+    }), tableRowsData = _f.tableRowsData, collapseContextValue = _f.collapseContextValue;
+    return react_1.useMemo(function () {
+        var rowHeightCache = tableRowsData.reduce(function (cache, rowData, rowIndex) {
+            var data = rowData.data;
+            cache[rowIndex] = tableUtils_1.calculateRowHeight(data, defaultRowHeight);
+            return cache;
+        }, {});
+        var getHeightForSubRow = function (rowIndex, columnIndex, subRowIndex) {
+            var heightPath = [rowIndex, 'subRowHeight', columnIndex, subRowIndex, 'height'];
+            return ramda_1.pathOr(0, heightPath, rowHeightCache);
+        };
+        var getRowHeight = function (rowIndex) { return ramda_1.pathOr(0, [rowIndex, 'height'], rowHeightCache); };
+        var CellRenderer = function (_a) {
+            var columnId = _a.columnId, rowIndex = _a.rowIndex, otherProps = __rest(_a, ["columnId", "rowIndex"]);
+            return (react_1.default.createElement(RowCollapseContext_1.RowCollapseContext.Provider, { value: collapseContextValue },
+                react_1.default.createElement("div", __assign({}, otherProps, { style: { height: getRowHeight(rowIndex) } }), tableRowsData.length > 0 &&
+                    tableUtils_1.getCellContentFromRowsData({
+                        columnIndex: columnsData.findIndex(ramda_1.propEq('id', columnId)),
+                        headData: columnsData,
+                        rowsData: tableRowsData,
+                        rowIndex: rowIndex,
+                        getHeightForSubRow: getHeightForSubRow
+                    }))));
+        };
+        CellRenderer.propTypes = {
+            columnId: prop_types_1.default.string,
+            rowIndex: prop_types_1.default.number
+        };
+        return { getRowHeight: getRowHeight, CellRenderer: CellRenderer };
+    }, [tableRowsData, defaultRowHeight, collapseContextValue, columnsData]);
+};
+exports.default = useBasicTableCellRenderer;

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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'
+    }
+}); });