@linzjs/step-ag-grid 14.2.0 → 14.3.1

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

@@ -15,6 +15,10 @@ export interface GridProps {
     defaultColDef?: GridOptions["defaultColDef"];
     columnDefs: ColDef[];
     rowData: GridOptions["rowData"];
+    /**
+     * Whether select column is pinned.  Defaults to "left".
+     */
+    selectColumnPinned?: ColDef["pinned"];
     noRowsOverlayText?: string;
     postSortRows?: GridOptions["postSortRows"];
     animateRows?: boolean;
@@ -53,4 +57,4 @@ export interface GridProps {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, ...params }: GridProps) => JSX.Element;
+export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, ...params }: GridProps) => JSX.Element;

package/dist/src/lui/timeoutHook.d.ts

@@ -6,3 +6,9 @@
  * but there's no way to enforce that, so  it would lead to bugs.
  */
 export declare const useTimeoutHook: () => (fn: () => void, waitTimeMs: number) => void;
+interface IntervalHookProps {
+    timeoutMs: number;
+    callback: () => void;
+}
+export declare const useIntervalHook: ({ callback, timeoutMs }: IntervalHookProps) => void;
+export {};

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

@@ -3,7 +3,7 @@ import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup }
 import { AgGridReact } from 'ag-grid-react';
 import { negate, isEmpty, xorBy, last, difference, omit, sortBy, findIndex, debounce as debounce$1, delay, partition, pick, groupBy, fromPairs, toPairs, defer as defer$1, sumBy, compact, remove, castArray, flatten, isEqual } from 'lodash-es';
 import * as React from 'react';
-import { createContext, useContext, useRef, useCallback, useState, useEffect, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+import { createContext, useContext, useEffect, useRef, useCallback, useState, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 import require$$0$1 from 'util';
 import * as testUtils from 'react-dom/test-utils';
@@ -278,6 +278,50 @@ var GridUpdatingContext = createContext({
     updatedDep: 0
 });
 
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+var useTimeoutHook = function () {
+    var timeout = useRef();
+    /**
+     * Clear any pending timeouts.
+     */
+    var clearTimeouts = function () {
+        if (timeout.current) {
+            var tc = timeout.current;
+            timeout.current = undefined;
+            clearTimeout(tc);
+        }
+    };
+    /**
+     * Call this when your action has completed.
+     */
+    var invoke = useCallback(function (fn, waitTimeMs) {
+        clearTimeouts();
+        timeout.current = setTimeout(fn, waitTimeMs);
+    }, []);
+    /**
+     * Clear timeout on loss of scope.
+     */
+    useEffect(function () {
+        return function () { return clearTimeouts(); };
+    }, []);
+    return invoke;
+};
+var useIntervalHook = function (_a) {
+    var callback = _a.callback, timeoutMs = _a.timeoutMs;
+    useEffect(function () {
+        var interval = setInterval(callback, timeoutMs);
+        return function () {
+            clearInterval(interval);
+        };
+    });
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -669,11 +713,12 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (_a) {
     var _b, _c, _d;
-    var dataTestId = _a["data-testid"], _e = _a.rowSelection, rowSelection = _e === void 0 ? "multiple" : _e, _f = _a.suppressColumnVirtualization, suppressColumnVirtualization = _f === void 0 ? true : _f, _g = _a.theme, theme = _g === void 0 ? "ag-theme-alpine" : _g, _h = _a.sizeColumns, sizeColumns = _h === void 0 ? "auto-skip-headers" : _h, params = __rest(_a, ["data-testid", "rowSelection", "suppressColumnVirtualization", "theme", "sizeColumns"]);
-    var _j = useContext(GridContext), gridReady = _j.gridReady, setApis = _j.setApis, prePopupOps = _j.prePopupOps, ensureRowVisible = _j.ensureRowVisible, getFirstRowId = _j.getFirstRowId, selectRowsById = _j.selectRowsById, focusByRowById = _j.focusByRowById, ensureSelectedRowIsVisible = _j.ensureSelectedRowIsVisible, autoSizeColumns = _j.autoSizeColumns, sizeColumnsToFit = _j.sizeColumnsToFit, externallySelectedItemsAreInSync = _j.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _j.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _j.isExternalFilterPresent, doesExternalFilterPass = _j.doesExternalFilterPass, setOnCellEditingComplete = _j.setOnCellEditingComplete;
-    var _k = useContext(GridUpdatingContext), checkUpdating = _k.checkUpdating, updatedDep = _k.updatedDep, isUpdating = _k.isUpdating;
+    var dataTestId = _a["data-testid"], _e = _a.rowSelection, rowSelection = _e === void 0 ? "multiple" : _e, _f = _a.suppressColumnVirtualization, suppressColumnVirtualization = _f === void 0 ? true : _f, _g = _a.theme, theme = _g === void 0 ? "ag-theme-alpine" : _g, _h = _a.sizeColumns, sizeColumns = _h === void 0 ? "auto" : _h, _j = _a.selectColumnPinned, selectColumnPinned = _j === void 0 ? null : _j, params = __rest(_a, ["data-testid", "rowSelection", "suppressColumnVirtualization", "theme", "sizeColumns", "selectColumnPinned"]);
+    var _k = useContext(GridContext), gridReady = _k.gridReady, setApis = _k.setApis, prePopupOps = _k.prePopupOps, ensureRowVisible = _k.ensureRowVisible, getFirstRowId = _k.getFirstRowId, selectRowsById = _k.selectRowsById, focusByRowById = _k.focusByRowById, ensureSelectedRowIsVisible = _k.ensureSelectedRowIsVisible, autoSizeColumns = _k.autoSizeColumns, sizeColumnsToFit = _k.sizeColumnsToFit, externallySelectedItemsAreInSync = _k.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _k.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _k.isExternalFilterPresent, doesExternalFilterPass = _k.doesExternalFilterPass, setOnCellEditingComplete = _k.setOnCellEditingComplete;
+    var _l = useContext(GridUpdatingContext), checkUpdating = _l.checkUpdating, updatedDep = _l.updatedDep, isUpdating = _l.isUpdating;
+    var gridDivRef = useRef(null);
     var lastSelectedIds = useRef([]);
-    var _l = useState(false), staleGrid = _l[0], setStaleGrid = _l[1];
+    var _m = useState(false), staleGrid = _m[0], setStaleGrid = _m[1];
     var postSortRows = usePostSortRowsHook({ setStaleGrid: setStaleGrid });
     /**
      * onContentSize should only be called at maximum twice.
@@ -682,30 +727,47 @@ var Grid = function (_a) {
      */
     var hasSetContentSize = useRef(false);
     var hasSetContentSizeEmpty = useRef(false);
+    var needsAutoSize = useRef(false);
     var setInitialContentSize = useCallback(function () {
-        var skipHeader = sizeColumns === "auto-skip-headers";
+        var _a;
+        if (!((_a = gridDivRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+            // Don't resize grids if they are offscreen as it doesn't work.
+            needsAutoSize.current = true;
+            return;
+        }
+        var skipHeader = sizeColumns === "auto-skip-headers" && !isEmpty(params.rowData);
         if (sizeColumns === "auto" || skipHeader) {
             var result = autoSizeColumns({ skipHeader: skipHeader, userSizedColIds: userSizedColIds.current });
             if (isEmpty(params.rowData)) {
-                if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
+                if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
                     hasSetContentSizeEmpty.current = true;
-                    params.onContentSize && result && params.onContentSize(result);
+                    params.onContentSize && params.onContentSize(result);
                 }
             }
             else {
-                if (!hasSetContentSize.current) {
+                if (result && !hasSetContentSize.current) {
                     hasSetContentSize.current = true;
-                    params.onContentSize && result && params.onContentSize(result);
+                    params.onContentSize && params.onContentSize(result);
                 }
             }
         }
         if (sizeColumns !== "none") {
             sizeColumnsToFit();
         }
+        needsAutoSize.current = false;
     }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
     /**
-     * When the grid becomes ready resize it
+     * Auto-size windows that had deferred auto-size
      */
+    useIntervalHook({
+        callback: function () {
+            if (needsAutoSize.current) {
+                needsAutoSize.current = false;
+                setInitialContentSize();
+            }
+        },
+        timeoutMs: 1000
+    });
     var previousGridReady = useRef(gridReady);
     useEffect(function () {
         if (!previousGridReady.current && gridReady) {
@@ -829,6 +891,7 @@ var Grid = function (_a) {
                     editable: false,
                     minWidth: 42,
                     maxWidth: 42,
+                    pinned: selectColumnPinned,
                     headerComponentParams: {
                         exportable: false
                     },
@@ -854,6 +917,7 @@ var Grid = function (_a) {
         params.selectable,
         params.readOnly,
         (_b = params.defaultColDef) === null || _b === void 0 ? void 0 : _b.editable,
+        selectColumnPinned,
         rowSelection,
         clickSelectorCheckboxWhenContainingCellClicked,
     ]);
@@ -998,7 +1062,12 @@ var Grid = function (_a) {
                 // This auto-sizes based on updatingContext completing
                 colIdsEdited.current.add(colId);
                 // This auto-sizes immediately in case it was an in place update
-                !isUpdating() && autoSizeColumns({ skipHeader: skipHeader, userSizedColIds: userSizedColIds.current, colIds: [colId] });
+                !isUpdating() &&
+                    autoSizeColumns({
+                        skipHeader: skipHeader,
+                        userSizedColIds: userSizedColIds.current,
+                        colIds: [colId]
+                    });
             }
         }
     }, [autoSizeColumns, isUpdating, sizeColumns]);
@@ -1047,7 +1116,12 @@ var Grid = function (_a) {
         }
     }, []);
     setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsx("div", __assign({ "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: jsx("div", __assign({ style: { flex: 1 } }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onCellEditingStopped: onCellEditingStopped, onColumnResized: onColumnResized, defaultColDef: __assign({ minWidth: 48 }, omit(params.defaultColDef, ["editable"])), columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: { rowData: params.rowData, noRowsOverlayText: params.noRowsOverlayText }, 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, maintainColumnOrder: true }) })) })));
+    return (jsx("div", __assign({ "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: jsx("div", __assign({ style: { flex: 1 }, ref: gridDivRef }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: function () {
+                    setInitialContentSize();
+                }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onCellEditingStopped: onCellEditingStopped, onColumnResized: onColumnResized, defaultColDef: __assign({ minWidth: 48 }, omit(params.defaultColDef, ["editable"])), columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
+                    rowData: params.rowData,
+                    noRowsOverlayText: params.noRowsOverlayText
+                }, 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, maintainColumnOrder: true }) })) })));
 };
 
 var GridPopoverContext = createContext({
@@ -3138,41 +3212,6 @@ var GridFilters = function (_a) {
     return jsx("div", __assign({ className: "Grid-container-filters" }, { children: children }));
 };
 
-/**
- * Cancels timeouts on scope being destroyed.
- *
- * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
- * This could have been implemented using debounce if the callers function was wrapped in useCallback,
- * but there's no way to enforce that, so  it would lead to bugs.
- */
-var useTimeoutHook = function () {
-    var timeout = useRef();
-    /**
-     * Clear any pending timeouts.
-     */
-    var clearTimeouts = function () {
-        if (timeout.current) {
-            var tc = timeout.current;
-            timeout.current = undefined;
-            clearTimeout(tc);
-        }
-    };
-    /**
-     * Call this when your action has completed.
-     */
-    var invoke = useCallback(function (fn, waitTimeMs) {
-        clearTimeouts();
-        timeout.current = setTimeout(fn, waitTimeMs);
-    }, []);
-    /**
-     * Clear timeout on loss of scope.
-     */
-    useEffect(function () {
-        return function () { return clearTimeouts(); };
-    }, []);
-    return invoke;
-};
-
 /**
  * Defers state change up to a minimum time since last state change.
  */
@@ -5055,11 +5094,11 @@ var GridContextProvider = function (props) {
     }, [gridApi]);
     var addExternalFilter = function (filter) {
         externalFilters.current.push(filter);
-        onFilterChanged();
+        onFilterChanged().then();
     };
     var removeExternalFilter = function (filter) {
         remove(externalFilters.current, function (v) { return v === filter; });
-        onFilterChanged();
+        onFilterChanged().then();
     };
     var isExternalFilterPresent = function () { return externalFilters.current.length > 0; };
     var doesExternalFilterPass = function (node) {