@popmenu/table 0.126.0 → 0.126.2

package/build/cjs/index.js

@@ -0,0 +1,787 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var core = require('@material-ui/core');
+var lab = require('@material-ui/lab');
+var commonUi = require('@popmenu/common-ui');
+var reactTable = require('@tanstack/react-table');
+var webIcons = require('@popmenu/web-icons');
+var adminUi = require('@popmenu/admin-ui');
+
+var useTableRowStyles = core.makeStyles(function (theme) { return ({
+    root: function () { return ({
+        '&:nth-child(even)': {
+            backgroundColor: theme.palette.grey[100],
+        },
+    }); },
+}); });
+
+var TableRow = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    var root = useTableRowStyles(props).root;
+    return (React.createElement("tr", tslib.__assign({ "data-table-element": "body-row", className: root }, restProps), children));
+};
+
+var tableConstants = {
+    tableTypography: 'body1',
+    cellPaddingFactor: 2};
+
+var coercedValueIncludesString = function (row, columnId, value) {
+    if (value === '')
+        return true;
+    var cellValue = row.getValue(columnId);
+    return String(cellValue).toLowerCase().includes(value.toLowerCase());
+};
+
+var getTableMinHeight = function (rootRef, pageSize) {
+    var defaultBodyRowHeight = 56;
+    var defaultHeaderRowHeight = 57;
+    var defaultFooterHeight = 88;
+    var minHeight = defaultBodyRowHeight * pageSize + defaultHeaderRowHeight + defaultFooterHeight;
+    if (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) {
+        var rootTableNode = rootRef.current;
+        var headerRowNode = rootTableNode.querySelector("[data-table-element=\"header-row\"]");
+        var bodyRowNode = rootTableNode.querySelector("[data-table-element=\"body-row\"]");
+        if (headerRowNode && bodyRowNode) {
+            var headerRowHeight = headerRowNode.getBoundingClientRect().height;
+            var bodyRowHeight = bodyRowNode.getBoundingClientRect().height;
+            minHeight = headerRowHeight + bodyRowHeight * pageSize + defaultFooterHeight;
+        }
+    }
+    return minHeight;
+};
+
+var useTableCellStyles = core.makeStyles(function (theme) { return ({
+    root: function () { return ({
+        padding: theme.spacing(tableConstants.cellPaddingFactor),
+    }); },
+}); });
+
+var TableCell = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    var root = useTableCellStyles(props).root;
+    return (React.createElement("td", tslib.__assign({ className: root }, restProps), children));
+};
+
+var TableBody = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return React.createElement("tbody", tslib.__assign({}, restProps), children);
+};
+
+var useStyles$6 = core.makeStyles(function (_a) {
+    var typography = _a.typography;
+    return ({
+        root: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return ({
+                display: fullWidth ? 'flex' : 'inline-flex',
+                flexDirection: 'column',
+            });
+        },
+        table: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return (tslib.__assign(tslib.__assign({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
+        },
+        tableContainer: function () { return ({
+            maxWidth: '100%',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+        }); },
+    });
+});
+
+var TableHeader = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return React.createElement("thead", tslib.__assign({}, restProps), children);
+};
+
+var TableFooter = function (props) {
+    return (React.createElement(commonUi.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4 }, props.children));
+};
+
+var useStyles$5 = core.makeStyles(function (theme) { return ({
+    buttonBox: {
+        '& > :last-child': {
+            marginLeft: theme.spacing(2),
+        },
+        display: 'flex',
+        justifyContent: 'flex-end',
+        padding: "0px " + theme.spacing(3) + "px " + theme.spacing(3) + "px " + theme.spacing(3) + "px",
+    },
+    buttonLabel: {
+        fontWeight: 400,
+    },
+    filterPopoverContents: {
+        backgroundColor: 'white',
+        borderRadius: theme.spacing(1),
+        position: 'relative',
+        margin: '10px',
+        marginTop: theme.spacing(2),
+        width: '323px',
+        '&::before': {
+            backgroundColor: 'white',
+            borderRadius: theme.spacing(0.5),
+            content: '""',
+            display: 'block',
+            filter: 'drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.12))',
+            position: 'absolute',
+            width: theme.spacing(2.5),
+            height: theme.spacing(2.5),
+            top: -7,
+            transform: 'rotate(45deg)',
+            left: 'calc(90% - 12px)',
+            zIndex: 0,
+        },
+        '&::after': {
+            backgroundColor: 'white',
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            top: 0,
+            left: 'calc(80%)',
+            width: theme.spacing(6),
+            height: theme.spacing(4),
+        },
+    },
+    menuTitle: {
+        fontWeight: 400,
+        fontSize: '20px',
+        paddingBottom: theme.spacing(2),
+    },
+    selectInput: {
+        margin: '8px 0',
+    },
+}); });
+
+var useStyles$4 = core.makeStyles(function (theme) { return ({
+    icon: {
+        marginRight: theme.spacing(1.5),
+        marginTop: theme.spacing(0.5),
+        scale: 1.5,
+    },
+    selectContainer: {
+        padding: '8px 0',
+    },
+    selectRoot: {
+        '&:focus': {
+            backgroundColor: 'transparent',
+        },
+    },
+    hidden: {
+        display: 'none',
+    },
+}); });
+
+var TableContext = React.createContext({});
+
+var FilterPanelContext = React.createContext(null);
+var useFilterPanelContext = function () {
+    var context = React.useContext(FilterPanelContext);
+    if (!context) {
+        throw new Error('useFilterPanelContext has to be used within <FilterPanelContext.Provider>');
+    }
+    return context;
+};
+
+var SelectFilter = function (props) {
+    var _a, _b, _c;
+    var options = props.options, columnId = props.columnId, multiple = props.multiple;
+    var classes = useStyles$4();
+    var _d = React.useContext(TableContext), table = _d.table, stagedColumnFilters = _d.stagedColumnFilters, stageFilterSelections = _d.stageFilterSelections;
+    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
+    var _f = useFilterPanelContext().anchorState, setAnchorEl = _f[1];
+    var column = table.getColumn(columnId);
+    var meta = column.columnDef.meta;
+    var filterName = (_a = meta === null || meta === void 0 ? void 0 : meta.filter) === null || _a === void 0 ? void 0 : _a.name;
+    var value = '';
+    if (stageFilterSelections && !!stagedColumnFilters.get(columnId)) {
+        value = stagedColumnFilters.get(columnId);
+    }
+    else {
+        value = column.getFilterValue();
+    }
+    var fallbackValue = multiple ? [] : '';
+    var filteredOptions = options.map(function (option) {
+        if (Array.isArray(value)) {
+            if (value.includes(option.value)) {
+                return tslib.__assign(tslib.__assign({}, option), { hide: !stageFilterSelections });
+            }
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            if (value === option.value) {
+                return tslib.__assign(tslib.__assign({}, option), { hide: !stageFilterSelections });
+            }
+        }
+        return tslib.__assign(tslib.__assign({}, option), { hide: false });
+    });
+    var filteredOptionsCount = filteredOptions.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.hide); }).length;
+    var renderedValue = '';
+    if (!stageFilterSelections && value && filteredOptions && filteredOptionsCount > 0) {
+        if (typeof value === 'string' || typeof value === 'number') {
+            renderedValue = (_c = (_b = filteredOptions.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : filterName;
+        }
+        else if (Array.isArray(value) && value.length > 0) {
+            renderedValue = value.length + " selected";
+        }
+        else {
+            renderedValue = filterName;
+        }
+    }
+    var handleChange = function (event) {
+        event.stopPropagation();
+        if (stageFilterSelections) {
+            stagedColumnFilters.update(columnId, event.target.value);
+        }
+        else {
+            column.setFilterValue(event.target.value);
+            setAnchorEl(null);
+        }
+    };
+    var handleItemClick = function () {
+        if (multiple) {
+            if (!stageFilterSelections && filteredOptionsCount === 1) {
+                setOpen(false);
+            }
+            else {
+                setOpen(false);
+            }
+        }
+    };
+    return (React.createElement(core.Box, { className: classes.selectContainer },
+        React.createElement(core.FormControl, { variant: "outlined", fullWidth: true },
+            React.createElement(core.InputLabel, { id: "select-filter-label-" + filterName }, filterName || 'filter'),
+            React.createElement(core.Select, { variant: "outlined", open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: stageFilterSelections ? undefined : function () { return React.createElement(commonUi.Typography, null, renderedValue); }, label: filterName || 'filter', labelId: "select-filter-label-" + filterName, disabled: !filteredOptionsCount, IconComponent: webIcons.ChevronDown, onChange: handleChange, fullWidth: true, classes: {
+                    root: classes.selectRoot,
+                    icon: classes.icon,
+                }, MenuProps: {
+                    disablePortal: true,
+                    anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    },
+                    transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    },
+                    getContentAnchorEl: null,
+                } }, filteredOptions.map(function (option, index) {
+                return (React.createElement(commonUi.MenuItem, { classes: { root: option.hide ? classes.hidden : undefined }, key: "option-" + value + "-" + index, value: option.value, onClick: handleItemClick }, option.label));
+            })))));
+};
+
+var ToggleFilter = function (props) {
+    var table = React.useContext(TableContext).table;
+    var columnId = props.columnId;
+    var column = table.getColumn(columnId);
+    var meta = column.columnDef.meta;
+    var filterName = meta.filter.name;
+    var value = column.getFilterValue();
+    var handleChange = function (event, checked) {
+        event.stopPropagation();
+        column.setFilterValue(checked);
+    };
+    return React.createElement(core.FormControlLabel, { control: React.createElement(core.Switch, { checked: value, onChange: handleChange }), label: filterName });
+};
+
+var FilterControl = function (props) {
+    var input = props.input, columnFilter = tslib.__rest(props, ["input"]);
+    var inputDictionary = {
+        text: core.TextField,
+        select: SelectFilter,
+        'multi-select': SelectFilter,
+        toggle: ToggleFilter,
+    };
+    var propsDictionary = {
+        select: { multiple: false },
+        'multi-select': { multiple: true },
+    };
+    // @ts-expect-error - todo.
+    return React.createElement("div", null, React.createElement(inputDictionary[input], tslib.__assign(tslib.__assign({}, columnFilter), propsDictionary[input])));
+};
+
+var useColumnFilters = function (table) {
+    var selectedColumnFilters = getSelectedColumnFilters(table.getState());
+    var columnFilters = getColumnFilters(table.getAllFlatColumns());
+    var hasColumnFilters = columnFilters.length > 0;
+    var deselectColumnFilter = makeDeselectColumnFilter(table);
+    var formatSelectedFilterText = makeFormatSelectedFilterText(table);
+    var resetColumnFilters = table.resetColumnFilters;
+    return {
+        selectedColumnFilters: selectedColumnFilters,
+        columnFilters: columnFilters,
+        hasColumnFilters: hasColumnFilters,
+        deselectColumnFilter: deselectColumnFilter,
+        formatSelectedFilterText: formatSelectedFilterText,
+        resetColumnFilters: resetColumnFilters,
+    };
+};
+function getSelectedColumnFilters(state) {
+    var columnFilters = state.columnFilters;
+    var selectedColumnFilters = columnFilters.reduce(function (acc, columnFilter) {
+        var id = columnFilter.id, value = columnFilter.value;
+        var selections = [];
+        if (value) {
+            if (Array.isArray(value)) {
+                value.forEach(function (innerValue) {
+                    selections.push({ id: id, value: innerValue });
+                });
+            }
+            else if (typeof value === 'string' || typeof value === 'number') {
+                selections.push({ id: id, value: value });
+            }
+        }
+        return tslib.__spreadArray(tslib.__spreadArray([], acc), selections);
+    }, []);
+    return selectedColumnFilters;
+}
+function getColumnFilters(columns) {
+    return columns
+        .map(function (column) {
+        var meta = column.columnDef.meta;
+        if (meta === null || meta === void 0 ? void 0 : meta.filter) {
+            return tslib.__assign({ columnId: column.id }, meta.filter);
+        }
+    })
+        .filter(Boolean);
+}
+function makeDeselectColumnFilter(table) {
+    return function (columnFilter) {
+        var column = table.getColumn(columnFilter.id);
+        column.setFilterValue(function (prev) {
+            if (Array.isArray(prev)) {
+                return prev.filter(function (value) { return value !== columnFilter.value; });
+            }
+            else if (typeof prev === 'string' || typeof prev === 'number') {
+                return null;
+            }
+            return prev;
+        });
+    };
+}
+function makeFormatSelectedFilterText(table) {
+    return function (columnFilter) {
+        var column = table.getColumn(columnFilter.id);
+        var meta = column.columnDef.meta;
+        var name = (meta === null || meta === void 0 ? void 0 : meta.filter.name) || '';
+        var optionMatch = meta === null || meta === void 0 ? void 0 : meta.filter.options.find(function (option) { return option.value === columnFilter.value; });
+        var label = optionMatch === null || optionMatch === void 0 ? void 0 : optionMatch.label;
+        return [name, label];
+    };
+}
+
+var useStagedColumnFilters = function (selectedColumnFilters) {
+    var _a = React.useState(function () {
+        return selectedColumnFilters.reduce(function (acc, _a) {
+            var id = _a.id, value = _a.value;
+            if (acc.has(id)) {
+                var existingValue = acc.get(id);
+                // If the existing value is a string, convert it to an array and add the new value
+                if (typeof existingValue === 'string') {
+                    acc.set(id, [existingValue, value]);
+                }
+                else {
+                    existingValue.push(value);
+                }
+            }
+            else {
+                acc.set(id, value);
+            }
+            return acc;
+        }, new Map());
+    }), columnInputValues = _a[0], setColumnInputValues = _a[1];
+    var filterState = {
+        update: function (columnId, value) {
+            return setColumnInputValues(columnInputValues.set(columnId, value));
+        },
+        get: function (columnId) { return columnInputValues.get(columnId); },
+        clear: function () {
+            columnInputValues.clear();
+            setColumnInputValues(columnInputValues);
+        },
+        delete: function (columnFilter) {
+            var values = columnInputValues.get(columnFilter.id);
+            if (values && Array.isArray(values)) {
+                var valueIndex = values.indexOf(columnFilter.value);
+                values.splice(valueIndex, 1);
+                if (values.length > 0) {
+                    columnInputValues.set(columnFilter.id, values);
+                }
+                else {
+                    columnInputValues.delete(columnFilter.id);
+                }
+            }
+            else {
+                columnInputValues.delete(columnFilter.id);
+            }
+            setColumnInputValues(columnInputValues);
+        },
+        exist: function () { return columnInputValues.size > 0; },
+    };
+    return filterState;
+};
+
+var Panel = function (props) {
+    var anchorEl = props.anchorEl, onClose = props.onClose;
+    var classes = useStyles$5();
+    var _a = React.useContext(TableContext), table = _a.table, stagedColumnFilters = _a.stagedColumnFilters, stageFilterSelections = _a.stageFilterSelections;
+    var paperRef = React.useRef(null);
+    var _b = useColumnFilters(table), columnFilters = _b.columnFilters, resetColumnFilters = _b.resetColumnFilters;
+    var handleClick = function (e) {
+        var _a;
+        var rect = (_a = paperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            var buffer = 10;
+            var mouseX = e.nativeEvent.x;
+            var mouseY = e.nativeEvent.y;
+            var xHit = rect.x - buffer < mouseX && mouseX < rect.x + rect.width + buffer;
+            var yHit = rect.y - buffer < mouseY && mouseY < rect.y + rect.height + buffer;
+            if (!xHit || !yHit) {
+                onClose();
+            }
+        }
+    };
+    var handleApplyClick = function () {
+        if (stagedColumnFilters.exist()) {
+            columnFilters.forEach(function (columnFilter) {
+                var columnInputValue = stagedColumnFilters.get(columnFilter.columnId);
+                if (columnInputValue) {
+                    var column = table.getColumn(columnFilter.columnId);
+                    column.setFilterValue(columnInputValue);
+                }
+            });
+        }
+        else {
+            resetColumnFilters();
+        }
+        onClose();
+    };
+    var handleCancelClick = function () {
+        onClose();
+    };
+    var open = Boolean(anchorEl);
+    return (React.createElement(commonUi.Popover, { onClick: handleClick, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right',
+        }, className: classes.filterPopover, onClose: onClose, open: open, PaperProps: {
+            style: {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                borderRadius: 0,
+            },
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'right',
+        } },
+        React.createElement(commonUi.Paper, { className: classes.filterPopoverContents, elevation: 2 },
+            React.createElement(commonUi.Box, tslib.__assign({}, { ref: paperRef }, { padding: 3 }),
+                React.createElement(commonUi.Typography, { className: classes.menuTitle }, "Filter By"),
+                columnFilters.map(function (columnFilter, i) { return (React.createElement(FilterControl, tslib.__assign({}, columnFilter, { key: i }))); })),
+            stageFilterSelections && (React.createElement(commonUi.Box, { className: classes.buttonBox },
+                React.createElement(adminUi.Button, { variant: "secondary", onClick: handleCancelClick }, "Cancel"),
+                React.createElement(adminUi.Button, { onClick: handleApplyClick }, "Apply"))))));
+};
+
+var useStyles$3 = core.makeStyles({
+    root: {
+        justifySelf: 'end',
+        gridArea: 'columnFilter',
+    },
+});
+
+var Trigger = function (props) {
+    var _a = props.label, label = _a === void 0 ? 'Filter' : _a, onClick = props.onClick;
+    var classes = useStyles$3();
+    return (React.createElement(adminUi.Button, { className: classes.root, onClick: onClick, startIcon: React.createElement(commonUi.Icon, { icon: webIcons.Filter }), textTransform: "none", variant: "ghost" }, label));
+};
+
+var FilterPanel = function () {
+    var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var _b = React.useContext(TableContext), stageFilterSelections = _b.stageFilterSelections, stagedColumnFilters = _b.stagedColumnFilters;
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        if (stageFilterSelections)
+            stagedColumnFilters.clear();
+        setAnchorEl(null);
+    };
+    return (React.createElement(FilterPanelContext.Provider, { value: { anchorState: [anchorEl, setAnchorEl] } },
+        React.createElement(Trigger, { onClick: handleClick }),
+        React.createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
+};
+
+var useStyles$2 = core.makeStyles({
+    root: {
+        justifySelf: 'start',
+        maxWidth: 300,
+        minWidth: 200,
+        width: '100%',
+        gridArea: 'globalFilter',
+    },
+});
+
+var GlobalFilter = function (props) {
+    var value = props.value, setValue = props.setValue, restProps = tslib.__rest(props, ["value", "setValue"]);
+    var classes = useStyles$2();
+    var handleChange = function (e) {
+        setValue(e.target.value);
+    };
+    return (React.createElement(core.TextField, tslib.__assign({ className: classes.root, variant: "outlined", value: value, onChange: handleChange, InputProps: {
+            startAdornment: (React.createElement(core.InputAdornment, { position: "start" },
+                React.createElement(commonUi.Icon, { icon: webIcons.Search }))),
+        } }, restProps)));
+};
+
+var TableHeaderRow = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement("tr", tslib.__assign({ "data-table-element": 'header-row' }, restProps), children));
+};
+
+// const getWidth = (props: TableHeaderCellProps) => {
+//   const {
+//     column: { isActionColumn },
+//     tableProps: { fullWidth },
+//   } = props
+//   let width
+//   if (fullWidth && isActionColumn) {
+//     width = '0.0000000001%'
+//   }
+//   if (fullWidth && !isActionColumn) {
+//     width = '1%'
+//   }
+//   if (!fullWidth && isActionColumn) {
+//     width = 72
+//   }
+//   if (!fullWidth && !isActionColumn) {
+//     width = undefined
+//   }
+//   return width
+// }
+var useStyles$1 = core.makeStyles(function (theme) { return ({
+    root: {
+        borderBottomStyle: 'solid',
+        borderBottomWidth: 2,
+        borderBottomColor: theme.palette.grey[100],
+        padding: theme.spacing(2),
+        textAlign: 'left',
+        fontWeight: 500,
+    },
+    box: {
+        cursor: function (_a) {
+            var sortable = _a.sortable;
+            return (sortable ? 'pointer' : 'default');
+        },
+    },
+}); });
+
+var TableHeaderCell = function (props) {
+    var _a;
+    var children = props.children, context = props.context, restProps = tslib.__rest(props, ["children", "context"]);
+    var sortable = context.header.column.getCanSort();
+    var sorted = context.header.column.getIsSorted();
+    var handleSort = context.header.column.getToggleSortingHandler();
+    var classes = useStyles$1(tslib.__assign(tslib.__assign({}, props), { sortable: sortable }));
+    var _b = core.useTheme(), spacing = _b.spacing, palette = _b.palette;
+    var sortIndicators = {
+        asc: webIcons.ChevronUp,
+        desc: webIcons.ChevronDown,
+    };
+    var idBase = (_a = context.table.options.meta) === null || _a === void 0 ? void 0 : _a.idBase;
+    var dataTourIdProps = idBase && sortable
+        ? { 'data-tour-id': ("sort-" + idBase + "-on-" + context.header.column.id).toLowerCase().replace(/\s+/g, '-') }
+        : {};
+    return (React.createElement("th", tslib.__assign({ className: classes.root }, restProps),
+        React.createElement(commonUi.Box, tslib.__assign({ className: classes.box, display: "flex", alignItems: "center", gridGap: spacing(1), onClick: handleSort }, dataTourIdProps),
+            children,
+            sortable && !sorted && React.createElement(commonUi.Icon, { icon: webIcons.Sort, color: palette.grey[500] }),
+            sortable && sorted && React.createElement(commonUi.Icon, { icon: sortIndicators[sorted] }))));
+};
+
+var useStyles = core.makeStyles({
+    chip: {
+        overflow: 'visible',
+        height: 'auto',
+    },
+    label: {
+        whiteSpace: 'normal',
+    },
+});
+
+var ColumnFilterChip = function (props) {
+    var columnFilter = props.columnFilter, onClick = props.onClick, label = props.label;
+    var classes = useStyles();
+    return (React.createElement(commonUi.Chip, { className: classes.chip, onDelete: function () { return onClick(columnFilter); }, label: React.createElement(commonUi.Box, { display: "flex", gridGap: 4, flexWrap: "wrap" },
+            React.createElement(commonUi.Typography, null,
+                label[0],
+                ":"),
+            React.createElement(commonUi.Typography, tslib.__assign({ className: classes.label, weight: "semi-bold" }, { component: 'span' }), label[1])) }));
+};
+
+var TableControlsContainer = function (props) {
+    var showTitle = props.showTitle, showGlobalSearch = props.showGlobalSearch, showColumnFilter = props.showColumnFilter;
+    var gridTemplateAreas;
+    switch (true) {
+        case showTitle && showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \"title .\"\n        \"globalFilter columnFilter\"\n      ";
+            break;
+        case showTitle && !showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \"title columnFilter\"\n      ";
+            break;
+        case !showTitle && showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \"globalFilter columnFilter\"\n      ";
+            break;
+        case showTitle && !showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = "\n        \"title .\"\n      ";
+            break;
+        case !showTitle && !showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \". columnFilter\"\n      ";
+            break;
+        case !showTitle && showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = "\n        \"globalFilter .\"\n      ";
+            break;
+        case showTitle && showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = "\n        \"title .\"\n        \"globalFilter .\"\n      ";
+            break;
+    }
+    return (React.createElement(core.Box, { display: "grid", gridTemplateColumns: "repeat(2, minmax(150px, 1fr))", gridTemplateAreas: gridTemplateAreas, gridGap: 16, marginBottom: 3 }, props.children));
+};
+
+var ColumnFilterResetButton = function (props) {
+    var _a = props.children, children = _a === void 0 ? 'Clear All' : _a, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(adminUi.Button, tslib.__assign({ variant: "text", textTransform: "none" }, restProps), children));
+};
+
+var defaultTableProps = {
+    enableSortingRemoval: true,
+    fullWidth: true,
+    paginated: true,
+    sortable: false,
+    searchable: false,
+};
+var Table = function (props) {
+    var title = props.title, data = props.data, columns = props.columns, enableSortingRemoval = props.enableSortingRemoval, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalSortingState = props.sortingState, externalVisibilityState = props.visibilityState, paginated = props.paginated, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase, stageFilterSelections = props.stageFilterSelections;
+    var classes = useStyles$6(props);
+    var rootRef = React.useRef(null);
+    // Prepare Empty State
+    var isEmpty = data.length === 0;
+    var isEmptyComponentValid = Empty && React.isValidElement(React.createElement(Empty));
+    // Prepare Sorting
+    var _a = externalSortingState || [], sorting = _a[0], setSorting = _a[1];
+    var isControlledColumnSort = Boolean(externalSortingState);
+    var controlledColumnSortOptions = { onSortingChange: setSorting, manualSorting: true };
+    // Prepare Global Filtering
+    var _b = externalGlobalFilterState || [], globalFilter = _b[0], setGlobalFilter = _b[1];
+    var isControlledGlobalFilter = Boolean(externalGlobalFilterState);
+    var controlledGlobalFilterOptions = { onGlobalFilterChange: setGlobalFilter, manualFiltering: true };
+    // Prepare ColumnFiltering
+    var _c = externalFilterState || [], columnFilters = _c[0], setColumnFilters = _c[1];
+    var isControlledColumnFilters = Boolean(externalFilterState);
+    var controlledColumnFiltersOptions = { onColumnFiltersChange: setColumnFilters, manualFiltering: true };
+    // Prepare Pagination
+    var _d = externalPaginationState || [], pagination = _d[0], setPagination = _d[1];
+    var isControlledPagination = Boolean(externalPaginationState && pageCount);
+    var controlledPaginationOptions = { manualPagination: true, onPaginationChange: setPagination, pageCount: pageCount };
+    // Prepare Column Visibility
+    var columnVisibility = (externalVisibilityState || [])[0];
+    var isControlledColumnVisibility = Boolean(externalVisibilityState);
+    // Init table instance
+    var table = reactTable.useReactTable(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ data: data, columns: columns, state: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, (isControlledPagination && { pagination: pagination })), (isControlledGlobalFilter && { globalFilter: globalFilter })), (isControlledColumnFilters && { columnFilters: columnFilters })), (isControlledColumnVisibility && { columnVisibility: columnVisibility })), (isControlledColumnSort && { sorting: sorting })), enableSorting: sortable, enableSortingRemoval: enableSortingRemoval, globalFilterFn: coercedValueIncludesString, getCoreRowModel: reactTable.getCoreRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel() }, (paginated && { getPaginationRowModel: reactTable.getPaginationRowModel() })), (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)), { meta: { idBase: idBase } }));
+    var _f = useColumnFilters(table), selectedColumnFilters = _f.selectedColumnFilters, hasColumnFilters = _f.hasColumnFilters, deselectColumnFilter = _f.deselectColumnFilter, formatSelectedFilterText = _f.formatSelectedFilterText, resetColumnFilters = _f.resetColumnFilters;
+    // stagedColumnFilters is only used when stageFilterSelections is enabled
+    var stagedColumnFilters = useStagedColumnFilters(selectedColumnFilters);
+    var handlePagination = function (_e, pageNumber) {
+        var pageIndex = pageNumber - 1;
+        table.setPageIndex(pageIndex);
+    };
+    var showTitle = Boolean(title);
+    var showGlobalSearch = Boolean(searchable || isControlledGlobalFilter);
+    var showColumnFilter = Boolean(hasColumnFilters);
+    var showControls = Boolean(showTitle || showGlobalSearch || showColumnFilter);
+    return (React.createElement(TableContext.Provider, { value: { table: table, stagedColumnFilters: stagedColumnFilters, stageFilterSelections: stageFilterSelections } },
+        React.createElement(commonUi.Box, tslib.__assign({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root" }, (table.getPageCount() > 1 && {
+            minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
+        })),
+            showControls && (React.createElement(commonUi.Box, null,
+                React.createElement(TableControlsContainer, { showTitle: showTitle, showGlobalSearch: showGlobalSearch, showColumnFilter: showColumnFilter },
+                    showTitle && (React.createElement(core.Typography, { style: { gridArea: 'title', alignSelf: 'center', fontSize: '18px', lineHeight: '27px' } }, title)),
+                    showGlobalSearch && (React.createElement(GlobalFilter, tslib.__assign({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
+                    showColumnFilter && React.createElement(FilterPanel, null)),
+                React.createElement(commonUi.Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
+                    selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React.createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: function (columnFilter) {
+                            if (stageFilterSelections) {
+                                stagedColumnFilters.delete(columnFilter);
+                            }
+                            deselectColumnFilter(columnFilter);
+                        } })); }),
+                    selectedColumnFilters.length >= 1 && (React.createElement(ColumnFilterResetButton, { onClick: function () {
+                            if (stageFilterSelections) {
+                                stagedColumnFilters.clear();
+                            }
+                            resetColumnFilters();
+                        } }))))),
+            React.createElement(commonUi.Box, { className: classes.tableContainer, flexGrow: loading || isEmpty ? 0 : 1 },
+                React.createElement("table", { className: classes.table },
+                    React.createElement(TableHeader, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(TableHeaderRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React.createElement(TableHeaderCell, { key: header.id, context: header.getContext() }, reactTable.flexRender(header.column.columnDef.header, header.getContext()))); }))); })),
+                    !loading && (React.createElement(TableBody, null, table.getRowModel().rows.map(function (row) { return (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map(function (cell) { return (React.createElement(TableCell, { key: cell.id }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))))),
+            isEmpty && isEmptyComponentValid && Empty && !loading && (React.createElement(commonUi.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 }, React.createElement(Empty))),
+            loading && (React.createElement(commonUi.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
+                React.createElement(commonUi.CircularProgress, { size: 80, color: "inherit" }))),
+            paginated && table.getPageCount() > 1 && (React.createElement(TableFooter, null,
+                React.createElement(lab.Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: handlePagination, disabled: loading }))))));
+};
+Table.defaultProps = defaultTableProps;
+
+var validateAction = function (action) {
+    var icon = action.icon, label = action.label, onClick = action.onClick;
+    var onClickIsValid = typeof onClick === 'function';
+    var labelIsValid = typeof label === 'string';
+    var iconIsValid = icon && React.isValidElement(React.createElement(icon));
+    return onClickIsValid && labelIsValid && iconIsValid;
+};
+
+var RowActions = function (props) {
+    var context = props.context, actions = props.actions;
+    var validActions = actions.filter(validateAction);
+    var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var openMenu = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var closeMenu = function () {
+        setAnchorEl(null);
+    };
+    var actionsCount = validActions.length;
+    var mainActions;
+    var overflowActions;
+    if (actionsCount <= 3) {
+        mainActions = validActions;
+    }
+    else {
+        var firstAction = validActions[0], secondAction = validActions[1], restActions = validActions.slice(2);
+        mainActions = [firstAction, secondAction];
+        overflowActions = restActions;
+    }
+    return (React.createElement(commonUi.Box, { display: "flex" },
+        mainActions.map(function (_a) {
+            var label = _a.label, onClick = _a.onClick, icon = _a.icon, restProps = tslib.__rest(_a, ["label", "onClick", "icon"]);
+            return (React.createElement(commonUi.Tooltip, { title: label, key: label },
+                React.createElement(commonUi.IconButton, tslib.__assign({ size: "small", onClick: function () { return onClick(context); } }, restProps),
+                    React.createElement(commonUi.Icon, { icon: icon }))));
+        }),
+        overflowActions && (React.createElement(React.Fragment, null,
+            React.createElement(commonUi.IconButton, { size: "small", onClick: openMenu },
+                React.createElement(commonUi.Icon, { icon: webIcons.More })),
+            React.createElement(commonUi.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, overflowActions.map(function (action) { return (React.createElement(commonUi.MenuItem, { key: action.label, onClick: function () { return action.onClick(context); } }, action.label)); }))))));
+};
+
+exports.GlobalFilter = GlobalFilter;
+exports.RowActions = RowActions;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHeader = TableHeader;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableHeaderRow = TableHeaderRow;
+exports.TableRow = TableRow;
+//# sourceMappingURL=index.js.map