@linzjs/step-ag-grid 11.0.0 → 12.0.0

package/dist/index.css

@@ -324,6 +324,12 @@
   flex-direction: column;
 }
 
+.Grid-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 .Grid-sortIsStale span.ag-icon.ag-icon-desc::after {
   content: "*";
 }
@@ -331,10 +337,13 @@
   content: "*";
 }
 
-.Grid-quickFilter {
+.Grid-container-filters {
   width: 100%;
   margin-bottom: 16px;
   flex: 0;
+  display: flex;
+  flex-direction: row;
+  grid-column-gap: 1em;
 }
 
 .Grid-quickFilterBox {

package/dist/src/components/Grid.d.ts

@@ -8,16 +8,12 @@ export interface GridProps {
     readOnly?: boolean;
     selectable?: boolean;
     ["data-testid"]?: string;
-    quickFilter?: boolean;
-    quickFilterPlaceholder?: string;
-    quickFilterValue?: string;
     domLayout?: GridOptions["domLayout"];
     externalSelectedItems?: any[];
     setExternalSelectedItems?: (items: any[]) => void;
     defaultColDef?: GridOptions["defaultColDef"];
     columnDefs: ColDef[];
     rowData: GridOptions["rowData"];
-    noRowsOverlayText?: string;
     postSortRows?: GridOptions["postSortRows"];
     animateRows?: boolean;
     rowClassRules?: GridOptions["rowClassRules"];

package/dist/src/components/GridFilter.d.ts

@@ -0,0 +1,2 @@
+import { GridFilterExternal } from "../contexts/GridContext";
+export declare const useGridFilter: (filter: GridFilterExternal) => void;

package/dist/src/components/GridWrapper.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface GridWrapperProps {
+    children: ReactNode;
+    maxHeight?: number | string;
+}
+export declare const GridWrapper: ({ children, maxHeight }: GridWrapperProps) => JSX.Element;

package/dist/src/components/gridFilter/GridFilterQuick.d.ts

@@ -0,0 +1,5 @@
+export interface GridFilterQuickProps {
+    quickFilterPlaceholder?: string;
+    defaultValue?: string;
+}
+export declare const GridFilterQuick: ({ quickFilterPlaceholder, defaultValue }: GridFilterQuickProps) => JSX.Element;

package/dist/src/components/gridFilter/GridFilters.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface GridFiltersProps {
+    children: ReactNode;
+}
+export declare const GridFilters: ({ children }: GridFiltersProps) => JSX.Element;

package/dist/src/contexts/GridContext.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
+export type GridFilterExternal = (data: any, rowNode: RowNode) => boolean;
 export interface GridContextType {
     gridReady: boolean;
     setGridApi: (gridApi: GridApi | undefined) => void;
@@ -28,5 +29,9 @@ export interface GridContextType {
     externallySelectedItemsAreInSync: boolean;
     setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
     waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
+    addExternalFilter: (filter: GridFilterExternal) => void;
+    removeExternalFilter: (filter: GridFilterExternal) => void;
+    isExternalFilterPresent: () => boolean;
+    doesExternalFilterPass: (node: RowNode) => boolean;
 }
 export declare const GridContext: import("react").Context<GridContextType>;

package/dist/step-ag-grid.esm.js

@@ -1,7 +1,7 @@
 import * as require$$0$1 from 'react';
 import require$$0__default, { useMemo, useLayoutEffect, useEffect, createContext, memo, forwardRef, useRef, useContext, useState, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
-import { findIndex, debounce, negate, isEmpty, difference, delay, sortBy, defer as defer$1, last, castArray, remove, flatten, xorBy, partition, pick, groupBy, fromPairs, toPairs, omit, isEqual } from 'lodash-es';
+import { findIndex, debounce, negate, isEmpty, difference, delay, sortBy, defer as defer$1, last, remove, castArray, flatten, xorBy, partition, pick, groupBy, fromPairs, toPairs, omit, isEqual } from 'lodash-es';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import require$$4 from 'react-dom/server';
 import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput, LuiButton } from '@linzjs/lui';
@@ -2061,7 +2061,21 @@ var GridContext = createContext({
             console.error("no context provider for waitForExternallySelectedItemsToBeInSync");
             return [2 /*return*/];
         });
-    }); }
+    }); },
+    addExternalFilter: function () {
+        console.error("no context provider for addExternalFilter");
+    },
+    removeExternalFilter: function () {
+        console.error("no context provider for removeExternalFilter");
+    },
+    isExternalFilterPresent: function () {
+        console.error("no context provider for isExternalFilterPresent");
+        return false;
+    },
+    doesExternalFilterPass: function () {
+        console.error("no context provider for doesExternalFilterPass");
+        return true;
+    }
 });
 
 var GridUpdatingContext = createContext({
@@ -2087,13 +2101,25 @@ var GridContextProvider = function (props) {
     var modifyUpdating = useContext(GridUpdatingContext).modifyUpdating;
     var _a = useState(), gridApi = _a[0], _setGridApi = _a[1];
     var _b = useState(false), gridReady = _b[0], setGridReady = _b[1];
+    var _c = useState(""), quickFilter = _c[0], setQuickFilter = _c[1];
     var idsBeforeUpdate = useRef([]);
     var prePopupFocusedCell = useRef();
-    var _c = useState(false), externallySelectedItemsAreInSync = _c[0], setExternallySelectedItemsAreInSync = _c[1];
+    var _d = useState(false), externallySelectedItemsAreInSync = _d[0], setExternallySelectedItemsAreInSync = _d[1];
+    var externalFilters = useRef([]);
+    /**
+     * Set quick filter directly on grid, based on previously save quickFilter state.
+     */
+    useEffect(function () {
+        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setQuickFilter(quickFilter);
+    }, [gridApi, quickFilter]);
+    /**
+     * Set the grid api when the grid is ready.
+     */
     var setGridApi = useCallback(function (gridApi) {
         _setGridApi(gridApi);
+        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setQuickFilter(quickFilter);
         setGridReady(!!gridApi);
-    }, []);
+    }, [quickFilter]);
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
      *
@@ -2113,12 +2139,6 @@ var GridContextProvider = function (props) {
         var _a;
         prePopupFocusedCell.current = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getFocusedCell()) !== null && _a !== void 0 ? _a : undefined;
     }, [gridApi]);
-    /**
-     * Set the quick filter value to grid.
-     */
-    var setQuickFilter = useCallback(function (quickFilter) {
-        gridApiOp(function (gridApi) { return gridApi.setQuickFilter(quickFilter); });
-    }, [gridApiOp]);
     /**
      * Get all row id's in grid.
      */
@@ -2399,6 +2419,23 @@ var GridContextProvider = function (props) {
             }
         });
     }); }, [externallySelectedItemsAreInSync]);
+    var onFilterChanged = useMemo(function () {
+        return debounce(function () {
+            gridApi && gridApi.onFilterChanged();
+        }, 200);
+    }, [gridApi]);
+    var addExternalFilter = function (filter) {
+        externalFilters.current.push(filter);
+        onFilterChanged();
+    };
+    var removeExternalFilter = function (filter) {
+        remove(externalFilters.current, function (v) { return v === filter; });
+        onFilterChanged();
+    };
+    var isExternalFilterPresent = function () { return externalFilters.current.length > 0; };
+    var doesExternalFilterPass = function (node) {
+        return externalFilters.current.every(function (filter) { return filter(node.data, node); });
+    };
     return (jsx(GridContext.Provider, __assign$9({ value: {
             gridReady: gridReady,
             prePopupOps: prePopupOps,
@@ -2422,7 +2459,11 @@ var GridContextProvider = function (props) {
             redrawRows: redrawRows,
             externallySelectedItemsAreInSync: externallySelectedItemsAreInSync,
             setExternallySelectedItemsAreInSync: setExternallySelectedItemsAreInSync,
-            waitForExternallySelectedItemsToBeInSync: waitForExternallySelectedItemsToBeInSync
+            waitForExternallySelectedItemsToBeInSync: waitForExternallySelectedItemsToBeInSync,
+            addExternalFilter: addExternalFilter,
+            removeExternalFilter: removeExternalFilter,
+            isExternalFilterPresent: isExternalFilterPresent,
+            doesExternalFilterPass: doesExternalFilterPass
         } }, { children: props.children })));
 };
 
@@ -58641,10 +58682,9 @@ var GridHeaderSelect = function (_a) {
  * Wrapper for AgGrid to add commonly used functionality.
  */
 var Grid = function (params) {
-    var _a, _b, _c;
-    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, prePopupOps = _d.prePopupOps, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, focusByRowById = _d.focusByRowById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, externallySelectedItemsAreInSync = _d.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
+    var _a, _b, _c, _d;
+    var _e = useContext(GridContext), gridReady = _e.gridReady, setGridApi = _e.setGridApi, prePopupOps = _e.prePopupOps, ensureRowVisible = _e.ensureRowVisible, selectRowsById = _e.selectRowsById, focusByRowById = _e.focusByRowById, ensureSelectedRowIsVisible = _e.ensureSelectedRowIsVisible, sizeColumnsToFit = _e.sizeColumnsToFit, externallySelectedItemsAreInSync = _e.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _e.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _e.isExternalFilterPresent, doesExternalFilterPass = _e.doesExternalFilterPass;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
-    var _e = useState(""), internalQuickFilter = _e[0], setInternalQuickFilter = _e[1];
     var lastSelectedIds = useRef([]);
     var _f = useState(false), staleGrid = _f[0], setStaleGrid = _f[1];
     var postSortRows = usePostSortRowsHook({ setStaleGrid: setStaleGrid });
@@ -58724,26 +58764,6 @@ var Grid = function (params) {
         selectRowsById(selectedIds);
         setExternallySelectedItemsAreInSync(true);
     }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
-    /**
-     * Synchronise quick filter to grid
-     */
-    var updateQuickFilter = useCallback(function () {
-        if (!gridReady)
-            return;
-        if (params.quickFilter) {
-            setQuickFilter(internalQuickFilter);
-            return;
-        }
-        if (params.quickFilterValue == null)
-            return;
-        setQuickFilter(params.quickFilterValue);
-    }, [gridReady, internalQuickFilter, params.quickFilter, params.quickFilterValue, setQuickFilter]);
-    /**
-     * Synchronise quick filter to grid
-     */
-    useEffect(function () {
-        updateQuickFilter();
-    }, [updateQuickFilter]);
     var combineEditables = function () {
         var editables = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -58780,7 +58800,7 @@ var Grid = function (params) {
                     maxWidth: 42,
                     suppressSizeToFit: true,
                     checkboxSelection: true,
-                    headerComponent: GridHeaderSelect,
+                    headerComponent: params.rowSelection === "multiple" ? GridHeaderSelect : null,
                     suppressHeaderKeyboardEvent: function (e) {
                         if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
                             var selectedNodeCount = e.api.getSelectedRows().length;
@@ -58798,18 +58818,26 @@ var Grid = function (params) {
                 }
             ], adjustColDefs, true) : adjustColDefs;
     }, [
-        clickSelectorCheckboxWhenContainingCellClicked,
         params.columnDefs,
         params.selectable,
+        params.rowSelection,
         params.readOnly,
-        params.defaultColDef,
+        (_a = params.defaultColDef) === null || _a === void 0 ? void 0 : _a.editable,
+        clickSelectorCheckboxWhenContainingCellClicked,
     ]);
     var onGridReady = useCallback(function (event) {
         setGridApi(event.api);
         synchroniseExternallySelectedItemsToGrid();
-        updateQuickFilter();
-    }, [setGridApi, synchroniseExternallySelectedItemsToGrid, updateQuickFilter]);
-    var noRowsOverlayComponent = useCallback(function () { var _a; return jsx("span", { children: (_a = params.noRowsOverlayText) !== null && _a !== void 0 ? _a : "There are currently no rows" }); }, [params.noRowsOverlayText]);
+    }, [setGridApi, synchroniseExternallySelectedItemsToGrid]);
+    var noRowsOverlayComponent = useCallback(function (event) {
+        var _a, _b;
+        var hasData = ((_b = (_a = params.rowData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+        var hasFilteredData = event.api.getDisplayedRowCount() > 0;
+        return (jsx("span", { children: !hasData ? "There are currently no rows" : !hasFilteredData ? "All rows have been filtered" : "" }));
+    }, [(_b = params.rowData) === null || _b === void 0 ? void 0 : _b.length]);
+    var onModelUpdated = useCallback(function (event) {
+        event.api.getDisplayedRowCount() === 0 ? event.api.showNoRowsOverlay() : event.api.hideOverlay();
+    }, []);
     var refreshSelectedRows = useCallback(function (event) {
         // Force-refresh all selected rows to re-run class function, to update selection highlighting
         event.api.refreshCells({
@@ -58870,9 +58898,7 @@ var Grid = function (params) {
             sizeColumnsToFit();
         }
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
-    return (jsxs("div", __assign$9({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: [params.quickFilter && (jsx("div", __assign$9({ className: "Grid-quickFilter" }, { children: jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
-                        setInternalQuickFilter(event.target.value);
-                    } }) }))), jsx("div", __assign$9({ style: { flex: 1 } }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_b = params.rowSelection) !== null && _b !== void 0 ? _b : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_c = params.postSortRows) !== null && _c !== void 0 ? _c : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll }) }))] })));
+    return (jsx("div", __assign$9({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: jsx("div", __assign$9({ style: { flex: 1 } }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_c = params.rowSelection) !== null && _c !== void 0 ? _c : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_d = params.postSortRows) !== null && _d !== void 0 ? _d : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass }) })) })));
 };
 
 var GridCellMultiSelectClassRules = {