@linzjs/step-ag-grid 14.1.2 → 14.2.0

package/README.md

@@ -162,6 +162,15 @@ const GridDemo = () => {
 };
 ```
 
+## Bulk editing
+If you are editing a cell and tab out of the cell, the grid will edit the next editable cell.
+
+At this point you can send the change to the back-end immediately and then wait for an update response
+_OR_
+you could cache the required change, update then cell locally, and then wait for the callback
+```<Grid onCellEditingComplete={fn}/>``` which will get invoked when the grid cannot find any
+more editable cells on the grid row, which will speed up editing.
+
 ## Grid sizing
 Grid uses ```<Grid sizeColumns="auto"/>``` which sizes by cell content by default.
 To ignore cell content use "fit", to disable use "none".

package/dist/src/components/Grid.d.ts

@@ -44,6 +44,11 @@ export interface GridProps {
      * If you want to stretch to container width if width is greater than the container add a flex column.
      */
     sizeColumns?: "fit" | "auto" | "auto-skip-headers" | "none";
+    /**
+     * When pressing tab whilst editing the grid will select and edit the next cell if available.
+     * Once the last cell to edit closes this callback is called.
+     */
+    onCellEditingComplete?: () => void;
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.

package/dist/src/components/GridCell.d.ts

@@ -17,6 +17,7 @@ export declare const suppressCellKeyboardEvents: (e: SuppressKeyboardEventParams
 export declare const generateFilterGetter: <RowType extends GridBaseRow>(field: string | undefined, filterValueGetter: string | ((params: RowValueGetterParams<RowType>) => string) | undefined, valueFormatter: string | ((params: RowValueFormatterParams<RowType>) => string) | undefined) => string | ((params: RowValueGetterParams<RowType>) => string) | undefined;
 export declare const GridCell: <RowType extends GridBaseRow, Props extends CellEditorCommon>(props: GenericCellColDef<RowType>, custom?: {
     multiEdit?: boolean | undefined;
+    preventAutoEdit?: boolean | undefined;
     editor?: ((editorProps: Props) => JSX.Element) | undefined;
     editorParams?: Props | undefined;
 } | undefined) => ColDefT<RowType>;

package/dist/src/contexts/GridContext.d.ts

@@ -3,6 +3,14 @@ import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ColDefT, GridBaseRow } from "../components";
 export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
+export interface AutoSizeColumnsProps {
+    skipHeader?: boolean;
+    colIds?: Set<string> | string[];
+    userSizedColIds?: Set<string>;
+}
+export type AutoSizeColumnsResult = {
+    width: number;
+} | null;
 export interface GridContextType<RowType extends GridBaseRow> {
     gridReady: boolean;
     setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
@@ -23,12 +31,9 @@ export interface GridContextType<RowType extends GridBaseRow> {
     ensureRowVisible: (id: number | string) => boolean;
     ensureSelectedRowIsVisible: () => void;
     getFirstRowId: () => number;
-    autoSizeAllColumns: (props?: {
-        skipHeader?: boolean;
-    }) => {
-        width: number;
-    } | null;
+    autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
     sizeColumnsToFit: () => void;
+    cancelEdit: () => void;
     stopEditing: () => void;
     updatingCells: (props: {
         selectedRows: GridBaseRow[];
@@ -46,6 +51,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
     invisibleColumnIds: string[];
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;
+    setOnCellEditingComplete: (callback: (() => void) | undefined) => void;
 }
 export declare const GridContext: import("react").Context<GridContextType<any>>;
 export declare const useGridContext: <RowType extends GridBaseRow>() => GridContextType<RowType>;

package/dist/src/contexts/GridUpdatingContext.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export type GridUpdatingContextType = {
     checkUpdating: (fields: string | string[], id: number | string) => boolean;
+    isUpdating: () => boolean;
     modifyUpdating: (fields: string | string[], ids: (number | string)[], fn: () => void | Promise<void>) => Promise<void>;
     updatedDep: number;
 };