@linzjs/step-ag-grid 29.12.0 → 29.14.0

package/src/components/gridHook/useGridCopy.ts

@@ -0,0 +1,279 @@
+import { useShowLUIMessage } from '@linzjs/lui';
+import { CellContextMenuEvent, IRowNode } from 'ag-grid-community';
+import { compact } from 'lodash-es';
+import { ClipboardEvent as ReactClipboardEvent, MutableRefObject, useCallback } from 'react';
+
+import { useGridContext } from '../../contexts/GridContext';
+import { CopyOptionsContext, GridRangeSelectContextMenu } from '../GridRangeSelectContextMenu';
+import { agGridSelectRowColId, GridBaseRow } from '../types';
+import { useGridContextMenu } from './useGridContextMenu';
+import { CopyOptionsKey, gridCopyOptions, useGridCopySettings } from './useGridCopySettings';
+import { CellLocation, GridRanges } from './useGridRangeSelection';
+
+export const useGridCopy = <TData extends GridBaseRow>({
+  ranges,
+  rangeStartRef,
+  rangeEndRef,
+  hasSelectedMoreThanOneCellRef,
+  cellContextMenu,
+}: {
+  ranges: () => GridRanges<TData>;
+  rangeStartRef: MutableRefObject<CellLocation | null>;
+  rangeEndRef: MutableRefObject<CellLocation | null>;
+  hasSelectedMoreThanOneCellRef: MutableRefObject<boolean>;
+  cellContextMenu: (event: CellContextMenuEvent) => void;
+}) => {
+  const showToast = useShowLUIMessage();
+  const { getSelectedRowIds } = useGridContext<TData>();
+  const { getColDef, getCellValue } = useGridContext<TData>();
+  const { copyType, setCopyType } = useGridCopySettings();
+
+  const onCopy = useCallback(
+    (type: CopyOptionsKey = copyType) => {
+      const rangeStart = rangeStartRef.current;
+      const rangeEnd = rangeEndRef.current;
+      if (rangeStart === null || rangeEnd === null || !hasSelectedMoreThanOneCellRef.current) {
+        return;
+      }
+
+      if (rangeStart.rowId === rangeEnd.rowId && rangeStart.colId === rangeEnd.colId) {
+        type = 'html';
+      }
+
+      const json = type === 'json';
+      const { selectedColIds, selectedNodes } = ranges();
+      const filteredSelectedColIds = selectedColIds.filter(
+        (colId) =>
+          colId === agGridSelectRowColId ||
+          (colId !== 'gridCellFiller' && getColDef(colId)?.headerComponentParams?.exportable !== false),
+      );
+
+      const selectedRowIds = getSelectedRowIds();
+      const formatters = compact(
+        filteredSelectedColIds.map((colKey) => {
+          return (rowNode: IRowNode): string | number | boolean | null | undefined => {
+            if (colKey === agGridSelectRowColId) {
+              return selectedRowIds.includes(rowNode.data.id);
+            } else {
+              const v = getCellValue({ rowNode, colKey });
+              if (json && v !== undefined) {
+                return v;
+              }
+              const f = getCellValue({ rowNode, colKey, useFormatter: true });
+              // If it's a number, and it matches value return the original type
+              return v == f ? v : f;
+            }
+          };
+        }),
+      );
+
+      // Get and apply headers
+      const headers = filteredSelectedColIds.map((colId) => {
+        if (colId === agGridSelectRowColId) return type === 'json' ? 'selected' : 'Selected';
+        if (json) {
+          return colId;
+        }
+        return getColDef(colId)?.headerName ?? '?';
+      });
+      const maxCellLength: Record<string, number> = {};
+      headers.forEach((headerName, i) => {
+        const colId = filteredSelectedColIds[i];
+        maxCellLength[colId] = headerName.length;
+      });
+
+      const rows: string[][] = [];
+      if (type === 'csv' || type === 'html') {
+        rows.push(headers);
+      }
+      selectedNodes.forEach((node) => {
+        const row: string[] = [];
+        rows.push(row);
+        formatters.forEach((formatter, i) => {
+          const colId = filteredSelectedColIds[i];
+          let value = formatter(node);
+          if (typeof value === 'string') {
+            value = value.replaceAll('\xa0', ' ');
+          }
+          if (!json) {
+            if (value === '-' || value === '–' || value == null) {
+              value = '';
+            }
+            value = String(value);
+            if (value === '-' || value === '–') {
+              value = '';
+            }
+            maxCellLength[colId] = Math.max(maxCellLength[colId], value.length);
+          }
+
+          switch (type) {
+            case 'json':
+              value =
+                value === 'undefined' || (value !== null && typeof value === 'object') || typeof value === 'string'
+                  ? JSON.stringify(value)
+                  : value;
+              break;
+            case 'markdown':
+              value = encodeMarkdownValue(value as string);
+              break;
+            case 'csv':
+              value = encodeCSVValue(value as string);
+              break;
+          }
+          row.push(String(value));
+        });
+      });
+
+      let result = '';
+      let html = `<table style="
+            font-family: 'Open Sans', system-ui, sans-serif;
+            font-size: 10px;
+            line-height: 10px;
+            border: 1px solid #d1d9e0;
+            border-collapse: collapse;
+          ">`;
+      if (json) {
+        result += '[\n';
+      }
+      rows.forEach((row, rowIndex) => {
+        if (json) {
+          result += '  { ';
+        }
+        if (rowIndex == 1) {
+          html += '<tbody style="font-weight: 400;">';
+        }
+        if (rowIndex == 0) {
+          html += '<thead style="font-weight: 600;">';
+        }
+        if (rowIndex === 0 || (rowIndex & 1) === 1) {
+          html += '<tr>';
+        } else {
+          html += '<tr style="background-color: #f6f8fa;">';
+        }
+        if (rowIndex === 1 && type === 'html') {
+          Object.values(maxCellLength).forEach((maxLength) => {
+            result += '|' + '-'.repeat(maxLength + 2);
+          });
+          result += '|\n';
+        }
+        row.forEach((cell, i) => {
+          switch (type) {
+            case 'csv':
+              if (i !== 0) {
+                result += ', ';
+              }
+              result += cell;
+              break;
+            case 'html':
+              if (i === 0) {
+                result += '|';
+              }
+              const colId = filteredSelectedColIds[i];
+              result += ' ' + cell.padEnd(maxCellLength[colId], ' ') + ' ';
+              result += '|';
+              html +=
+                rowIndex === 0
+                  ? '<th style="border: 1px solid #d1d9e0; padding:6px 13px; text-align: left;">'
+                  : '<td style="border: 1px solid #d1d9e0; padding:6px 13px;">';
+              html += cell;
+              html += rowIndex === 0 ? '</th>' : '</td>';
+              break;
+            case 'json':
+              if (i !== 0) {
+                result += ', ';
+              }
+              result += JSON.stringify(headers[i]) + ': ' + cell;
+              break;
+          }
+        });
+        html += '</tr>';
+        if (rowIndex == 0) {
+          html += '</thead>';
+        }
+        if (rowIndex == rows.length - 1) {
+          html += '</tbody>';
+        }
+        if (json) {
+          result += ' }';
+        }
+        result += '\n';
+      });
+      if (json) {
+        result += ']\n';
+      }
+      html += '</table>';
+
+      showToast({
+        message: `${gridCopyOptions[type].text} copied`,
+        messageType: 'toast',
+        messageLevel: 'info',
+      });
+
+      if (type === 'html') {
+        const clipboardItem = new ClipboardItem({
+          'text/html': new Blob([html], { type: 'text/html' }),
+          'text/plain': new Blob([result], { type: 'text/plain' }), // fallback
+        });
+
+        void navigator.clipboard.write([clipboardItem]).catch((err) => console.error('Failed to copy: ', err));
+      } else {
+        void navigator.clipboard.writeText(result).catch((err) => console.error('Failed to copy: ', err));
+      }
+    },
+    [getCellValue, ranges, copyType],
+  );
+
+  const onCopyEvent = useCallback(
+    (e: ReactClipboardEvent<HTMLDivElement>) => {
+      const rangeStart = rangeStartRef.current;
+      const rangeEnd = rangeEndRef.current;
+      if (
+        rangeStart === null ||
+        rangeEnd === null ||
+        (rangeStart.colId === rangeEnd.colId &&
+          rangeStart.rowId === rangeEnd.rowId &&
+          !hasSelectedMoreThanOneCellRef.current)
+      ) {
+        return;
+      }
+
+      e.preventDefault();
+
+      onCopy();
+    },
+    [onCopy],
+  );
+
+  const { cellContextMenu: rangeSelectContextMenu, contextMenuComponent: rangeSelectContextMenuComponent } =
+    useGridContextMenu<TData, CopyOptionsContext>({
+      contextMenu: GridRangeSelectContextMenu<TData>,
+      context: { onCopy, copyType, setCopyType },
+    });
+
+  const rangeSelectInterceptContextMenu = useCallback(
+    (event: CellContextMenuEvent<TData>) =>
+      rangeStartRef.current == null ? cellContextMenu(event) : rangeSelectContextMenu(event),
+    [cellContextMenu, rangeSelectContextMenu],
+  );
+
+  return {
+    onCopyEvent,
+    rangeSelectInterceptContextMenu,
+    rangeSelectContextMenuComponent,
+  };
+};
+
+const encodeMarkdownValue = (value: string): string => {
+  return value.replaceAll('|', '\\|');
+};
+
+const encodeCSVValue = (value: string): string => {
+  let str = String(value);
+
+  // Check if it needs quoting
+  if (/[",\n]/.test(str)) {
+    // Escape double quotes by doubling them
+    str = '"' + str.replace(/"/g, '""') + '"';
+  }
+
+  return str;
+};

package/src/components/gridHook/useGridCopySettings.ts

@@ -0,0 +1,28 @@
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import { useCallback, useState } from 'react';
+
+export const gridCopyOptions: Record<string, { text: string; icon: IconName; developer?: boolean }> = {
+  html: { text: 'Text\xa0/\xa0HTML', icon: 'ic_product_list' },
+  csv: { text: 'CSV', icon: 'ic_csv_file' },
+  json: { text: 'Json', icon: 'ic_file_attached_outline', developer: true },
+};
+export type CopyOptionsKey = keyof typeof gridCopyOptions;
+
+const CopyOptionsStorageKey = 'stepAgGrid_defaultCopy';
+
+export const useGridCopySettings = () => {
+  const [copyType, _setCopyType] = useState<CopyOptionsKey>(() => {
+    const defaultCopy = window.localStorage.getItem(CopyOptionsStorageKey) ?? '';
+    return Object.keys(gridCopyOptions).includes(defaultCopy) ? defaultCopy : 'html';
+  });
+
+  const setCopyType = useCallback((key: CopyOptionsKey) => {
+    window.localStorage.setItem(CopyOptionsStorageKey, key);
+    _setCopyType(key);
+  }, []);
+
+  return {
+    copyType,
+    setCopyType,
+  };
+};

package/src/components/gridHook/useGridRangeSelection.ts

@@ -0,0 +1,235 @@
+import { CellMouseDownEvent, CellMouseOverEvent, IRowNode } from 'ag-grid-community';
+import { MutableRefObject, RefObject, useCallback, useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+
+import { GridBaseRow } from '../types';
+
+export interface CellLocation {
+  rowId: string;
+  colId: string;
+  timestamp: number;
+}
+
+export interface GridRanges<TData extends GridBaseRow> {
+  selectedColIds: string[];
+  selectedNodes: IRowNode<TData>[];
+}
+
+export const useGridRangeSelection = <TData extends GridBaseRow>({
+  enableRangeSelection,
+  gridDivRef,
+  rangeStartRef,
+  rangeEndRef,
+  hasSelectedMoreThanOneCellRef,
+  rangeSortedNodesRef,
+}: {
+  enableRangeSelection: boolean;
+  gridDivRef: RefObject<HTMLDivElement>;
+  rangeStartRef: MutableRefObject<CellLocation | null>;
+  rangeEndRef: MutableRefObject<CellLocation | null>;
+  hasSelectedMoreThanOneCellRef: MutableRefObject<boolean>;
+  rangeSortedNodesRef: MutableRefObject<IRowNode<TData>[] | null>;
+}) => {
+  const [refreshIntervalEnabled, setRefreshIntervalEnabled] = useState(false);
+
+  const ranges = useCallback((): GridRanges<TData> => {
+    const gridElement = gridDivRef.current!;
+    const rangeStart = rangeStartRef.current!;
+    const rangeEnd = rangeEndRef.current!;
+    const rangeSortedNodes = rangeSortedNodesRef.current!;
+    if (!gridElement || !rangeStart || !rangeEnd || !rangeSortedNodes) {
+      return {
+        selectedColIds: [],
+        selectedNodes: [],
+      };
+    }
+
+    const elStyleLeftComparator = (el1: Element, el2: Element) => elStyleLeft(el1) - elStyleLeft(el2);
+    const elStyleLeft = (el: Element): number => parseFloat((el as HTMLElement).style.left) ?? 0;
+
+    const getSortedColIds = (): string[] => {
+      //
+      const leftHeaders = [...gridElement.querySelectorAll('.ag-pinned-left-header .ag-header-cell')].sort(
+        elStyleLeftComparator,
+      );
+      const centerHeaders = [...gridElement.querySelectorAll('.ag-header-viewport .ag-header-cell')].sort(
+        elStyleLeftComparator,
+      );
+      const rightHeaders = [...gridElement.querySelectorAll('.ag-pinned-right-header .ag-header-cell')].sort(
+        elStyleLeftComparator,
+      );
+
+      return [...leftHeaders, ...centerHeaders, ...rightHeaders].map((el, i) => el.getAttribute('col-id') ?? String(i));
+    };
+
+    const sortedColIds = getSortedColIds();
+
+    const startColIndex = sortedColIds.indexOf(rangeStart.colId);
+    const endColIndex = sortedColIds.indexOf(rangeEnd.colId);
+    const selectedColIds = sortedColIds.slice(
+      Math.min(startColIndex, endColIndex),
+      Math.max(startColIndex, endColIndex) + 1,
+    );
+
+    const startRowIndex = rangeSortedNodes.findIndex((node) => node.data!.id === rangeStart.rowId);
+    const endRowIndex = rangeSortedNodes.findIndex((node) => node.data!.id === rangeEnd.rowId);
+    const selectedNodes = rangeSortedNodes.slice(
+      Math.min(startRowIndex, endRowIndex),
+      Math.max(startRowIndex, endRowIndex) + 1,
+    );
+
+    return { selectedColIds, selectedNodes };
+  }, []);
+
+  const redrawSelectedRanges = useCallback(() => {
+    const gridElement = gridDivRef.current!;
+    const { selectedColIds, selectedNodes } = ranges();
+
+    selectedColIds.forEach((colId, colIndex) => {
+      selectedNodes.forEach((node, rowIndex) => {
+        const rowId = node.data!.id;
+        const cell = gridElement.querySelector(
+          `.ag-row[row-id=${JSON.stringify(String(rowId))}] .ag-cell[col-id=${JSON.stringify(colId)}`,
+        );
+        cell?.classList.add('rangeSelect');
+        if (colIndex === 0) {
+          cell?.classList.add('rangeSelectLeft');
+        }
+        if (colIndex === selectedColIds.length - 1) {
+          cell?.classList.add('rangeSelectRight');
+        }
+        if (rowIndex === 0) {
+          cell?.classList.add('rangeSelectTop');
+        }
+        if (rowIndex === selectedNodes.length - 1) {
+          cell?.classList.add('rangeSelectBottom');
+        }
+      });
+    });
+  }, []);
+
+  const updateRangeSelectionCellClasses = useCallback(
+    (justRefresh?: boolean) => {
+      //
+      // Get all grid cols, sort by pinned, then style: left
+      const gridElement = gridDivRef.current;
+      if (!gridElement) {
+        return;
+      }
+
+      // Clear all selections
+      if (!justRefresh) {
+        gridElement
+          .querySelectorAll('.rangeSelect,.rangeSelectLeft,.rangeSelectTop,.rangeSelectRight,.rangeSelectBottom')
+          .forEach((el) => {
+            el.classList.remove(
+              'rangeSelect',
+              'rangeSelectLeft',
+              'rangeSelectTop',
+              'rangeSelectRight',
+              'rangeSelectBottom',
+            );
+          });
+      }
+
+      // if range selection multiple add .Grid-container.rangeSelectingMultiple
+      const rangeStart = rangeStartRef.current;
+      const rangeEnd = rangeEndRef.current;
+
+      if (
+        rangeStart !== null &&
+        rangeEnd !== null &&
+        (hasSelectedMoreThanOneCellRef.current ||
+          rangeStart.colId !== rangeEnd.colId ||
+          rangeStart.rowId !== rangeEnd.rowId)
+      ) {
+        gridElement.classList.add('rangeSelectingMultiple');
+        gridElement.querySelectorAll('.ag-cell-focus').forEach((el) => {
+          el.classList.remove('ag-cell-focus');
+        });
+      } else {
+        gridElement.classList.remove('rangeSelectingMultiple');
+        return;
+      }
+      const rangeSortedNodes = rangeSortedNodesRef.current;
+      if (!rangeSortedNodes) {
+        return;
+      }
+
+      redrawSelectedRanges();
+    },
+    [ranges, redrawSelectedRanges],
+  );
+
+  // Handle updates after scroll / grid refresh
+  useInterval(
+    () => {
+      updateRangeSelectionCellClasses(true);
+    },
+    refreshIntervalEnabled ? 150 : null,
+  );
+
+  const clearRangeSelection = useCallback(() => {
+    hasSelectedMoreThanOneCellRef.current = false;
+    setRefreshIntervalEnabled(false);
+
+    hasSelectedMoreThanOneCellRef.current = false;
+    rangeStartRef.current = null;
+    rangeEndRef.current = null;
+
+    updateRangeSelectionCellClasses();
+  }, [updateRangeSelectionCellClasses]);
+
+  const onCellMouseOver = useCallback(
+    (e: CellMouseOverEvent, mouseDown?: boolean) => {
+      if (!enableRangeSelection) {
+        return;
+      }
+      const button = (e.event as { buttons?: number }).buttons;
+      if (button !== 1) {
+        // TODO fix this?
+        //rangeSortedNodesRef.current = null;
+        return;
+      }
+      rangeEndRef.current = {
+        rowId: e.node.data.id,
+        colId: e.column.getColId(),
+        timestamp: Date.now(),
+      };
+
+      if (mouseDown) {
+        const sortedNodes: IRowNode<TData>[] = [];
+        e.api.forEachNodeAfterFilterAndSort((node: IRowNode<TData>) => sortedNodes.push(node));
+        rangeSortedNodesRef.current = sortedNodes;
+        setRefreshIntervalEnabled(true);
+        rangeStartRef.current = { ...rangeEndRef.current };
+      }
+
+      if (
+        rangeStartRef.current &&
+        rangeEndRef.current &&
+        (rangeStartRef.current.rowId !== rangeEndRef.current.rowId ||
+          rangeStartRef.current.colId !== rangeEndRef.current.colId)
+      ) {
+        hasSelectedMoreThanOneCellRef.current = true;
+        window.getSelection()?.removeAllRanges();
+      }
+
+      updateRangeSelectionCellClasses();
+    },
+    [enableRangeSelection, updateRangeSelectionCellClasses],
+  );
+
+  const onCellMouseDown = useCallback(
+    (e: CellMouseDownEvent) => {
+      const button = (e.event as { buttons?: number }).buttons;
+      if (button === 1) {
+        clearRangeSelection();
+      }
+      onCellMouseOver(e as unknown as CellMouseOverEvent, true);
+    },
+    [onCellMouseOver],
+  );
+
+  return { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver };
+};

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>,

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelectGrid.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 { GridFormMultiSelectGrid, GridFormMultiSelectGridProps } from '../gridForm/GridFormMultiSelectGrid';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
 
 export const GridPopoutEditMultiSelectGrid = <TData extends GridBaseRow, TValue = any>(
   colDef: GenericCellColDef<TData, TValue>,

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -6,10 +6,13 @@ import {
   bearingRangeValidator,
   bearingValueFormatter,
 } from '../../utils/bearing';
-import { GridBaseRow } from '../Grid';
-import { ColDefT, GenericCellEditorProps, GridCell } from '../GridCell';
+import { GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormEditBearing, GridFormEditBearingProps } from '../gridForm/GridFormEditBearing';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
+
+export const GridCellBearingValueFormatter = (params: ValueFormatterParams) =>
+  bearingValueFormatter(params.value) ?? '';
 
 const GridPopoverEditBearingLike = <TData extends GridBaseRow, TValue = any>(
   colDef: GenericCellColDef<TData, TValue>,

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.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 { GridFormDropDown, GridFormDropDownProps } from '../gridForm/GridFormDropDown';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
 
 export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any, TOptionValue = any>(
   colDef: GenericCellColDef<TData, TValue>,

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,8 +1,8 @@
-import { GridBaseRow } from '../Grid';
-import { ColDefT, GenericCellEditorProps, GridCell } from '../GridCell';
+import { GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormPopoverMenu, GridFormPopoverMenuProps } from '../gridForm/GridFormPopoverMenu';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
 import { GridRenderPopoutMenuCell } from '../gridRender/GridRenderPopoutMenuCell';
+import { ColDefT, GridBaseRow } from '../types';
 
 /**
  * Popout burger menu

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

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

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;