@popmenu/table 0.68.1 → 0.69.0

package/build/components/Table/TableProps.d.ts

@@ -6,6 +6,8 @@ export interface ColumnFilter {
     value: unknown;
 }
 export interface TableProps<T = unknown> {
+    /** The table's title. */
+    title?: string;
     /** List of objects representing the rows of a Table. */
     data: Array<T>;
     /** List of column definitions. */

package/build/components/TableControlsContainer/TableControlsContainer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableControlsContainerProps } from './TableControlsContainerProps';
+export declare const TableControlsContainer: (props: TableControlsContainerProps) => JSX.Element;

package/build/components/TableControlsContainer/TableControlsContainerProps.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export declare type TableControlsContainerProps = PropsWithChildren<{
+    showTitle: boolean;
+    showGlobalSearch: boolean;
+    showColumnFilter: boolean;
+}>;

package/build/components/TableControlsContainer/index.d.ts

@@ -0,0 +1 @@
+export { TableControlsContainer } from './TableControlsContainer';

package/build/index.es.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import React__default, { createElement, forwardRef, createContext, useContext, useState, useRef, isValidElement } from 'react';
+import { makeStyles, Typography as Typography$2, Link as Link$2, Paper as Paper$2, Box, FormControl, InputLabel, Select, TextField, Popover, ButtonBase, InputAdornment, useTheme as useTheme$1 } from '@material-ui/core';
 import { Pagination } from '@material-ui/lab';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
-import { makeStyles, Typography as Typography$2, Link as Link$2, Paper as Paper$2, Box, FormControl, InputLabel, Select, TextField, Popover, ButtonBase, InputAdornment, useTheme as useTheme$1 } from '@material-ui/core';
 import CommonAlert from '@material-ui/lab/Alert';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
@@ -2805,17 +2805,17 @@ var useSettingsIndexCardStyles = makeStyles$1(function (theme) { return ({
 }); });
 
 var SettingsIndexCard = 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.createElement(ButtonBase, __assign$1({ onClick: onClick, ref: ref }, restProps),
         React__default.createElement(Card, { classes: { root: classes.cardRoot } },
             React__default.createElement(CardContent, { classes: { root: classes.cardContentRoot } },
                 React__default.createElement(Box, { fontSize: "32px", display: "flex", justifyContent: 'space-between', alignItems: "center", paddingBottom: 2 },
-                    React__default.createElement(Icon, { icon: Icon$1 || SvgHelp, size: "inherit" }),
-                    showStatusLabel && (React__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.createElement(Typography, { align: "left", variant: "h6", gutterBottom: true }, title),
-                description && (React__default.createElement(Typography, { align: "left", variant: "body2", color: "grey.700" }, description))))));
+                    React__default.createElement(Icon$1, { icon: Icon || SvgHelp, size: "inherit" }),
+                    showStatusLabel && (React__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.createElement(Typography$1, { align: "left", variant: "h6", gutterBottom: true }, title),
+                description && (React__default.createElement(Typography$1, { align: "left", variant: "body2", color: "grey.700" }, description))))));
 });
 SettingsIndexCard.displayName = 'SettingsIndexCard';
 
@@ -3165,6 +3165,7 @@ createTheme(adminDarkOptions);
 var useStyles$3 = makeStyles({
     root: {
         justifySelf: 'end',
+        gridArea: 'columnFilter',
     },
 });
 
@@ -3193,6 +3194,7 @@ var useStyles$2 = makeStyles({
         maxWidth: 300,
         minWidth: 200,
         width: '100%',
+        gridArea: 'globalFilter',
     },
 });
 
@@ -3952,6 +3954,35 @@ var ColumnFilterChip = function (props) {
             React__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.createElement(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.createElement(Button, __assign$3({ variant: "text", textTransform: "none" }, restProps), children));
@@ -3964,7 +3995,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 = useRef(null);
     // Prepare Empty State
@@ -3996,15 +4027,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.createElement(TableContext.Provider, { value: table },
         React__default.createElement(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.createElement(Box, null,
-                React__default.createElement(Box, { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", marginBottom: 3 },
-                    (searchable || isControlledGlobalFilter) && (React__default.createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
-                    hasColumnFilters && React__default.createElement(FilterPanel, null)),
+                React__default.createElement(TableControlsContainer, { showTitle: showTitle, showGlobalSearch: showGlobalSearch, showColumnFilter: showColumnFilter },
+                    showTitle && (React__default.createElement(Typography$2, { variant: "h5", style: { gridArea: 'title', alignSelf: 'center' } }, title)),
+                    showGlobalSearch && (React__default.createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
+                    showColumnFilter && React__default.createElement(FilterPanel, null)),
                 React__default.createElement(Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
                     selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default.createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: deselectColumnFilter })); }),
                     selectedColumnFilters.length >= 1 && React__default.createElement(ColumnFilterResetButton, { onClick: function () { return resetColumnFilters(); } })))),