@linzjs/step-ag-grid 29.1.6 → 29.2.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.1.6",
+  "version": "29.2.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -83,6 +83,7 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@linzjs/lui": "^23.11.1",
     "@linzjs/style": "^5.4.0",
+    "@linzjs/windows": "^5.5.1",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",

package/src/components/Grid.tsx

@@ -14,6 +14,8 @@ import {
   GetRowIdParams,
   GridOptions,
   GridReadyEvent,
+  GridSizeChangedEvent,
+  IColumnLimit,
   ModelUpdatedEvent,
   ModuleRegistry,
   RowClickedEvent,
@@ -124,6 +126,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];
   onRowClicked?: (event: RowClickedEvent) => void;
   onRowDoubleClicked?: (event: RowDoubleClickedEvent) => void;
+  allowResizeInStorybook?: boolean;
 }
 
 /**
@@ -142,6 +145,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   rowData,
   rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   selectable,
+  allowResizeInStorybook,
   onCellFocused: paramsOnCellFocused,
   ...params
 }: GridProps<TData>): ReactElement => {
@@ -204,7 +208,11 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
     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;
@@ -238,11 +246,29 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
 
   const lastOwnerDocumentRef = useRef<Document>();
+  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 as any).__stepaggrid_lastfocuseventtarget;
+      if (el) {
+        // Setting this to null will cause a new refocus event
+        (window as any).__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) {
@@ -407,7 +433,11 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
     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]);
@@ -525,7 +555,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
             if (hasSetContentSize.current) {
               autoSizeColumns({
                 skipHeader,
-                userSizedColIds: userSizedColIds.current,
+                userSizedColIds: new Set(userSizedColIds.current.keys()),
                 colIds: colIdsEdited.current,
               });
             }
@@ -555,26 +585,43 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   /**
    * Resize columns to fit if required on window/container resize
    */
-  const onGridSizeChanged = useCallback(() => {
-    if (sizeColumns !== 'none') {
-      sizeColumnsToFit();
-    }
-  }, [sizeColumns, sizeColumnsToFit]);
+  const onGridSizeChanged = useCallback(
+    (event: GridSizeChangedEvent<TData>) => {
+      if (sizeColumns !== 'none' && (!(window as any).__STORYBOOK_PREVIEW__ || allowResizeInStorybook)) {
+        const columnLimits = [
+          ...userSizedColIds.current.entries().map(
+            ([c, w]): IColumnLimit => ({
+              key: c,
+              minWidth: w,
+            }),
+          ),
+        ];
+        event.api.sizeColumnsToFit({ columnLimits });
+      }
+    },
+    [allowResizeInStorybook, sizeColumns],
+  );
 
   /**
    * Set of column I'd's that are prevented from auto-sizing as they are user set
    */
-  const userSizedColIds = useRef(new Set<string>());
+  const userSizedColIds = useRef(new Map<string, number>());
 
   /**
    * Lock/unlock column width on user edit/reset.
    */
   const onColumnResized = useCallback((e: ColumnResizedEvent) => {
     const colId = e.column?.getColId();
-    if (colId == null) return;
+    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);
@@ -625,7 +672,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   const onCellFocused = useCallback(
     (event: CellFocusedEvent<TData>) => {
-      if (!paramsOnCellFocused || event.rowIndex == null) {
+      if (event.rowIndex == null) {
         return;
       }
       const api = event.api;
@@ -639,15 +686,17 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       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 as any).__stepaggrid_lastfocuseventtarget === sourceEvent.target) {
+        const cell = (sourceEvent.target as Element | undefined)?.closest?.('.ag-cell') ?? null;
+        if ((window as any).__stepaggrid_lastfocuseventtarget === cell) {
           return;
         }
-        (window as any).__stepaggrid_lastfocuseventtarget = sourceEvent.target;
+        (window as any).__stepaggrid_lastfocuseventtarget = cell;
       }
-      paramsOnCellFocused({ colDef, data });
+
+      paramsOnCellFocused?.({ colDef, data });
     },
     [paramsOnCellFocused],
   );

package/src/contexts/GridContextProvider.tsx

@@ -424,7 +424,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    */
   const autoSizeColumns = useCallback(
     ({ skipHeader, colIds, userSizedColIds, includeFlex }: AutoSizeColumnsProps = {}): AutoSizeColumnsResult => {
-      if (!gridApi || !gridApi.getColumnState()) return null;
+      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;

package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingAgGrid.stories.tsx

@@ -0,0 +1,28 @@
+import { PanelsContextProvider } from '@linzjs/windows';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TestShowPanelResizingAgGrid } from './ShowPanelResizingStepAgGrid';
+
+const meta: Meta<typeof TestShowPanelResizingAgGrid> = {
+  title: 'Components/Panel',
+  component: TestShowPanelResizingAgGrid,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <PanelsContextProvider baseZIndex={500}>
+          <Story />
+        </PanelsContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PanelResizing: Story = {
+  args: {},
+};

package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx

@@ -0,0 +1,169 @@
+// import '../story.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '../../../../styles/Grid.scss';
+
+import {
+  OpenPanelButton,
+  Panel,
+  PanelContent,
+  PanelContext,
+  PanelHeader,
+  PanelsContextProvider,
+} from '@linzjs/windows';
+import { useContext, useMemo, useState } from 'react';
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridIcon,
+  GridPopoverMenu,
+  GridPopoverMessage,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from '../../../../../src';
+
+// #Example: Panel Context Provider
+// Don't forget to add a PanelContextProvider at the root of your project
+export const App = () => (
+  <PanelsContextProvider baseZIndex={500}>
+    <div>...the rest of your app...</div>
+  </PanelsContextProvider>
+);
+
+// #Example: Panel Component
+export interface TestPanelProps {
+  data: number;
+}
+
+export const TestPanelResizing = ({ data }: TestPanelProps) => {
+  return (
+    <Panel title={`Panel resizing demo ${data}`} size={{ width: 320, height: 400 }} className={'WindowPanel-blue'}>
+      <PanelHeader />
+      <PanelContent>
+        <PanelContentsWithResize />
+      </PanelContent>
+    </Panel>
+  );
+};
+
+// #Example: Panel Invocation
+export const TestShowPanelResizingAgGrid = () => (
+  <>
+    <OpenPanelButton buttonText={'TestPanel resizing 1'} componentFn={() => <TestPanelResizing data={1} />} />{' '}
+    <OpenPanelButton buttonText={'TestPanel resizing 2'} componentFn={() => <TestPanelResizing data={2} />} />
+  </>
+);
+
+/* exclude */
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  desc: string;
+  dd: string;
+}
+
+/* exclude */
+
+// #Example: Resizing panel to content after load
+// Note: Resize can only be used from within the panel content.
+export const PanelContentsWithResize = () => {
+  // This is the first important bit
+  const { resizePanel } = useContext(PanelContext);
+
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      /* Your grid ColDefs */
+      /* exclude */
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+      }),
+      GridCell({
+        field: 'position',
+        headerName: 'Position',
+        cellRendererParams: {
+          warning: (props) => props.value === 'Tester' && 'Testers are testing',
+          info: (props) => props.value === 'Developer' && 'Developers are awesome',
+        },
+      }),
+      GridCell({
+        field: 'age',
+        headerName: 'Age',
+      }),
+      GridCell({
+        field: 'desc',
+        headerName: 'Description',
+        flex: 1,
+      }),
+      GridPopoverMessage(
+        {
+          headerName: 'Popout message',
+          cellRenderer: () => <>Single Click me!</>,
+          exportable: false,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            // eslint-disable-next-line @typescript-eslint/require-await
+            message: async (selectedRows): Promise<string> => {
+              return `There are ${selectedRows.length} row(s) selected`;
+            },
+          },
+        },
+      ),
+      GridCell({
+        headerName: 'Custom edit',
+        editable: true,
+        valueFormatter: () => 'Press E',
+        cellRendererParams: {
+          rightHoverElement: (
+            <GridIcon icon={'ic_launch_modal'} title={'Title text'} className={'GridCell-editableIcon'} />
+          ),
+          editAction: (selectedRows) => {
+            alert(`Custom edit ${selectedRows.map((r) => r.id).join()} rowId(s) selected`);
+          },
+          shortcutKeys: {
+            e: () => {
+              alert('Hi');
+            },
+          },
+        },
+      }),
+      GridPopoverMenu(
+        {},
+        {
+          multiEdit: true,
+          editorParams: {
+            // eslint-disable-next-line @typescript-eslint/require-await
+            options: async () => [],
+          },
+        },
+      ),
+      /* exclude */
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    /* Your grid row data */
+    /* exclude */
+    { id: 1000, position: 'Tester', age: 30, desc: 'Tests application', dd: '1' },
+    { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
+    { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
+    /* exclude */
+  ]);
+
+  return (
+    <GridUpdatingContextProvider>
+      <GridContextProvider>
+        <GridWrapper>
+          <Grid columnDefs={columnDefs} rowData={rowData} onContentSize={resizePanel} allowResizeInStorybook={true} />
+        </GridWrapper>
+      </GridContextProvider>
+    </GridUpdatingContextProvider>
+  );
+};