@linzjs/step-ag-grid 2.4.11 → 3.0.0

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,10 +1,12 @@
 import { GridBaseRow } from "../Grid";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { GridContext } from "../../contexts/GridContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { MenuDivider, MenuItem } from "../../react-menu3";
+import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellEditorCommon, CellParams } from "../GridCell";
+import { CellEditorCommon } from "../GridCell";
+import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
+import { ClickEvent } from "../../react-menu3/types";
+import { GridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
@@ -17,24 +19,35 @@ interface MenuSeparatorType {
   __isMenuSeparator__: boolean;
 }
 
-export interface MenuOption<RowType> {
+export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends MenuOption<RowType> {
+  subValue: any;
+}
+
+export interface MenuOption<RowType extends GridBaseRow> {
   label: JSX.Element | string | MenuSeparatorType;
-  action?: (selectedRows: RowType[]) => Promise<boolean>;
+  action?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
   disabled?: string | boolean;
   supportsMultiEdit: boolean;
   hidden?: boolean;
+  subComponent?: (props: any) => JSX.Element;
 }
 
 /**
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
  * you need a useMemo around your columnDefs
  */
-export const GridFormPopoverMenu = <RowType extends GridBaseRow>(_props: GridFormPopoutMenuProps<RowType>) => {
-  const props = _props as GridFormPopoutMenuProps<RowType> & CellParams<RowType>;
-  const { updatingCells } = useContext(GridContext);
+export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridFormPopoutMenuProps<RowType>) => {
+  const { selectedRows, updateValue } = useContext(GridPopoverContext);
+
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MenuOption<RowType>[]>();
 
+  // Save triggers during async action processing which triggers another action(), this ref blocks that
+  const actionProcessing = useRef(false);
+  const [subComponentSelected, setSubComponentSelected] = useState<MenuOption<RowType> | null>(null);
+  const subComponentIsValid = useRef(false);
+  const [subSelectedValue, setSubSelectedValue] = useState<any>();
+
   // Load up options list if it's async function
   useEffect(() => {
     if (options || optionsInitialising.current) return;
@@ -42,33 +55,61 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(_props: GridFor
     const optionsConf = props.options ?? [];
 
     (async () => {
-      if (typeof optionsConf == "function") {
-        setOptions(await optionsConf(props.selectedRows));
-      } else {
-        setOptions(optionsConf);
-      }
-
+      setOptions(typeof optionsConf == "function" ? await optionsConf(selectedRows) : optionsConf);
       optionsInitialising.current = false;
     })();
-  }, [options, props.options, props.selectedRows]);
+  }, [options, props.options, selectedRows]);
 
   const actionClick = useCallback(
-    async (menuOption: MenuOption<any>) => {
-      return await updatingCells({ selectedRows: props.selectedRows, field: props.field }, async (selectedRows) => {
-        menuOption.action && (await menuOption.action(selectedRows));
+    async (menuOption: MenuOption<RowType>) => {
+      actionProcessing.current = true;
+      return updateValue(async () => {
+        const result = { ...menuOption, subValue: subSelectedValue };
+        menuOption.action && (await menuOption.action(selectedRows, result));
+        actionProcessing.current = false;
         return true;
       });
     },
-    [props.field, props.selectedRows, updatingCells],
+    [selectedRows, subSelectedValue, updateValue],
   );
 
-  const selectedRowCount = props.selectedRows.length;
+  const onMenuItemClick = useCallback(
+    (e: ClickEvent, item: MenuOption<RowType>) => {
+      if (item.subComponent) {
+        subComponentIsValid.current = false;
+        setSubSelectedValue(null);
+        setSubComponentSelected(subComponentSelected === item ? null : item);
+        e.keepOpen = true;
+      } else {
+        setSubComponentSelected(null);
+        actionClick(item).then();
+      }
+    },
+    [actionClick, subComponentSelected],
+  );
+
+  const selectedRowCount = selectedRows.length;
 
   const filteredOptions = options?.filter((menuOption) => {
     return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
-  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
+  const save = useCallback(async () => {
+    // if a subcomponent is open we assume that it's meant to be saved.
+    if (!actionProcessing.current && subComponentSelected) {
+      if (!subComponentIsValid.current) return false;
+      await actionClick(subComponentSelected);
+    }
+    return true;
+  }, [actionClick, subComponentSelected]);
+
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
+
+  const localTriggerSave = async (reason?: string) => {
+    if (!subComponentIsValid.current) return;
+    return triggerSave(reason);
+  };
+
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!filteredOptions} className={"GridFormPopupMenu"}>
       <>
@@ -77,14 +118,38 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(_props: GridFor
             <MenuDivider key={`$$divider_${index}`} />
           ) : (
             !item.hidden && (
-              <MenuItem
-                key={`${item.label}`}
-                onClick={() => actionClick(item)}
-                disabled={!!item.disabled || !filteredOptions?.includes(item)}
-                title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-              >
-                {item.label as JSX.Element | string}
-              </MenuItem>
+              <>
+                <MenuItem
+                  key={`${item.label}`}
+                  onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
+                  disabled={!!item.disabled || !filteredOptions?.includes(item)}
+                  title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                >
+                  {item.label as JSX.Element | string}
+                </MenuItem>
+                {item.subComponent && subComponentSelected === item && (
+                  <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                    {(_: any) =>
+                      item.subComponent && (
+                        <GridSubComponentContext.Provider
+                          value={{
+                            value: subSelectedValue,
+                            setValue: (value: any) => {
+                              setSubSelectedValue(value);
+                            },
+                            setValid: (valid: boolean) => {
+                              subComponentIsValid.current = valid;
+                            },
+                            triggerSave: localTriggerSave,
+                          }}
+                        >
+                          <item.subComponent />
+                        </GridSubComponentContext.Provider>
+                      )
+                    }
+                  </FocusableItem>
+                )}
+              </>
             )
           ),
         )}

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -1,6 +1,7 @@
+import "../../styles/GridFormSubComponentTextInput.scss";
+
 import { useState, KeyboardEvent } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
-import "../../styles/GridFormSubComponentTextInput.scss";
 
 export interface GridFormSubComponentTextInput {
   setValue: (value: string) => void;

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon, CellParams } from "../GridCell";
+import { CellEditorCommon } from "../GridCell";
+import { GridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
@@ -13,9 +14,9 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Cell
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
-export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTextAreaProps<RowType>) => {
-  const props = _props as GridFormTextAreaProps<RowType> & CellParams<RowType>;
-  const [value, setValue] = useState(props.value ?? "");
+export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
+  const { field, value: initialVale } = useContext(GridPopoverContext);
+  const [value, setValue] = useState(initialVale ?? "");
 
   const invalid = useCallback(() => {
     if (props.required && value.length == 0) {
@@ -34,13 +35,12 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTe
     async (selectedRows: any[]): Promise<boolean> => {
       if (invalid()) return false;
 
-      if (props.value === (value ?? "")) return true;
+      if (initialVale === (value ?? "")) return true;
 
       if (props.onSave) {
         return await props.onSave(selectedRows, value);
       }
 
-      const field = props.field;
       if (field == null) {
         console.error("ColDef has no field set");
         return false;
@@ -48,7 +48,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTe
       selectedRows.forEach((row) => (row[field] = value));
       return true;
     },
-    [props, invalid, value],
+    [invalid, initialVale, value, props, field],
   );
   const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon, CellParams } from "../GridCell";
+import { CellEditorCommon } from "../GridCell";
+import { GridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormTextInputProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
@@ -15,9 +16,10 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Cel
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
-export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormTextInputProps<RowType>) => {
-  const props = _props as GridFormTextInputProps<RowType> & CellParams<RowType>;
-  const initValue = props.value == null ? "" : `${props.value}`;
+export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTextInputProps<RowType>) => {
+  const { field, data, value: initialVale } = useContext(GridPopoverContext);
+
+  const initValue = initialVale == null ? "" : `${initialVale}`;
   const [value, setValue] = useState(initValue);
 
   const invalid = useCallback(() => {
@@ -29,13 +31,13 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormT
       return `Text must be no longer than ${props.maxLength} characters`;
     }
     if (props.validate) {
-      return props.validate(trimmedValue, props.data);
+      return props.validate(trimmedValue, data);
     }
     return null;
-  }, [props, value]);
+  }, [data, props, value]);
 
   const save = useCallback(
-    async (selectedRows: any[]): Promise<boolean> => {
+    async (selectedRows: RowType[]): Promise<boolean> => {
       if (invalid()) return false;
       const trimmedValue = value.trim();
       if (initValue === trimmedValue) return true;
@@ -44,15 +46,15 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormT
         return await props.onSave(selectedRows, trimmedValue);
       }
 
-      const field = props.field;
       if (field == null) {
         console.error("ColDef has no field set");
         return false;
       }
+      // @ts-ignore row[field] row is of type any
       selectedRows.forEach((row) => (row[field] = trimmedValue));
       return true;
     },
-    [invalid, value, initValue, props],
+    [invalid, value, initValue, props, field],
   );
   const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
 
@@ -63,12 +65,6 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormT
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
         formatted={props.units}
-        onMouseEnter={(e) => {
-          if (document.activeElement != e.currentTarget) {
-            e.currentTarget.focus();
-            e.currentTarget.selectionStart = e.currentTarget.value.length;
-          }
-        }}
         inputProps={{
           style: { width: "100%" },
           placeholder: props.placeholder,

package/src/contexts/GridPopoverContext.tsx

@@ -1,5 +1,4 @@
 import { createContext, RefObject } from "react";
-import { ICellEditorParams } from "ag-grid-community";
 
 export interface PropsType {
   value: any;
@@ -13,14 +12,20 @@ export type GridPopoverContextType = {
   anchorRef: RefObject<Element>;
   saving: boolean;
   setSaving: (saving: boolean) => void;
-  setProps: (props: ICellEditorParams, multiEdit: boolean) => void;
-  propsRef: RefObject<PropsType>;
+  field: string;
+  value: any;
+  data: any;
+  selectedRows: any[];
+  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
 };
 
 export const GridPopoverContext = createContext<GridPopoverContextType>({
   anchorRef: { current: null },
   saving: false,
   setSaving: () => {},
-  setProps: () => {},
-  propsRef: { current: null },
+  field: "",
+  value: null,
+  data: null,
+  selectedRows: [],
+  updateValue: async () => false,
 });

package/src/contexts/GridPopoverContextProvider.tsx

@@ -1,41 +1,35 @@
-import { ReactNode, RefObject, useCallback, useContext, useRef, useState } from "react";
-import { GridPopoverContext, PropsType } from "./GridPopoverContext";
+import { ReactNode, RefObject, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { GridPopoverContext } from "./GridPopoverContext";
 import { ICellEditorParams } from "ag-grid-community";
 import { GridContext } from "./GridContext";
 import { sortBy } from "lodash-es";
 import { GridBaseRow } from "../components/Grid";
 
 interface GridPopoverContextProps {
+  props: ICellEditorParams;
   children: ReactNode;
 }
 
-export const GridPopoverContextProvider = (props: GridPopoverContextProps) => {
+export const GridPopoverContextProvider = ({ props, children }: GridPopoverContextProps) => {
   const { getSelectedRows, updatingCells } = useContext(GridContext);
-  const anchorRef = useRef<Element>();
-  const propsRef = useRef<PropsType>({} as PropsType);
+  const anchorRef = useRef<Element>(props.eGridCell);
 
   const [saving, setSaving] = useState(false);
 
-  const setProps = useCallback(
-    (props: ICellEditorParams, multiEdit: boolean) => {
-      // Then item that is clicked on will always be first in the list
-      const selectedRows = multiEdit
-        ? sortBy(getSelectedRows(), (row) => row.id !== props.data.id)
-        : [props.data as GridBaseRow];
-      const field = props.colDef?.field ?? "";
+  const { colDef } = props;
+  const { cellEditorParams } = colDef;
+  const multiEdit = cellEditorParams?.multiEdit ?? false;
+  // Then item that is clicked on will always be first in the list
+  const selectedRows = useMemo(
+    () => (multiEdit ? sortBy(getSelectedRows(), (row) => row.id !== props.data.id) : [props.data as GridBaseRow]),
+    [getSelectedRows, multiEdit, props.data],
+  );
+  const field = props.colDef?.field ?? "";
 
-      anchorRef.current = props.eGridCell;
-      propsRef.current = {
-        value: props.value,
-        data: props.data,
-        field,
-        selectedRows,
-        updateValue: async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
-          return !saving && (await updatingCells({ selectedRows, field }, saveFn, setSaving));
-        },
-      };
-    },
-    [getSelectedRows, saving, updatingCells],
+  const updateValue = useCallback(
+    async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> =>
+      !saving && (await updatingCells({ selectedRows, field }, saveFn, setSaving)),
+    [field, saving, selectedRows, updatingCells],
   );
 
   return (
@@ -44,11 +38,14 @@ export const GridPopoverContextProvider = (props: GridPopoverContextProps) => {
         anchorRef: anchorRef as any as RefObject<Element>,
         saving,
         setSaving,
-        propsRef,
-        setProps,
+        selectedRows,
+        field,
+        data: props.data,
+        value: props.value,
+        updateValue,
       }}
     >
-      {props.children}
+      {children}
     </GridPopoverContext.Provider>
   );
 };

package/src/lui/TextAreaInput.tsx

@@ -34,7 +34,19 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
         <div className="LuiTextAreaInput-wrapper">
           {" "}
           {/* wrapper div used for error styling */}
-          <textarea id={id} value={props.value} onChange={props.onChange} rows={5} {...props.inputProps} />
+          <textarea
+            id={id}
+            value={props.value}
+            onChange={props.onChange}
+            rows={5}
+            {...props.inputProps}
+            onMouseEnter={(e) => {
+              if (document.activeElement != e.currentTarget) {
+                e.currentTarget.focus();
+                e.currentTarget.selectionStart = e.currentTarget.value.length;
+              }
+            }}
+          />
         </div>
       </label>
 

package/src/lui/TextInputFormatted.tsx

@@ -1,12 +1,20 @@
 import "./TextInputFormatted.scss";
 
-import { ChangeEventHandler, DetailedHTMLProps, InputHTMLAttributes } from "react";
+import {
+  ChangeEventHandler,
+  DetailedHTMLProps,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  MouseEventHandler,
+} from "react";
 
 import clsx from "clsx";
 import { LuiIcon } from "@linzjs/lui";
 
 export interface LuiTextInputProps {
   onChange?: ChangeEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onClick?: MouseEventHandler<HTMLInputElement>;
   inputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
   error?: string | boolean | null;
   warning?: string | boolean | null;
@@ -16,8 +24,6 @@ export interface LuiTextInputProps {
 
   placeholder?: string;
   formatted?: string;
-
-  onMouseEnter?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
 }
 
 export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
@@ -38,6 +44,11 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
           spellCheck={true}
           defaultValue={props.value}
           onChange={props.onChange}
+          onFocus={props.onFocus}
+          onClick={props.onClick}
+          onMouseEnter={(e) => {
+            e.currentTarget.focus();
+          }}
           {...props.inputProps}
         />
         <span className={"LuiTextInput-formatted"}>{props.formatted}</span>

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

@@ -1,28 +1,29 @@
-import { useState, useReducer, useEffect, useRef, useMemo, useCallback, useContext } from "react";
+import { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { useBEM, useCombinedRef, useLayoutEffect, useItems } from "../hooks";
-import { getPositionHelpers, positionMenu, positionContextMenu } from "../positionUtils";
+import { useBEM, useCombinedRef, useItems, useLayoutEffect } from "../hooks";
+import { getPositionHelpers, positionContextMenu, positionMenu } from "../positionUtils";
 import {
-  mergeProps,
   batchedUpdates,
+  CloseReason,
   commonProps,
   floatEqual,
+  FocusPositions,
   getScrollAncestor,
   getTransition,
-  safeCall,
+  HoverActionTypes,
   isMenuOpen,
-  menuClass,
-  menuArrowClass,
-  CloseReason,
   Keys,
-  FocusPositions,
-  HoverActionTypes,
+  menuArrowClass,
+  menuClass,
+  mergeProps,
+  safeCall,
 } from "../utils";
 import { ControlledMenuProps, MenuDirection } from "../types";
 import { MenuListItemContext } from "../contexts/MenuListItemContext";
 import { HoverItemContext } from "../contexts/HoverItemContext";
 import { MenuListContext } from "../contexts/MenuListContext";
 import { SettingsContext } from "../contexts/SettingsContext";
+import { debounce } from "lodash-es";
 
 export const MenuList = ({
   ariaLabel,
@@ -75,6 +76,7 @@ export const MenuList = ({
   const focusRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
   const prevOpen = useRef(false);
+  const latestWindowSize = useRef({ width: 0, height: 0 });
   const latestMenuSize = useRef({ width: 0, height: 0 });
   const latestHandlePosition = useRef(() => {});
   const { hoverItem, dispatch, updateItems } = useItems(menuRef, focusRef);
@@ -320,6 +322,36 @@ export const MenuList = ({
     return () => resizeObserver.unobserve(observeTarget);
   }, [reposition]);
 
+  // Matt added window resize observer
+  useEffect(() => {
+    if (typeof ResizeObserver !== "function" || reposition === "initial") return;
+
+    const callback = debounce(() => {
+      const { width, height } = menuRef.current.ownerDocument.body.getBoundingClientRect();
+      if (width === 0 || height === 0) return;
+      if (
+        floatEqual(width, latestWindowSize.current.width, 1) &&
+        floatEqual(height, latestWindowSize.current.height, 1)
+      ) {
+        return;
+      }
+      latestWindowSize.current = { width, height };
+      flushSync(() => {
+        latestHandlePosition.current();
+        forceReposSubmenu();
+      });
+    }, 250);
+
+    const resizeObserver = new ResizeObserver(callback);
+
+    const observeTarget = menuRef.current.ownerDocument.body;
+    resizeObserver.observe(observeTarget, { box: "border-box" });
+    return () => {
+      callback.cancel();
+      resizeObserver.unobserve(observeTarget);
+    };
+  }, [reposition]);
+
   useEffect(() => {
     if (!isOpen) {
       dispatch(HoverActionTypes.RESET, undefined, 0);

package/src/react-menu3/contexts/SettingsContext.ts

@@ -1,4 +1,3 @@
-// FIXME hacking a default context in here is probably bad
 import { createContext, MutableRefObject, RefObject } from "react";
 import { ControlledMenuProps, MenuReposition, MenuViewScroll, RectElement, TransitionFieldType } from "../types";
 
@@ -17,4 +16,5 @@ interface SettingsContextType extends ControlledMenuProps {
   viewScroll?: MenuViewScroll;
 }
 
+// FIXME hacking a default context in here is probably bad, but the context is mess
 export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);

package/src/stories/grid/FormTest.tsx

@@ -1,11 +1,11 @@
 import "./FormTest.scss";
 
-import { useCallback, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
 import { wait } from "../../utils/util";
-import { CellEditorCommon, CellParams } from "../../components/GridCell";
+import { CellEditorCommon } from "../../components/GridCell";
 import { useGridPopoverHook } from "../../components/GridPopoverHook";
-import { GridBaseRow } from "../../components/Grid";
+import { GridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface IFormTestRow {
   id: number;
@@ -16,28 +16,30 @@ export interface IFormTestRow {
   distance: number | null;
 }
 
-export const FormTest = <RowType extends GridBaseRow>(_props: CellEditorCommon): JSX.Element => {
-  const props = _props as CellParams<RowType>;
-  const [v1, ...v2] = props.value.split(" ");
+export const FormTest = (props: CellEditorCommon): JSX.Element => {
+  const { value } = useContext(GridPopoverContext);
+  const [v1, ...v2] = value.split(" ");
 
   const [nameType, setNameType] = useState(v1);
   const [numba, setNumba] = useState(v2.join(" "));
 
-  const save = useCallback(async (): Promise<boolean> => {
-    // eslint-disable-next-line no-console
-    console.log("onSave", props.selectedRows, nameType, numba);
+  const save = useCallback(
+    async (selectedRows: IFormTestRow[]): Promise<boolean> => {
+      // eslint-disable-next-line no-console
+      console.log("onSave", selectedRows, nameType, numba);
 
-    // @ts-ignore
-    props.selectedRows.forEach((row) => (row["name"] = [nameType, numba].join(" ")));
-    await wait(1000);
+      selectedRows.forEach((row) => (row.name = [nameType, numba].join(" ")));
+      await wait(1000);
 
-    // Close form
-    return true;
-  }, [nameType, numba, props.selectedRows]);
+      // Close form
+      return true;
+    },
+    [nameType, numba],
+  );
 
   const [showModal, setShowModal] = useState<boolean>(false);
 
-  const { popoverWrapper } = useGridPopoverHook({ className: _props.className, save });
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
 
   return popoverWrapper(
     <>

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -143,7 +143,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
                 action: async (selectedRows) => {
                   await wait(1500);
                   setRowData(rowData.filter((data) => !selectedRows.some((row) => row.id == data.id)));
-                  return true;
                 },
                 supportsMultiEdit: true,
               },