@linzjs/step-ag-grid 29.1.6 → 29.2.1

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

@@ -2760,7 +2760,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
 /**
  * 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 } = useContext(GridUpdatingContext);
     const gridDivRef = useRef(null);
@@ -2791,7 +2791,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;
@@ -2826,10 +2830,27 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         needsAutoSize.current = false;
     }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = useRef();
+    const wasVisibleRef = 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) {
@@ -2970,7 +2991,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]);
@@ -3068,7 +3093,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,
                             });
                         }
@@ -3097,25 +3122,36 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     /**
      * Resize columns to fit if required on window/container resize
      */
-    const onGridSizeChanged = useCallback(() => {
-        if (sizeColumns !== 'none') {
-            sizeColumnsToFit();
+    const onGridSizeChanged = 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 = useRef(new Set());
+    const userSizedColIds = useRef(new Map());
     /**
      * Lock/unlock column width on user edit/reset.
      */
     const onColumnResized = 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);
@@ -3156,7 +3192,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, [clearHighlightRowClasses]);
     const onCellFocused = useCallback((event) => {
-        if (!paramsOnCellFocused || event.rowIndex == null) {
+        if (event.rowIndex == null) {
             return;
         }
         const api = event.api;
@@ -3170,15 +3206,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 = useCallback((event) => {
         clearHighlightRowClasses();
@@ -5397,8 +5434,9 @@ const GridContextProvider = (props) => {
      * Resize columns to fit container
      */
     const autoSizeColumns = 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;