@linzjs/step-ag-grid 15.0.2 → 15.1.1

package/README.md

@@ -16,6 +16,7 @@
   - Bearing/Bearing Correction
   - Popover message
   - Custom form
+  - Context menu
 
 _Please note this requires React >=17, ag-grid-community >=27, and sass._
 
@@ -55,6 +56,7 @@ import {
   GridCell,
   GridCellFiller,
   GridContextProvider,
+  GridContextMenuComponentProps,
   GridPopoverEditDropDown,
   GridPopoverMessage,
   GridUpdatingContextProvider,
@@ -124,6 +126,29 @@ const GridDemo = () => {
     [],
   );
 
+  const ContextMenu = ({ selectedRows, colDef, close }: GridContextMenuComponentProps<ITestRow>): ReactElement => {
+    const onClick = useCallback(() => {
+      selectedRows.forEach((row) => {
+        switch (colDef.field) {
+          case "name":
+            row.name = "";
+            break;
+          case "distance":
+            row.distance = null;
+            break;
+        }
+      });
+      close();
+    }, [close, colDef.field, selectedRows]);
+
+    return (
+      <>
+        <button onClick={onClick}>Button - Clear cell</button>
+        <MenuItem onClick={onClick}>Menu Item - Clear cell</MenuItem>
+      </>
+    );
+  };
+  
   const rowData: ITestRow[] = useMemo(
     () => [
       { id: 1000, name: "Tom", position: "Tester" },
@@ -159,6 +184,8 @@ const GridDemo = () => {
           <Grid selectable={true}
                 columnDefs={columnDefs}
                 rowData={rowData}
+                contextMenu={contextMenu}
+                contextMenuSelectRow={false}
                 onContentSize={({ width }) => setPanelSize(width)} />
         </GridWrapper>
       </GridContextProvider>

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ColDef } from "ag-grid-community";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
+import { GridContextMenuComponent } from "./gridHook";
 export interface GridBaseRow {
     id: string | number;
 }
@@ -54,8 +55,16 @@ export interface GridProps {
      * Once the last cell to edit closes this callback is called.
      */
     onCellEditingComplete?: () => void;
+    /**
+     * Context menu definition if required.
+     */
+    contextMenu?: GridContextMenuComponent<any>;
+    /**
+     * Whether to select row on context menu.
+     */
+    contextMenuSelectRow?: boolean;
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, ...params }: GridProps) => JSX.Element;
+export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, ...params }: GridProps) => JSX.Element;

package/dist/src/components/gridHook/index.d.ts

@@ -0,0 +1 @@
+export * from "./useGridContextMenu";

package/dist/src/components/gridHook/useGridContextMenu.d.ts

@@ -0,0 +1,19 @@
+import { ColDef } from "ag-grid-community";
+import { CellContextMenuEvent } from "ag-grid-community/dist/lib/events";
+import { ReactElement } from "react";
+import { GridBaseRow } from "../Grid";
+export interface GridContextMenuComponentProps<RowType extends GridBaseRow> {
+    selectedRows: RowType[];
+    clickedRow: RowType;
+    colDef: ColDef;
+    close: () => void;
+}
+export type GridContextMenuComponent<RowType extends GridBaseRow> = (props: GridContextMenuComponentProps<RowType>) => ReactElement | null;
+export declare const useGridContextMenu: <RowType extends GridBaseRow>({ contextMenuSelectRow, contextMenu: ContextMenu, }: {
+    contextMenuSelectRow: boolean;
+    contextMenu?: GridContextMenuComponent<RowType> | undefined;
+}) => {
+    openMenu: (e: PointerEvent | null | undefined) => void;
+    cellContextMenu: (event: CellContextMenuEvent) => void;
+    component: JSX.Element | null;
+};

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

@@ -7,6 +7,7 @@ export * from "./GridCellMultiSelectClassRules";
 export * from "./gridFilter";
 export * from "./gridForm";
 export * from "./gridHeader";
+export * from "./gridHook";
 export * from "./GridIcon";
 export * from "./GridLoadableCell";
 export * from "./GridNoRowsOverlay";

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

@@ -18,6 +18,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
     getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
     setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
     prePopupOps: () => void;
+    postPopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;
     editingCells: () => boolean;
     getSelectedRows: <T extends GridBaseRow>() => T[];

package/dist/src/utils/testQuick.d.ts

@@ -53,7 +53,7 @@ export declare const getAllQuick: <T extends HTMLElement>(filter: IQueryQuick, c
  */
 export declare const getQuick: (filter: IQueryQuick, container?: HTMLElement) => HTMLElement;
 /**
- * Find by filter.  Waits up to 4 seconds to find filter.
+ * Find by filter.  Waits up to 5 seconds to find filter.
  *
  * @param filter Filter
  * @param container Optional container to look in

package/dist/src/utils/testUtil.d.ts

@@ -1,3 +1,8 @@
+/**
+ * allow external userEvent to be used
+ * @param customisedUserEvent
+ */
+export declare const setUpUserEvent: (customisedUserEvent: any) => void;
 export declare const countRows: (within?: HTMLElement) => Promise<number>;
 export declare const findRow: (rowId: number | string, within?: HTMLElement) => Promise<HTMLDivElement>;
 export declare const queryRow: (rowId: number | string, within?: HTMLElement) => Promise<HTMLDivElement | null>;