@linzjs/step-ag-grid 1.5.4 → 2.0.1

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -1,22 +1,21 @@
-import "./GridFormEditBearing.scss";
+import "../../styles/GridFormEditBearing.scss";
 
 import { useCallback, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "@utils/bearing";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
-  placeHolder: string;
+export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
+  placeHolder?: string;
   range?: (value: number | null) => string | null;
   onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
 }
 
-export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormEditBearingProps<RowType>;
+export const GridFormEditBearing = <RowType extends GridBaseRow>(_props: GridFormEditBearingProps<RowType>) => {
+  const props = _props as GridFormEditBearingProps<RowType> & CellParams<RowType>;
   const [value, setValue] = useState<string>(`${props.value ?? ""}`);
-
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (bearingStringValidator(value)) return false;
@@ -25,8 +24,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       if (parsedValue === props.value) {
         return true;
       }
-      if (formProps.onSave) {
-        return await formProps.onSave(selectedRows, parsedValue);
+
+      if (props.onSave) {
+        return await props.onSave(selectedRows, parsedValue);
       } else {
         const field = props.field;
         if (field == null) {
@@ -37,9 +37,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       }
       return true;
     },
-    [formProps, props.field, props.value, value],
+    [props, value],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
+  const { triggerSave, popoverWrapper } = useGridPopoverHook({ className: props.className, save });
 
   return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
@@ -50,13 +50,13 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         }}
         inputProps={{
           autoFocus: true,
-          placeholder: formProps.placeHolder,
+          placeholder: props.placeHolder,
           disabled: false,
           maxLength: 16,
           onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
         }}
-        formatted={bearingStringValidator(value, formProps.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
-        error={bearingStringValidator(value, formProps.range)}
+        formatted={bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
+        error={bearingStringValidator(value, props.range)}
       />
     </div>,
   );

package/src/components/gridForm/GridFormMessage.tsx

@@ -1,34 +1,28 @@
+import clsx from "clsx";
 import { useEffect, useState } from "react";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { ICellEditorParams } from "ag-grid-community";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormMessageProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
-  message: (
-    selectedRows: RowType[],
-    cellEditorParams: ICellEditorParams,
-  ) => Promise<string | JSX.Element> | string | JSX.Element;
+export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
+  message: (cellParams: CellParams<RowType>) => Promise<string | JSX.Element> | string | JSX.Element;
 }
 
-export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormMessageProps<RowType>;
-
+export const GridFormMessage = <RowType extends GridBaseRow>(_props: GridFormMessageProps<RowType>) => {
+  const props = _props as GridFormMessageProps<RowType> & CellParams<RowType>;
   const [message, setMessage] = useState<string | JSX.Element | null>(null);
-  const { popoverWrapper } = useGridPopoverHook(props);
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
 
   useEffect(() => {
     (async () => {
-      setMessage(await formProps.message(props.selectedRows, props.cellEditorParams));
+      setMessage(await props.message(props));
     })().then();
-  }, [formProps, props.selectedRows, props]);
+  }, [props]);
 
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={message === null}>
-      <div style={{ maxWidth: 400 }} className={"Grid-popoverContainer"}>
-        {message}
-      </div>
+    <ComponentLoadingWrapper loading={message === null} className={clsx("GridFormMessage-container", props.className)}>
+      <>{message}</>
     </ComponentLoadingWrapper>,
   );
 };

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,14 +1,15 @@
-import "../../react-menu3/styles/index.scss";
+import "../../styles/GridFormMultiSelect.scss";
 
-import { MenuItem, MenuDivider, FocusableItem, ClickEvent } from "@react-menu3";
-import { Fragment, useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
+import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
+import { useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { ClickEvent } from "../../react-menu3/types";
 
 interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
@@ -23,8 +24,14 @@ export interface MultiSelectResult<RowType> {
   values: Record<string, any>;
 }
 
-export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType>
-  extends GenericCellEditorParams<RowType> {
+export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
+  // This overrides CellEditorCommon to provide some common class options
+  className?:
+    | "GridMultiSelect-containerSmall"
+    | "GridMultiSelect-containerMedium"
+    | "GridMultiSelect-containerLarge"
+    | string
+    | undefined;
   filtered?: boolean;
   filterPlaceholder?: string;
   onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
@@ -34,16 +41,17 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
   initialSelectedValues?: (selectedRows: RowType[]) => any[];
 }
 
-export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormMultiSelectProps<RowType, ValueType>;
-
+export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
+  props: GridFormMultiSelectProps<RowType, ValueType>,
+) => {
+  const { selectedRows } = props as unknown as CellParams<RowType>;
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MultiFinalSelectOption<ValueType>[]>();
   const subSelectedValues = useRef<Record<string, any>>({});
   const [selectedValues, setSelectedValues] = useState<any[]>(() =>
-    formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [],
+    props.initialSelectedValues ? props.initialSelectedValues(selectedRows) : [],
   );
 
   const save = useCallback(
@@ -51,24 +59,23 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
       const values: Record<string, any> = fromPairs(
         selectedValues.map((value) => [value, subSelectedValues.current[value] ?? true]),
       );
-      if (formProps.onSave) {
-        return await formProps.onSave({ selectedRows, values });
+      if (props.onSave) {
+        return await props.onSave({ selectedRows, values });
       }
       return true;
     },
-    [formProps, selectedValues],
+    [props, selectedValues],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
 
   // Load up options list if it's async function
   useEffect(() => {
     if (options || optionsInitialising.current) return;
     optionsInitialising.current = true;
-    let optionsConf = formProps.options ?? [];
+    let optionsConf = props.options ?? [];
 
     (async () => {
       if (typeof optionsConf == "function") {
-        optionsConf = await optionsConf(props.selectedRows);
+        optionsConf = await optionsConf(selectedRows);
       }
 
       const optionsList = optionsConf?.map((item) => {
@@ -78,7 +85,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
         return item;
       }) as any as MultiFinalSelectOption<ValueType>[];
 
-      if (formProps.filtered) {
+      if (props.filtered) {
         // This is needed otherwise when filter input is rendered and sets autofocus
         // the mouse up of the double click edit triggers the cell to cancel editing
         delay(() => setOptions(optionsList), 100);
@@ -87,10 +94,10 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
       }
       optionsInitialising.current = false;
     })();
-  }, [formProps.filtered, formProps.options, options, props.selectedRows]);
+  }, [props.filtered, props.options, options, selectedRows]);
 
   useEffect(() => {
-    if (!formProps.filtered || options == null) return;
+    if (!props.filtered || options == null) return;
     setFilteredValues(
       options
         .map((option) => {
@@ -103,23 +110,24 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
         })
         .filter((r) => r !== undefined),
     );
-  }, [formProps.filtered, filter, options]);
+  }, [props.filtered, filter, options]);
 
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={!options}>
-      <div className={"Grid-popoverContainerList"}>
-        {options && formProps.filtered && (
+    <ComponentLoadingWrapper loading={!options} className={"GridFormMultiSelect-container"}>
+      <>
+        {options && props.filtered && (
           <>
             <FocusableItem className={"filter-item"} key={"filter"}>
               {({ ref }: any) => (
-                <div style={{ display: "flex", width: "100%" }}>
+                <div style={{ display: "flex", width: "100%" }} className={"GridFormMultiSelect-filter"}>
                   <input
                     autoFocus
                     className={"free-text-input"}
                     style={{ border: "0px" }}
                     ref={ref}
                     type="text"
-                    placeholder={formProps.filterPlaceholder ?? "Placeholder"}
+                    placeholder={props.filterPlaceholder ?? "Placeholder"}
                     data-testid={"filteredMenu-free-text-input"}
                     defaultValue={""}
                     onChange={(e) => setFilter(e.target.value.toLowerCase())}
@@ -130,70 +138,72 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
             <MenuDivider key={`$$divider_filter`} />
           </>
         )}
-        {options?.map((item, index) =>
-          item.value === MenuSeparatorString ? (
-            <MenuDivider key={`$$divider_${index}`} />
-          ) : filteredValues.includes(item.value) ? null : (
-            <Fragment key={`${index}`}>
-              <MenuItem
-                key={`${index}`}
-                onClick={(e: ClickEvent) => {
-                  e.keepOpen = true;
-                  if (selectedValues.includes(item.value)) {
-                    setSelectedValues(selectedValues.filter((value) => value != item.value));
-                  } else {
-                    setSelectedValues([...selectedValues, item.value]);
-                  }
-                }}
-                onKeyDown={async (e: KeyboardEvent) => {
-                  if (e.key === "Enter") triggerSave().then();
-                  else if (e.key === " ") {
+        <div className={"GridFormMultiSelect-options"}>
+          {options?.map((item, index) =>
+            item.value === MenuSeparatorString ? (
+              <MenuDivider key={`$$divider_${index}`} />
+            ) : filteredValues.includes(item.value) ? null : (
+              <div key={`${index}`}>
+                <MenuItem
+                  key={`${index}`}
+                  onClick={(e: ClickEvent) => {
+                    e.keepOpen = true;
                     if (selectedValues.includes(item.value)) {
                       setSelectedValues(selectedValues.filter((value) => value != item.value));
                     } else {
                       setSelectedValues([...selectedValues, item.value]);
                     }
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
-                }}
-              >
-                <LuiCheckboxInput
-                  isChecked={selectedValues.includes(item.value)}
-                  value={`${item.value}`}
-                  label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                  inputProps={{
-                    onClick: (e) => {
+                  }}
+                  onKeyDown={async (e: KeyboardEvent) => {
+                    if (e.key === "Enter") triggerSave().then();
+                    else if (e.key === " ") {
+                      if (selectedValues.includes(item.value)) {
+                        setSelectedValues(selectedValues.filter((value) => value != item.value));
+                      } else {
+                        setSelectedValues([...selectedValues, item.value]);
+                      }
                       e.preventDefault();
                       e.stopPropagation();
-                      return false;
-                    },
-                  }}
-                  onChange={() => {
-                    /*Do nothing, change handled by menuItem*/
+                    }
                   }}
-                />
-              </MenuItem>
+                >
+                  <LuiCheckboxInput
+                    isChecked={selectedValues.includes(item.value)}
+                    value={`${item.value}`}
+                    label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                    inputProps={{
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return false;
+                      },
+                    }}
+                    onChange={() => {
+                      /*Do nothing, change handled by menuItem*/
+                    }}
+                  />
+                </MenuItem>
 
-              {selectedValues.includes(item.value) && item.subComponent && (
-                <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
-                  {(ref: any) =>
-                    item.subComponent &&
-                    item.subComponent(
-                      {
-                        setValue: (value: any) => {
-                          subSelectedValues.current[item.value as string] = value;
+                {selectedValues.includes(item.value) && item.subComponent && (
+                  <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
+                    {(ref: any) =>
+                      item.subComponent &&
+                      item.subComponent(
+                        {
+                          setValue: (value: any) => {
+                            subSelectedValues.current[item.value as string] = value;
+                          },
                         },
-                      },
-                      ref,
-                    )
-                  }
-                </FocusableItem>
-              )}
-            </Fragment>
-          ),
-        )}
-      </div>
+                        ref,
+                      )
+                    }
+                  </FocusableItem>
+                )}
+              </div>
+            ),
+          )}
+        </div>
+      </>
     </ComponentLoadingWrapper>,
   );
 };

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -3,10 +3,10 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { MenuDivider, MenuItem } from "@react-menu3";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
 }
 
@@ -29,9 +29,8 @@ export interface MenuOption<RowType> {
  * 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 GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormPopoutMenuProps<RowType>;
-
+export const GridFormPopoutMenu = <RowType extends GridBaseRow>(_props: GridFormPopoutMenuProps<RowType>) => {
+  const props = _props as GridFormPopoutMenuProps<RowType> & CellParams<RowType>;
   const { updatingCells } = useContext(GridContext);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MenuOption<RowType>[]>();
@@ -40,7 +39,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   useEffect(() => {
     if (options || optionsInitialising.current) return;
     optionsInitialising.current = true;
-    const optionsConf = formProps.options ?? [];
+    const optionsConf = props.options ?? [];
 
     (async () => {
       if (typeof optionsConf == "function") {
@@ -51,7 +50,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
 
       optionsInitialising.current = false;
     })();
-  }, [options, formProps.options, props.selectedRows]);
+  }, [options, props.options, props.selectedRows]);
 
   const actionClick = useCallback(
     async (menuOption: MenuOption<any>) => {
@@ -69,10 +68,10 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
     return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
-  const { popoverWrapper } = useGridPopoverHook(props);
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={!filteredOptions}>
-      <div className={"Grid-popoverContainerList"}>
+    <ComponentLoadingWrapper loading={!filteredOptions} className={"GridFormPopupMenu"}>
+      <>
         {options?.map((item, index) =>
           item.label === PopoutMenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
@@ -89,7 +88,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
             )
           ),
         )}
-      </div>
+      </>
     </ComponentLoadingWrapper>,
   );
 };

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
   required?: boolean;
   maxlength?: number;
@@ -13,22 +13,22 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Gene
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
-export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormTextAreaProps<RowType>;
+export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTextAreaProps<RowType>) => {
+  const props = _props as GridFormTextAreaProps<RowType> & CellParams<RowType>;
   const [value, setValue] = useState(props.value ?? "");
 
   const invalid = useCallback(() => {
-    if (formProps.required && value.length == 0) {
+    if (props.required && value.length == 0) {
       return `Some text is required`;
     }
-    if (formProps.maxlength && value.length > formProps.maxlength) {
-      return `Text must be no longer than ${formProps.maxlength} characters`;
+    if (props.maxlength && value.length > props.maxlength) {
+      return `Text must be no longer than ${props.maxlength} characters`;
     }
-    if (formProps.validate) {
-      return formProps.validate(value);
+    if (props.validate) {
+      return props.validate(value);
     }
     return null;
-  }, [formProps, value]);
+  }, [props, value]);
 
   const save = useCallback(
     async (selectedRows: any[]): Promise<boolean> => {
@@ -36,8 +36,8 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
 
       if (props.value === (value ?? "")) return true;
 
-      if (formProps.onSave) {
-        return await formProps.onSave(selectedRows, value);
+      if (props.onSave) {
+        return await props.onSave(selectedRows, value);
       }
 
       const field = props.field;
@@ -48,17 +48,16 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
       selectedRows.forEach((row) => (row[field] = value));
       return true;
     },
-    [formProps, invalid, props.field, props.value, value],
+    [props, invalid, value],
   );
-  const { popoverWrapper } = useGridPopoverHook(props, save);
-
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
+    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        inputProps={{ placeholder: formProps.placeholder }}
+        inputProps={{ placeholder: props.placeholder }}
       />
     </div>,
   );

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormTextInputProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+export interface GridFormTextInputProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
   units?: string;
   required?: boolean;
@@ -15,24 +15,24 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Gen
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
-export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormTextInputProps<RowType>;
+export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormTextInputProps<RowType>) => {
+  const props = _props as GridFormTextInputProps<RowType> & CellParams<RowType>;
   const initValue = props.value == null ? "" : `${props.value}`;
   const [value, setValue] = useState(initValue);
 
   const invalid = useCallback(() => {
     const trimmedValue = value.trim();
-    if (formProps.required && trimmedValue.length == 0) {
+    if (props.required && trimmedValue.length == 0) {
       return `Some text is required`;
     }
-    if (formProps.maxlength && trimmedValue.length > formProps.maxlength) {
-      return `Text must be no longer than ${formProps.maxlength} characters`;
+    if (props.maxlength && trimmedValue.length > props.maxlength) {
+      return `Text must be no longer than ${props.maxlength} characters`;
     }
-    if (formProps.validate) {
-      return formProps.validate(trimmedValue, props.data);
+    if (props.validate) {
+      return props.validate(trimmedValue, props.data);
     }
     return null;
-  }, [formProps, value]);
+  }, [props, value]);
 
   const save = useCallback(
     async (selectedRows: any[]): Promise<boolean> => {
@@ -40,8 +40,8 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
       const trimmedValue = value.trim();
       if (initValue === trimmedValue) return true;
 
-      if (formProps.onSave) {
-        return await formProps.onSave(selectedRows, trimmedValue);
+      if (props.onSave) {
+        return await props.onSave(selectedRows, trimmedValue);
       }
 
       const field = props.field;
@@ -52,20 +52,20 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
       selectedRows.forEach((row) => (row[field] = trimmedValue));
       return true;
     },
-    [invalid, value, initValue, formProps, props.field],
+    [invalid, value, initValue, props],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
 
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
+    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
       <TextInputFormatted
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        formatted={formProps.units}
+        formatted={props.units}
         inputProps={{
           style: { width: "100%" },
-          placeholder: formProps.placeholder,
+          placeholder: props.placeholder,
           onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
         }}
       />

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -1,21 +1,26 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
-import { GridCell } from "../GridCell";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType>(
-  colDef: GenericCellColDef<RowType, GridFormMultiSelectProps<RowType, ValueType>>,
-) =>
-  GridCell<RowType, GridFormMultiSelectProps<RowType, ValueType>>({
-    initialWidth: 65,
-    maxWidth: 150,
-    cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
-    ...colDef,
-    ...(colDef?.cellEditorParams && {
-      cellEditorParams: {
-        ...colDef.cellEditorParams,
-        form: GridFormMultiSelect,
+  colDef: GenericCellColDef<RowType>,
+  props: GenericCellEditorProps<GridFormMultiSelectProps<RowType, ValueType>>,
+): ColDefT<RowType> =>
+  GridCell(
+    {
+      initialWidth: 65,
+      maxWidth: 150,
+      cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined,
+      ...colDef,
+    },
+    {
+      editor: GridFormMultiSelect,
+      ...props,
+      editorParams: {
+        className: "GridMultiSelect-containerMedium",
+        ...(props.editorParams as GridFormMultiSelectProps<RowType, ValueType>),
       },
-    }),
-  });
+    },
+  );