@popmenu/table 0.70.0 → 0.72.0

package/build/index.js

@@ -1264,12 +1264,22 @@ var useStyles$4 = core.makeStyles(function (theme) { return ({
 
 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 table = React.useContext(TableContext);
-    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
+    var _d = useFilterPanelContext().anchorState, setAnchorEl = _d[1];
+    var _e = React.useState(false), open = _e[0], setOpen = _e[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;
@@ -1304,6 +1314,7 @@ var SelectFilter = function (props) {
     var handleChange = function (event) {
         event.stopPropagation();
         column.setFilterValue(event.target.value);
+        setAnchorEl(null);
     };
     var handleItemClick = function () {
         if (multiple) {
@@ -3232,7 +3243,7 @@ var FilterPanel = function () {
     var handleClose = function () {
         setAnchorEl(null);
     };
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+    return (React__default['default'].createElement(FilterPanelContext.Provider, { value: { anchorState: [anchorEl, setAnchorEl] } },
         React__default['default'].createElement(Trigger, { onClick: handleClick }),
         React__default['default'].createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
 };
@@ -4040,11 +4051,12 @@ var ColumnFilterResetButton = function (props) {
 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, 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, paginated = props.paginated, 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
@@ -4070,7 +4082,7 @@ var Table = function (props) {
     var columnVisibility = (externalVisibilityState || [])[0];
     var isControlledColumnVisibility = Boolean(externalVisibilityState);
     // Init table instance
-    var table = reactTable.useReactTable(__assign$3(__assign$3(__assign$3(__assign$3(__assign$3({ data: data, columns: columns, state: __assign$3(__assign$3(__assign$3(__assign$3(__assign$3({}, (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(), getPaginationRowModel: reactTable.getPaginationRowModel() }, (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)), { meta: { idBase: idBase } }));
+    var table = reactTable.useReactTable(__assign$3(__assign$3(__assign$3(__assign$3(__assign$3(__assign$3({ data: data, columns: columns, state: __assign$3(__assign$3(__assign$3(__assign$3(__assign$3({}, (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;
     var handlePagination = function (_e, pageNumber) {
         var pageIndex = pageNumber - 1;
@@ -4099,7 +4111,7 @@ var Table = function (props) {
             isEmpty && isEmptyComponentValid && Empty && !loading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 }, React.createElement(Empty))),
             loading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
                 React__default['default'].createElement(CircularProgress__default['default'], { size: 80, color: "inherit" }))),
-            table.getPageCount() > 1 && (React__default['default'].createElement(TableFooter, null,
+            paginated && table.getPageCount() > 1 && (React__default['default'].createElement(TableFooter, null,
                 React__default['default'].createElement(lab.Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: handlePagination, disabled: loading }))))));
 };
 Table.defaultProps = defaultTableProps;