@linzjs/step-ag-grid 29.12.0 → 29.14.0

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/GridRangeSelectContextMenu.tsx

@@ -0,0 +1,73 @@
+import { LuiIcon } from '@linzjs/lui';
+import clsx from 'clsx';
+import { ReactElement, useCallback, useMemo } from 'react';
+
+import { typedEntries } from '../lui/tsUtils';
+import { MenuDivider, MenuHeader, MenuItem } from '../react-menu3';
+import { GridContextMenuComponentProps } from './gridHook';
+import { CopyOptionsKey, gridCopyOptions } from './gridHook/useGridCopySettings';
+import { GridBaseRow } from './types';
+
+export interface CopyOptionsContext {
+  onCopy: (type?: CopyOptionsKey) => void;
+  copyType: CopyOptionsKey;
+  setCopyType: (copyType: CopyOptionsKey) => void;
+}
+
+export const GridRangeSelectContextMenu = <TData extends GridBaseRow>({
+  event,
+  context,
+}: GridContextMenuComponentProps<TData, CopyOptionsContext>): ReactElement => {
+  const developerContextMenu: boolean =
+    !!(event?.event as { ctrlKey?: boolean })?.ctrlKey && !!(event?.event as { shiftKey?: boolean })?.shiftKey;
+  const onCopy = useMemo(() => context?.onCopy, [context?.onCopy]);
+  const onClick = useCallback(
+    (type: CopyOptionsKey) => {
+      onCopy?.(type);
+    },
+    [onCopy],
+  );
+
+  return (
+    <>
+      <MenuHeader>Copy as</MenuHeader>
+      {typedEntries(gridCopyOptions).map(([key, { icon, text, developer }]) => {
+        return (
+          (!developer || developerContextMenu) && (
+            <MenuItem key={key} onClick={() => void onClick(key)}>
+              <div className={'copyMenuMenuItem'}>
+                <LuiIcon name={icon} alt={text} size={'md'} />
+                <div className={'copyMenuMenuItem__text'}>{text}</div>
+              </div>
+            </MenuItem>
+          )
+        );
+      })}
+      <MenuDivider />
+      <MenuHeader>Set copy default</MenuHeader>
+      {typedEntries(gridCopyOptions).map(([key, { text, developer }]) => {
+        return (
+          !developer && (
+            <MenuItem
+              key={'default_' + key}
+              onClick={(e) => {
+                context?.setCopyType(key);
+                e.keepOpen = true;
+              }}
+            >
+              <div
+                className={clsx(
+                  'copyMenuMenuItem',
+                  context?.copyType === key ? '' : 'copyMenuMenuItem__buttonDefault--hidden',
+                )}
+              >
+                <LuiIcon name={'ic_tick'} alt={'CSV'} size={'sm'} />
+                <div className={'copyMenuMenuItem__text'}>{text}</div>
+              </div>
+            </MenuItem>
+          )
+        );
+      })}
+    </>
+  );
+};

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

@@ -9,11 +9,11 @@ import { usePrevious } from '../../lui/reactUtils';
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
 import { textMatch } from '../../utils/textMatcher';
-import { isNotEmpty } from '../../utils/util';
+import { isNotEmpty, MaybePromise } 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
@@ -47,8 +47,6 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption<TOptionValue = any> = FinalSelectOption<TOptionValue>;
 
-export type MaybePromise<T> = T | Promise<T>;
-
 export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents

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

@@ -5,10 +5,11 @@ import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { FocusableItem, MenuDivider, MenuItem, SubMenu } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
+import { MaybePromise } 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 GridFormPopoverMenuProps<TData extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: TData[]) => Promise<MenuOption<TData>[]> | MenuOption<TData>[];
@@ -33,7 +34,7 @@ export interface SelectedMenuOptionResult<TData extends GridBaseRow> extends Men
 export interface MenuOption<TData extends GridBaseRow> {
   label: ReactElement | string | MenuSeparatorType;
   subMenu?: () => ReactElement;
-  action?: (props: { selectedRows: TData[]; menuOption: SelectedMenuOptionResult<TData> }) => Promise<void>;
+  action?: (props: { selectedRows: TData[]; menuOption: SelectedMenuOptionResult<TData> }) => MaybePromise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
   subComponent?: (props: any) => ReactElement;

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

@@ -1,29 +1,37 @@
+import '../../styles/ContextMenu.scss';
+
 import { ColDef } from 'ag-grid-community';
 import { CellContextMenuEvent } from 'ag-grid-community';
 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> {
+export interface GridContextMenuComponentProps<TData extends GridBaseRow, Context extends object = object> {
   selectedRows: TData[];
   clickedRow: TData;
   colDef: ColDef;
   close: () => void;
+  event?: CellContextMenuEvent;
+  context?: Context;
 }
 
-export type GridContextMenuComponent<TData extends GridBaseRow> = (
-  props: GridContextMenuComponentProps<TData>,
+export type GridContextMenuComponent<TData extends GridBaseRow, Context extends object = object> = (
+  props: GridContextMenuComponentProps<TData, Context>,
 ) => ReactElement | null;
 
-export const useGridContextMenu = <TData extends GridBaseRow>({
+export interface useGridContextMenuProps<TData extends GridBaseRow, Context extends object = object> {
+  contextMenuSelectRow?: boolean;
+  contextMenu?: GridContextMenuComponent<TData, Context>;
+  context?: Context;
+}
+
+export const useGridContextMenu = <TData extends GridBaseRow, Context extends object = object>({
   contextMenuSelectRow,
   contextMenu: ContextMenu,
-}: {
-  contextMenuSelectRow: boolean;
-  contextMenu?: GridContextMenuComponent<TData>;
-}) => {
+  context,
+}: useGridContextMenuProps<TData, Context>) => {
   const { redrawRows, prePopupOps, resetFocusedCellAfterCellEditing, getSelectedRows } = useContext(GridContext);
 
   const [isOpen, setOpen] = useState(false);
@@ -33,6 +41,7 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
   const clickedColDefRef = useRef<ColDef>(null!);
   const selectedRowsRef = useRef<any[]>([]);
   const clickedRowRef = useRef<any>(null);
+  const eventRef = useRef<CellContextMenuEvent | undefined>(undefined);
 
   const openMenu = useCallback(
     (e: PointerEvent | null | undefined) => {
@@ -59,6 +68,7 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
       clickedColDefRef.current = event.colDef;
       selectedRowsRef.current = getSelectedRows();
       clickedRowRef.current = event.data;
+      eventRef.current = event;
 
       // This is actually a pointer event
       openMenu(event.event as PointerEvent);
@@ -69,9 +79,10 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
   return {
     openMenu,
     cellContextMenu,
-    component: ContextMenu ? (
+    contextMenuComponent: ContextMenu ? (
       <>
         <ControlledMenu
+          className={'GridContextMenu'}
           anchorPoint={anchorPoint}
           state={isOpen ? 'open' : 'closed'}
           direction="right"
@@ -82,7 +93,9 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
               selectedRows={selectedRowsRef.current}
               clickedRow={clickedRowRef.current}
               colDef={clickedColDefRef.current}
+              event={eventRef.current}
               close={closeMenu}
+              context={context}
             />
           )}
         </ControlledMenu>