@popmenu/table 0.70.0 → 0.71.0

package/build/components/FilterPanel/FilterPanelContext/FilterPanelContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type FilterPanelContextValue = {
+    anchorState: [Element | null, React.Dispatch<React.SetStateAction<Element | null>>];
+};
+export declare const FilterPanelContext: React.Context<FilterPanelContextValue | null>;
+export declare const useFilterPanelContext: () => FilterPanelContextValue;
+export {};

package/build/components/FilterPanel/FilterPanelContext/index.d.ts

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

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

@@ -3,6 +3,7 @@ import { TableProps } from './TableProps';
 declare const defaultTableProps: {
     enableSortingRemoval: boolean;
     fullWidth: boolean;
+    paginated: boolean;
     sortable: boolean;
     searchable: boolean;
 };
@@ -12,6 +13,7 @@ export declare const Table: {
     defaultProps: {
         enableSortingRemoval: boolean;
         fullWidth: boolean;
+        paginated: boolean;
         sortable: boolean;
         searchable: boolean;
     };

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

@@ -22,6 +22,8 @@ export interface TableProps<T = unknown> {
     searchable?: boolean;
     /** Makes columns sortable. For uncontrolled sorting only. */
     sortable?: boolean;
+    /** Enables and disables pagination all together for the table. */
+    paginated?: boolean;
     /** Sorting state. Expects the result of a React useState hook. Used only for manual sorting. */
     sortingState?: [SortingState, Dispatch<SetStateAction<SortingState>>];
     /** Pagination state. Expects the result of a React useState hook. Used only for manual pagination. */

package/build/index.es.js

@@ -1215,12 +1215,22 @@ var useStyles$4 = makeStyles(function (theme) { return ({
 
 var TableContext = createContext({});
 
+var FilterPanelContext = createContext(null);
+var useFilterPanelContext = function () {
+    var context = 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 = useContext(TableContext);
-    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    var _d = useFilterPanelContext().anchorState, setAnchorEl = _d[1];
+    var _e = 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;
@@ -1255,6 +1265,7 @@ var SelectFilter = function (props) {
     var handleChange = function (event) {
         event.stopPropagation();
         column.setFilterValue(event.target.value);
+        setAnchorEl(null);
     };
     var handleItemClick = function () {
         if (multiple) {
@@ -3183,7 +3194,7 @@ var FilterPanel = function () {
     var handleClose = function () {
         setAnchorEl(null);
     };
-    return (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(FilterPanelContext.Provider, { value: { anchorState: [anchorEl, setAnchorEl] } },
         React__default.createElement(Trigger, { onClick: handleClick }),
         React__default.createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
 };
@@ -3991,11 +4002,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 = useRef(null);
     // Prepare Empty State
@@ -4021,7 +4033,7 @@ var Table = function (props) {
     var columnVisibility = (externalVisibilityState || [])[0];
     var isControlledColumnVisibility = Boolean(externalVisibilityState);
     // Init table instance
-    var table = 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: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel() }, (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)), { meta: { idBase: idBase } }));
+    var table = 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: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel() }, (paginated && { getPaginationRowModel: 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;
@@ -4050,7 +4062,7 @@ var Table = function (props) {
             isEmpty && isEmptyComponentValid && Empty && !loading && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 }, createElement(Empty))),
             loading && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
                 React__default.createElement(CircularProgress, { size: 80, color: "inherit" }))),
-            table.getPageCount() > 1 && (React__default.createElement(TableFooter, null,
+            paginated && table.getPageCount() > 1 && (React__default.createElement(TableFooter, null,
                 React__default.createElement(Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: handlePagination, disabled: loading }))))));
 };
 Table.defaultProps = defaultTableProps;