@linzjs/step-ag-grid 23.0.1 → 24.0.0

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,4 +1,5 @@
-import { defer, fromPairs, groupBy, isEmpty, pick, toPairs } from "lodash-es";
+import { LuiCheckboxInput } from '@linzjs/lui';
+import { defer, fromPairs, groupBy, isEmpty, pick, toPairs } from 'lodash-es';
 import React, {
   Dispatch,
   ForwardedRef,
@@ -11,22 +12,20 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from "react";
-
-import { LuiCheckboxInput } from "@linzjs/lui";
-
-import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
-import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
-import { FormError } from "../../lui/FormError";
-import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
-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 { MenuSeparatorString } from "./GridFormDropDown";
+} from 'react';
+
+import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
+import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
+import { FormError } from '../../lui/FormError';
+import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from '../../react-menu3';
+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 { MenuSeparatorString } from './GridFormDropDown';
 
 type HeaderGroupType = Record<string, MultiSelectOption[]> | undefined;
 
@@ -51,11 +50,14 @@ export interface GridFormMultiSelectSaveProps<TData extends GridBaseRow> {
 }
 
 export interface GridFormMultiSelectProps<TData extends GridBaseRow> extends CellEditorCommon {
-  className?:
-    | "GridMultiSelect-containerSmall"
-    | "GridMultiSelect-containerMedium"
-    | "GridMultiSelect-containerLarge"
-    | "GridMultiSelect-containerUnlimited"
+  className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  | 'GridMultiSelect-containerSmall'
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    | 'GridMultiSelect-containerMedium'
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    | 'GridMultiSelect-containerLarge'
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    | 'GridMultiSelect-containerUnlimited'
     | string
     | undefined;
   filtered?: boolean;
@@ -76,8 +78,8 @@ export const GridFormMultiSelect = <TData extends GridBaseRow>(props: GridFormMu
   const optionsInitialising = useRef(false);
   const firstInputSubComponent = useRef<HTMLInputElement | null>(null);
 
-  const [filter, setFilter] = useState("");
-  const [initialValues, setInitialValues] = useState("");
+  const [filter, setFilter] = useState('');
+  const [initialValues, setInitialValues] = useState('');
   const [options, setOptions] = useState<MultiSelectOption[]>();
 
   const invalid = useCallback(() => {
@@ -114,8 +116,8 @@ export const GridFormMultiSelect = <TData extends GridBaseRow>(props: GridFormMu
     if (options || optionsInitialising.current) return;
     optionsInitialising.current = true;
 
-    (async () => {
-      const optionsList = typeof props.options === "function" ? await props.options(selectedRows) : props.options;
+    void (async () => {
+      const optionsList = typeof props.options === 'function' ? await props.options(selectedRows) : props.options;
       setInitialValues(JSON.stringify(optionsList));
       setOptions(optionsList);
       optionsInitialising.current = false;
@@ -129,7 +131,7 @@ export const GridFormMultiSelect = <TData extends GridBaseRow>(props: GridFormMu
     if (!options) return undefined;
     const result = groupBy(
       options.filter((o) => textMatch(o.label, filter) && o.value != null),
-      "filter",
+      'filter',
     );
     // remove leading/trailing/duplicate dividers
     return fromPairs(
@@ -154,7 +156,7 @@ export const GridFormMultiSelect = <TData extends GridBaseRow>(props: GridFormMu
     ) as HeaderGroupType;
   }, [filter, options]);
 
-  const headers: GridFormMultiSelectGroup[] = useMemo(() => props.headers ?? [{ header: "" }], [props.headers]);
+  const headers: GridFormMultiSelectGroup[] = useMemo(() => props.headers ?? [{ header: '' }], [props.headers]);
 
   const { popoverWrapper, triggerSave } = useGridPopoverHook({
     className: props.className,
@@ -163,7 +165,7 @@ export const GridFormMultiSelect = <TData extends GridBaseRow>(props: GridFormMu
   });
 
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={!options} className={"GridFormMultiSelect-container"}>
+    <ComponentLoadingWrapper loading={!options} className={'GridFormMultiSelect-container'}>
       {options && (
         <>
           {props.filtered && (
@@ -176,12 +178,12 @@ export const GridFormMultiSelect = <TData extends GridBaseRow>(props: GridFormMu
           )}
           {headerGroups &&
             (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (
-              <MenuItem key={"noOptions"} className={"GridMultiSelect-noOptions"} disabled={true}>
-                {props.noOptionsMessage ?? "No Options"}
+              <MenuItem key={'noOptions'} className={'GridMultiSelect-noOptions'} disabled={true}>
+                {props.noOptionsMessage ?? 'No Options'}
               </MenuItem>
             )}
           {headerGroups && !isEmpty(headerGroups) && (
-            <div className={"GridFormMultiSelect-options"}>
+            <div className={'GridFormMultiSelect-options'}>
               {headers.map((header, index) => {
                 const subOptions = headerGroups[`${header.filter}`];
                 return (
@@ -280,7 +282,7 @@ const FilterInput = (props: {
 
     const filterTrimmed = filter.trim();
     if (isEmpty(filterTrimmed)) {
-      triggerSave().then();
+      void triggerSave();
       return;
     }
 
@@ -290,18 +292,18 @@ const FilterInput = (props: {
     if (preFilterOptions === JSON.stringify(options)) return;
 
     setOptions([...options]);
-    setFilter("");
+    setFilter('');
   }, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
 
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       enterHasBeenPressed.current = true;
     }
   }, []);
 
   const handleKeyUp = useCallback(
     (e: KeyboardEvent) => {
-      if (e.key === "Enter") {
+      if (e.key === 'Enter') {
         e.stopPropagation();
         e.preventDefault();
 
@@ -309,14 +311,14 @@ const FilterInput = (props: {
         else if (enterHasBeenPressed.current) {
           const filterTrimmed = filter.trim();
           if (isEmpty(filterTrimmed)) {
-            triggerSave().then();
+            void triggerSave();
             return;
           }
           onSelectFilter && addCustomFilterValue();
         }
         lastKeyWasEnter.current = true;
-      } else if (e.key === "Control") {
-        lastKeyWasEnter.current && setFilter("");
+      } else if (e.key === 'Control') {
+        lastKeyWasEnter.current && setFilter('');
         lastKeyWasEnter.current = false;
       } else {
         lastKeyWasEnter.current = false;
@@ -327,14 +329,14 @@ const FilterInput = (props: {
 
   return (
     <>
-      <FocusableItem className={"filter-item"} key={"filter"}>
+      <FocusableItem className={'filter-item'} key={'filter'}>
         {(_: any) => (
-          <div style={{ width: "100%" }} className={"GridFormMultiSelect-filter"}>
+          <div style={{ width: '100%' }} className={'GridFormMultiSelect-filter'}>
             <input
-              className={"LuiTextInput-input"}
+              className={'LuiTextInput-input'}
               type="text"
-              placeholder={filterPlaceholder ?? "Filter..."}
-              data-testid={"filteredMenu-free-text-input"}
+              placeholder={filterPlaceholder ?? 'Filter...'}
+              data-testid={'filteredMenu-free-text-input'}
               value={filter}
               data-disableenterautosave={true}
               data-allowtabtosave={true}
@@ -346,7 +348,7 @@ const FilterInput = (props: {
               <FormError
                 error={null}
                 helpText={
-                  typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText
+                  typeof filterHelpText === 'function' ? filterHelpText(filter.trim(), options) : filterHelpText
                 }
               />
             )}
@@ -378,7 +380,7 @@ const MenuRadioItem = (props: {
     <MenuItem
       onClick={(e: ClickEvent) => {
         // Global react-menu MenuItem handler handles tabs
-        if (e.key !== "Tab" && e.key !== "Enter") {
+        if (e.key !== 'Tab' && e.key !== 'Enter') {
           e.keepOpen = true;
           toggleValue(item);
         }
@@ -390,7 +392,7 @@ const MenuRadioItem = (props: {
         value={`${item.value}`}
         label={
           <>
-            {item.warning && <GridIcon icon={"ic_warning_outline"} title={item.warning} />}
+            {item.warning && <GridIcon icon={'ic_warning_outline'} title={item.warning} />}
             {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
           </>
         }
@@ -427,8 +429,8 @@ function MenuSubComponentFr(
 
   useEffect(() => {
     if (focusableRef.current) {
-      const firstInputElement = focusableRef.current.querySelectorAll("input")[0] ?? null;
-      if (typeof ref === "function") {
+      const firstInputElement = focusableRef.current.querySelectorAll('input')[0] ?? null;
+      if (typeof ref === 'function') {
         ref(firstInputElement);
       } else if (ref) {
         ref.current = firstInputElement;
@@ -437,7 +439,7 @@ function MenuSubComponentFr(
   }, [ref]);
 
   return (
-    <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`} ref={focusableRef}>
+    <FocusableItem className={'LuiDeprecatedForms'} key={`${item.value}_subcomponent`} ref={focusableRef}>
       {() => (
         <GridSubComponentContext.Provider
           value={{
@@ -454,7 +456,7 @@ function MenuSubComponentFr(
             triggerSave,
           }}
         >
-          <div className={"subComponent"}>{item.subComponent && <item.subComponent />}</div>
+          <div className={'subComponent'}>{item.subComponent && <item.subComponent />}</div>
         </GridSubComponentContext.Provider>
       )}
     </FocusableItem>

package/src/components/gridForm/GridFormMultiSelectGrid.tsx

@@ -1,20 +1,19 @@
-import { isEqual } from "lodash-es";
-import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
-
-import { LuiCheckboxInput } from "@linzjs/lui";
-
-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 { LuiCheckboxInput } from '@linzjs/lui';
+import { isEqual } from 'lodash-es';
+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';
 
 export interface MultiSelectGridOption {
   value: any;
   label?: string | ReactElement;
-  checked?: boolean | "partial";
+  checked?: boolean | 'partial';
   canSelectPartial?: boolean;
   warning?: string | undefined;
 }
@@ -96,9 +95,9 @@ export const GridFormMultiSelectGrid = <TData extends GridBaseRow>(
     if (options || optionsInitialising.current) return;
     optionsInitialising.current = true;
 
-    (async () => {
-      const optionsList = typeof props.options === "function" ? await props.options(selectedRows) : props.options;
-      setInitialValues(optionsList.map((o) => ({ ...o, label: "" })));
+    void (async () => {
+      const optionsList = typeof props.options === 'function' ? await props.options(selectedRows) : props.options;
+      setInitialValues(optionsList.map((o) => ({ ...o, label: '' })));
       setOptions(optionsList);
       optionsInitialising.current = false;
     })();
@@ -107,7 +106,7 @@ export const GridFormMultiSelectGrid = <TData extends GridBaseRow>(
   const toggleValue = useCallback(
     (item: MultiSelectGridOption) => {
       if (options) {
-        item.checked = item.checked === true && item.canSelectPartial ? "partial" : !item.checked;
+        item.checked = item.checked === true && item.canSelectPartial ? 'partial' : !item.checked;
         setOptions([...options]);
       }
     },
@@ -116,14 +115,14 @@ export const GridFormMultiSelectGrid = <TData extends GridBaseRow>(
 
   return popoverWrapper(
     <>
-      <div className={"Grid-popoverContainer"}>
+      <div className={'Grid-popoverContainer'}>
         <div
           style={{
-            display: "grid",
-            gridAutoFlow: "column",
+            display: 'grid',
+            gridAutoFlow: 'column',
             gridTemplateRows: `repeat(${props.maxRowCount ?? 10}, auto)`,
-            maxWidth: "calc(min(100vw,500px))",
-            overflowX: "auto",
+            maxWidth: 'calc(min(100vw,500px))',
+            overflowX: 'auto',
           }}
         >
           {options &&
@@ -133,7 +132,7 @@ export const GridFormMultiSelectGrid = <TData extends GridBaseRow>(
                   key={JSON.stringify(o.value)}
                   onClick={(e: ClickEvent) => {
                     // Global react-menu MenuItem handler handles tabs
-                    if (e.key !== "Tab" && e.key !== "Enter") {
+                    if (e.key !== 'Tab' && e.key !== 'Enter') {
                       e.keepOpen = true;
                       toggleValue(o);
                     }
@@ -141,12 +140,12 @@ export const GridFormMultiSelectGrid = <TData extends GridBaseRow>(
                 >
                   <LuiCheckboxInput
                     isChecked={!!o.checked}
-                    isIndeterminate={o.checked === "partial"}
+                    isIndeterminate={o.checked === 'partial'}
                     value={`${o.value}`}
                     label={
                       <>
-                        {o.warning && <GridIcon key={"$$icon$$"} icon={"ic_warning_outline"} title={o.warning} />}
-                        <span key={"$$label$$"} className={"GridMultiSelectGrid-Label"}>
+                        {o.warning && <GridIcon key={'$$icon$$'} icon={'ic_warning_outline'} title={o.warning} />}
+                        <span key={'$$label$$'} className={'GridMultiSelectGrid-Label'}>
                           {o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`)}
                         </span>
                       </>

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,22 +1,25 @@
-import { isEmpty } from "lodash-es";
-import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from "react";
-
-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 { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { GridBaseRow } from "../Grid";
-import { CellEditorCommon } from "../GridCell";
-import { useGridPopoverHook } from "../GridPopoverHook";
+import { isEmpty } from 'lodash-es';
+import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from 'react';
+
+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 { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
+import { GridBaseRow } from '../Grid';
+import { CellEditorCommon } from '../GridCell';
+import { useGridPopoverHook } from '../GridPopoverHook';
 
 export interface GridFormPopoverMenuProps<TData extends GridBaseRow> extends CellEditorCommon {
-  options: (selectedRows: TData[]) => Promise<MenuOption<TData>[]>;
-  defaultAction?: (props: { selectedRows: TData[]; menuOption: SelectedMenuOptionResult<TData> }) => Promise<void>;
+  options: (selectedRows: TData[]) => Promise<MenuOption<TData>[]> | MenuOption<TData>[];
+  defaultAction?: (props: {
+    selectedRows: TData[];
+    menuOption: SelectedMenuOptionResult<TData>;
+  }) => Promise<void> | void;
 }
 
 /** Menu configuration types **/
-const __isMenuSeparator__ = "__isMenuSeparator__";
+const __isMenuSeparator__ = '__isMenuSeparator__';
 export const PopoutMenuSeparator = Object.freeze({ label: __isMenuSeparator__ });
 
 interface MenuSeparatorType {
@@ -53,7 +56,7 @@ export const GridFormPopoverMenu = <TData extends GridBaseRow>(props: GridFormPo
   const defaultAction = useCallback(
     async (params: { selectedRows: TData[]; menuOption: SelectedMenuOptionResult<TData> }) => {
       if (props.defaultAction) await props.defaultAction(params);
-      else console.error(`No action specified for ${params.menuOption.label} menu options`);
+      else console.error(`No action specified for ${String(params.menuOption.label)} menu options`);
     },
     [props],
   );
@@ -64,8 +67,8 @@ export const GridFormPopoverMenu = <TData extends GridBaseRow>(props: GridFormPo
     optionsInitialising.current = true;
     const optionsConf = props.options ?? [];
 
-    (async () => {
-      const newOptions = typeof optionsConf == "function" ? await optionsConf(selectedRows) : optionsConf;
+    void (async () => {
+      const newOptions = typeof optionsConf === 'function' ? await optionsConf(selectedRows) : optionsConf;
       setOptions(newOptions);
       if (!props.defaultAction) {
         const anyOptionsAreMissingAction = newOptions.some((option) => !option.action);
@@ -100,7 +103,7 @@ export const GridFormPopoverMenu = <TData extends GridBaseRow>(props: GridFormPo
       } else {
         subComponentIsValid.current = true;
         setSubSelectedValue(null);
-        await updateValue(async () => actionClick(item), e.key === "Tab" ? (e.shiftKey ? -1 : 1) : 0);
+        await updateValue(async () => actionClick(item), e.key === 'Tab' ? (e.shiftKey ? -1 : 1) : 0);
       }
     },
     [actionClick, subComponentSelected, updateValue],
@@ -123,40 +126,40 @@ export const GridFormPopoverMenu = <TData extends GridBaseRow>(props: GridFormPo
   });
 
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={!options} className={"GridFormPopupMenu"}>
+    <ComponentLoadingWrapper loading={!options} className={'GridFormPopupMenu'}>
       <>
         {isEmpty(options) ? (
-          <MenuItem key={`GridPopoverMenu-empty`} className={"GridPopoverMenu-noOptions"} disabled={true}>
+          <MenuItem key={`GridPopoverMenu-empty`} className={'GridPopoverMenu-noOptions'} disabled={true}>
             No actions
           </MenuItem>
         ) : (
           options?.map((item, index) =>
-            item.label === "__isMenuSeparator__" ? (
+            item.label === '__isMenuSeparator__' ? (
               <MenuDivider key={`$$divider_${index}`} />
             ) : (
               !item.hidden && (
-                <Fragment key={`${item.label}`}>
+                <Fragment key={`${String(item.label)}`}>
                   {item.subMenu ? (
                     <SubMenu
-                      key={`${item.label}`}
+                      key={`${String(item.label)}`}
                       disabled={!!item.disabled}
                       label={item.label as string}
-                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                      title={item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : ''}
                     >
                       <item.subMenu />
                     </SubMenu>
                   ) : (
                     <MenuItem
-                      key={`${item.label}`}
-                      onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
+                      key={`${String(item.label)}`}
+                      onClick={(e: ClickEvent) => void onMenuItemClick(e, item)}
                       disabled={!!item.disabled}
-                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                      title={item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : ''}
                     >
                       {item.label as ReactElement | string}
                     </MenuItem>
                   )}
                   {item.subComponent && subComponentSelected === item && (
-                    <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                    <FocusableItem className={'LuiDeprecatedForms'} key={`${String(item.label)}_subcomponent`}>
                       {() => (
                         <GridSubComponentContext.Provider
                           value={{
@@ -172,7 +175,7 @@ export const GridFormPopoverMenu = <TData extends GridBaseRow>(props: GridFormPo
                             triggerSave,
                           }}
                         >
-                          <div className={"subComponent"}>{item.subComponent && <item.subComponent />}</div>
+                          <div className={'subComponent'}>{item.subComponent && <item.subComponent />}</div>
                         </GridSubComponentContext.Provider>
                       )}
                     </FocusableItem>

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -1,11 +1,11 @@
-import clsx from "clsx";
-import { ReactElement, useCallback, useContext, useEffect } from "react";
+import clsx from 'clsx';
+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 { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
+import { TextAreaInput } from '../../lui/TextAreaInput';
+import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
+import { GridBaseRow } from '../Grid';
+import { CellEditorCommon } from '../GridCell';
 
 export interface GridSubComponentTextAreaProps<TData extends GridBaseRow>
   extends TextInputValidatorProps<TData>,
@@ -22,7 +22,7 @@ export const GridFormSubComponentTextArea = <TData extends GridBaseRow>(
 ): ReactElement => {
   const { value, data, setValue, setValid, context } = useContext(GridSubComponentContext);
 
-  const helpText = props.helpText ?? "Press tab to save";
+  const helpText = props.helpText ?? 'Press tab to save';
 
   // If is not initialised yet as it's just been created then set the default value
   useEffect(() => {
@@ -36,9 +36,9 @@ export const GridFormSubComponentTextArea = <TData extends GridBaseRow>(
   }, [setValid, invalid, value]);
 
   return (
-    <div className={clsx("FreeTextInput", props.className)}>
+    <div className={clsx('FreeTextInput', props.className)}>
       <TextAreaInput
-        className={"free-text-input"}
+        className={'free-text-input'}
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -1,10 +1,10 @@
-import { ReactElement, useCallback, useContext, useEffect } from "react";
+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 { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
+import { TextInputFormatted } from '../../lui/TextInputFormatted';
+import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
+import { GridBaseRow } from '../Grid';
+import { CellEditorCommon } from '../GridCell';
 
 export interface GridFormSubComponentTextInputProps<TData extends GridBaseRow>
   extends TextInputValidatorProps<TData>,
@@ -20,7 +20,7 @@ export const GridFormSubComponentTextInput = <TData extends GridBaseRow>(
 ): ReactElement => {
   const { value, setValue, setValid, data, context } = useContext(GridSubComponentContext);
 
-  const helpText = props.helpText ?? "Press enter or tab to save";
+  const helpText = props.helpText ?? 'Press enter or tab to save';
 
   // If is not initialised yet as it's just been created then set the default value
   useEffect(() => {
@@ -40,7 +40,7 @@ export const GridFormSubComponentTextInput = <TData extends GridBaseRow>(
       onChange={(e) => setValue(e.target.value)}
       helpText={helpText}
       placeholder={props.placeholder}
-      style={{ width: "100%" }}
+      style={{ width: '100%' }}
       allowTabToSave={true}
     />
   );

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,11 +1,11 @@
-import { ReactElement, useCallback, useMemo, useState } from "react";
+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 { 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';
 
 export interface GridFormTextAreaProps<TData extends GridBaseRow>
   extends TextInputValidatorProps<TData>,
@@ -19,10 +19,10 @@ export interface GridFormTextAreaProps<TData extends GridBaseRow>
 export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextAreaProps<TData>): ReactElement => {
   const { field, value: initialVale, data } = useGridPopoverContext<TData>();
 
-  const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);
+  const initValue = useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
-  const helpText = props.helpText ?? "Press tab to save";
+  const helpText = props.helpText ?? 'Press tab to save';
 
   const invalid = useCallback(() => TextInputValidator(props, value, data, {}), [props, value, data]);
 
@@ -51,12 +51,12 @@ export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextA
   });
 
   return popoverWrapper(
-    <div className={"subComponent"} style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
+    <div className={'subComponent'} style={{ display: 'flex', flexDirection: 'row', width: props.width ?? 240 }}>
       <TextAreaInput
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        placeholder={props.placeholder ?? "Type here"}
+        placeholder={props.placeholder ?? 'Type here'}
         helpText={helpText}
       />
     </div>,