@popmenu/table 0.126.4 → 0.127.1

package/build/cjs/index.js

@@ -1,113 +1,252 @@
 '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 lab = require('@material-ui/lab');
+var reactTable = require('@tanstack/react-table');
 var adminUi = require('@popmenu/admin-ui');
 
-var useTableRowStyles = core.makeStyles(function (theme) { return ({
-    root: function () { return ({
-        '&:nth-child(even)': {
-            backgroundColor: theme.palette.grey[100],
-        },
-    }); },
-}); });
+const useStyles$6 = core.makeStyles({
+    root: {
+        justifySelf: 'start',
+        maxWidth: 300,
+        minWidth: 200,
+        width: '100%',
+        gridArea: 'globalFilter',
+    },
+});
+
+const GlobalFilter = (props) => {
+    const { value, setValue, ...restProps } = props;
+    const classes = useStyles$6();
+    const handleChange = (e) => {
+        setValue(e.target.value);
+    };
+    return (React.createElement(core.TextField, { 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 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));
+const validateAction = (action) => {
+    const { icon, label, onClick } = action;
+    const onClickIsValid = typeof onClick === 'function';
+    const labelIsValid = typeof label === 'string';
+    const iconIsValid = icon && React.isValidElement(React.createElement(icon));
+    return onClickIsValid && labelIsValid && iconIsValid;
 };
 
-var tableConstants = {
+const RowActions = (props) => {
+    const { context, actions } = props;
+    const validActions = actions.filter(validateAction);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const openMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const closeMenu = () => {
+        setAnchorEl(null);
+    };
+    const actionsCount = validActions.length;
+    let mainActions;
+    let overflowActions;
+    if (actionsCount <= 3) {
+        mainActions = validActions;
+    }
+    else {
+        const [firstAction, secondAction, ...restActions] = validActions;
+        mainActions = [firstAction, secondAction];
+        overflowActions = restActions;
+    }
+    return (React.createElement(commonUi.Box, { display: "flex" },
+        mainActions.map(({ label, onClick, icon, ...restProps }) => (React.createElement(commonUi.Tooltip, { title: label, key: label },
+            React.createElement(commonUi.IconButton, { size: "small", onClick: () => 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((action) => (React.createElement(commonUi.MenuItem, { key: action.label, onClick: () => action.onClick(context) }, action.label))))))));
+};
+
+const useColumnFilters = (table) => {
+    const selectedColumnFilters = getSelectedColumnFilters(table.getState());
+    const columnFilters = getColumnFilters(table.getAllFlatColumns());
+    const hasColumnFilters = columnFilters.length > 0;
+    const deselectColumnFilter = makeDeselectColumnFilter(table);
+    const formatSelectedFilterText = makeFormatSelectedFilterText(table);
+    const resetColumnFilters = table.resetColumnFilters;
+    return {
+        selectedColumnFilters,
+        columnFilters,
+        hasColumnFilters,
+        deselectColumnFilter,
+        formatSelectedFilterText,
+        resetColumnFilters,
+    };
+};
+function getSelectedColumnFilters(state) {
+    const { columnFilters } = state;
+    const selectedColumnFilters = columnFilters.reduce((acc, columnFilter) => {
+        const { id, value } = columnFilter;
+        const selections = [];
+        if (value) {
+            if (Array.isArray(value)) {
+                value.forEach((innerValue) => {
+                    selections.push({ id, value: innerValue });
+                });
+            }
+            else if (typeof value === 'string' || typeof value === 'number') {
+                selections.push({ id, value });
+            }
+        }
+        return [...acc, ...selections];
+    }, []);
+    return selectedColumnFilters;
+}
+function getColumnFilters(columns) {
+    return columns
+        .map((column) => {
+        const { meta } = column.columnDef;
+        if (meta?.filter) {
+            return { columnId: column.id, ...meta.filter };
+        }
+    })
+        .filter(Boolean);
+}
+function makeDeselectColumnFilter(table) {
+    return function (columnFilter) {
+        const column = table.getColumn(columnFilter.id);
+        column.setFilterValue((prev) => {
+            if (Array.isArray(prev)) {
+                return prev.filter((value) => value !== columnFilter.value);
+            }
+            else if (typeof prev === 'string' || typeof prev === 'number') {
+                return null;
+            }
+            return prev;
+        });
+    };
+}
+function makeFormatSelectedFilterText(table) {
+    return function (columnFilter) {
+        const column = table.getColumn(columnFilter.id);
+        const { meta } = column.columnDef;
+        const name = meta?.filter.name || '';
+        const optionMatch = meta?.filter.options.find((option) => option.value === columnFilter.value);
+        const label = optionMatch?.label;
+        return [name, label];
+    };
+}
+
+const useStagedColumnFilters = (selectedColumnFilters) => {
+    const [columnInputValues, setColumnInputValues] = React.useState(() => selectedColumnFilters.reduce((acc, { id, value }) => {
+        if (acc.has(id)) {
+            const 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()));
+    const filterState = {
+        update: (columnId, value) => setColumnInputValues(columnInputValues.set(columnId, value)),
+        get: (columnId) => columnInputValues.get(columnId),
+        clear: () => {
+            columnInputValues.clear();
+            setColumnInputValues(columnInputValues);
+        },
+        delete: (columnFilter) => {
+            const values = columnInputValues.get(columnFilter.id);
+            if (values && Array.isArray(values)) {
+                const 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: () => columnInputValues.size > 0,
+    };
+    return filterState;
+};
+
+const tableConstants = {
     tableTypography: 'body1',
     cellPaddingFactor: 2};
 
-var coercedValueIncludesString = function (row, columnId, value) {
+const coercedValueIncludesString = (row, columnId, value) => {
     if (value === '')
         return true;
-    var cellValue = row.getValue(columnId);
+    const 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\"]");
+const getTableMinHeight = (rootRef, pageSize) => {
+    const defaultBodyRowHeight = 56;
+    const defaultHeaderRowHeight = 57;
+    const defaultFooterHeight = 88;
+    let minHeight = defaultBodyRowHeight * pageSize + defaultHeaderRowHeight + defaultFooterHeight;
+    if (rootRef?.current) {
+        const rootTableNode = rootRef.current;
+        const headerRowNode = rootTableNode.querySelector(`[data-table-element="header-row"]`);
+        const bodyRowNode = rootTableNode.querySelector(`[data-table-element="body-row"]`);
         if (headerRowNode && bodyRowNode) {
-            var headerRowHeight = headerRowNode.getBoundingClientRect().height;
-            var bodyRowHeight = bodyRowNode.getBoundingClientRect().height;
+            const headerRowHeight = headerRowNode.getBoundingClientRect().height;
+            const 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',
-        }); },
-    });
+const useStyles$5 = core.makeStyles({
+    chip: {
+        overflow: 'visible',
+        height: 'auto',
+    },
+    label: {
+        whiteSpace: 'normal',
+    },
 });
 
-var TableHeader = function (props) {
-    var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    return React.createElement("thead", tslib.__assign({}, restProps), children);
+const ColumnFilterChip = (props) => {
+    const { columnFilter, onClick, label } = props;
+    const classes = useStyles$5();
+    return (React.createElement(commonUi.Chip, { className: classes.chip, onDelete: () => onClick(columnFilter), label: React.createElement(commonUi.Box, { display: "flex", gridGap: 4, flexWrap: "wrap" },
+            React.createElement(commonUi.Typography, null,
+                label[0],
+                ":"),
+            React.createElement(commonUi.Typography, { className: classes.label, weight: "semi-bold", component: 'span' }, label[1])) }));
 };
 
-var TableFooter = function (props) {
-    return (React.createElement(commonUi.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4 }, props.children));
+const ColumnFilterResetButton = (props) => {
+    const { children = 'Clear All', ...restProps } = props;
+    return (React.createElement(adminUi.Button, { variant: "text", textTransform: "none", ...restProps }, children));
 };
 
-var useStyles$5 = core.makeStyles(function (theme) { return ({
+const useStyles$4 = core.makeStyles((theme) => ({
     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",
+        padding: `0px ${theme.spacing(3)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
     },
     buttonLabel: {
         fontWeight: 400,
@@ -152,9 +291,20 @@ var useStyles$5 = core.makeStyles(function (theme) { return ({
     selectInput: {
         margin: '8px 0',
     },
-}); });
+}));
+
+const TableContext = React.createContext({});
+
+const FilterPanelContext = React.createContext(null);
+const useFilterPanelContext = () => {
+    const context = React.useContext(FilterPanelContext);
+    if (!context) {
+        throw new Error('useFilterPanelContext has to be used within <FilterPanelContext.Provider>');
+    }
+    return context;
+};
 
-var useStyles$4 = core.makeStyles(function (theme) { return ({
+const useStyles$3 = core.makeStyles((theme) => ({
     icon: {
         marginRight: theme.spacing(1.5),
         marginTop: theme.spacing(0.5),
@@ -171,64 +321,52 @@ var useStyles$4 = core.makeStyles(function (theme) { return ({
     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 = '';
+}));
+
+const SelectFilter = (props) => {
+    const { options, columnId, multiple } = props;
+    const classes = useStyles$3();
+    const { table, stagedColumnFilters, stageFilterSelections } = React.useContext(TableContext);
+    const [open, setOpen] = React.useState(false);
+    const { anchorState: [, setAnchorEl], } = useFilterPanelContext();
+    const column = table.getColumn(columnId);
+    const { meta } = column.columnDef;
+    const filterName = meta?.filter?.name;
+    let value = '';
     if (stageFilterSelections && !!stagedColumnFilters.get(columnId)) {
         value = stagedColumnFilters.get(columnId);
     }
     else {
         value = column.getFilterValue();
     }
-    var fallbackValue = multiple ? [] : '';
-    var filteredOptions = options.map(function (option) {
+    const fallbackValue = multiple ? [] : '';
+    const filteredOptions = options.map((option) => {
         if (Array.isArray(value)) {
             if (value.includes(option.value)) {
-                return tslib.__assign(tslib.__assign({}, option), { hide: !stageFilterSelections });
+                return { ...option, hide: !stageFilterSelections };
             }
         }
         if (typeof value === 'string' || typeof value === 'number') {
             if (value === option.value) {
-                return tslib.__assign(tslib.__assign({}, option), { hide: !stageFilterSelections });
+                return { ...option, hide: !stageFilterSelections };
             }
         }
-        return tslib.__assign(tslib.__assign({}, option), { hide: false });
+        return { ...option, hide: false };
     });
-    var filteredOptionsCount = filteredOptions.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.hide); }).length;
-    var renderedValue = '';
+    const filteredOptionsCount = filteredOptions.filter((option) => !option?.hide).length;
+    let 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;
+            renderedValue = filteredOptions.find((option) => option.value === value)?.label ?? filterName;
         }
         else if (Array.isArray(value) && value.length > 0) {
-            renderedValue = value.length + " selected";
+            renderedValue = `${value.length} selected`;
         }
         else {
             renderedValue = filterName;
         }
     }
-    var handleChange = function (event) {
+    const handleChange = (event) => {
         event.stopPropagation();
         if (stageFilterSelections) {
             stagedColumnFilters.update(columnId, event.target.value);
@@ -238,7 +376,7 @@ var SelectFilter = function (props) {
             setAnchorEl(null);
         }
     };
-    var handleItemClick = function () {
+    const handleItemClick = () => {
         if (multiple) {
             if (!stageFilterSelections && filteredOptionsCount === 1) {
                 setOpen(false);
@@ -250,8 +388,8 @@ var SelectFilter = function (props) {
     };
     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: {
+            React.createElement(core.InputLabel, { id: `select-filter-label-${filterName}` }, filterName || 'filter'),
+            React.createElement(core.Select, { variant: "outlined", open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: stageFilterSelections ? undefined : () => 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: {
@@ -265,188 +403,66 @@ var SelectFilter = function (props) {
                         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));
+                } }, filteredOptions.map((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) {
+const ToggleFilter = (props) => {
+    const table = React.useContext(TableContext).table;
+    const { columnId } = props;
+    const column = table.getColumn(columnId);
+    const meta = column.columnDef.meta;
+    const filterName = meta.filter.name;
+    const value = column.getFilterValue();
+    const handleChange = (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 = {
+const FilterControl = (props) => {
+    const { input, ...columnFilter } = props;
+    const inputDictionary = {
         text: core.TextField,
         select: SelectFilter,
         'multi-select': SelectFilter,
         toggle: ToggleFilter,
     };
-    var propsDictionary = {
+    const 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])));
+    return React.createElement("div", null, React.createElement(inputDictionary[input], { ...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();
+const Panel = (props) => {
+    const { anchorEl, onClose } = props;
+    const classes = useStyles$4();
+    const { table, stagedColumnFilters, stageFilterSelections } = React.useContext(TableContext);
+    const paperRef = React.useRef(null);
+    const { columnFilters, resetColumnFilters } = useColumnFilters(table);
+    const handleClick = (e) => {
+        const rect = paperRef.current?.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;
+            const buffer = 10;
+            const mouseX = e.nativeEvent.x;
+            const mouseY = e.nativeEvent.y;
+            const xHit = rect.x - buffer < mouseX && mouseX < rect.x + rect.width + buffer;
+            const yHit = rect.y - buffer < mouseY && mouseY < rect.y + rect.height + buffer;
             if (!xHit || !yHit) {
                 onClose();
             }
         }
     };
-    var handleApplyClick = function () {
+    const handleApplyClick = () => {
         if (stagedColumnFilters.exist()) {
-            columnFilters.forEach(function (columnFilter) {
-                var columnInputValue = stagedColumnFilters.get(columnFilter.columnId);
+            columnFilters.forEach((columnFilter) => {
+                const columnInputValue = stagedColumnFilters.get(columnFilter.columnId);
                 if (columnInputValue) {
-                    var column = table.getColumn(columnFilter.columnId);
+                    const column = table.getColumn(columnFilter.columnId);
                     column.setFilterValue(columnInputValue);
                 }
             });
@@ -456,10 +472,10 @@ var Panel = function (props) {
         }
         onClose();
     };
-    var handleCancelClick = function () {
+    const handleCancelClick = () => {
         onClose();
     };
-    var open = Boolean(anchorEl);
+    const open = Boolean(anchorEl);
     return (React.createElement(commonUi.Popover, { onClick: handleClick, anchorEl: anchorEl, anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'right',
@@ -474,34 +490,34 @@ var Panel = function (props) {
             horizontal: 'right',
         } },
         React.createElement(commonUi.Paper, { className: classes.filterPopoverContents, elevation: 2 },
-            React.createElement(commonUi.Box, tslib.__assign({}, { ref: paperRef }, { padding: 3 }),
+            React.createElement(commonUi.Box, { 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 }))); })),
+                columnFilters.map((columnFilter, i) => (React.createElement(FilterControl, { ...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({
+const useStyles$2 = 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();
+const Trigger = (props) => {
+    const { label = 'Filter', onClick } = props;
+    const classes = useStyles$2();
     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) {
+const FilterPanel = () => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const { stageFilterSelections, stagedColumnFilters } = React.useContext(TableContext);
+    const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    var handleClose = function () {
+    const handleClose = () => {
         if (stageFilterSelections)
             stagedColumnFilters.clear();
         setAnchorEl(null);
@@ -511,31 +527,75 @@ var FilterPanel = function () {
         React.createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
 };
 
-var useStyles$2 = core.makeStyles({
-    root: {
-        justifySelf: 'start',
-        maxWidth: 300,
-        minWidth: 200,
-        width: '100%',
-        gridArea: 'globalFilter',
-    },
-});
+const TableBody = (props) => {
+    const { children, ...restProps } = props;
+    return React.createElement("tbody", { ...restProps }, children);
+};
 
-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)));
+const useTableCellStyles = core.makeStyles((theme) => ({
+    root: () => ({
+        padding: theme.spacing(tableConstants.cellPaddingFactor),
+    }),
+}));
+
+const TableCell = (props) => {
+    const { children, ...restProps } = props;
+    const { root } = useTableCellStyles(props);
+    return (React.createElement("td", { className: root, ...restProps }, children));
+};
+
+const TableControlsContainer = (props) => {
+    const { showTitle, showGlobalSearch, showColumnFilter } = props;
+    let gridTemplateAreas;
+    switch (true) {
+        case showTitle && showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = `
+        "title ."
+        "globalFilter columnFilter"
+      `;
+            break;
+        case showTitle && !showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = `
+        "title columnFilter"
+      `;
+            break;
+        case !showTitle && showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = `
+        "globalFilter columnFilter"
+      `;
+            break;
+        case showTitle && !showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = `
+        "title ."
+      `;
+            break;
+        case !showTitle && !showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = `
+        ". columnFilter"
+      `;
+            break;
+        case !showTitle && showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = `
+        "globalFilter ."
+      `;
+            break;
+        case showTitle && showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = `
+        "title ."
+        "globalFilter ."
+      `;
+            break;
+    }
+    return (React.createElement(core.Box, { display: "grid", gridTemplateColumns: "repeat(2, minmax(150px, 1fr))", gridTemplateAreas: gridTemplateAreas, gridGap: 16, marginBottom: 3 }, props.children));
 };
 
-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 TableFooter = (props) => {
+    return (React.createElement(commonUi.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4 }, props.children));
+};
+
+const TableHeader = (props) => {
+    const { children, ...restProps } = props;
+    return React.createElement("thead", { ...restProps }, children);
 };
 
 // const getWidth = (props: TableHeaderCellProps) => {
@@ -558,7 +618,7 @@ var TableHeaderRow = function (props) {
 //   }
 //   return width
 // }
-var useStyles$1 = core.makeStyles(function (theme) { return ({
+const useStyles$1 = core.makeStyles((theme) => ({
     root: {
         borderBottomStyle: 'solid',
         borderBottomWidth: 2,
@@ -568,146 +628,146 @@ var useStyles$1 = core.makeStyles(function (theme) { return ({
         fontWeight: 500,
     },
     box: {
-        cursor: function (_a) {
-            var sortable = _a.sortable;
-            return (sortable ? 'pointer' : 'default');
-        },
+        cursor: ({ sortable }) => (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 = {
+}));
+
+const TableHeaderCell = (props) => {
+    const { children, context, ...restProps } = props;
+    const sortable = context.header.column.getCanSort();
+    const sorted = context.header.column.getIsSorted();
+    const handleSort = context.header.column.getToggleSortingHandler();
+    const classes = useStyles$1({ ...props, sortable });
+    const { spacing, palette } = core.useTheme();
+    const 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, '-') }
+    const idBase = context.table.options.meta?.idBase;
+    const 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),
+    return (React.createElement("th", { className: classes.root, ...restProps },
+        React.createElement(commonUi.Box, { 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])) }));
+const TableHeaderRow = (props) => {
+    const { children, ...restProps } = props;
+    return (React.createElement("tr", { "data-table-element": 'header-row', ...restProps }, children));
 };
 
-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));
-};
+const useTableRowStyles = core.makeStyles((theme) => ({
+    root: () => ({
+        '&:nth-child(even)': {
+            backgroundColor: theme.palette.grey[100],
+        },
+    }),
+}));
 
-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));
+const TableRow = (props) => {
+    const { children, ...restProps } = props;
+    const { root } = useTableRowStyles(props);
+    return (React.createElement("tr", { "data-table-element": "body-row", className: root, ...restProps }, children));
 };
 
-var Table = function (_a) {
-    var title = _a.title, data = _a.data, columns = _a.columns, _b = _a.enableSortingRemoval, enableSortingRemoval = _b === void 0 ? true : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? true : _c, loading = _a.loading, _d = _a.searchable, searchable = _d === void 0 ? false : _d, _f = _a.sortable, sortable = _f === void 0 ? false : _f, externalFilterState = _a.filterState, externalGlobalFilterState = _a.globalFilterState, externalPaginationState = _a.paginationState, externalSortingState = _a.sortingState, externalVisibilityState = _a.visibilityState, _g = _a.paginated, paginated = _g === void 0 ? true : _g, pageCount = _a.pageCount, GlobalFilterProps = _a.GlobalFilterProps, Empty = _a.Empty, idBase = _a.idBase, stageFilterSelections = _a.stageFilterSelections;
-    var classes = useStyles$6({ fullWidth: fullWidth });
-    var rootRef = React.useRef(null);
+const useStyles = core.makeStyles(({ typography }) => ({
+    root: ({ fullWidth }) => ({
+        display: fullWidth ? 'flex' : 'inline-flex',
+        flexDirection: 'column',
+    }),
+    table: ({ fullWidth }) => ({
+        borderCollapse: 'collapse',
+        ...(fullWidth && { width: '100%' }),
+        // @ts-expect-error - todo.
+        ...typography[tableConstants.tableTypography],
+    }),
+    tableContainer: () => ({
+        maxWidth: '100%',
+        overflowX: 'auto',
+        overflowY: 'hidden',
+    }),
+}));
+
+const Table = ({ title, data, columns, enableSortingRemoval = true, fullWidth = true, loading, searchable = false, sortable = false, filterState: externalFilterState, globalFilterState: externalGlobalFilterState, paginationState: externalPaginationState, sortingState: externalSortingState, visibilityState: externalVisibilityState, paginated = true, pageCount, GlobalFilterProps, Empty, idBase, stageFilterSelections, }) => {
+    const classes = useStyles({ fullWidth });
+    const rootRef = React.useRef(null);
     // Prepare Empty State
-    var isEmpty = data.length === 0;
-    var isEmptyComponentValid = Empty && React.isValidElement(React.createElement(Empty));
+    const isEmpty = data.length === 0;
+    const isEmptyComponentValid = Empty && React.isValidElement(React.createElement(Empty));
     // Prepare Sorting
-    var _h = externalSortingState || [], sorting = _h[0], setSorting = _h[1];
-    var isControlledColumnSort = Boolean(externalSortingState);
-    var controlledColumnSortOptions = { onSortingChange: setSorting, manualSorting: true };
+    const [sorting, setSorting] = externalSortingState || [];
+    const isControlledColumnSort = Boolean(externalSortingState);
+    const controlledColumnSortOptions = { onSortingChange: setSorting, manualSorting: true };
     // Prepare Global Filtering
-    var _j = externalGlobalFilterState || [], globalFilter = _j[0], setGlobalFilter = _j[1];
-    var isControlledGlobalFilter = Boolean(externalGlobalFilterState);
-    var controlledGlobalFilterOptions = { onGlobalFilterChange: setGlobalFilter, manualFiltering: true };
+    const [globalFilter, setGlobalFilter] = externalGlobalFilterState || [];
+    const isControlledGlobalFilter = Boolean(externalGlobalFilterState);
+    const controlledGlobalFilterOptions = { onGlobalFilterChange: setGlobalFilter, manualFiltering: true };
     // Prepare ColumnFiltering
-    var _k = externalFilterState || [], columnFilters = _k[0], setColumnFilters = _k[1];
-    var isControlledColumnFilters = Boolean(externalFilterState);
-    var controlledColumnFiltersOptions = { onColumnFiltersChange: setColumnFilters, manualFiltering: true };
+    const [columnFilters, setColumnFilters] = externalFilterState || [];
+    const isControlledColumnFilters = Boolean(externalFilterState);
+    const controlledColumnFiltersOptions = { onColumnFiltersChange: setColumnFilters, manualFiltering: true };
     // Prepare Pagination
-    var _l = externalPaginationState || [], pagination = _l[0], setPagination = _l[1];
-    var isControlledPagination = Boolean(externalPaginationState && pageCount);
-    var controlledPaginationOptions = { manualPagination: true, onPaginationChange: setPagination, pageCount: pageCount };
+    const [pagination, setPagination] = externalPaginationState || [];
+    const isControlledPagination = Boolean(externalPaginationState && pageCount);
+    const controlledPaginationOptions = { manualPagination: true, onPaginationChange: setPagination, pageCount };
     // Prepare Column Visibility
-    var columnVisibility = (externalVisibilityState || [])[0];
-    var isControlledColumnVisibility = Boolean(externalVisibilityState);
+    const [columnVisibility] = externalVisibilityState || [];
+    const 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 _m = useColumnFilters(table), selectedColumnFilters = _m.selectedColumnFilters, hasColumnFilters = _m.hasColumnFilters, deselectColumnFilter = _m.deselectColumnFilter, formatSelectedFilterText = _m.formatSelectedFilterText, resetColumnFilters = _m.resetColumnFilters;
+    const table = reactTable.useReactTable({
+        data,
+        columns,
+        state: {
+            ...(isControlledPagination && { pagination }),
+            ...(isControlledGlobalFilter && { globalFilter }),
+            ...(isControlledColumnFilters && { columnFilters }),
+            ...(isControlledColumnVisibility && { columnVisibility }),
+            ...(isControlledColumnSort && { sorting }),
+        },
+        enableSorting: sortable,
+        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 },
+    });
+    const { selectedColumnFilters, hasColumnFilters, deselectColumnFilter, formatSelectedFilterText, resetColumnFilters, } = useColumnFilters(table);
     // stagedColumnFilters is only used when stageFilterSelections is enabled
-    var stagedColumnFilters = useStagedColumnFilters(selectedColumnFilters);
-    var handlePagination = function (_e, pageNumber) {
-        var pageIndex = pageNumber - 1;
+    const stagedColumnFilters = useStagedColumnFilters(selectedColumnFilters);
+    const handlePagination = (_e, pageNumber) => {
+        const 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),
-        })),
+    const showTitle = Boolean(title);
+    const showGlobalSearch = Boolean(searchable || isControlledGlobalFilter);
+    const showColumnFilter = Boolean(hasColumnFilters);
+    const showControls = Boolean(showTitle || showGlobalSearch || showColumnFilter);
+    return (React.createElement(TableContext.Provider, { value: { table, stagedColumnFilters, stageFilterSelections } },
+        React.createElement(commonUi.Box, { 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 }))),
+                    showGlobalSearch && (React.createElement(GlobalFilter, { ...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) {
+                    selectedColumnFilters.map((selectedColumnFilter, i) => (React.createElement(ColumnFilterChip, { key: `selected-column-filter-chip-${i}`, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: (columnFilter) => {
                             if (stageFilterSelections) {
                                 stagedColumnFilters.delete(columnFilter);
                             }
                             deselectColumnFilter(columnFilter);
-                        } })); }),
-                    selectedColumnFilters.length >= 1 && (React.createElement(ColumnFilterResetButton, { onClick: function () {
+                        } }))),
+                    selectedColumnFilters.length >= 1 && (React.createElement(ColumnFilterResetButton, { onClick: () => {
                             if (stageFilterSelections) {
                                 stagedColumnFilters.clear();
                             }
@@ -715,8 +775,8 @@ var Table = function (_a) {
                         } }))))),
             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()))); }))); }))))),
+                    React.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableHeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header) => (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((row) => (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map((cell) => (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" }))),
@@ -724,48 +784,6 @@ var Table = function (_a) {
                 React.createElement(lab.Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: handlePagination, disabled: loading }))))));
 };
 
-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;