@linzjs/step-ag-grid 7.11.13 → 7.13.0

package/package.json

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

package/src/components/Grid.tsx

@@ -35,6 +35,7 @@ export interface GridProps {
   rowClassRules?: GridOptions["rowClassRules"];
   rowSelection?: "single" | "multiple";
   autoSelectFirstRow?: boolean;
+  onColumnMoved?: GridOptions["onColumnMoved"];
 }
 
 /**
@@ -47,8 +48,10 @@ export const Grid = (params: GridProps): JSX.Element => {
     setQuickFilter,
     ensureRowVisible,
     selectRowsById,
+    focusByRowById,
     ensureSelectedRowIsVisible,
     sizeColumnsToFit,
+    externallySelectedItemsAreInSync,
     setExternallySelectedItemsAreInSync,
   } = useContext(GridContext);
   const { checkUpdating } = useContext(GridUpdatingContext);
@@ -63,12 +66,25 @@ export const Grid = (params: GridProps): JSX.Element => {
    */
   const hasSelectedFirstItem = useRef(false);
   useEffect(() => {
-    if (!gridReady || !params.autoSelectFirstRow || hasSelectedFirstItem.current || !params.rowData) return;
+    if (!gridReady || hasSelectedFirstItem.current || !params.rowData || !externallySelectedItemsAreInSync) return;
     hasSelectedFirstItem.current = true;
     if (isNotEmpty(params.rowData) && isEmpty(params.externalSelectedItems)) {
-      selectRowsById([params.rowData[0].id]);
+      const firstRowId = params.rowData[0].id;
+      if (params.autoSelectFirstRow) {
+        selectRowsById([firstRowId]);
+      } else {
+        focusByRowById(firstRowId);
+      }
     }
-  }, [gridReady, params, params.autoSelectFirstRow, params.rowData, selectRowsById]);
+  }, [
+    externallySelectedItemsAreInSync,
+    focusByRowById,
+    gridReady,
+    params,
+    params.autoSelectFirstRow,
+    params.rowData,
+    selectRowsById,
+  ]);
 
   /**
    * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
@@ -175,7 +191,7 @@ export const Grid = (params: GridProps): JSX.Element => {
             checkboxSelection: true,
             headerComponent: GridHeaderSelect,
             suppressHeaderKeyboardEvent: (e) => {
-              if (e.event.key === "Enter" && !e.event.repeat) {
+              if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
                 const selectedNodeCount = e.api.getSelectedRows().length;
                 if (selectedNodeCount == 0) {
                   e.api.selectAllFiltered();
@@ -339,6 +355,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         onSortChanged={ensureSelectedRowIsVisible}
         postSortRows={params.postSortRows ?? postSortRows}
         onSelectionChanged={synchroniseExternalStateToGridSelection}
+        onColumnMoved={params.onColumnMoved}
       />
     </div>
   );

package/src/components/GridCell.tsx

@@ -6,7 +6,7 @@ import { GenericCellColDef, GenericCellRendererParams } from "./gridRender/GridR
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
 import { GridIcon } from "./GridIcon";
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { SuppressKeyboardEventParams, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
 import { fnOrVar } from "../utils/util";
 
@@ -52,6 +52,20 @@ export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
   editor?: (editorProps: any) => JSX.Element;
 }
 
+export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
+  const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
+  const exec = shortcutKeys[e.event.key];
+  if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
+    const editable = fnOrVar(e.colDef?.editable, e);
+    return editable ? exec(e) ?? true : true;
+  }
+  // It's important that aggrid doesn't trigger edit on enter
+  // as the incorrect selected rows will be returned
+  return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " ", "Home", "End", "PageUp", "PageDown"].includes(
+    e.event.key,
+  );
+};
+
 /*
  * All cells should use this
  */
@@ -68,21 +82,11 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(custom?.editor && {
-      cellClassRules: custom.multiEdit ? GridCellMultiSelectClassRules : undefined,
+      cellClassRules: GridCellMultiSelectClassRules,
       editable: props.editable ?? true,
-      cellEditor: GenericCellEditorComponentWrapper(custom),
+      cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
     }),
-    suppressKeyboardEvent: (e) => {
-      const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
-      const exec = shortcutKeys[e.event.key];
-      if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
-        const editable = fnOrVar(e.colDef?.editable, e);
-        return editable ? exec(e) ?? true : true;
-      }
-      // It's important that aggrid doesn't trigger edit on enter
-      // as the incorrect selected rows will be returned
-      return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " "].includes(e.event.key);
-    },
+    suppressKeyboardEvent: suppressCellKeyboardEvents,
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
     }),
@@ -106,7 +110,8 @@ export interface CellEditorCommon {
   className?: string | undefined;
 }
 
-export const GenericCellEditorComponentWrapper = (custom?: { editor?: (props: any) => JSX.Element }) => {
+export const GenericCellEditorComponentWrapper = (editor?: (props: any) => JSX.Element) => {
+  const obj = { editor };
   return forwardRef(function GenericCellEditorComponentFr(cellEditorParams: ICellEditorParams, _) {
     const valueFormatted = cellEditorParams.formatValue
       ? cellEditorParams.formatValue(cellEditorParams.value)
@@ -120,7 +125,7 @@ export const GenericCellEditorComponentWrapper = (custom?: { editor?: (props: an
             {...cellEditorParams.colDef.cellRendererParams}
           />
         }
-        {custom?.editor && <custom.editor {...cellEditorParams} />}
+        {obj.editor && <obj.editor {...cellEditorParams} />}
       </GridPopoverContextProvider>
     );
   });

package/src/components/GridCellMultiEditor.tsx

@@ -0,0 +1,48 @@
+import { GridBaseRow } from "./Grid";
+import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
+import { GenericCellColDef } from "./gridRender/GridRenderGenericCell";
+import { CellEditorSelectorResult, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { ColDefT, GenericCellEditorComponentWrapper, GridCellRenderer, suppressCellKeyboardEvents } from "./GridCell";
+import { ComponentProps } from "react";
+import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
+
+export const Editor = <FN extends (param: any) => JSX.Element>(props: {
+  multiEdit: boolean;
+  editor: FN;
+  editorParams: ComponentProps<FN>;
+}): CellEditorSelectorResult => ({
+  component: GenericCellEditorComponentWrapper(props.editor),
+  params: { ...props.editorParams, multiEdit: props.multiEdit },
+});
+
+/*
+ * All cells should use this
+ */
+export const GridCellMultiEditor = <RowType extends GridBaseRow>(
+  props: GenericCellColDef<RowType>,
+  cellEditorSelector: (params: ICellEditorParams) => CellEditorSelectorResult,
+): ColDefT<RowType> => {
+  return {
+    colId: props.colId ?? props.field,
+    field: props.field,
+    sortable: !!(props?.field || props?.valueGetter),
+    resizable: true,
+    editable: props.editable ?? true,
+    cellClassRules: GridCellMultiSelectClassRules,
+    cellEditorSelector,
+    suppressKeyboardEvent: suppressCellKeyboardEvents,
+    // Default value formatter, otherwise react freaks out on objects
+    valueFormatter: (params: ValueFormatterParams) => {
+      if (params.value == null) return "–";
+      const types = ["number", "boolean", "string"];
+      if (types.includes(typeof params.value)) return `${params.value}`;
+      else return JSON.stringify(params.value);
+    },
+    ...props,
+    cellRenderer: GridCellRenderer,
+    cellRendererParams: {
+      originalCellRenderer: props.cellRenderer,
+      ...props.cellRendererParams,
+    },
+  };
+};

package/src/components/GridCellMultiSelectClassRules.tsx

@@ -1,9 +1,20 @@
 import { CellClassParams, CellClassRules } from "ag-grid-community/dist/lib/entities/colDef";
+import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
 
 export const GridCellMultiSelectClassRules: CellClassRules = {
-  "ag-selected-for-edit": ({ api, node, colDef }: CellClassParams) =>
-    api
-      .getSelectedNodes()
-      .map((row) => row.id)
-      .includes(node.id) && api.getEditingCells().some((cell) => cell.column.getColDef() === colDef),
+  "ag-selected-for-edit": (params: CellClassParams) => {
+    const { api, node, colDef } = params;
+    const cep = colDef.cellEditorSelector
+      ? colDef.cellEditorSelector(params as ICellEditorParams)?.params
+      : colDef.cellEditorParams;
+
+    return (
+      cep?.multiEdit &&
+      api
+        .getSelectedNodes()
+        .map((row) => row.id)
+        .includes(node.id) &&
+      api.getEditingCells().some((cell) => cell.column.getColDef() === colDef)
+    );
+  },
 };

package/src/components/gridForm/GridFormTextArea.tsx

@@ -15,7 +15,7 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow>
   helpText?: string;
 }
 
-export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
+export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>): JSX.Element => {
   const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
 
   const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);

package/src/contexts/GridContext.tsx

@@ -15,6 +15,7 @@ export interface GridContextType {
   selectRowsByIdWithFlash: (rowIds?: number[]) => void;
   flashRows: (rowIds?: number[]) => void;
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
+  focusByRowById: (rowId: number) => void;
   ensureRowVisible: (id: number | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
   sizeColumnsToFit: () => void;
@@ -26,12 +27,14 @@ export interface GridContextType {
     tabDirection?: 1 | 0 | -1,
   ) => Promise<boolean>;
   redrawRows: (rowNodes?: RowNode[]) => void;
+  externallySelectedItemsAreInSync: boolean;
   setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
   waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
 }
 
 export const GridContext = createContext<GridContextType>({
   gridReady: false,
+  externallySelectedItemsAreInSync: false,
   setGridApi: () => {
     console.error("no context provider for setGridApi");
   },
@@ -64,6 +67,9 @@ export const GridContext = createContext<GridContextType>({
   flashRowsDiff: async () => {
     console.error("no context provider for flashRows");
   },
+  focusByRowById: async () => {
+    console.error("no context provider for focusByRowById");
+  },
   ensureRowVisible: () => {
     console.error("no context provider for ensureRowVisible");
     return true;

package/src/contexts/GridContextProvider.tsx

@@ -20,7 +20,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const [gridApi, _setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
   const idsBeforeUpdate = useRef<number[]>([]);
-  const externallySelectedItemsAreInSync = useRef(false);
+  const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
 
   const setGridApi = useCallback((gridApi: GridApi | undefined) => {
     _setGridApi(gridApi);
@@ -181,10 +181,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, false),
     [_selectRowsWithOptionalFlash],
   );
+
   const selectRowsByIdWithFlash = useCallback(
     (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, true),
     [_selectRowsWithOptionalFlash],
   );
+
   const flashRows = useCallback(
     (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, false, true),
     [_selectRowsWithOptionalFlash],
@@ -217,6 +219,11 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
 
+  const focusByRowById = useCallback(
+    (rowId: number) => _selectRowsWithOptionalFlash([rowId], false, false),
+    [_selectRowsWithOptionalFlash],
+  );
+
   const getSelectedRows = useCallback(<T extends unknown>(): T[] => {
     return gridApiOp(
       (gridApi) => gridApi.getSelectedRows(),
@@ -350,16 +357,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     [gridApiOp],
   );
 
-  const setExternallySelectedItemsAreInSync = useCallback((inSync: boolean) => {
-    externallySelectedItemsAreInSync.current = inSync;
-  }, []);
-
   const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
     // Wait for up to 5 seconds
-    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSync.current; i++) {
+    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSync; i++) {
       await wait(200);
     }
-  }, []);
+  }, [externallySelectedItemsAreInSync]);
 
   return (
     <GridContext.Provider
@@ -373,6 +376,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         selectRowsWithFlashDiff,
         flashRows,
         flashRowsDiff,
+        focusByRowById,
         getSelectedRows,
         getSelectedRowIds,
         editingCells,
@@ -382,6 +386,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         stopEditing,
         updatingCells,
         redrawRows,
+        externallySelectedItemsAreInSync,
         setExternallySelectedItemsAreInSync,
         waitForExternallySelectedItemsToBeInSync,
       }}

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -16,6 +16,10 @@ import { GridPopoverTextInput } from "../../components/gridPopoverEdit/GridPopov
 import { ActionButton } from "../../lui/ActionButton";
 import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
 import { GridContext } from "../../contexts/GridContext";
+import { Editor, GridCellMultiEditor } from "../../components/GridCellMultiEditor";
+import { GridFormTextArea } from "../../components/gridForm/GridFormTextArea";
+import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
+import { GridFormDropDown } from "../../components/gridForm/GridFormDropDown";
 
 export default {
   title: "Components / Grids",
@@ -88,7 +92,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
         {
-          multiEdit: true,
+          multiEdit: false,
           editorParams: {
             maxLength: 12,
             placeholder: "Enter distance...",
@@ -119,7 +123,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
             required: true,
             maxLength: 32,
             placeholder: "Enter some text...",
-
             invalid: (value: string) => {
               if (value === "never") return "The value 'never' is not allowed";
               return null;
@@ -132,6 +135,32 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
       ),
+      GridCellMultiEditor(
+        {
+          colId: "plan2",
+          field: "plan",
+          headerName: "Multi-editor",
+          maxWidth: 140,
+        },
+        (_params: ICellEditorParams) =>
+          _params.rowIndex == 0
+            ? Editor({
+                multiEdit: true,
+                editor: GridFormTextArea,
+                editorParams: {
+                  required: true,
+                  maxLength: 32,
+                  placeholder: "Enter some text...",
+                },
+              })
+            : Editor({
+                multiEdit: false,
+                editor: GridFormDropDown,
+                editorParams: {
+                  options: [{ label: "One", value: 1 }],
+                },
+              }),
+      ),
       GridPopoverMenu(
         {
           headerName: "Delete menu",
@@ -160,7 +189,17 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
 
     const lastRow = rowData[rowData.length - 1];
     await selectRowsWithFlashDiff(async () => {
-      setRowData([...rowData, { id: lastRow.id + 1, name: "?", nameType: "?", numba: "?", plan: "", distance: null }]);
+      setRowData([
+        ...rowData,
+        {
+          id: lastRow.id + 1,
+          name: "?",
+          nameType: "?",
+          numba: "?",
+          plan: "",
+          distance: null,
+        },
+      ]);
     });
   }, [rowData, selectRowsWithFlashDiff]);
 

package/src/styles/GridTheme.scss

@@ -74,10 +74,6 @@
     align-items: center;
   }
 
-  .ag-cell.ag-cell-inline-editing:not(.ag-cell-auto-height) {
-    bottom: 0;
-  }
-
   .ag-cell-wrap-text {
     word-break: break-word;
   }