@popmenu/table 0.68.0 → 0.69.0

package/build/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var core = require('@material-ui/core');
 var lab = require('@material-ui/lab');
 var reactTable = require('@tanstack/react-table');
-var core = require('@material-ui/core');
 var CommonAlert = require('@material-ui/lab/Alert');
 require('@material-ui/core/AppBar');
 var MuiAvatar = require('@material-ui/core/Avatar');
@@ -2854,17 +2854,17 @@ var useSettingsIndexCardStyles = styles.makeStyles(function (theme) { return ({
 }); });
 
 var SettingsIndexCard = React.forwardRef(function (props, ref) {
-    var title = props.title, description = props.description, Icon$1 = props.Icon, onClick = props.onClick, statusLabel = props.statusLabel, restProps = __rest$1(props, ["title", "description", "Icon", "onClick", "statusLabel"]);
+    var title = props.title, description = props.description, Icon = props.Icon, onClick = props.onClick, statusLabel = props.statusLabel, restProps = __rest$1(props, ["title", "description", "Icon", "onClick", "statusLabel"]);
     var classes = useSettingsIndexCardStyles(props);
     var showStatusLabel = (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text) && (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color);
     return (React__default['default'].createElement(core.ButtonBase, __assign$1({ onClick: onClick, ref: ref }, restProps),
         React__default['default'].createElement(Card__default['default'], { classes: { root: classes.cardRoot } },
             React__default['default'].createElement(CardContent__default['default'], { classes: { root: classes.cardContentRoot } },
                 React__default['default'].createElement(core.Box, { fontSize: "32px", display: "flex", justifyContent: 'space-between', alignItems: "center", paddingBottom: 2 },
-                    React__default['default'].createElement(Icon, { icon: Icon$1 || SvgHelp, size: "inherit" }),
-                    showStatusLabel && (React__default['default'].createElement(Typography, { weight: "semi-bold", variant: "body2", color: statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color }, statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text))),
-                React__default['default'].createElement(Typography, { align: "left", variant: "h6", gutterBottom: true }, title),
-                description && (React__default['default'].createElement(Typography, { align: "left", variant: "body2", color: "grey.700" }, description))))));
+                    React__default['default'].createElement(Icon$1, { icon: Icon || SvgHelp, size: "inherit" }),
+                    showStatusLabel && (React__default['default'].createElement(Typography$1, { weight: "semi-bold", variant: "body2", color: statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color }, statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text))),
+                React__default['default'].createElement(Typography$1, { align: "left", variant: "h6", gutterBottom: true }, title),
+                description && (React__default['default'].createElement(Typography$1, { align: "left", variant: "body2", color: "grey.700" }, description))))));
 });
 SettingsIndexCard.displayName = 'SettingsIndexCard';
 
@@ -3214,6 +3214,7 @@ createTheme__default['default'](adminDarkOptions);
 var useStyles$3 = core.makeStyles({
     root: {
         justifySelf: 'end',
+        gridArea: 'columnFilter',
     },
 });
 
@@ -3242,6 +3243,7 @@ var useStyles$2 = core.makeStyles({
         maxWidth: 300,
         minWidth: 200,
         width: '100%',
+        gridArea: 'globalFilter',
     },
 });
 
@@ -4001,6 +4003,35 @@ var ColumnFilterChip = function (props) {
             React__default['default'].createElement(Typography$1, __assign$3({ 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__default['default'].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 = __rest$3(props, ["children"]);
     return (React__default['default'].createElement(Button, __assign$3({ variant: "text", textTransform: "none" }, restProps), children));
@@ -4013,7 +4044,7 @@ var defaultTableProps = {
     searchable: false,
 };
 var Table = function (props) {
-    var 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, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase;
+    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, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase;
     var classes = useStyles$7(props);
     var rootRef = React.useRef(null);
     // Prepare Empty State
@@ -4045,15 +4076,19 @@ var Table = function (props) {
         var pageIndex = pageNumber - 1;
         table.setPageIndex(pageIndex);
     };
-    var showControls = searchable || isControlledGlobalFilter || hasColumnFilters;
+    var showTitle = Boolean(title);
+    var showGlobalSearch = Boolean(searchable || isControlledGlobalFilter);
+    var showColumnFilter = Boolean(hasColumnFilters);
+    var showControls = Boolean(showTitle || showGlobalSearch || showColumnFilter);
     return (React__default['default'].createElement(TableContext.Provider, { value: table },
         React__default['default'].createElement(core.Box, __assign$3({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root" }, (table.getPageCount() > 1 && {
             minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
         })),
             showControls && (React__default['default'].createElement(core.Box, null,
-                React__default['default'].createElement(core.Box, { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", marginBottom: 3 },
-                    (searchable || isControlledGlobalFilter) && (React__default['default'].createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
-                    hasColumnFilters && React__default['default'].createElement(FilterPanel, null)),
+                React__default['default'].createElement(TableControlsContainer, { showTitle: showTitle, showGlobalSearch: showGlobalSearch, showColumnFilter: showColumnFilter },
+                    showTitle && (React__default['default'].createElement(core.Typography, { variant: "h5", style: { gridArea: 'title', alignSelf: 'center' } }, title)),
+                    showGlobalSearch && (React__default['default'].createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
+                    showColumnFilter && React__default['default'].createElement(FilterPanel, null)),
                 React__default['default'].createElement(core.Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
                     selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default['default'].createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: deselectColumnFilter })); }),
                     selectedColumnFilters.length >= 1 && React__default['default'].createElement(ColumnFilterResetButton, { onClick: function () { return resetColumnFilters(); } })))),