@linzjs/step-ag-grid 25.0.1 → 26.0.0

package/src/contexts/GridContextProvider.tsx

@@ -75,9 +75,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const ensureRowVisible = useCallback(
     (id: number | string): boolean => {
       if (!gridApi) return false;
-      const node = gridApi?.getRowNode(`${id}`);
+      const node = gridApi.getRowNode(`${id}`);
       if (!node) return false;
-      defer(() => gridApi.ensureNodeVisible(node));
+      defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(node));
       return true;
     },
     [gridApi],
@@ -141,16 +141,21 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Before a popup record the currently focused cell.
    */
   const prePopupOps = useCallback(() => {
-    prePopupFocusedCell.current = gridApi?.getFocusedCell() ?? undefined;
+    if (!gridApi || gridApi.isDestroyed()) {
+      return;
+    }
+    prePopupFocusedCell.current = gridApi.getFocusedCell() ?? undefined;
   }, [gridApi]);
 
   /**
    * After a popup refocus the cell.
    */
   const postPopupOps = useCallback(() => {
-    if (!gridApi) return;
+    if (!gridApi || gridApi.isDestroyed()) {
+      return;
+    }
     if (prePopupFocusedCell.current) {
-      gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+      gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
     }
   }, [gridApi]);
 
@@ -271,7 +276,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         );
         const firstNode = rowsThatNeedSelecting[0];
         if (firstNode) {
-          defer(() => gridApi.ensureNodeVisible(firstNode));
+          defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(firstNode));
           const colDefs = getColumns();
           if (!isEmpty(colDefs)) {
             const col = colDefs[0];
@@ -282,9 +287,16 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
               // as they will start to edit the cell before this stuff has a chance to run
               colId &&
                 delay(() => {
-                  if (isEmpty(gridApi.getEditingCells()) && (!ifNoCellFocused || gridApi.getFocusedCell() == null)) {
-                    // ifNoCellFocused
+                  if (
+                    isEmpty(gridApi.getEditingCells()) &&
+                    (!ifNoCellFocused || gridApi.getFocusedCell() == null) &&
+                    !gridApi.isDestroyed()
+                  ) {
                     gridApi.setFocusedCell(rowIndex, colId);
+                    // It may be that the first cell is the selection cell, this doesn't exist as a colDef
+                    // so instead, I just try and select it.  If it doesn't exist selection will stay on the
+                    // previously focused cell
+                    gridApi.setFocusedCell(rowIndex, 'ag-Grid-SelectionColumn');
                   }
                 }, 100);
             }
@@ -303,7 +315,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         if (flash) {
           delay(() => {
             try {
-              gridApi.flashCells({ rowNodes });
+              !gridApi.isDestroyed && gridApi.flashCells({ rowNodes });
             } catch {
               // ignore, flash cells sometimes throws errors as nodes have gone out of scope
             }
@@ -403,7 +415,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     gridApiOp((gridApi) => {
       const selectedNodes = gridApi.getSelectedNodes();
       if (isEmpty(selectedNodes)) return;
-      defer(() => gridApi.ensureNodeVisible(last(selectedNodes)));
+      defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(last(selectedNodes)));
     });
   }, [gridApiOp]);
 
@@ -446,48 +458,67 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   }, [gridApi]);
 
   const stopEditing = useCallback((): void => {
-    if (!gridApi) return;
-    if (prePopupFocusedCell.current) {
-      gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+    if (!gridApi || gridApi.isDestroyed()) {
+      return;
     }
     gridApi.stopEditing();
+    if (prePopupFocusedCell.current) {
+      gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+    }
   }, [gridApi]);
 
+  // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
+  const externallySelectedItemsAreInSyncRef = useRef(false);
+  useEffect(() => {
+    externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
+  }, [externallySelectedItemsAreInSync]);
+
+  const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
+    // Wait for up to 5 seconds
+    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
+      await wait(200);
+    }
+  }, []);
+
   const startCellEditing = useCallback(
-    // eslint-disable-next-line @typescript-eslint/require-await
-    ({ rowId, colId }: { rowId: number; colId: string }) => {
+    async ({ rowId, colId }: { rowId: number; colId: string }) => {
       if (!gridApi) return;
 
       const colDef = gridApi.getColumnDef(colId);
-      if (!colDef) return;
+      if (!colDef) {
+        return;
+      }
 
-      prePopupOps();
       const rowNode = gridApi.getRowNode(`${rowId}`);
       if (!rowNode) {
         return;
       }
 
-      if (!rowNode.isSelected()) {
+      prePopupOps();
+      const shouldSelectNode = !rowNode.isSelected();
+      if (shouldSelectNode) {
+        externallySelectedItemsAreInSyncRef.current = false;
         rowNode.setSelected(true, true);
+        await waitForExternallySelectedItemsToBeInSync();
       }
 
       // Cell already being edited, so don't re-edit until finished
-      if (checkUpdating([colDef.field ?? ''], rowId)) {
+      if (checkUpdating([colDef.field ?? colDef.colId ?? ''], rowId)) {
         return;
       }
 
       const rowIndex = rowNode.rowIndex;
       if (rowIndex != null) {
-        const focusAndEdit = () => {
-          gridApi.startEditingCell({
-            rowIndex,
-            colKey: colId,
-          });
-        };
-        defer(focusAndEdit);
+        defer(() => {
+          !gridApi.isDestroyed() &&
+            gridApi.startEditingCell({
+              rowIndex,
+              colKey: colId,
+            });
+        });
       }
     },
-    [checkUpdating, gridApi, prePopupOps],
+    [checkUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync],
   );
 
   /**
@@ -507,12 +538,12 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Returns true if an editable cell on same row was selected, else false.
    */
   const selectNextEditableCell = useCallback(
-    (tabDirection: -1 | 1): boolean => {
+    async (tabDirection: -1 | 1): Promise<boolean> => {
       // Pretend it succeeded to prevent unwanted cellEditingCompleteCallback
       if (!gridApi) return true;
 
       const focusedCellIsEditable = () => {
-        const focusedCell = gridApi.getFocusedCell();
+        const focusedCell = gridApi.isDestroyed() ? null : gridApi.getFocusedCell();
         const nextColumn = focusedCell?.column;
         const nextColDef = nextColumn?.getColDef();
         const rowNode = focusedCell && gridApi.getDisplayedRowAtIndex(focusedCell?.rowIndex);
@@ -526,8 +557,23 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
 
       // Just in case I've missed something, we don't want the loop to hang everything
       for (let maxIterations = 0; maxIterations < 50; maxIterations++) {
+        if (gridApi.isDestroyed()) {
+          return true;
+        }
         const preRow = gridApi.getFocusedCell();
-        tabDirection === 1 ? gridApi.tabToNextCell() : gridApi.tabToPreviousCell();
+        if (tabDirection === 1) {
+          gridApi.tabToNextCell();
+        } else {
+          gridApi.tabToPreviousCell();
+        }
+
+        // If we don't wait the tab to next element won't work
+        // I think this is due to the grid resizing
+        await wait(150);
+
+        if (gridApi.isDestroyed()) {
+          return true;
+        }
         const postRow = gridApi.getFocusedCell();
         if (preRow?.rowIndex !== postRow?.rowIndex || preRow?.column === postRow?.column) {
           // We didn't find an editable cell in the same row, or the cell column didn't change
@@ -536,7 +582,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         }
 
         if (focusedCellIsEditable()) {
-          const focusedCell = gridApi?.getFocusedCell();
+          const focusedCell = gridApi.getFocusedCell();
           if (focusedCell) {
             prePopupOps();
             gridApi.startEditingCell({
@@ -569,8 +615,10 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           props.field ?? '',
           selectedRows.map((data) => data.id),
           async () => {
+            // MATT Disabled I don't believe these are needed anymore
+            // I've left them here just in case they are
             // Need to refresh to get spinners to work on all rows
-            gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
+            // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
             ok = await fnUpdate(selectedRows).catch((ex) => {
               console.error('Exception during modifyUpdating', ex);
               return false;
@@ -578,13 +626,15 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           },
         );
 
+        // MATT Disabled I don't believe these are needed anymore
+        // I've left them here just in case they are
         // async processes need to refresh their own rows
-        gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
+        // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
 
         if (ok) {
           const cell = gridApi.getFocusedCell();
           if (cell && gridApi.getFocusedCell() == null) {
-            gridApi.setFocusedCell(cell.rowIndex, cell.column);
+            !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
           }
           // This is needed to trigger postSortRowsHook
           gridApi.refreshClientSideRowModel();
@@ -601,7 +651,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
           prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()
         ) {
-          if (!tabDirection || !selectNextEditableCell(tabDirection)) {
+          if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
             cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
           }
         }
@@ -624,19 +674,6 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     [gridApi],
   );
 
-  // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
-  const externallySelectedItemsAreInSyncRef = useRef(false);
-  useEffect(() => {
-    externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
-  }, [externallySelectedItemsAreInSync]);
-
-  const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
-    // Wait for up to 5 seconds
-    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
-      await wait(200);
-    }
-  }, []);
-
   const onFilterChanged = useMemo(
     () =>
       debounce(() => {

package/src/react-menu3/components/ControlledMenu.tsx

@@ -120,8 +120,12 @@ export const ControlledMenuFr = (
     (isDown: boolean) => (ev: KeyboardEvent) => {
       const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
       const activeElement = thisDocument.activeElement;
-      if (!anchorRef?.current || !activeElement) return;
-      if (ev.key !== 'Tab' && ev.key !== 'Enter') return;
+      if (!anchorRef?.current || !activeElement) {
+        return;
+      }
+      if (ev.key !== 'Tab' && ev.key !== 'Enter' && ev.key !== 'Esc') {
+        return;
+      }
 
       if (ev.repeat) {
         ev.preventDefault();
@@ -129,6 +133,13 @@ export const ControlledMenuFr = (
         return;
       }
 
+      if (ev.key === 'Esc') {
+        ev.preventDefault();
+        ev.stopPropagation();
+        safeCall(onClose, { key: ev.key, reason: CloseReason.CANCEL });
+        return;
+      }
+
       const invokeSave = (reason: string) => {
         if (!saveButtonRef?.current) return;
         saveButtonRef.current?.setAttribute('data-reason', reason);
@@ -265,6 +276,7 @@ export const ControlledMenuFr = (
   );
 
   const onKeyUp = (e: KeyboardEvent) => {
+    console.log(e);
     switch (e.key) {
       case Keys.ESC:
         e.preventDefault();
@@ -319,6 +331,7 @@ export const ControlledMenuFr = (
                 externalRef={externalRef}
                 containerRef={containerRef}
                 onClose={onClose}
+                onBlur={() => console.log('blur')}
               />
             </EventHandlersContext.Provider>
           </ItemSettingsContext.Provider>

package/src/stories/grid/GridDragRow.stories.tsx

@@ -4,13 +4,14 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import {
   ColDefT,
   Grid,
   GridCell,
   GridContextProvider,
+  GridOnRowDragEndProps,
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
@@ -52,12 +53,12 @@ interface ITestRow {
   id: number;
   position: string;
   age: number;
-  height: number;
+  height: string;
   desc: string;
   dd: string;
 }
 
-const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridDragRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
@@ -90,13 +91,23 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     [],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData, setRowData] = useState<ITestRow[]>([
     { id: 1000, position: 'Tester', age: 30, height: `6'4"`, desc: 'Tests application', dd: '1' },
     { id: 1001, position: 'Developer', age: 12, height: `5'3"`, desc: 'Develops application', dd: '2' },
     { id: 1002, position: 'Manager', age: 65, height: `5'9"`, desc: 'Manages', dd: '3' },
     { id: 1003, position: 'BA', age: 42, height: `5'7"`, desc: 'BAs', dd: '4' },
   ]);
 
+  const onRowDragEnd = useCallback(({ movedRow, targetRow }: GridOnRowDragEndProps<ITestRow>) => {
+    setRowData((rowData) =>
+      rowData.map((r) => {
+        if (r.id === movedRow.id) return targetRow;
+        if (r.id === targetRow.id) return movedRow;
+        return r;
+      }),
+    );
+  }, []);
+
   return (
     <GridWrapper maxHeight={300}>
       <Grid
@@ -108,15 +119,7 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         columnDefs={columnDefs}
         defaultColDef={{ sortable: false }}
         rowData={rowData}
-        onRowDragEnd={(movedRow, targetRow, _targetIndex) => {
-          setRowData(
-            rowData.map((r) => {
-              if (r.id === movedRow.id) return targetRow;
-              if (r.id === targetRow.id) return movedRow;
-              return r;
-            }),
-          );
-        }}
+        onRowDragEnd={onRowDragEnd}
         rowDragText={({ rowNode }) => `${rowNode?.data.id} - ${rowNode?.data.position}`}
       />
     </GridWrapper>

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -98,7 +98,13 @@ const GridFilterButtonsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           ]}
         />
       </GridFilters>
-      <Grid {...props} columnDefs={columnDefs} rowData={rowData} sizeColumns={'auto-skip-headers'} />
+      <Grid
+        {...props}
+        rowSelection={'multiple'}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        sizeColumns={'auto-skip-headers'}
+      />
     </GridWrapper>
   );
 };

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -170,7 +170,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
       ),
       GridPopoverEditDropDown(
         {
-          colId: 'position4',
+          field: 'position4',
           headerName: 'Filtered (object)',
           valueGetter: ({ data }) => data?.position4?.desc,
         },

package/src/stories/grid/gridFormStatic/GridFormDropDown.stories.tsx

@@ -15,7 +15,7 @@ export default {
   args: {},
 } as Meta<typeof GridFormDropDown>;
 
-const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps<any>) => {
+const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps<GridBaseRow>) => {
   const configs: [string, GridFormDropDownProps<GridBaseRow>, string?][] = [
     ['No options', { options: [] }],
     ['Custom no options', { options: [], noOptionsMessage: 'Custom no options' }],

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -66,10 +66,12 @@ interface ITestRow {
 }
 
 const multiEditAction = fn(async () => {
+  console.log('multiEditAction');
   await wait(500);
 });
 
 const eAction = fn(() => {
+  console.log('eAction');
   return true;
 });
 
@@ -141,7 +143,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
             },
             options: async (selectedItems) => {
               // Just doing a timeout here to demonstrate deferred loading
-              await wait(500);
+              await wait(50);
               return [
                 {
                   label: 'Single edit only',
@@ -223,8 +225,8 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
 
 export const GridKeyboardInteractions: StoryFn<typeof Grid> = GridKeyboardInteractionsTemplate.bind({});
 GridKeyboardInteractions.play = async ({ canvasElement }) => {
-  multiEditAction.mockReset();
-  eAction.mockReset();
+  multiEditAction.mockClear();
+  eAction.mockClear();
 
   await waitForGridReady({ canvasElement });
 
@@ -254,7 +256,7 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
       expect(activeCell).toHaveAttribute('aria-colindex', colId);
       expect(activeCell?.parentElement).toHaveAttribute('row-index', rowId);
     });
-    await wait(1000);
+    await wait(200);
   };
 
   await test(() => userEvent.keyboard('{Enter}'), '8', '2');

package/src/styles/GridTheme.scss

@@ -58,6 +58,29 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
+// Don't hide the drag handle
+.ag-theme-step-default.theme-specific .ag-drag-handle.ag-row-drag, .ag-theme-step-compact.theme-specific div.ag-drag-handle.ag-row-drag {
+  opacity: 1 !important;
+}
+
+.ag-header-hide-default-select .ag-labeled {
+  display: none;
+}
+
+.ag-header-hide-default-select .ag-wrapper.ag-checkbox-input-wrapper {
+  margin-right: 9px;
+}
+
+div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
+  padding-left: 40px;
+}
+
+.ag-drag-handle.ag-row-drag {
+  .ag-icon.ag-icon-grip {
+    margin: auto;
+  }
+}
+
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
   div.ag-center-cols-viewport {
@@ -70,61 +93,29 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     justify-content: center;
   }
 
-  .ag-header-select-draggable .ag-header-cell-comp-wrapper {
-    justify-content: end;
-  }
-
   .ag-header-cell {
     font-size: 14px;
     font-weight: 600;
 
-    // fix: Display descender line
-    padding: 0 11px;
-
     .LuiIcon {
       fill: lui.$surfie;
     }
   }
-
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 17px;
-    padding-right: 15px;
-  }
-
   .ag-text-area-input:focus {
     border-color: lui.$sea;
   }
 
-  .ag-cell[col-id="selection"] {
-    display: flex; // Fix that when you click below checkbox it doesn't process a click
-  }
-
-  // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
-    height: auto;
-  }
-
   .ag-row:last-of-type {
     border-bottom: 1px solid lui.$dew;
   }
 
   .ag-cell-label-container {
-    padding: 8px 0;
-
     // Help ag-grid to calculate column height in react portal
     height: fit-content;
   }
 
-
-  .ag-cell[aria-colindex="1"] {
-    padding-left: lui.$unit-rg;
-  }
-
-  .ag-cell {
-    padding-left: 11px;
-    padding-right: 11px;
-    display: flex;
-    align-items: center;
+  .ag-cell .ag-cell-wrapper {
+    width: 100%;
   }
 
   .ag-cell-wrap-text {
@@ -167,7 +158,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     }
   }
 
+
   .ag-cell {
+    display: flex;
+    align-items: center;
     font-weight: 400;
   }
 
@@ -217,25 +211,16 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     visibility: inherit;
   }
 
-  .ag-cell-wrapper {
-    width: 100%;
-  }
-
   .ag-row-highlight-above::after, .ag-row-highlight-below::after {
     content: '';
-    height: 2px;
+    height: 3px;
     background-color: transparent;
   }
 
   .ag-row-highlight-above::after {
-    top:-3px; // moves the top highlight to the position of the bottom highlight
     border-top: 2px dashed lui.$andrea;
   }
 
-  .ag-row-highlight-above:first-of-type::after {
-    top:0; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
-  }
-
   .ag-row-highlight-below::after {
     border-bottom: 2px dashed lui.$andrea;
   }
@@ -266,19 +251,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     font-size: 14px;
     font-weight: 600;
 
-    // fix: Display descender line
-    padding: 0 12px;
-
     .LuiIcon {
       fill: lui.$surfie;
     }
   }
-
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 32px;
-    padding-right: 12px;
-  }
-
   .ag-header-group-cell {
     font-weight: normal;
     font-size: 22px;
@@ -287,12 +263,4 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-header-cell {
     font-size: 14px;
   }
-
-  .ag-row .ag-cell:first-of-type {
-    padding-left: 32px;
-  }
-
-  .ag-row .ag-cell:last-of-type {
-    padding-right: 32px;
-  }
 }