@linzjs/step-ag-grid 17.5.2 → 17.6.0

package/dist/GridTheme.scss

@@ -213,4 +213,39 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-row-highlight-below::after {
     border-bottom: 2px dashed lui.$andrea;
   }
+
+  // .ag-header .ag-pinned-left-header:after,
+  // .ag-body-viewport .ag-pinned-left-cols-container:after {
+  //   content: " ";
+  //   height: 100%;
+  //   position: absolute;
+  //   z-index: 1;
+  //   top: 0;
+  //   width: 15px;
+  //   box-shadow: -4px 0px 15px -4px rgba(0, 0, 0, 0.1);
+  //   right: -4px;
+  // }
+  
+  // div:after {
+  //   box-shadow: 15px 0 15px -15px inset;
+  //   right: -15px;
+  // }
+  .ag-pinned-left-header,
+  .ag-pinned-right-header,
+  .ag-pinned-right-cols-container,
+  .ag-pinned-left-cols-container {
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);
+  }
+
+  .ag-pinned-left-header,
+  .ag-pinned-left-cols-container {
+      clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
+  }
+
+  .ag-pinned-right-header,
+  .ag-pinned-right-cols-container {
+    clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
+  }
 }

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

@@ -72,4 +72,4 @@ export interface GridProps {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowHeight, ...params }: GridProps) => ReactElement;
+export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, ...params }: GridProps) => ReactElement;

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

@@ -14,6 +14,7 @@ export type AutoSizeColumnsResult = {
 } | null;
 export interface GridContextType<RowType extends GridBaseRow> {
     gridReady: boolean;
+    gridRenderState: () => null | "empty" | "rows-visible";
     getColDef: (colId?: string) => ColDef | undefined;
     getColumns: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => ColDefT<RowType>[];
     getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];

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

@@ -41,6 +41,7 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 const GridContext = React.createContext({
     gridReady: false,
+    gridRenderState: () => null,
     getColDef: () => {
         console.error("no context provider for getColDef");
         return undefined;
@@ -2344,8 +2345,8 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined, ...params }) => {
-    const { gridReady, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = React.useContext(GridContext);
+const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined, ...params }) => {
+    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = React.useContext(GridContext);
     const { checkUpdating, updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
     const { prePopupOps } = React.useContext(GridContext);
     const gridDivRef = React.useRef(null);
@@ -2360,42 +2361,45 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
      */
     const hasSetContentSize = React.useRef(false);
     const hasSetContentSizeEmpty = React.useRef(false);
-    const needsAutoSize = React.useRef(false);
+    const needsAutoSize = React.useRef(true);
     const setInitialContentSize = React.useCallback(() => {
-        if (!gridDivRef.current?.clientWidth) {
+        if (!gridDivRef.current?.clientWidth || rowData == null) {
             // Don't resize grids if they are offscreen as it doesn't work.
             needsAutoSize.current = true;
             return;
         }
-        const headerCellCount = gridDivRef.current?.getElementsByClassName("ag-header-cell-label")?.length;
-        if (headerCellCount < 2) {
-            // Don't resize grids until all the columns are visible
-            // as `autoSizeColumns` will fail silently in this case
+        const gridRendered = gridRenderState();
+        if (gridRendered === null) {
+            // Don't resize until grid has rendered, or it has 0 rows.
             needsAutoSize.current = true;
             return;
         }
-        const skipHeader = sizeColumns === "auto-skip-headers" && !lodashEs.isEmpty(params.rowData);
+        const skipHeader = sizeColumns === "auto-skip-headers" && gridRendered === "rows-visible";
         if (sizeColumns === "auto" || skipHeader) {
             const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, includeFlex: true });
-            if (lodashEs.isEmpty(params.rowData)) {
+            if (gridRendered === "empty") {
                 if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
                     hasSetContentSizeEmpty.current = true;
                     params.onContentSize && params.onContentSize(result);
                 }
             }
-            else {
+            else if (gridRendered === "rows-visible") {
                 if (result && !hasSetContentSize.current) {
                     hasSetContentSize.current = true;
                     params.onContentSize && params.onContentSize(result);
                 }
             }
+            else {
+                // It should be impossible to get here
+                console.error("Unknown value returned from hasGridRendered");
+            }
         }
         if (sizeColumns !== "none") {
             sizeColumnsToFit();
         }
         setAutoSized(true);
         needsAutoSize.current = false;
-    }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
+    }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = React.useRef();
     /**
      * Auto-size windows that had deferred auto-size
@@ -2415,24 +2419,17 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                 setInitialContentSize();
             }
         },
-        timeoutMs: 1000,
+        timeoutMs: 200,
     });
-    const previousGridReady = React.useRef(gridReady);
-    React.useEffect(() => {
-        if (!previousGridReady.current && gridReady) {
-            previousGridReady.current = true;
-            setInitialContentSize();
-        }
-    }, [gridReady, setInitialContentSize]);
     /**
      * On data load select the first row of the grid if required.
      */
     const hasSelectedFirstItem = React.useRef(false);
     React.useEffect(() => {
-        if (!gridReady || hasSelectedFirstItem.current || !params.rowData || !externallySelectedItemsAreInSync)
+        if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync)
             return;
         hasSelectedFirstItem.current = true;
-        if (isNotEmpty(params.rowData) && lodashEs.isEmpty(params.externalSelectedItems)) {
+        if (isNotEmpty(rowData) && lodashEs.isEmpty(params.externalSelectedItems)) {
             const firstRowId = getFirstRowId();
             if (params.autoSelectFirstRow) {
                 selectRowsById([firstRowId]);
@@ -2447,7 +2444,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         gridReady,
         params.externalSelectedItems,
         params.autoSelectFirstRow,
-        params.rowData,
+        rowData,
         selectRowsById,
         getFirstRowId,
     ]);
@@ -2588,7 +2585,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
      */
     const previousRowDataLength = React.useRef(0);
     const onRowDataChanged = React.useCallback(() => {
-        const length = params.rowData?.length ?? 0;
+        const length = rowData?.length ?? 0;
         if (previousRowDataLength.current !== length) {
             setInitialContentSize();
             previousRowDataLength.current = length;
@@ -2602,7 +2599,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         const skipHeader = sizeColumns === "auto-skip-headers";
         autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
         colIdsEdited.current.clear();
-    }, [autoSizeColumns, params.rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
+    }, [autoSizeColumns, rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
     /**
      * Show/hide no rows overlay when model changes.
      */
@@ -2771,7 +2768,6 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
             const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode);
             //we don't want to show the row highlight if it wouldn't result in the row moving
             const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
-            //console.log(targetIndex)
             if (event.node.rowIndex != targetIndex) {
                 clientSideRowModel.highlightRowAtPixel(event.node, event.y);
             }
@@ -2800,9 +2796,9 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     }, [params]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
                         setInitialContentSize();
-                    }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: (event) => {
+                    }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsxRuntime.jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
@@ -4614,6 +4610,19 @@ const GridContextProvider = (props) => {
         gridApi?.setQuickFilter(quickFilter);
         setGridReady(!!gridApi);
     }, [quickFilter]);
+    /**
+     * Used to check if it's OK to autosize.
+     */
+    const gridRenderState = React.useCallback(() => {
+        if (!gridApi)
+            return null;
+        if (!gridApi.getModel().isRowsToRender())
+            return "empty";
+        if (!lodashEs.isEmpty(gridApi.getRenderedNodes()))
+            return "rows-visible";
+        // If there are rows to render, but there are no rendered nodes then we should wait
+        return null;
+    }, [gridApi]);
     /**
      * Expose scrollRowIntoView for playwright tests.
      */
@@ -5032,6 +5041,7 @@ const GridContextProvider = (props) => {
         });
     }, [columnApi, gridApi]);
     return (jsxRuntime.jsx(GridContext.Provider, { value: {
+            gridRenderState,
             getColDef,
             getColumns,
             getColumnIds,