@linzjs/step-ag-grid 29.1.6 → 29.2.1

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

@@ -84,8 +84,9 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
     pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];
     onRowClicked?: (event: RowClickedEvent) => void;
     onRowDoubleClicked?: (event: RowDoubleClickedEvent) => void;
+    allowResizeInStorybook?: boolean;
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, onCellFocused: paramsOnCellFocused, ...params }: GridProps<TData>) => ReactElement;
+export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, allowResizeInStorybook, onCellFocused: paramsOnCellFocused, ...params }: GridProps<TData>) => ReactElement;

package/dist/step-ag-grid.cjs

@@ -2762,7 +2762,7 @@ agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.AllCommunityModu
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, ...params }) => {
+const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, allowResizeInStorybook, onCellFocused: paramsOnCellFocused, ...params }) => {
     const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing, } = useGridContext();
     const { updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
     const gridDivRef = React.useRef(null);
@@ -2793,7 +2793,11 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         const skipHeader = sizeColumns === 'auto-skip-headers' && gridRendered === 'rows-visible';
         if (sizeColumns === 'auto' || skipHeader) {
-            const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, includeFlex: true });
+            const result = autoSizeColumns({
+                skipHeader,
+                userSizedColIds: new Set(userSizedColIds.current.keys()),
+                includeFlex: true,
+            });
             if (!result) {
                 needsAutoSize.current = true;
                 return;
@@ -2828,10 +2832,27 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         needsAutoSize.current = false;
     }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = React.useRef();
+    const wasVisibleRef = React.useRef(false);
     /**
      * Auto-size windows that had deferred auto-size
+     * Reset focus if panel went from invisible to visible.
      */
     useInterval(() => {
+        // If grid has become visible after previously being hidden, then refocus the last focused cell.
+        const visible = !!gridDivRef.current?.checkVisibility();
+        if (visible && !wasVisibleRef.current) {
+            wasVisibleRef.current = true;
+            const el = window.__stepaggrid_lastfocuseventtarget;
+            if (el) {
+                // Setting this to null will cause a new refocus event
+                window.__stepaggrid_lastfocuseventtarget = null;
+                // Check element is still part of document
+                if (el.checkVisibility()) {
+                    el.focus();
+                }
+            }
+        }
+        wasVisibleRef.current = visible;
         // Check if window has been popped out and needs resize
         const currentDocument = gridDivRef.current?.ownerDocument;
         if (currentDocument !== lastOwnerDocumentRef.current) {
@@ -2972,7 +2993,11 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             return;
         const skipHeader = sizeColumns === 'auto-skip-headers';
         if (hasSetContentSize.current) {
-            autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
+            autoSizeColumns({
+                skipHeader,
+                userSizedColIds: new Set(userSizedColIds.current.keys()),
+                colIds: colIdsEdited.current,
+            });
         }
         colIdsEdited.current.clear();
     }, [autoSizeColumns, rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
@@ -3070,7 +3095,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                         if (hasSetContentSize.current) {
                             autoSizeColumns({
                                 skipHeader,
-                                userSizedColIds: userSizedColIds.current,
+                                userSizedColIds: new Set(userSizedColIds.current.keys()),
                                 colIds: colIdsEdited.current,
                             });
                         }
@@ -3099,25 +3124,36 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     /**
      * Resize columns to fit if required on window/container resize
      */
-    const onGridSizeChanged = React.useCallback(() => {
-        if (sizeColumns !== 'none') {
-            sizeColumnsToFit();
+    const onGridSizeChanged = React.useCallback((event) => {
+        if (sizeColumns !== 'none' && (!window.__STORYBOOK_PREVIEW__ || allowResizeInStorybook)) {
+            const columnLimits = [
+                ...userSizedColIds.current.entries().map(([c, w]) => ({
+                    key: c,
+                    minWidth: w,
+                })),
+            ];
+            event.api.sizeColumnsToFit({ columnLimits });
         }
-    }, [sizeColumns, sizeColumnsToFit]);
+    }, [allowResizeInStorybook, sizeColumns]);
     /**
      * Set of column I'd's that are prevented from auto-sizing as they are user set
      */
-    const userSizedColIds = React.useRef(new Set());
+    const userSizedColIds = React.useRef(new Map());
     /**
      * Lock/unlock column width on user edit/reset.
      */
     const onColumnResized = React.useCallback((e) => {
         const colId = e.column?.getColId();
-        if (colId == null)
+        if (colId == null) {
+            return;
+        }
+        const width = e.column?.getActualWidth();
+        if (width == null) {
             return;
+        }
         switch (e.source) {
-            case 'uiColumnDragged':
-                userSizedColIds.current.add(colId);
+            case 'uiColumnResized':
+                userSizedColIds.current.set(colId, width);
                 break;
             case 'autosizeColumns':
                 userSizedColIds.current.delete(colId);
@@ -3158,7 +3194,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, [clearHighlightRowClasses]);
     const onCellFocused = React.useCallback((event) => {
-        if (!paramsOnCellFocused || event.rowIndex == null) {
+        if (event.rowIndex == null) {
             return;
         }
         const api = event.api;
@@ -3172,15 +3208,16 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         if (!colDef || typeof colDef === 'string') {
             return;
         }
-        // Prevent repeated callbacks to cell focus when it focus didn't change
+        // Prevent repeated callbacks to cell focus when focus didn't change
         const { sourceEvent } = event;
         if (sourceEvent) {
-            if (window.__stepaggrid_lastfocuseventtarget === sourceEvent.target) {
+            const cell = sourceEvent.target?.closest?.('.ag-cell') ?? null;
+            if (window.__stepaggrid_lastfocuseventtarget === cell) {
                 return;
             }
-            window.__stepaggrid_lastfocuseventtarget = sourceEvent.target;
+            window.__stepaggrid_lastfocuseventtarget = cell;
         }
-        paramsOnCellFocused({ colDef, data });
+        paramsOnCellFocused?.({ colDef, data });
     }, [paramsOnCellFocused]);
     const onRowDragEnd = React.useCallback((event) => {
         clearHighlightRowClasses();
@@ -5399,8 +5436,9 @@ const GridContextProvider = (props) => {
      * Resize columns to fit container
      */
     const autoSizeColumns = React.useCallback(({ skipHeader, colIds, userSizedColIds, includeFlex } = {}) => {
-        if (!gridApi || !gridApi.getColumnState())
+        if (!gridApi || !gridApi.getColumnState()) {
             return null;
+        }
         const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
         const colsToResize = gridApi.getColumnState()?.filter?.((colState) => {
             const colId = colState.colId;