@linzjs/step-ag-grid 29.12.0 → 29.13.0

package/src/components/gridPopoverEdit/GridPopoverTextArea.ts

@@ -1,7 +1,7 @@
-import { GridBaseRow } from '../Grid';
-import { ColDefT, GenericCellEditorProps, GridCell } from '../GridCell';
+import { GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormTextArea, GridFormTextAreaProps } from '../gridForm/GridFormTextArea';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
 
 export const GridPopoverTextArea = <TData extends GridBaseRow, TValue = any>(
   colDef: GenericCellColDef<TData, TValue>,

package/src/components/gridPopoverEdit/GridPopoverTextInput.ts

@@ -1,7 +1,7 @@
-import { GridBaseRow } from '../Grid';
-import { ColDefT, GenericCellEditorProps, GridCell } from '../GridCell';
+import { GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormTextInput, GridFormTextInputProps } from '../gridForm/GridFormTextInput';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
 
 export const GridPopoverTextInput = <TData extends GridBaseRow, TValue = any>(
   colDef: GenericCellColDef<TData, TValue>,

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -2,8 +2,7 @@ import { ICellRendererParams } from 'ag-grid-community';
 import { SuppressKeyboardEventParams } from 'ag-grid-community';
 import { ReactElement } from 'react';
 
-import { GridBaseRow } from '../Grid';
-import { ColDefT } from '../GridCell';
+import { ColDefT, GridBaseRow } from '../types';
 
 export interface GenericCellColDef<TData extends GridBaseRow, TValue = any> extends ColDefT<TData, TValue> {
   exportable?: boolean;

package/src/components/index.ts

@@ -15,3 +15,4 @@ export * from './GridPopoverHook';
 export * from './gridRender';
 export * from './GridWrapper';
 export * from './PostSortRowsHook';
+export * from './types';

package/src/components/types.ts

@@ -0,0 +1,32 @@
+import { ColDef, EditableCallback, ICellRendererParams, ValueFormatterFunc, ValueGetterFunc } from 'ag-grid-community';
+import { ReactElement } from 'react';
+
+export interface GridBaseRow {
+  id: string | number;
+}
+
+export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
+  movedRow: TData;
+  targetRow: TData;
+  direction: -1 | 1;
+}
+
+// This is so that typescript retains the row type to pass to the GridCells
+export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
+  editable?: boolean | EditableCallback<TData, ValueType>;
+  valueGetter?: string | ValueGetterFunc<TData, ValueType>;
+  valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
+  cellRenderer?:
+    | ((props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
+    | string;
+  cellRendererParams?: {
+    rightHoverElement?: ReactElement;
+    originalCellRenderer?: any;
+    editAction?: (selectedRows: TData[]) => void;
+    shortcutKeys?: Record<string, () => void>;
+    error?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    warning?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    info?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+  };
+  editor?: (editorProps: any) => ReactElement;
+}

package/src/contexts/GridContext.tsx

@@ -2,7 +2,7 @@ import { ColDef, GridApi, IRowNode, ISizeColumnsToFitParams } from 'ag-grid-comm
 import { CsvExportParams } from 'ag-grid-community';
 import { createContext, useContext } from 'react';
 
-import { ColDefT, GridBaseRow } from '../components';
+import { ColDefT, GridBaseRow } from '../components/types';
 
 export type GridFilterExternal<TData extends GridBaseRow> = (data: TData, rowNode: IRowNode) => boolean;
 
@@ -14,8 +14,8 @@ export interface AutoSizeColumnsProps {
 
 export type AutoSizeColumnsResult = { width: number } | null;
 
-export interface StartCellEditingProps {
-  rowId: number;
+export interface StartCellEditingProps<TData extends GridBaseRow> {
+  rowId: TData['id'];
   colId: string;
 }
 
@@ -33,21 +33,21 @@ export interface GridContextType<TData extends GridBaseRow> {
   editingCells: () => boolean;
   getSelectedRows: <T extends GridBaseRow>() => T[];
   getFilteredSelectedRows: <T extends GridBaseRow>() => T[];
-  getSelectedRowIds: () => number[];
-  getFilteredSelectedRowIds: () => number[];
+  getSelectedRowIds: () => TData['id'][];
+  getFilteredSelectedRowIds: () => TData['id'][];
   selectRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
   selectRowsWithFlashDiff: (updateFn: () => Promise<any>) => Promise<void>;
-  selectRowsById: (rowIds?: number[]) => void;
-  selectRowsByIdWithFlash: (rowIds?: number[]) => void;
-  flashRows: (rowIds?: number[]) => void;
+  selectRowsById: (rowIds?: TData['id'][]) => void;
+  selectRowsByIdWithFlash: (rowIds?: TData['id'][]) => void;
+  flashRows: (rowIds?: TData['id'][]) => void;
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
-  focusByRowById: (rowId: number, ifNoCellFocused?: boolean) => void;
-  ensureRowVisible: (id: number | string) => boolean;
+  focusByRowById: (rowId: TData['id'], ifNoCellFocused?: boolean) => void;
+  ensureRowVisible: (id: TData['id'] | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
-  getFirstRowId: () => number;
+  getFirstRowId: () => TData['id'];
   autoSizeColumns: (props?: AutoSizeColumnsProps) => Promise<AutoSizeColumnsResult>;
   sizeColumnsToFit: (paramsOrGridWidth?: ISizeColumnsToFitParams) => void;
-  startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
+  startCellEditing: ({ rowId, colId }: StartCellEditingProps<TData>) => Promise<void>;
   // Restores the previous focus after cell editing
   resetFocusedCellAfterCellEditing: () => void;
   updatingCells: (
@@ -72,147 +72,54 @@ export interface GridContextType<TData extends GridBaseRow> {
   showNoRowsOverlay: () => void;
 }
 
+const NoContext = <T,>(): T => {
+  console.error('Missing GridContextProvider');
+  return null as T;
+};
+
 export const GridContext = createContext<GridContextType<any>>({
   gridReady: false,
   gridRenderState: () => null,
-  getColDef: () => {
-    console.error('no context provider for getColDef');
-    return undefined;
-  },
-  getColumns: () => {
-    console.error('no context provider for getColumns');
-    return [];
-  },
-  getColumnIds: () => {
-    console.error('no context provider for getColumnIds');
-    return [];
-  },
+  getColDef: NoContext,
+  getColumns: NoContext,
+  getColumnIds: NoContext,
   invisibleColumnIds: undefined,
-  setInvisibleColumnIds: () => {
-    console.error('no context provider for setInvisibleColumnIds');
-  },
-  prePopupOps: () => {
-    console.error('no context provider for prePopupOps');
-  },
+  setInvisibleColumnIds: NoContext,
+  prePopupOps: NoContext,
   externallySelectedItemsAreInSync: false,
-  setApis: () => {
-    console.error('no context provider for setApis');
-  },
-  setQuickFilter: () => {
-    console.error('no context provider for setQuickFilter');
-  },
-  selectRowsById: () => {
-    console.error('no context provider for selectRows');
-  },
-  getSelectedRows: <T,>(): T[] => {
-    console.error('no context provider for getSelectedRows');
-    return [];
-  },
-  getFilteredSelectedRows: <T,>(): T[] => {
-    console.error('no context provider for getFilteredSelectedRows');
-    return [];
-  },
-  getSelectedRowIds: () => {
-    console.error('no context provider for getSelectedRowIds');
-    return [];
-  },
-  getFilteredSelectedRowIds: () => {
-    console.error('no context provider for getFilteredSelectedRowIds');
-    return [];
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  selectRowsDiff: async () => {
-    console.error('no context provider for selectRowsDiff');
-  },
-  selectRowsByIdWithFlash: () => {
-    console.error('no context provider for selectRowsWithFlash');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  selectRowsWithFlashDiff: async () => {
-    console.error('no context provider for selectRowsWithFlashDiff');
-  },
-  flashRows: () => {
-    console.error('no context provider for flashRows');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  flashRowsDiff: async () => {
-    console.error('no context provider for flashRows');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await,@typescript-eslint/no-misused-promises
-  focusByRowById: async () => {
-    console.error('no context provider for focusByRowById');
-  },
-  ensureRowVisible: () => {
-    console.error('no context provider for ensureRowVisible');
-    return true;
-  },
-  ensureSelectedRowIsVisible: () => {
-    console.error('no context provider for ensureSelectedRowIsVisible');
-  },
-  getFirstRowId: () => {
-    console.error('no context provider for getFirstRowId');
-    return -1;
-  },
-  autoSizeColumns: async () => {
-    console.error('no context provider for autoSizeColumns');
-    return Promise.resolve(null);
-  },
-  sizeColumnsToFit: () => {
-    console.error('no context provider for autoSizeAllColumns');
-    return null;
-  },
-  editingCells: () => {
-    console.error('no context provider for editingCells');
-    return false;
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  startCellEditing: async () => {
-    console.error('no context provider for startCellEditing');
-  },
-  resetFocusedCellAfterCellEditing: () => {
-    console.error('no context provider for resetFocusedCellAfterCellEditing');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  updatingCells: async () => {
-    console.error('no context provider for modifyUpdating');
-    return false;
-  },
-  redrawRows: () => {
-    console.error('no context provider for redrawRows');
-  },
-  setExternallySelectedItemsAreInSync: () => {
-    console.error('no context provider for setExternallySelectedItemsAreInSync');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  waitForExternallySelectedItemsToBeInSync: async () => {
-    console.error('no context provider for waitForExternallySelectedItemsToBeInSync');
-  },
-  addExternalFilter: () => {
-    console.error('no context provider for addExternalFilter');
-  },
-  removeExternalFilter: () => {
-    console.error('no context provider for removeExternalFilter');
-  },
-  isExternalFilterPresent: () => {
-    console.error('no context provider for isExternalFilterPresent');
-    return false;
-  },
-  doesExternalFilterPass: () => {
-    console.error('no context provider for doesExternalFilterPass');
-    return true;
-  },
-  downloadCsv: () => {
-    console.error('no context provider for downloadCsv');
-  },
-  onBulkEditingComplete: () => {
-    console.error('no context provider for onBulkEditingComplete');
-  },
-  setOnBulkEditingComplete: () => {
-    console.error('no context provider for setOnBulkEditingComplete');
-  },
-  showNoRowsOverlay: () => {
-    console.error('no context provider for showLoadingOverlay');
-  },
+  setApis: NoContext,
+  setQuickFilter: NoContext,
+  selectRowsById: NoContext,
+  getSelectedRows: NoContext,
+  getFilteredSelectedRows: NoContext,
+  getSelectedRowIds: NoContext,
+  getFilteredSelectedRowIds: NoContext,
+  selectRowsDiff: NoContext,
+  selectRowsByIdWithFlash: NoContext,
+  selectRowsWithFlashDiff: NoContext,
+  flashRows: NoContext,
+  flashRowsDiff: NoContext,
+  focusByRowById: NoContext,
+  ensureRowVisible: NoContext,
+  ensureSelectedRowIsVisible: NoContext,
+  getFirstRowId: NoContext,
+  autoSizeColumns: NoContext,
+  sizeColumnsToFit: NoContext,
+  editingCells: NoContext,
+  startCellEditing: NoContext,
+  resetFocusedCellAfterCellEditing: NoContext,
+  updatingCells: NoContext,
+  redrawRows: NoContext,
+  setExternallySelectedItemsAreInSync: NoContext,
+  waitForExternallySelectedItemsToBeInSync: NoContext,
+  addExternalFilter: NoContext,
+  removeExternalFilter: NoContext,
+  isExternalFilterPresent: NoContext,
+  doesExternalFilterPass: NoContext,
+  downloadCsv: NoContext,
+  onBulkEditingComplete: NoContext,
+  setOnBulkEditingComplete: NoContext,
+  showNoRowsOverlay: NoContext,
 });
 
 export const useGridContext = <TData extends GridBaseRow>() => useContext<GridContextType<TData>>(GridContext);

package/src/contexts/GridContextProvider.tsx

@@ -38,7 +38,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
   const hasExternallySelectedItemsRef = useRef(false);
-  const idsBeforeUpdate = useRef<number[]>([]);
+  const idsBeforeUpdate = useRef<TData['id'][]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
@@ -169,7 +169,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Get all row id's in grid.
    */
   const _getAllRowIds = useCallback(() => {
-    const result: number[] = [];
+    const result: TData['id'][] = [];
     return gridApiOp(
       (gridApi) => {
         gridApi.forEachNode((node) => result.push(node.data.id));
@@ -205,7 +205,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * @param rowIds Row ids to get from grid.
    */
   const _rowIdsToNodes = useCallback(
-    (rowIds: number[]): IRowNode[] => {
+    (rowIds: TData['id'][]): IRowNode[] => {
       return gridApiOp(
         (gridApi) => compact(rowIds.map((rowId) => gridApi.getRowNode('' + rowId))),
         () => [] as RowNode[],
@@ -248,7 +248,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         ifNoCellFocused = false,
         retryCount = 15,
       }: {
-        rowIds: number[] | undefined;
+        rowIds: TData['id'][] | undefined;
         select: boolean;
         flash: boolean;
         ifNoCellFocused?: boolean;
@@ -333,17 +333,17 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   );
 
   const selectRowsById = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: false }),
+    (rowIds?: TData['id'][]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: false }),
     [_selectRowsWithOptionalFlash],
   );
 
   const selectRowsByIdWithFlash = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: true }),
+    (rowIds?: TData['id'][]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
   const flashRows = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: false, flash: true }),
+    (rowIds?: TData['id'][]) => _selectRowsWithOptionalFlash({ rowIds, select: false, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
@@ -375,7 +375,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   );
 
   const focusByRowById = useCallback(
-    (rowId: number, ifNoCellFocused?: boolean) =>
+    (rowId: TData['id'], ifNoCellFocused?: boolean) =>
       _selectRowsWithOptionalFlash({ rowIds: [rowId], select: false, flash: false, ifNoCellFocused }),
     [_selectRowsWithOptionalFlash],
   );
@@ -398,12 +398,12 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   }, [gridApiOp]);
 
   const getSelectedRowIds = useCallback(
-    (): number[] => getSelectedRows().map((row) => (row as any).id as number),
+    (): TData['id'][] => getSelectedRows().map((row) => (row as any).id as number),
     [getSelectedRows],
   );
 
   const getFilteredSelectedRowIds = useCallback(
-    (): number[] => getFilteredSelectedRows().map((row) => (row as any).id as number),
+    (): TData['id'][] => getFilteredSelectedRows().map((row) => (row as any).id as number),
     [getFilteredSelectedRows],
   );
 
@@ -548,7 +548,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
 
   const startCellEditingInProgressRef = useRef(false);
   const startCellEditing = useCallback(
-    async ({ rowId, colId }: { rowId: number; colId: string }) => {
+    async ({ rowId, colId }: { rowId: TData['id']; colId: string }) => {
       if (!gridApi || startCellEditingInProgressRef.current) {
         return;
       }

package/src/contexts/GridPopoverContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, RefObject, useContext } from 'react';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 
 export interface GridPopoverContextType<TData extends GridBaseRow> {
   anchorRef: RefObject<Element>;

package/src/contexts/GridPopoverContextProvider.tsx

@@ -2,7 +2,7 @@ import { ICellEditorParams } from 'ag-grid-community';
 import { sortBy } from 'lodash-es';
 import { PropsWithChildren, RefObject, useCallback, useContext, useMemo, useRef, useState } from 'react';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 import { GridContext } from './GridContext';
 import { GridPopoverContext } from './GridPopoverContext';
 

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

@@ -1,8 +1,8 @@
 import { forwardRef, LegacyRef, ReactNode, useMemo } from 'react';
 
-import { useBEM } from '../hooks';
+import { useBEM } from '../hooks/useBEM';
 import { BaseProps, MenuButtonModifiers } from '../types';
-import { menuButtonClass } from '../utils';
+import { menuButtonClass } from '../utils/constants';
 
 export interface MenuButtonProps extends BaseProps<MenuButtonModifiers> {
   disabled?: boolean;

package/src/react-menu3/hooks/useItemState.ts

@@ -2,7 +2,7 @@ import { FocusEvent, MutableRefObject, useContext, useEffect, useRef } from 'rea
 
 import { ItemSettingsContext } from '../contexts/ItemSettingsContext';
 import { MenuListItemContext } from '../contexts/MenuListItemContext';
-import { HoverActionTypes } from '../utils';
+import { HoverActionTypes } from '../utils/constants';
 import { useItemEffect } from './useItemEffect';
 
 // This hook includes some common stateful logic in MenuItem and FocusableItem

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

@@ -66,7 +66,7 @@ interface ICode {
 }
 
 const GridEditDropDownTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
-  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [externalSelectedIds, setExternalSelectedIds] = useState<number[]>([]);
 
   const optionsFn = useCallback(async (selectedRows: ITestRow[], filter?: string) => {
     // eslint-disable-next-line no-console
@@ -312,8 +312,8 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridPro
       </GridFilters>
       <Grid
         {...props}
-        externalSelectedItems={externalSelectedItems}
-        setExternalSelectedItems={setExternalSelectedItems}
+        externalSelectedIds={externalSelectedIds}
+        setExternalSelectedIds={setExternalSelectedIds}
         columnDefs={columnDefs}
         rowData={rowData}
         domLayout={'autoHeight'}

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -71,7 +71,7 @@ interface ITestRow {
 }
 
 const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
-  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [externalSelectedIds, setExternalSelectedIds] = useState<number[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
@@ -248,8 +248,8 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<I
         enableClickSelection={true}
         enableSelectionWithoutKeys={true}
         autoSelectFirstRow={true}
-        externalSelectedItems={externalSelectedItems}
-        setExternalSelectedItems={setExternalSelectedItems}
+        externalSelectedIds={externalSelectedIds}
+        setExternalSelectedIds={setExternalSelectedIds}
         columnDefs={columnDefs}
         rowData={rowData}
       />

package/src/utils/textValidator.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 import { TextInputValidator, TextInputValidatorProps } from './textValidator';
 
 describe('TextInputValidator', () => {

package/src/utils/textValidator.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 import { isFloat, stringByteLengthIsInvalid } from './util';
 
 export interface TextInputValidatorProps<TData extends GridBaseRow> {