@linzjs/step-ag-grid 29.2.0 → 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;
@@ -2989,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]);
@@ -3087,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,
                             });
                         }
@@ -3116,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);
@@ -3192,7 +3211,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         // Prevent repeated callbacks to cell focus when focus didn't change
         const { sourceEvent } = event;
         if (sourceEvent) {
-            const cell = sourceEvent.target.closest('.ag-cell');
+            const cell = sourceEvent.target?.closest?.('.ag-cell') ?? null;
             if (window.__stepaggrid_lastfocuseventtarget === cell) {
                 return;
             }
@@ -5417,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;