@linzjs/step-ag-grid 29.11.4 → 29.13.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.11.4",
+  "version": "29.13.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -38,6 +38,7 @@
     "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
     "matcher": "^5.0.0",
+    "natsort": "^2.0.3",
     "react-transition-state": "^2.3.1",
     "usehooks-ts": "^3.1.1",
     "uuid": "^13.0.0"
@@ -50,7 +51,9 @@
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
     "test": "cross-env NODE_OPTIONS='--no-experimental-global-navigator' vitest run",
     "test:watch": "vitest --watch",
-    "lint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
+    "lint": "run-s lint:eslint lint:circulardeps",
+    "lint:eslint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
+    "lint:circulardeps": "npx madge --circular --extensions ts,tsx ./src",
     "lint:fix": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

package/src/components/Grid.tsx

@@ -23,6 +23,7 @@ import {
   RowDragMoveEvent,
   SelectionChangedEvent,
   SelectionColumnDef,
+  ValueFormatterParams,
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import clsx from 'clsx';
@@ -32,25 +33,16 @@ import { useInterval } from 'usehooks-ts';
 
 import { AutoSizeColumnsResult, StartCellEditingProps, useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
-import { fnOrVar, isNotEmpty } from '../utils/util';
+import { compareNaturalInsensitive, fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
 import { GridHeaderSelect } from './gridHeader';
 import { GridContextMenuComponent, useGridContextMenu } from './gridHook';
 import { GridNoRowsOverlay } from './GridNoRowsOverlay';
 import { usePostSortRowsHook } from './PostSortRowsHook';
+import { GridBaseRow, GridOnRowDragEndProps } from './types';
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-export interface GridBaseRow {
-  id: string | number;
-}
-
-export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
-  movedRow: TData;
-  targetRow: TData;
-  direction: -1 | 1;
-}
-
 export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   readOnly?: boolean; // set all editables to false when read only, make all styles black, otherwise style is gray for not editable
   defaultPostSort?: boolean; // Retain sort order after edit, Defaults to true.
@@ -61,8 +53,10 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   theme?: string; // should have prefix ag-theme-
   ['data-testid']?: string;
   domLayout?: GridOptions['domLayout'];
-  externalSelectedItems?: any[];
-  setExternalSelectedItems?: (items: any[]) => void;
+  externalSelectedItems?: TData[];
+  externalSelectedIds?: TData['id'][];
+  setExternalSelectedItems?: (items: TData[]) => void;
+  setExternalSelectedIds?: (ids: TData['id'][]) => void;
   defaultColDef?: GridOptions['defaultColDef'];
   columnDefs: ColDef<TData>[] | ColGroupDef<TData>[];
   rowData: GridOptions['rowData'];
@@ -112,7 +106,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   /**
    * Context menu definition if required.
    */
-  contextMenu?: GridContextMenuComponent<any>;
+  contextMenu?: GridContextMenuComponent<TData>;
 
   /**
    * Whether to select row on context menu.
@@ -148,9 +142,14 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   rowData,
   rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   selectable,
+  autoSelectFirstRow,
   onCellFocused: paramsOnCellFocused,
   maxInitialWidth,
   suppressReadOnlyStyle = false,
+  externalSelectedItems,
+  setExternalSelectedItems,
+  externalSelectedIds,
+  setExternalSelectedIds,
   ...params
 }: GridProps<TData>): ReactElement => {
   const {
@@ -177,7 +176,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   // CellEditingStop event happens too much for one edit
   const startedEditRef = useRef(false);
   const startCellEditing = useCallback(
-    (props: StartCellEditingProps) => {
+    (props: StartCellEditingProps<TData>) => {
       startedEditRef.current = true;
       return propStartCellEditing(props);
     },
@@ -187,7 +186,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const { updatedDep, anyUpdating, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
-  const lastSelectedIds = useRef<number[]>([]);
+  const lastSelectedIds = useRef<TData['id'][] | undefined>();
 
   const [staleGrid, setStaleGrid] = useState(false);
   const [autoSized, setAutoSized] = useState(false);
@@ -325,11 +324,13 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const hasSelectedFirstItem = useRef(false);
   useEffect(() => {
-    if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync) return;
+    if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync) {
+      return;
+    }
     hasSelectedFirstItem.current = true;
-    if (isNotEmpty(rowData) && isEmpty(params.externalSelectedItems)) {
+    if (isNotEmpty(rowData) && isEmpty(externalSelectedItems)) {
       const firstRowId = getFirstRowId();
-      if (params.autoSelectFirstRow) {
+      if (autoSelectFirstRow && selectable) {
         selectRowsById([firstRowId]);
       } else {
         focusByRowById(firstRowId, true);
@@ -339,11 +340,12 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     externallySelectedItemsAreInSync,
     focusByRowById,
     gridReady,
-    params.externalSelectedItems,
-    params.autoSelectFirstRow,
+    externalSelectedItems,
+    autoSelectFirstRow,
     rowData,
     selectRowsById,
     getFirstRowId,
+    selectable,
   ]);
 
   /**
@@ -351,24 +353,43 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const synchroniseExternalStateToGridSelection = useCallback(
     ({ api }: SelectionChangedEvent) => {
-      if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
-        setExternallySelectedItemsAreInSync(true);
-        return;
-      }
-
-      const selectedRows = api.getSelectedRows();
-      // We don't want to update selected Items if it hasn't changed to prevent excess renders
-      if (
-        params.externalSelectedItems.length !== selectedRows.length ||
-        isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
-      ) {
-        setExternallySelectedItemsAreInSync(false);
-        params.setExternalSelectedItems([...selectedRows]);
+      if (externalSelectedIds && setExternalSelectedIds) {
+        const selectedRowsIds = api.getSelectedRows().map((row: TData) => row.id);
+
+        // We don't want to update selected Items if it hasn't changed to prevent excess renders
+        if (
+          externalSelectedIds.length !== selectedRowsIds.length ||
+          isNotEmpty(xorBy(selectedRowsIds, externalSelectedIds))
+        ) {
+          setExternallySelectedItemsAreInSync(false);
+          setExternalSelectedIds([...selectedRowsIds]);
+        } else {
+          setExternallySelectedItemsAreInSync(true);
+        }
+      } else if (externalSelectedItems && setExternalSelectedItems) {
+        const selectedRows = api.getSelectedRows();
+
+        // We don't want to update selected Items if it hasn't changed to prevent excess renders
+        if (
+          externalSelectedItems.length !== selectedRows.length ||
+          isNotEmpty(xorBy(selectedRows, externalSelectedItems, (row) => row.id))
+        ) {
+          setExternallySelectedItemsAreInSync(false);
+          setExternalSelectedItems([...selectedRows]);
+        } else {
+          setExternallySelectedItemsAreInSync(true);
+        }
       } else {
         setExternallySelectedItemsAreInSync(true);
       }
     },
-    [params, setExternallySelectedItemsAreInSync],
+    [
+      externalSelectedIds,
+      externalSelectedItems,
+      setExternalSelectedIds,
+      setExternalSelectedItems,
+      setExternallySelectedItemsAreInSync,
+    ],
   );
 
   /**
@@ -377,20 +398,27 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const synchroniseExternallySelectedItemsToGrid = useCallback(() => {
     if (!gridReady) return;
-    if (!params.externalSelectedItems) {
+    if (!externalSelectedItems && !externalSelectedIds) {
       setExternallySelectedItemsAreInSync(true);
       return;
     }
 
-    const selectedIds = params.externalSelectedItems.map((row) => row.id) as number[];
-    const lastNewId = last(difference(selectedIds, lastSelectedIds.current));
+    const selectedIds = externalSelectedIds ?? externalSelectedItems?.map((row) => row.id);
+    const lastNewId = last(difference(selectedIds, lastSelectedIds.current ?? []));
     if (lastNewId != null) {
       ensureRowVisible(lastNewId);
     }
     lastSelectedIds.current = selectedIds;
     selectRowsById(selectedIds);
     setExternallySelectedItemsAreInSync(true);
-  }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
+  }, [
+    gridReady,
+    externalSelectedItems,
+    externalSelectedIds,
+    selectRowsById,
+    setExternallySelectedItemsAreInSync,
+    ensureRowVisible,
+  ]);
 
   /**
    * Combine grid and cell editable into one function
@@ -430,7 +458,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           cellClassRules: {
             ...colDef.cellClassRules,
             'GridCell-readonly': (ccp: CellClassParams<TData>) =>
-              !suppressReadOnlyStyle && !editable(ccp as any as EditableCallbackParams<TData>),
+              !suppressReadOnlyStyle && !editable(ccp as unknown as EditableCallbackParams<TData>),
           },
         };
       }
@@ -445,7 +473,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     return params.columnDefs.map(mapColDef);
   }, [params.columnDefs, mapColDef]);
 
-  const hasExternallySelectedItems = !!params.setExternalSelectedItems;
+  const hasExternallySelectedItems = !!setExternalSelectedItems || !!setExternalSelectedIds;
 
   /**
    * When grid is ready set the apis to the grid context and sync selected items to grid.
@@ -600,18 +628,51 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
     const adjustColDef = (colDef: ColDef<TData>): ColDef<TData> => {
       const flex = colDef.flex ?? (sizeColumns === 'fit' ? 1 : undefined);
-      return {
+      const valueFormatter = colDef.valueFormatter;
+      const sortable = colDef.sortable && params.defaultColDef?.sortable !== false;
+      let comparator = colDef.comparator;
+      if (sortable && !comparator) {
+        comparator = (value1, value2, node1, node2) => {
+          let r;
+          if (typeof valueFormatter === 'function') {
+            r = compareNaturalInsensitive(
+              valueFormatter({
+                data: node1.data,
+                value: value1,
+                node: node1,
+                colDef: adjustedColDef,
+                ...NotAGridValueFormatterCall,
+              } as ValueFormatterParams<TData>),
+              valueFormatter({
+                data: node2.data,
+                value: value2,
+                node: node2,
+                colDef: adjustedColDef,
+                ...NotAGridValueFormatterCall,
+              } as ValueFormatterParams<TData>),
+            );
+          } else {
+            r = compareNaturalInsensitive(value1, value2);
+          }
+          // secondary compare as primary sort column rows are equal
+          return r === 0 ? compareNaturalInsensitive(node1.data?.id, node2.data?.id) : r;
+        };
+      }
+      const adjustedColDef = {
         ...colDef,
         // You cannot pass a width to a flex
         width: !!colDef.flex ? undefined : colDef.width,
-        flexAutoSizeWidth: colDef.width,
+        ...(!!colDef.flex && { flexAutoSizeWidth: colDef.width }),
         // If this is allowed flex columns don't size based on flex
         suppressSizeToFit: true,
         // Auto-sizing flex columns breaks everything
         flex,
         suppressAutoSize: !!flex,
-        sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
+        sortable,
+        comparator,
       } as ColDef<TData> & { flexAutoSizeWidth?: number };
+
+      return adjustedColDef;
     };
 
     return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
@@ -794,14 +855,19 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     [params, clearHighlightRowClasses],
   );
 
-  useEffect(() => {
-    if (params.setExternalSelectedItems && selectable == null) {
-      console.warn(
-        '<Grid/> has setExternalSelectedItems parameter, but is missing selectable parameter,' +
-          'this will cause weird delays in editing.\nIf you need to hide selection column use hideSelectColumn=true',
-      );
-    }
-  }, [params.setExternalSelectedItems, selectable]);
+  useEffect(
+    () => {
+      if ((setExternalSelectedItems || setExternalSelectedIds) && selectable == null) {
+        console.warn(
+          '<Grid/> has setExternalSelectedItems/setExternalSelectedIds parameter, but is missing selectable parameter,' +
+            'this will cause weird delays in editing.\nIf you need to hide selection column use hideSelectColumn=true',
+        );
+      }
+    },
+    // Only needs to run on startup
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectable],
+  );
 
   // This is setting a ref in the GridContext so won't be triggering an update loop
   setOnBulkEditingComplete(params.onBulkEditingComplete);
@@ -863,20 +929,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         }
         return false;
       },
-      onCellClicked:
-        params.enableSelectionWithoutKeys || params.enableClickSelection
-          ? undefined
-          : clickInputWhenContainingCellClicked,
+      onCellClicked: clickInputWhenContainingCellClicked,
     };
-  }, [
-    params.enableClickSelection,
-    params.enableSelectionWithoutKeys,
-    params.hideSelectColumn,
-    params.onRowDragEnd,
-    rowSelection,
-    selectColumnPinned,
-    selectable,
-  ]);
+  }, [params.hideSelectColumn, params.onRowDragEnd, rowSelection, selectColumnPinned, selectable]);
 
   const onGridSizeChanged = useCallback(
     (event: GridSizeChangedEvent<TData>) => {
@@ -969,3 +1024,13 @@ const quickFilterParser = (filterStr: string) => {
   // filter is exact matches exactly groups separated by commas
   return filterStr.split(',').map((str) => str.trim());
 };
+
+/**
+ * Columns to indicate to user when they debug why things are broken in the default comparator if their valueFormatter
+ * is too complicated.
+ */
+const NotAGridValueFormatterCall = {
+  column: 'Default comparator has no access to column, write your own comparator' as unknown,
+  api: 'Default comparator has no access to api, write your own comparator' as unknown,
+  context: 'Default comparator has no access to context, write your own comparator' as unknown,
+};

package/src/components/GridCell.tsx

@@ -1,26 +1,22 @@
 import {
   ColDef,
-  EditableCallback,
   GetQuickFilterTextParams,
   ICellEditorParams,
   ICellRendererParams,
-} from 'ag-grid-community';
-import {
   SuppressKeyboardEventParams,
   ValueFormatterFunc,
   ValueFormatterParams,
-  ValueGetterFunc,
 } from 'ag-grid-community';
 import { forwardRef, ReactElement, useContext } from 'react';
 
 import { GridPopoverContextProvider } from '../contexts/GridPopoverContextProvider';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
 import { fnOrVar } from '../utils/util';
-import { GridBaseRow } from './Grid';
 import { GridCellMultiSelectClassRules } from './GridCellMultiSelectClassRules';
 import { GridIcon } from './GridIcon';
 import { GridLoadableCell } from './GridLoadableCell';
 import { GenericCellColDef, GenericCellRendererParams } from './gridRender';
+import { ColDefT, GridBaseRow } from './types';
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
@@ -74,26 +70,6 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   );
 };
 
-// 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;
-}
-
 export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
   const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
   const exec = shortcutKeys[e.event.key];

package/src/components/GridCellFiller.tsx

@@ -1,6 +1,6 @@
 import { ColDef } from 'ag-grid-community';
 
-import { GridBaseRow } from './Grid';
+import { GridBaseRow } from './types';
 
 export const GridCellFillerColId = 'gridCellFiller';
 

package/src/components/GridCellMultiEditor.tsx

@@ -2,10 +2,10 @@ import { CellEditorSelectorResult } from 'ag-grid-community';
 import { ICellEditorParams } from 'ag-grid-community';
 import { ComponentProps, ReactElement } from 'react';
 
-import { GridBaseRow } from './Grid';
-import { ColDefT, GenericCellEditorComponentWrapper, GridCell } from './GridCell';
+import { GenericCellEditorComponentWrapper, GridCell } from './GridCell';
 import { GridCellMultiSelectClassRules } from './GridCellMultiSelectClassRules';
 import { GenericCellColDef } from './gridRender';
+import { ColDefT, GridBaseRow } from './types';
 
 export const Editor = <FN extends (param: any) => ReactElement>(props: {
   multiEdit: boolean;

package/src/components/GridPopoverHook.tsx

@@ -4,7 +4,7 @@ import { useGridPopoverContext } from '../contexts/GridPopoverContext';
 import { ControlledMenu } from '../react-menu3';
 import { MenuCloseEvent } from '../react-menu3/types';
 import { CloseReason } from '../react-menu3/utils';
-import { GridBaseRow } from './Grid';
+import { GridBaseRow } from './types';
 
 export interface GridPopoverHookProps<TData> {
   className: string | undefined;

package/src/components/gridFilter/GridFilterButtons.tsx

@@ -4,7 +4,7 @@ import clsx, { ClassValue } from 'clsx';
 import { ReactElement, useMemo, useState } from 'react';
 
 import { GridFilterExternal } from '../../contexts/GridContext';
-import { GridBaseRow } from '../Grid';
+import { GridBaseRow } from '../types';
 import { useGridFilter } from './useGridFilter';
 
 export interface GridFilterButtonsOption<TData extends GridBaseRow> {

package/src/components/gridFilter/useGridFilter.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 import { GridFilterExternal, useGridContext } from '../../contexts/GridContext';
-import { GridBaseRow } from '../Grid';
+import { GridBaseRow } from '../types';
 
 export const useGridFilter = <TData extends GridBaseRow>(filter: GridFilterExternal<TData> | undefined) => {
   const { addExternalFilter, removeExternalFilter } = useGridContext<TData>();

package/src/components/gridForm/GridFormDropDown.tsx

@@ -11,9 +11,9 @@ import { ClickEvent } from '../../react-menu3/types';
 import { textMatch } from '../../utils/textMatcher';
 import { isNotEmpty } from '../../utils/util';
 import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 
 export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TOption> {
   // Note the row that was clicked on will be first

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -3,9 +3,9 @@ import { useCallback, useMemo, useState } from 'react';
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { TextInputFormatted } from '../../lui/TextInputFormatted';
 import { bearingNumberParser, bearingStringValidator } from '../../utils/bearing';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 
 export interface GridFormEditBearingProps<TData extends GridBaseRow> extends CellEditorCommon {
   formatValue?: (value: any) => string;

package/src/components/gridForm/GridFormMessage.tsx

@@ -3,9 +3,9 @@ import { ReactElement, useEffect, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 
 export interface GridFormMessageProps<TData extends GridBaseRow> extends CellEditorCommon {
   message: (selectedRows: TData[]) => Promise<string | ReactElement> | string | ReactElement;

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -21,10 +21,10 @@ import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from '../../react-me
 import { ClickEvent } from '../../react-menu3/types';
 import { textMatch } from '../../utils/textMatcher';
 import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { GridIcon } from '../GridIcon';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 import { MenuSeparatorString } from './GridFormDropDown';
 
 type HeaderGroupType = Record<string, MultiSelectOption[]> | undefined;

package/src/components/gridForm/GridFormMultiSelectGrid.tsx

@@ -5,10 +5,10 @@ import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { MenuItem } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { GridIcon } from '../GridIcon';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 
 export interface MultiSelectGridOption {
   value: any;

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -6,9 +6,9 @@ import { GridSubComponentContext } from '../../contexts/GridSubComponentContext'
 import { FocusableItem, MenuDivider, MenuItem, SubMenu } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
 import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 
 export interface GridFormPopoverMenuProps<TData extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: TData[]) => Promise<MenuOption<TData>[]> | MenuOption<TData>[];

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -4,8 +4,8 @@ import { ReactElement, useCallback, useContext, useEffect } from 'react';
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { TextAreaInput } from '../../lui/TextAreaInput';
 import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
+import { GridBaseRow } from '../types';
 
 export interface GridSubComponentTextAreaProps<TData extends GridBaseRow>
   extends TextInputValidatorProps<TData>,

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -3,8 +3,8 @@ import { ReactElement, useCallback, useContext, useEffect } from 'react';
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { TextInputFormatted } from '../../lui/TextInputFormatted';
 import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
+import { GridBaseRow } from '../types';
 
 export interface GridFormSubComponentTextInputProps<TData extends GridBaseRow>
   extends TextInputValidatorProps<TData>,

package/src/components/gridForm/GridFormTextArea.tsx

@@ -3,9 +3,9 @@ import { ReactElement, useCallback, useMemo, useState } from 'react';
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { TextAreaInput } from '../../lui/TextAreaInput';
 import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 
 export interface GridFormTextAreaProps<TData extends GridBaseRow>
   extends TextInputValidatorProps<TData>,

package/src/components/gridForm/GridFormTextInput.tsx

@@ -3,9 +3,9 @@ import { useCallback, useMemo, useState } from 'react';
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { TextInputFormatted } from '../../lui/TextInputFormatted';
 import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
-import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
 
 export interface GridFormTextInputProps<TData extends GridBaseRow>
   extends TextInputValidatorProps<TData>,

package/src/components/gridHook/useGridContextMenu.tsx

@@ -4,7 +4,7 @@ import { ReactElement, useCallback, useContext, useRef, useState } from 'react';
 
 import { GridContext } from '../../contexts/GridContext';
 import { ControlledMenu } from '../../react-menu3';
-import { GridBaseRow } from '../Grid';
+import { GridBaseRow } from '../types';
 
 export interface GridContextMenuComponentProps<TData extends GridBaseRow> {
   selectedRows: TData[];

package/src/components/gridPopoverEdit/GridButton.tsx

@@ -2,9 +2,9 @@ import { LuiButton, LuiIcon } from '@linzjs/lui';
 import { CellFocusedEvent, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
 import { useEffect, useRef } from 'react';
 
-import { GridBaseRow } from '../Grid';
-import { ColDefT, GridCell } from '../GridCell';
+import { GridCell } from '../GridCell';
 import { GenericCellColDef } from '../gridRender';
+import { ColDefT, GridBaseRow } from '../types';
 
 const ButtonCellRenderer = <TData extends GridBaseRow>(props: ICellRendererParams<TData>) => {
   const { data, node, column, colDef, api } = props;

package/src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -5,9 +5,9 @@ import { useEffect, useRef } from 'react';
 
 import { fnOrVar } from '../../utils/util';
 import { clickInputWhenContainingCellClicked } from '../clickInputWhenContainingCellClicked';
-import { GridBaseRow } from '../Grid';
-import { CellEditorCommon, ColDefT, GridCell } from '../GridCell';
+import { CellEditorCommon, GridCell } from '../GridCell';
 import { GenericCellColDef } from '../gridRender';
+import { ColDefT, GridBaseRow } from '../types';
 
 const BooleanCellRenderer = (props: CustomCellEditorProps) => {
   const { onValueChange, value, api, node, column, colDef, data } = props;

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 
-import { GridBaseRow } from '../Grid';
-import { ColDefT, GenericCellEditorProps, GridCell } from '../GridCell';
+import { GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormMultiSelect, GridFormMultiSelectProps } from '../gridForm/GridFormMultiSelect';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
 
 export const GridPopoutEditMultiSelect = <TData extends GridBaseRow, TValue = any>(
   colDef: GenericCellColDef<TData, TValue>,