@qoretechnologies/reqore 0.76.0-pr.673.g960750c → 0.76.0

package/dist/components/Table/index.cjs

@@ -1,682 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var lodash_1 = require("lodash");
-var react_1 = require("react");
-var react_use_1 = require("react-use");
-var styled_components_1 = __importStar(require("styled-components"));
-var __1 = require("../../index.cjs");
-var paging_1 = require("../../constants/paging.cjs");
-var sizes_1 = require("../../constants/sizes.cjs");
-var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider.cjs"));
-var useQueryWithDelay_1 = require("../../hooks/useQueryWithDelay.cjs");
-var ExportModal_1 = require("../ExportModal/index.cjs");
-var Input_1 = __importDefault(require("../Input/index.cjs"));
-var body_1 = __importDefault(require("./body.cjs"));
-var header_1 = __importDefault(require("./header.cjs"));
-var helpers_1 = require("./helpers.cjs");
-var StyledTableWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n\n  > .reqore-table-header-wrapper:first-child {\n    border-top-left-radius: inherit;\n    border-top-right-radius: inherit;\n    overflow: hidden;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n\n  > .reqore-table-header-wrapper:first-child {\n    border-top-left-radius: inherit;\n    border-top-right-radius: inherit;\n    overflow: hidden;\n  }\n"])), function (_a) {
-    var rounded = _a.rounded, _b = _a.size, size = _b === void 0 ? 'normal' : _b;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: ", "px;\n  "], ["\n    border-radius: ", "px;\n  "])), rounded === false ? 0 : sizes_1.RADIUS_FROM_SIZE[size]);
-});
-var ReqoreTableExportModal = function (_a) {
-    var data = _a.data, onClose = _a.onClose, exportMapper = _a.exportMapper;
-    var fixedData = (0, react_1.useMemo)(function () {
-        var _fixedData = (0, helpers_1.removeInternalData)(data);
-        if (exportMapper) {
-            _fixedData = exportMapper(_fixedData);
-        }
-        return _fixedData;
-    }, [data, exportMapper]);
-    return (0, jsx_runtime_1.jsx)(ExportModal_1.ReqoreExportModal, { data: fixedData, onClose: onClose });
-};
-var ReqoreTable = function (_a) {
-    var className = _a.className, height = _a.height, width = _a.width, columns = _a.columns, _b = _a.data, data = _b === void 0 ? [] : _b, sort = _a.sort, onSortChange = _a.onSortChange, selectable = _a.selectable, selected = _a.selected, onSelectedChange = _a.onSelectedChange, selectToggleTooltip = _a.selectToggleTooltip, onRowClick = _a.onRowClick, onScrollChange = _a.onScrollChange, striped = _a.striped, _c = _a.selectedRowIntent, selectedRowIntent = _c === void 0 ? 'info' : _c, _d = _a.size, size = _d === void 0 ? 'normal' : _d, _e = _a.wrapperSize, wrapperSize = _e === void 0 ? 'normal' : _e, intent = _a.intent, fill = _a.fill, filterable = _a.filterable, zoomable = _a.zoomable, _f = _a.filter, filter = _f === void 0 ? '' : _f, _g = _a.actions, actions = _g === void 0 ? [] : _g, onFilterChange = _a.onFilterChange, filterProps = _a.filterProps, _h = _a.filterRanking, filterRanking = _h === void 0 ? 'none' : _h, _j = _a.emptyMessage, emptyMessage = _j === void 0 ? 'No data in this table, try changing your search query or filters' : _j, headerCellComponent = _a.headerCellComponent, rowComponent = _a.rowComponent, bodyCellComponent = _a.bodyCellComponent, getRowProps = _a.getRowProps, onSelectClick = _a.onSelectClick, paging = _a.paging, exportable = _a.exportable, exportMapper = _a.exportMapper, showHelp = _a.showHelp, showColumnsOptions = _a.showColumnsOptions, virtualized = _a.virtualized, wrap = _a.wrap, maxCellHeight = _a.maxCellHeight, expandHeightButtonProps = _a.expandHeightButtonProps, rowHeight = _a.rowHeight, overscanRowCount = _a.overscanRowCount, _k = _a.selectToggleAllTooltip, selectToggleAllTooltip = _k === void 0 ? 'Toggle selection on all data' : _k, renderExpandedRow = _a.renderExpandedRow, defaultExpanded = _a.defaultExpanded, expanded = _a.expanded, onExpandedChange = _a.onExpandedChange, expandSingle = _a.expandSingle, _l = _a.expandRowTooltip, expandRowTooltip = _l === void 0 ? 'Show details' : _l, _m = _a.collapseRowTooltip, collapseRowTooltip = _m === void 0 ? 'Hide details' : _m, _o = _a.estimatedExpandedRowHeight, estimatedExpandedRowHeight = _o === void 0 ? 200 : _o, _p = _a.columnsToggleLabel, columnsToggleLabel = _p === void 0 ? 'Show / hide columns' : _p, filterPlaceholder = _a.filterPlaceholder, _q = _a.scrollToTopTooltip, scrollToTopTooltip = _q === void 0 ? 'Scroll to top' : _q, _r = _a.resetAllLabel, resetAllLabel = _r === void 0 ? 'Reset all' : _r, _s = _a.helpLabel, helpLabel = _s === void 0 ? 'Help' : _s, _t = _a.helpModalLabel, helpModalLabel = _t === void 0 ? 'Table help' : _t, helpContent = _a.helpContent, _u = _a.sortAscendingLabel, sortAscendingLabel = _u === void 0 ? 'Sort ascending' : _u, _v = _a.sortDescendingLabel, sortDescendingLabel = _v === void 0 ? 'Sort descending' : _v, _w = _a.pinLeftLabel, pinLeftLabel = _w === void 0 ? 'Pin left' : _w, _x = _a.pinRightLabel, pinRightLabel = _x === void 0 ? 'Pin Right' : _x, _y = _a.hideColumnLabel, hideColumnLabel = _y === void 0 ? 'Hide column' : _y, _z = _a.resetSizeLabel, resetSizeLabel = _z === void 0 ? 'Reset size' : _z, _0 = _a.otherActionsLabel, otherActionsLabel = _0 === void 0 ? 'Other' : _0, _1 = _a.columnFilterPlaceholder, columnFilterPlaceholder = _1 === void 0 ? 'Filter by this column...' : _1, rest = __rest(_a, ["className", "height", "width", "columns", "data", "sort", "onSortChange", "selectable", "selected", "onSelectedChange", "selectToggleTooltip", "onRowClick", "onScrollChange", "striped", "selectedRowIntent", "size", "wrapperSize", "intent", "fill", "filterable", "zoomable", "filter", "actions", "onFilterChange", "filterProps", "filterRanking", "emptyMessage", "headerCellComponent", "rowComponent", "bodyCellComponent", "getRowProps", "onSelectClick", "paging", "exportable", "exportMapper", "showHelp", "showColumnsOptions", "virtualized", "wrap", "maxCellHeight", "expandHeightButtonProps", "rowHeight", "overscanRowCount", "selectToggleAllTooltip", "renderExpandedRow", "defaultExpanded", "expanded", "onExpandedChange", "expandSingle", "expandRowTooltip", "collapseRowTooltip", "estimatedExpandedRowHeight", "columnsToggleLabel", "filterPlaceholder", "scrollToTopTooltip", "resetAllLabel", "helpLabel", "helpModalLabel", "helpContent", "sortAscendingLabel", "sortDescendingLabel", "pinLeftLabel", "pinRightLabel", "hideColumnLabel", "resetSizeLabel", "otherActionsLabel", "columnFilterPlaceholder"]);
-    var mainTableRef = (0, react_1.useRef)(null);
-    var mainHeaderRef = (0, react_1.useRef)(null);
-    var hasColumnWrap = (0, react_1.useMemo)(function () {
-        var walk = function (cols) {
-            return cols.some(function (column) {
-                var _a, _b;
-                if ((_a = column.header) === null || _a === void 0 ? void 0 : _a.columns) {
-                    return walk(column.header.columns);
-                }
-                return ((_b = column.cell) === null || _b === void 0 ? void 0 : _b.wrap) === true;
-            });
-        };
-        return walk(columns);
-    }, [columns]);
-    var shouldVirtualize = virtualized !== null && virtualized !== void 0 ? virtualized : !(wrap || hasColumnWrap);
-    (0, react_1.useEffect)(function () {
-        if ((wrap || hasColumnWrap) && virtualized === true) {
-            // eslint-disable-next-line no-console
-            console.warn('[ReqoreTable] `wrap` / `cell.wrap` has no visual effect when `virtualized` is explicitly true — FixedSizeList enforces fixed row height. Drop `virtualized={true}` or disable wrapping.');
-        }
-    }, [wrap, hasColumnWrap, virtualized]);
-    var _2 = (0, react_1.useState)(false), isScrolled = _2[0], setIsScrolled = _2[1];
-    // Live height of the header (column labels + the filter row when present). When
-    // the table `fill`s its container the virtualized body must leave room for this
-    // header; otherwise the body is sized to the whole container and its last rows
-    // overflow under the wrapper and get clipped (you can still scroll to them).
-    var _3 = (0, react_1.useState)(0), headerHeight = _3[0], setHeaderHeight = _3[1];
-    var _4 = (0, react_1.useState)(data || []), _data = _4[0], setData = _4[1];
-    var _5 = (0, react_1.useState)((0, helpers_1.fixSort)(sort)), _sort = _5[0], setSort = _5[1];
-    var _6 = (0, react_1.useState)(selected || []), _selected = _6[0], setSelected = _6[1];
-    var _7 = (0, react_1.useState)({}), columnModifiers = _7[0], setColumnModifiers = _7[1];
-    var _8 = (0, react_1.useState)(columns), _internalColumns = _8[0], setColumns = _8[1];
-    var _9 = (0, react_1.useState)(helpers_1.sizeToZoom[size]), zoom = _9[0], setZoom = _9[1];
-    var _10 = (0, react_1.useState)(undefined), showExportModal = _10[0], setShowExportModal = _10[1];
-    var theme = (0, __1.useReqoreTheme)('main', rest.customTheme, intent);
-    var addModal = (0, __1.useReqoreProperty)('addModal');
-    // Measure only the table wrapper, not the full panel content. Pagination
-    // controls are siblings of this wrapper and consume their own flex space;
-    // measuring the panel would include them and make a filled body overflow
-    // behind the controls.
-    var _11 = (0, react_use_1.useMeasure)(), wrapperRef = _11[0], sizes = _11[1];
-    // Track the header's height so a filled body can subtract it (see `headerHeight`).
-    // A ResizeObserver keeps it correct when the filter row appears/disappears or
-    // the header wraps. Only needed while `fill` is on.
-    //
-    // `sizes.height` is in the deps on purpose: the header ref isn't always mounted
-    // on the first run (e.g. when the table is wrapped in a pagination container),
-    // so re-running once the container has been measured guarantees we pick the
-    // header up and set a non-zero height — otherwise the body keeps the full
-    // container height and its last rows scroll out of reach under the wrapper.
-    (0, react_1.useEffect)(function () {
-        var element = mainHeaderRef.current;
-        if (!fill || !element || typeof ResizeObserver === 'undefined') {
-            return undefined;
-        }
-        var measure = function () { return setHeaderHeight(element.offsetHeight); };
-        measure();
-        var observer = new ResizeObserver(measure);
-        observer.observe(element);
-        return function () { return observer.disconnect(); };
-    }, [fill, sizes.height]);
-    var _12 = (0, useQueryWithDelay_1.useQueryWithDelay)(filter.toString(), 300, onFilterChange), query = _12.query, preQuery = _12.preQuery, setQuery = _12.setQuery, setPreQuery = _12.setPreQuery;
-    var normalizedQuery = (0, react_1.useMemo)(function () { return query.toString().toLowerCase(); }, [query]);
-    // Column filters live in `columnModifiers` once the user edits them, and on the column
-    // itself when supplied as config — `prepareColumns` merges the two, modifier winning.
-    //
-    // This deliberately walks `_internalColumns` rather than `finalColumns`: the selectbox
-    // column `finalColumns` injects is `filterable: false` and carries no filter, so it cannot
-    // contribute here, and reading `finalColumns` would make the filtered data depend on the
-    // select-all icon — a cycle, since the icon is derived from the filtered data.
-    var filters = (0, react_1.useMemo)(function () {
-        var getFilters = function (columnsToTransform) {
-            return columnsToTransform.reduce(function (filterObject, column) {
-                var _a;
-                var _b, _c, _d;
-                if ((_b = column.header) === null || _b === void 0 ? void 0 : _b.columns) {
-                    return __assign(__assign({}, filterObject), getFilters(column.header.columns));
-                }
-                var filter = (_d = (_c = columnModifiers === null || columnModifiers === void 0 ? void 0 : columnModifiers[column.dataId]) === null || _c === void 0 ? void 0 : _c.filter) !== null && _d !== void 0 ? _d : column.filter;
-                if (filter) {
-                    return __assign(__assign({}, filterObject), (_a = {}, _a[column.dataId] = filter, _a));
-                }
-                return filterObject;
-            }, {});
-        };
-        return getFilters(_internalColumns);
-    }, [_internalColumns, columnModifiers]);
-    var normalizedFilters = (0, react_1.useMemo)(function () {
-        return Object.entries(filters).map(function (_a) {
-            var filterKey = _a[0], filterValue = _a[1];
-            return [
-                filterKey,
-                filterValue.toString().toLowerCase(),
-            ];
-        });
-    }, [filters]);
-    var transformedData = (0, react_1.useMemo)(function () {
-        var hasQuery = normalizedQuery.length > 0;
-        /* Carry each row's position in the ORIGINAL data alongside it, rather than
-           ON it, through both filters.
-    
-           The position is the last-resort expansion identity: unlike a rendered-row
-           position it survives sorting and filtering, so a row supplying neither
-           `_expandId` nor `_selectId` keeps its own panel open rather than handing
-           it to whoever lands in that slot next.
-    
-           It must not reach the row until AFTER the global query has run. That
-           filter matches against `JSON.stringify(datum)`, so an index written onto
-           the row is searchable text: a table filtered by "1" started matching the
-           row at index 1 whatever it contained. Stamping after filtering keeps the
-           query looking only at the data the caller supplied. */
-        var positioned = _data.map(function (datum, index) { return ({ datum: datum, index: index }); });
-        // Filter by global query
-        var filtered = hasQuery
-            ? positioned.filter(function (_a) {
-                var datum = _a.datum;
-                return JSON.stringify(datum).toLowerCase().includes(normalizedQuery);
-            })
-            : positioned;
-        // Filter by column filters
-        filtered = filtered.filter(function (_a) {
-            var datum = _a.datum;
-            return normalizedFilters.every(function (_a) {
-                var filterKey = _a[0], filterValue = _a[1];
-                var datumValue = datum[filterKey];
-                return datumValue === null || datumValue === void 0 ? void 0 : datumValue.toString().toLowerCase().includes(filterValue);
-            });
-        });
-        var filteredData = filtered.map(function (_a) {
-            var datum = _a.datum, index = _a.index;
-            return datum._reqoreIndex === undefined ? __assign(__assign({}, datum), { _reqoreIndex: index }) : datum;
-        });
-        // `_sort` always carries a direction; only a `by` is a chosen sort.
-        var sortedData = (_sort === null || _sort === void 0 ? void 0 : _sort.by) ? (0, helpers_1.sortTableData)(filteredData, _sort) : filteredData;
-        // Opted-in relevance takes precedence over the sort while the box has text:
-        // the reader asked for a thing by name and expects the rows called that
-        // first, not wherever the sort put them. Nearly every table carries a
-        // default sort (a list page persists "name, A-Z"), so "the sort wins" would
-        // mean the opt-in never applies where it is wanted. The sorted order still
-        // decides between equally good matches, and returns when the box is cleared.
-        return hasQuery && filterRanking === 'relevance'
-            ? (0, helpers_1.rankTableDataByQuery)(sortedData, normalizedQuery, _internalColumns)
-            : sortedData;
-    }, [_data, _sort, normalizedFilters, normalizedQuery, filterRanking, _internalColumns]);
-    /**
-     * Which rows are open. Uncontrolled by default (`defaultExpanded` seeds it),
-     * controlled when the caller passes `expanded` — the same shape `selected`
-     * uses, so a consumer does not learn a second convention for the same idea.
-     */
-    var _13 = (0, react_1.useState)(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : []), _expanded = _13[0], _setExpanded = _13[1];
-    var activeExpanded = expanded !== null && expanded !== void 0 ? expanded : _expanded;
-    /** A row's expansion identity. See `_expandId` and `getRowExpandId`. */
-    var getExpandId = (0, react_1.useCallback)(function (row) { return (0, helpers_1.getRowExpandId)(row); }, []);
-    var handleExpandClick = (0, react_1.useCallback)(function (expandId) {
-        var isOpen = activeExpanded.some(function (id) { return id.toString() === expandId.toString(); });
-        var next = isOpen
-            ? activeExpanded.filter(function (id) { return id.toString() !== expandId.toString(); })
-            : expandSingle
-                ? [expandId]
-                : __spreadArray(__spreadArray([], activeExpanded, true), [expandId], false);
-        if (expanded === undefined) {
-            _setExpanded(next);
-        }
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
-    }, [activeExpanded, expandSingle, expanded, onExpandedChange]);
-    var selectableData = (0, react_1.useMemo)(function () { return transformedData.filter(function (datum) { var _a; return (_a = datum._selectId) !== null && _a !== void 0 ? _a : false; }); }, [transformedData]);
-    var activeSelected = selected !== null && selected !== void 0 ? selected : _selected;
-    var selectedQuant = (0, react_1.useMemo)(function () {
-        if (!activeSelected.length) {
-            return 'none';
-        }
-        return activeSelected.length === (0, lodash_1.size)(selectableData) ? 'all' : 'some';
-    }, [activeSelected, selectableData]);
-    var selectedIcon = (0, react_1.useMemo)(function () {
-        switch (selectedQuant) {
-            case 'all':
-                return 'CheckboxCircleLine';
-            case 'some':
-                return 'IndeterminateCircleLine';
-            default:
-                return 'CheckboxBlankCircleLine';
-        }
-    }, [selectedQuant]);
-    var updateSelected = (0, react_1.useCallback)(function (next) {
-        var nextSelected = typeof next === 'function' ? next(activeSelected) : next;
-        if (selected === undefined) {
-            setSelected(nextSelected);
-        }
-        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(nextSelected);
-    }, [activeSelected, onSelectedChange, selected]);
-    var handleSortChange = (0, react_1.useCallback)(function (by) {
-        setSort(function (currentSort) {
-            var newSort = __assign({}, currentSort);
-            newSort.by = by;
-            newSort.direction =
-                currentSort.by === by ? (0, helpers_1.flipSortDirection)(currentSort.direction) : currentSort.direction;
-            return newSort;
-        });
-    }, []);
-    var handleSelectClick = (0, react_1.useCallback)(function (selectId) {
-        if (onSelectClick) {
-            onSelectClick(selectId);
-            return;
-        }
-        updateSelected(function (current) {
-            var newSelected = __spreadArray([], current, true);
-            var isSelected = newSelected.find(function (selected) { return selectId === selected; });
-            if (isSelected) {
-                newSelected = newSelected.filter(function (selected) { return selected !== selectId; });
-            }
-            else {
-                newSelected = __spreadArray(__spreadArray([], newSelected, true), [selectId], false);
-            }
-            return newSelected;
-        });
-    }, [onSelectClick, updateSelected]);
-    var handleToggleSelectClick = (0, react_1.useCallback)(function (e) {
-        switch (selectedQuant) {
-            case 'none':
-            case 'some': {
-                var nextSelected = selectableData
-                    .filter(function (datum) {
-                    // If the user held down the meta key, we will reverse the selection
-                    if (e.metaKey) {
-                        // Check if the datum is selected
-                        var isSelected = activeSelected.find(function (selectId) { return selectId === datum._selectId; });
-                        // If it is selected, we will remove it from the selected array
-                        if (isSelected) {
-                            return false;
-                        }
-                    }
-                    return true;
-                })
-                    .map(function (datum) { return datum._selectId; });
-                updateSelected(nextSelected);
-                break;
-            }
-            default: {
-                updateSelected([]);
-                break;
-            }
-        }
-    }, [activeSelected, selectableData, selectedQuant, updateSelected]);
-    var finalColumns = (0, react_1.useMemo)(function () {
-        var fullColumns = __spreadArray([], _internalColumns, true);
-        if (selectable) {
-            fullColumns.unshift({
-                dataId: 'selectbox',
-                width: 20,
-                sortable: false,
-                hideable: false,
-                filterable: false,
-                resizable: false,
-                pin: 'left',
-                pinnable: false,
-                align: 'center',
-                header: {
-                    icon: selectedIcon,
-                    tooltip: selectToggleAllTooltip,
-                    onClick: handleToggleSelectClick,
-                },
-                cell: {
-                    padded: 'none',
-                    actions: function (_a) {
-                        var _selectId = _a._selectId;
-                        return [
-                            {
-                                tooltip: selectToggleTooltip,
-                                flat: true,
-                                transparent: true,
-                                icon: !_selectId
-                                    ? 'Forbid2Line'
-                                    : (activeSelected === null || activeSelected === void 0 ? void 0 : activeSelected.find(function (s) { return s.toString() === _selectId.toString(); }))
-                                        ? 'CheckboxCircleLine'
-                                        : 'CheckboxBlankCircleLine',
-                                intent: !_selectId ? 'muted' : undefined,
-                                onClick: _selectId ? function () { return handleSelectClick(_selectId); } : undefined,
-                            },
-                        ];
-                    },
-                },
-            });
-        }
-        /* Unshifted AFTER the select box so it ends up to its LEFT. The expander is
-           about the row you are looking at; the checkbox is about a set you are
-           building. The one that acts on this row alone comes first. */
-        if (renderExpandedRow) {
-            fullColumns.unshift({
-                /* Wider than the select box's 20px. That column holds a checkbox glyph
-                   that happens to fit; this one holds a real icon button, and at 20px
-                   with no padding the chevron was clipped by its own cell and read as a
-                   smudge rather than as a control. 40px is what the button needs to sit
-                   in its cell without being cut. */
-                dataId: 'expander',
-                width: 40,
-                sortable: false,
-                hideable: false,
-                filterable: false,
-                resizable: false,
-                pin: 'left',
-                pinnable: false,
-                align: 'center',
-                header: { label: '' },
-                cell: {
-                    padded: 'none',
-                    actions: function (row) {
-                        /* A disabled row is not interactive, and expanding is an
-                           interaction. Offering the control anyway says the row is dead
-                           except for this one thing, which is not what `_disabled` means —
-                           the rest of the table already refuses clicks on it. */
-                        if (row._disabled)
-                            return [];
-                        // A row with nothing to show gets no control — an expander that
-                        // opens an empty panel is worse than no expander.
-                        if (!renderExpandedRow(row))
-                            return [];
-                        var expandId = getExpandId(row);
-                        var isOpen = activeExpanded.some(function (id) { return id.toString() === "".concat(expandId); });
-                        return [
-                            {
-                                tooltip: isOpen ? collapseRowTooltip : expandRowTooltip,
-                                flat: true,
-                                transparent: true,
-                                icon: isOpen ? 'ArrowUpSLine' : 'ArrowDownSLine',
-                                'aria-expanded': isOpen,
-                                onClick: function () { return handleExpandClick(expandId); },
-                            },
-                        ];
-                    },
-                },
-            });
-        }
-        return (0, helpers_1.prepareColumns)(fullColumns, columnModifiers, helpers_1.zoomToSize[zoom]);
-    }, [
-        _internalColumns,
-        columnModifiers,
-        zoom,
-        selectable,
-        selectedIcon,
-        selectToggleTooltip,
-        selectToggleAllTooltip,
-        activeSelected,
-        handleToggleSelectClick,
-        renderExpandedRow,
-        activeExpanded,
-        handleExpandClick,
-        getExpandId,
-        expandRowTooltip,
-        collapseRowTooltip,
-    ]);
-    (0, react_use_1.useUpdateEffect)(function () {
-        if (onSortChange) {
-            onSortChange(_sort);
-        }
-    }, [_sort]);
-    (0, react_use_1.useUpdateEffect)(function () {
-        setColumns(columns);
-    }, [columns]);
-    (0, react_use_1.useUpdateEffect)(function () {
-        setData(data);
-    }, [data]);
-    var handleScrollChange = (0, react_1.useCallback)(function (isScrolled) {
-        setIsScrolled(isScrolled);
-        onScrollChange === null || onScrollChange === void 0 ? void 0 : onScrollChange(isScrolled);
-    }, [onScrollChange]);
-    var handleColumnsUpdate = (0, react_1.useCallback)(function (id, key, value) {
-        setColumnModifiers(function (current) {
-            var _a, _b;
-            return __assign(__assign({}, current), (_a = {}, _a[id] = __assign(__assign({}, current[id]), (_b = {}, _b[key] = value, _b)), _a));
-        });
-    }, []);
-    var handlePreQueryChange = (0, react_1.useCallback)(function (event) {
-        setPreQuery(event.target.value);
-    }, []);
-    var columnsList = (0, react_1.useMemo)(function () {
-        var _columnsList = [];
-        var addColumn = function (column) {
-            var _a;
-            _columnsList.push({
-                label: typeof ((_a = column.header) === null || _a === void 0 ? void 0 : _a.label) === 'string' ? column.header.label : column.dataId,
-                selected: column.show !== false,
-                onClick: function () {
-                    return handleColumnsUpdate(column.dataId, 'show', column.show !== false ? false : true);
-                },
-                intent: column.show !== false ? 'info' : undefined,
-            });
-        };
-        finalColumns.forEach(function (column) {
-            var _a, _b;
-            if (column.hideable === false || column.enabled === false) {
-                // If the column is not hideable or enabled, we skip it
-                return;
-            }
-            if ((_a = column.header) === null || _a === void 0 ? void 0 : _a.columns) {
-                (_b = column.header) === null || _b === void 0 ? void 0 : _b.columns.forEach(function (subColumn) {
-                    addColumn(subColumn);
-                });
-            }
-            else {
-                addColumn(column);
-            }
-        });
-        if ((0, lodash_1.size)(_columnsList)) {
-            _columnsList.unshift({
-                divider: true,
-                label: columnsToggleLabel,
-            });
-        }
-        return _columnsList;
-    }, [finalColumns, columnsToggleLabel]);
-    var handleScrollToTop = (0, react_1.useCallback)(function () {
-        var _a;
-        (_a = mainTableRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-        });
-        setIsScrolled(false);
-    }, []);
-    var tableActions = (0, react_1.useMemo)(function () {
-        var finalActions = __spreadArray([], actions, true);
-        if (!(0, lodash_1.size)(data)) {
-            return finalActions;
-        }
-        if ((0, lodash_1.size)(columnsList) && showColumnsOptions) {
-            var columnsCount = (0, helpers_1.getColumnsCount)((0, helpers_1.getOnlyShownColumns)(finalColumns, sizes.width));
-            if (selectable) {
-                columnsCount -= 1;
-            }
-            finalActions.push({
-                icon: 'LayoutColumnLine',
-                className: 'reqore-table-columns-options',
-                badge: columnsCount,
-                active: (0, helpers_1.hasHiddenColumns)(finalColumns) ? true : undefined,
-                multiSelect: true,
-                actions: columnsList,
-            });
-        }
-        if (filterable) {
-            var resolvedFilterPlaceholder = typeof filterPlaceholder === 'function'
-                ? filterPlaceholder((0, lodash_1.size)(transformedData))
-                : filterPlaceholder !== null && filterPlaceholder !== void 0 ? filterPlaceholder : "Search in ".concat((0, lodash_1.size)(transformedData), " items...");
-            finalActions.push({
-                as: Input_1.default,
-                props: __assign({ key: 'search', fixed: false, placeholder: resolvedFilterPlaceholder, onClearClick: function () {
-                        setQuery('');
-                        setPreQuery('');
-                    }, onChange: handlePreQueryChange, value: preQuery, icon: 'Search2Line', disabled: !query && !(0, lodash_1.size)(transformedData), minimal: false }, filterProps === null || filterProps === void 0 ? void 0 : filterProps(transformedData)),
-            });
-        }
-        if (isScrolled) {
-            finalActions.push({
-                icon: 'ArrowUpSFill',
-                tooltip: scrollToTopTooltip,
-                className: 'reqore-table-columns-scroll-top',
-                responsive: true,
-                onClick: handleScrollToTop,
-            });
-        }
-        if ((0, lodash_1.size)(columnModifiers) || zoomable || filterable || exportable || showHelp) {
-            var moreActions = [];
-            if (exportable) {
-                moreActions = __spreadArray(__spreadArray(__spreadArray([], moreActions, true), (0, helpers_1.getExportActions)(function (type) { return setShowExportModal(type); }), true), [
-                    { divider: true, line: true },
-                ], false);
-            }
-            if (zoomable) {
-                moreActions = __spreadArray(__spreadArray(__spreadArray([], moreActions, true), (0, helpers_1.getZoomActions)('reqore-table', zoom, setZoom, true), true), [
-                    { divider: true, line: true },
-                ], false);
-            }
-            var moreActionsWrapper = {
-                icon: 'MoreLine',
-                className: 'reqore-table-more',
-                actions: [],
-            };
-            if ((0, lodash_1.size)(columnModifiers) || zoomable || filterable || exportable) {
-                moreActionsWrapper.actions = __spreadArray(__spreadArray([], moreActions, true), [
-                    {
-                        label: resetAllLabel,
-                        icon: 'RestartLine',
-                        className: 'reqore-table-reset',
-                        onClick: function () {
-                            setColumnModifiers({});
-                            setZoom(helpers_1.sizeToZoom[size]);
-                            setPreQuery('');
-                            setQuery('');
-                        },
-                    },
-                ], false);
-            }
-            if (showHelp) {
-                moreActionsWrapper.actions.push({
-                    label: helpLabel,
-                    icon: 'QuestionLine',
-                    className: 'reqore-table-help',
-                    onClick: function () {
-                        addModal({
-                            label: helpModalLabel,
-                            icon: 'QuestionLine',
-                            minimal: true,
-                            panelSize: 'small',
-                            children: helpContent !== null && helpContent !== void 0 ? helpContent : ((0, jsx_runtime_1.jsx)(__1.ReqoreMessage, { intent: 'info', opaque: false, size: 'small', children: (0, jsx_runtime_1.jsxs)(__1.ReqoreControlGroup, { vertical: true, children: [(0, jsx_runtime_1.jsx)(__1.ReqoreP, { size: 'small', children: "- CMD / Control click on the column header to sort / reverse sort by that column" }), (0, jsx_runtime_1.jsx)(__1.ReqoreP, { size: 'small', children: "- Click on the column header for more actions, such as filtering, sorting, pinning and hiding" }), (0, jsx_runtime_1.jsx)(__1.ReqoreP, { size: 'small', children: "- Columns with right dashed border on headers can be resized" })] }) })),
-                        });
-                    },
-                });
-            }
-            finalActions.push(moreActionsWrapper);
-        }
-        return finalActions;
-    }, [
-        actions,
-        addModal,
-        columnModifiers,
-        columnsList,
-        data,
-        exportable,
-        filterProps,
-        filterable,
-        filterPlaceholder,
-        handlePreQueryChange,
-        handleScrollToTop,
-        isScrolled,
-        preQuery,
-        query,
-        selectable,
-        showHelp,
-        size,
-        setPreQuery,
-        setQuery,
-        transformedData,
-        zoom,
-        zoomable,
-        scrollToTopTooltip,
-        resetAllLabel,
-        helpLabel,
-        helpModalLabel,
-        helpContent,
-    ]);
-    var badge = (0, react_1.useMemo)(function () {
-        var badgeList = rest.label ? [(0, lodash_1.size)(transformedData)] : [];
-        if (rest.badge) {
-            if ((0, lodash_1.isArray)(rest.badge)) {
-                badgeList.push.apply(badgeList, rest.badge);
-            }
-            else {
-                badgeList.push(rest.badge);
-            }
-        }
-        return badgeList;
-    }, [rest.badge, rest.label, transformedData]);
-    var renderTable = function (items) {
-        if ((0, lodash_1.size)(finalColumns) === 0 || (0, lodash_1.size)(data) === 0) {
-            return null;
-        }
-        return ((0, jsx_runtime_1.jsxs)(StyledTableWrapper, { ref: wrapperRef, className: 'reqore-table-wrapper', rounded: rest.rounded !== false && rest.flat !== false, size: rest.flat === false ? wrapperSize : helpers_1.zoomToSize[zoom], children: [(0, jsx_runtime_1.jsx)(header_1.default, { size: helpers_1.zoomToSize[zoom], columns: finalColumns, ref: mainHeaderRef, bodyRef: mainTableRef, onSortChange: handleSortChange, heightAsGroup: (0, helpers_1.hasGroupedColumns)(finalColumns), sortData: _sort, onColumnsUpdate: handleColumnsUpdate, onFilterChange: function (dataId, value) {
-                        handleColumnsUpdate(dataId, 'filter', value);
-                    }, component: headerCellComponent, tableWidth: sizes.width, minimal: rest.minimal, sortAscendingLabel: sortAscendingLabel, sortDescendingLabel: sortDescendingLabel, pinLeftLabel: pinLeftLabel, pinRightLabel: pinRightLabel, hideColumnLabel: hideColumnLabel, resetSizeLabel: resetSizeLabel, otherActionsLabel: otherActionsLabel, columnFilterPlaceholder: columnFilterPlaceholder }), (0, lodash_1.size)(items) === 0 ? null : ((0, jsx_runtime_1.jsx)(body_1.default, { ref: mainTableRef, headerRef: mainHeaderRef, data: items, columns: finalColumns, height: fill ? Math.max(0, sizes.height - headerHeight) : height, selectable: selectable, onSelectClick: handleSelectClick, onRowClick: onRowClick, onScrollChange: handleScrollChange, selected: _selected, selectedRowIntent: selectedRowIntent, size: helpers_1.zoomToSize[zoom], striped: striped, flat: rest.flat, wrap: wrap, maxCellHeight: maxCellHeight, expandHeightButtonProps: expandHeightButtonProps, rowHeight: rowHeight, overscanRowCount: overscanRowCount, virtualized: shouldVirtualize, rowComponent: rowComponent, cellComponent: bodyCellComponent, getRowProps: getRowProps, renderExpandedRow: renderExpandedRow, expanded: activeExpanded, onExpandClick: handleExpandClick, estimatedExpandedRowHeight: estimatedExpandedRowHeight, tableWidth: sizes.width }))] }));
-    };
-    var pagingOptions = (0, react_1.useMemo)(function () { return (paging ? (0, paging_1.getPagingObjectFromType)(paging) : undefined); }, [paging]);
-    /* One options object per change of the caller's paging, not one per render:
-       the pagination container is memoised on it, and a fresh object made it
-       re-run the paging hook on every render of the table. */
-    var paginationType = (0, react_1.useMemo)(function () {
-        return pagingOptions
-            ? __assign(__assign({}, pagingOptions), { onPageChange: function () {
-                    if (!pagingOptions.infinite) {
-                        handleScrollToTop();
-                    }
-                } }) : undefined;
-    }, [pagingOptions, handleScrollToTop]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.ReqorePanel, __assign({ transparent: true, flat: true, padded: false, contentStyle: { display: 'flex', flexFlow: 'column', overflow: 'hidden' }, responsiveActions: false }, rest, { size: wrapperSize, actions: tableActions, fill: fill, className: "".concat(className || '', " reqore-table"), style: __assign({ width: width }, (rest.style || {})), badge: badge, children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { theme: theme, customTheme: rest.customTheme, children: (0, jsx_runtime_1.jsx)(__1.ReqorePaginationContainer, { items: transformedData, type: paginationType, children: function (_pagedData) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExportModal && ((0, jsx_runtime_1.jsx)(ReqoreTableExportModal, { data: showExportModal === 'current' ? _pagedData : transformedData, onClose: function () { return setShowExportModal(undefined); }, exportMapper: exportMapper })), renderTable(_pagedData), (0, lodash_1.size)(_pagedData) === 0
-                                ? rest.children || ((0, jsx_runtime_1.jsx)(__1.ReqoreMessage, { flat: true, size: size, icon: 'Search2Line', margin: (0, lodash_1.size)(data) ? 'top' : 'none', children: emptyMessage }))
-                                : null] })); } }) }) })) }));
-};
-exports.default = ReqoreTable;
-var templateObject_1, templateObject_2;
-//# sourceMappingURL=index.cjs.map