@linzjs/step-ag-grid 7.6.0 → 7.6.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.6.0",
+  "version": "7.6.2",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridCell.tsx

@@ -68,7 +68,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(custom?.editor && {
-      cellClassRules: GridCellMultiSelectClassRules,
+      cellClassRules: custom.multiEdit ? GridCellMultiSelectClassRules : undefined,
       editable: props.editable ?? true,
       cellEditor: GenericCellEditorComponentWrapper(custom),
     }),
@@ -102,9 +102,18 @@ export interface CellEditorCommon {
 
 export const GenericCellEditorComponentWrapper = (custom?: { editor?: (props: any) => JSX.Element }) => {
   return forwardRef(function GenericCellEditorComponentFr(cellEditorParams: ICellEditorParams, _) {
+    const valueFormatted = cellEditorParams.formatValue
+      ? cellEditorParams.formatValue(cellEditorParams.value)
+      : "Missing formatter";
     return (
       <GridPopoverContextProvider props={cellEditorParams}>
-        {<cellEditorParams.colDef.cellRenderer {...cellEditorParams} {...cellEditorParams.colDef.cellRendererParams} />}
+        {
+          <cellEditorParams.colDef.cellRenderer
+            {...cellEditorParams}
+            valueFormatted={valueFormatted}
+            {...cellEditorParams.colDef.cellRendererParams}
+          />
+        }
         {custom?.editor && <custom.editor {...cellEditorParams} />}
       </GridPopoverContextProvider>
     );

package/src/contexts/GridContextProvider.tsx

@@ -251,7 +251,10 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         async () => {
           // Need to refresh to get spinners to work on all rows
           gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
-          ok = await fnUpdate(selectedRows);
+          ok = await fnUpdate(selectedRows).catch((ex) => {
+            console.error("Exception during modifyUpdating", ex);
+            return false;
+          });
         },
       );
 

package/src/contexts/GridPopoverContextProvider.tsx

@@ -31,9 +31,7 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
     async (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1): Promise<boolean> => {
       if (hasSaved.current) return true;
       hasSaved.current = true;
-      const r = saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
-      //if (r) stopEditing();
-      return r;
+      return saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
     },
     [field, saving, selectedRows, updatingCells],
   );

package/src/styles/Grid.scss

@@ -62,9 +62,4 @@
 
 .Grid-container.ag-theme-alpine .ag-cell-wrapper {
   width: 100%;
-}
-
-.Grid-container.ag-theme-alpine .ag-cell-inline-editing {
-  padding-left: 5px;
-  padding-right: 2px;
 }

package/src/styles/GridTheme.scss

@@ -24,6 +24,7 @@
       border-color: lui.$lily,
       secondary-border-color: lui.$lily,
       cell-horizontal-border: solid ag-derived(secondary-border-color),
+      cell-horizontal-padding: 12,
       row-hover-color: lui.$lily,
       font-family: (
         "Open Sans",
@@ -59,7 +60,7 @@
 
   .ag-header-cell {
     font-weight: 600;
-    padding: 7px 0 7px 8px;
+    padding: 7px 11px;
 
     .LuiIcon {
       fill: lui.$surfie;
@@ -67,25 +68,25 @@
   }
 
   .ag-cell {
-    padding-left: 7px;
-    padding-right: 4px;
+    padding-left: 11px;
+    padding-right: 11px;
     display: flex;
     align-items: center;
   }
 
-  .ag-cell-more {
-    padding: 0;
-    display: flex;
-    justify-content: center;
+  .ag-cell.ag-cell-inline-editing {
+    bottom: 0;
   }
 
   .ag-cell-wrap-text {
     word-break: break-word;
   }
 
-  .ag-cell-popup-editing,
-  .ag-selected-for-edit,
+  .ag-cell.ag-cell-popup-editing,
+  .ag-cell.ag-selected-for-edit,
   .ag-cell-inline-editing {
+    padding-left: 9px;
+    padding-right: 9px;
     background: rgb(72 160 244 / 20%);
     // These are important, it needs to override ag-grid to work
     border: 3px solid #48a0f4 !important;

package/src/utils/deferredPromise.ts

@@ -1,9 +1,16 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 export const useDeferredPromise = <T>() => {
   const promiseResolve = useRef<((value: T | PromiseLike<T>) => void) | undefined>();
   const promiseReject = useRef<() => void>();
 
+  // End promise on unload
+  useEffect(() => {
+    return () => {
+      promiseReject.current && promiseReject.current();
+    };
+  }, []);
+
   return {
     invoke: () =>
       new Promise<T>((resolve, reject) => {