@linzjs/step-ag-grid 23.0.1 → 24.0.0

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -1,13 +1,12 @@
-import { isEmpty } from "lodash-es";
-import { ReactElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { LuiCheckboxInput, LuiIcon } from '@linzjs/lui';
+import { ColDef } from 'ag-grid-community';
+import { isEmpty } from 'lodash-es';
+import { ReactElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
-import { LuiCheckboxInput, LuiIcon } from "@linzjs/lui";
-
-import { GridContext } from "../../contexts/GridContext";
-import { Menu, MenuDivider, MenuItem } from "../../react-menu3";
-import { ClickEvent } from "../../react-menu3/types";
-import { GridFilterHeaderIconButton } from "./GridFilterHeaderIconButton";
-import { ColDef } from "ag-grid-community";
+import { GridContext } from '../../contexts/GridContext';
+import { Menu, MenuDivider, MenuItem } from '../../react-menu3';
+import { ClickEvent } from '../../react-menu3/types';
+import { GridFilterHeaderIconButton } from './GridFilterHeaderIconButton';
 
 export interface GridFilterColumnsToggleProps {
   saveState?: boolean;
@@ -21,13 +20,13 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
     () =>
       isEmpty(getColumnIds())
         ? null // Grid hasn't been initialised yet
-        : "stepAgGrid_invisibleColumnIds_" + getColumnIds().join("_"),
+        : 'stepAgGrid_invisibleColumnIds_' + getColumnIds().join('_'),
     [getColumnIds],
   );
 
   // infer the invisible ids from colDefs
   const resetColumns = useCallback(
-    () => setInvisibleColumnIds(getColumnIds("initialHide")),
+    () => setInvisibleColumnIds(getColumnIds('initialHide')),
     [getColumnIds, setInvisibleColumnIds],
   );
 
@@ -40,10 +39,10 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
         if (!stored) {
           resetColumns();
         } else {
-          const invisibleIds = JSON.parse(stored ?? "[]");
+          const invisibleIds = JSON.parse(stored ?? '[]');
           if (!Array.isArray(invisibleIds)) {
             console.error(`stored invisible ids not an array: ${stored}`);
-          } else if (!invisibleIds.every((id) => typeof id === "string")) {
+          } else if (!invisibleIds.every((id) => typeof id === 'string')) {
             console.error(`stored invisible ids not strings: ${stored}`);
           } else {
             invisibleIds && setInvisibleColumnIds(invisibleIds);
@@ -81,30 +80,30 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
 
   return (
     <Menu
-      menuButton={<GridFilterHeaderIconButton icon={"ic_columns"} title={"Column visibility"} />}
-      menuClassName={"step-ag-grid-react-menu"}
+      menuButton={<GridFilterHeaderIconButton icon={'ic_columns'} title={'Column visibility'} />}
+      menuClassName={'step-ag-grid-react-menu'}
       portal={true}
       unmountOnClose={true}
     >
-      <div className={"GridFilterColumnsToggle-container"}>
-        {getColumns("headerName").map((col) => (
+      <div className={'GridFilterColumnsToggle-container'}>
+        {getColumns('headerName').map((col) => (
           <MenuItem
-            key={col.colId ?? "no_col_id"}
+            key={col.colId ?? 'no_col_id'}
             disabled={isNonManageableColumn(col)}
             onClick={(e: ClickEvent) => {
               // Global react-menu MenuItem handler handles tabs
-              if (e.key !== "Tab") {
+              if (e.key !== 'Tab') {
                 e.keepOpen = true;
-                if (e.key !== "Enter") {
+                if (e.key !== 'Enter') {
                   toggleColumn(col.colId);
                 }
               }
             }}
           >
             <LuiCheckboxInput
-              isChecked={!!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? "")}
+              isChecked={!!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? '')}
               value={`${col.colId}`}
-              label={col.headerName ?? ""}
+              label={col.headerName ?? ''}
               isDisabled={isNonManageableColumn(col)}
               inputProps={{
                 onClick: (e) => {
@@ -122,16 +121,16 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
       </div>
       <MenuDivider key={`$$divider_reset_columns`} />
       <MenuItem
-        key={"$$reset_columns"}
+        key={'$$reset_columns'}
         onClick={(e: ClickEvent) => {
           // Global react-menu MenuItem handler handles tabs
-          if (e.key !== "Tab") {
-            e.keepOpen = e.key !== "Enter";
+          if (e.key !== 'Tab') {
+            e.keepOpen = e.key !== 'Enter';
             resetColumns();
           }
         }}
       >
-        <LuiIcon name={"ic_regenerate"} alt={"Reset columns"} size={"md"} className={"MenuItem-icon"} />
+        <LuiIcon name={'ic_regenerate'} alt={'Reset columns'} size={'md'} className={'MenuItem-icon'} />
         Reset columns
       </MenuItem>
     </Menu>

package/src/components/gridFilter/GridFilterDownloadCsvButton.tsx

@@ -1,12 +1,11 @@
-import { CsvExportParams } from "ag-grid-community";
-import { delay } from "lodash-es";
-import { useContext } from "react";
+import { LuiMiniSpinner } from '@linzjs/lui';
+import { CsvExportParams } from 'ag-grid-community';
+import { delay } from 'lodash-es';
+import { useContext } from 'react';
 
-import { LuiMiniSpinner } from "@linzjs/lui";
-
-import { GridContext } from "../../contexts/GridContext";
-import { useStateDeferred } from "../../lui/stateDeferredHook";
-import { GridFilterHeaderIconButton } from "./GridFilterHeaderIconButton";
+import { GridContext } from '../../contexts/GridContext';
+import { useStateDeferred } from '../../lui/stateDeferredHook';
+import { GridFilterHeaderIconButton } from './GridFilterHeaderIconButton';
 
 export const GridFilterDownloadCsvButton = (csvExportParams: CsvExportParams) => {
   const { downloadCsv } = useContext(GridContext);
@@ -27,15 +26,15 @@ export const GridFilterDownloadCsvButton = (csvExportParams: CsvExportParams) =>
     <LuiMiniSpinner
       size={22}
       divProps={{
-        role: "status",
-        ["aria-label"]: "Downloading...",
-        style: { width: 42, display: "flex", justifyContent: "center" },
+        role: 'status',
+        ['aria-label']: 'Downloading...',
+        style: { width: 42, display: 'flex', justifyContent: 'center' },
       }}
     />
   ) : (
     <GridFilterHeaderIconButton
-      icon={"ic_csv_file"}
-      title={"Download CSV"}
+      icon={'ic_csv_file'}
+      title={'Download CSV'}
       onClick={handleDownloadClick}
       disabled={downloading}
     />

package/src/components/gridFilter/GridFilterHeaderIconButton.tsx

@@ -1,7 +1,6 @@
-import { ButtonHTMLAttributes, MouseEvent, forwardRef } from "react";
-
-import { LuiButton, LuiIcon } from "@linzjs/lui";
-import { IconName, IconSize } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { LuiButton, LuiIcon } from '@linzjs/lui';
+import { IconName, IconSize } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import { ButtonHTMLAttributes, forwardRef, MouseEvent } from 'react';
 
 export interface GridFilterHeaderIconButtonProps {
   icon: IconName;
@@ -13,20 +12,20 @@ export interface GridFilterHeaderIconButtonProps {
 }
 
 export const GridFilterHeaderIconButton = forwardRef<HTMLButtonElement, GridFilterHeaderIconButtonProps>(
-  function columnsButton({ icon, title, onClick, buttonProps, disabled = false, size = "md" }, ref) {
+  function columnsButton({ icon, title, onClick, buttonProps, disabled = false, size = 'md' }, ref) {
     return (
       <LuiButton
         {...buttonProps}
-        type={"button"}
-        level={"tertiary"}
-        className={"lui-button-icon-only"}
+        type={'button'}
+        level={'tertiary'}
+        className={'lui-button-icon-only'}
         ref={ref}
-        buttonProps={{ "aria-label": title }}
+        buttonProps={{ 'aria-label': title }}
         title={title}
         onClick={onClick}
         disabled={disabled}
       >
-        <LuiIcon name={icon} alt={"Menu"} size={size} />
+        <LuiIcon name={icon} alt={'Menu'} size={size} />
       </LuiButton>
     );
   },

package/src/components/gridFilter/GridFilterQuick.tsx

@@ -1,7 +1,7 @@
-import { LuiIcon } from "@linzjs/lui";
-import { useContext, useEffect, useState } from "react";
+import { LuiIcon } from '@linzjs/lui';
+import { useContext, useEffect, useState } from 'react';
 
-import { GridContext } from "../../contexts/GridContext";
+import { GridContext } from '../../contexts/GridContext';
 
 export interface GridFilterQuickProps {
   quickFilterPlaceholder?: string;
@@ -10,7 +10,7 @@ export interface GridFilterQuickProps {
 
 export const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFilterQuickProps) => {
   const { setQuickFilter } = useContext(GridContext);
-  const [quickFilterValue, setQuickFilterValue] = useState(defaultValue ?? "");
+  const [quickFilterValue, setQuickFilterValue] = useState(defaultValue ?? '');
 
   useEffect(() => {
     setQuickFilter(quickFilterValue);
@@ -19,13 +19,13 @@ export const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFi
   return (
     <div className="GridFilterQuick-container">
       <div className="GridFilterQuick-icon">
-        <LuiIcon name={"ic_search"} alt={"Search"} size={"md"} />
+        <LuiIcon name={'ic_search'} alt={'Search'} size={'md'} />
       </div>
       <input
         aria-label="Search"
         className="GridFilterQuick-input"
         type="text"
-        placeholder={quickFilterPlaceholder ?? "Search"}
+        placeholder={quickFilterPlaceholder ?? 'Search'}
         value={quickFilterValue}
         onChange={(event) => {
           setQuickFilterValue(event.target.value);

package/src/components/gridFilter/GridFilters.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 
 export const GridFilters = ({ children }: PropsWithChildren) => (
   <div className="Grid-container-filters">{children}</div>

package/src/components/gridFilter/index.ts

@@ -1,7 +1,7 @@
-export * from "./GridFilterHeaderIconButton";
-export * from "./GridFilterColumnsToggle";
-export * from "./GridFilterButtons";
-export * from "./GridFilterQuick";
-export * from "./GridFilters";
-export * from "./GridFilterDownloadCsvButton";
-export * from "./useGridFilter";
+export * from './GridFilterButtons';
+export * from './GridFilterColumnsToggle';
+export * from './GridFilterDownloadCsvButton';
+export * from './GridFilterHeaderIconButton';
+export * from './GridFilterQuick';
+export * from './GridFilters';
+export * from './useGridFilter';

package/src/components/gridFilter/useGridFilter.ts

@@ -1,7 +1,7 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect } from 'react';
 
-import { GridContext, GridFilterExternal } from "../../contexts/GridContext";
-import { GridBaseRow } from "../Grid";
+import { GridContext, GridFilterExternal } from '../../contexts/GridContext';
+import { GridBaseRow } from '../Grid';
 
 export const useGridFilter = <TData extends GridBaseRow>(filter: GridFilterExternal<TData> | undefined) => {
   const { addExternalFilter, removeExternalFilter } = useContext(GridContext);

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,23 +1,23 @@
-import debounce from "debounce-promise";
-import { isEmpty } from "lodash-es";
-import { Fragment, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import debounce from 'debounce-promise';
+import { isEmpty } from 'lodash-es';
+import { Fragment, ReactElement, useCallback, useEffect, useMemo, useRef, useState } 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 { isNotEmpty } from "../../utils/util";
-import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { GridBaseRow } from "../Grid";
-import { CellEditorCommon } from "../GridCell";
-import { useGridPopoverHook } from "../GridPopoverHook";
+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 { isNotEmpty } from '../../utils/util';
+import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
+import { GridBaseRow } from '../Grid';
+import { CellEditorCommon } from '../GridCell';
+import { useGridPopoverHook } from '../GridPopoverHook';
 
 export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TValue> {
   // Note the row that was clicked on will be first
   selectedRows: TData[];
-  selectedRowIds: TData["id"][];
+  selectedRowIds: TData['id'][];
   value: TValue;
   subComponentValue?: any;
 }
@@ -29,10 +29,10 @@ interface FinalSelectOption {
   subComponent?: (props: any, ref: any) => any;
 }
 
-export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
+export const MenuSeparatorString = '_____MENU_SEPARATOR_____';
 export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 
-export const MenuHeaderString = "_____MENU_HEADER_____";
+export const MenuHeaderString = '_____MENU_HEADER_____';
 export const MenuHeaderItem = (title: string) => {
   return { label: title, value: MenuHeaderString };
 };
@@ -41,22 +41,26 @@ export type SelectOption = null | string | FinalSelectOption;
 
 export interface GridFormDropDownProps<TData extends GridBaseRow, TValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
-  className?:
-    | "GridPopoverEditDropDown-containerSmall"
-    | "GridPopoverEditDropDown-containerMedium"
-    | "GridPopoverEditDropDown-containerLarge"
-    | "GridPopoverEditDropDown-containerUnlimited"
-    | "GridPopoverEditDropDown-containerAutoWidth"
+  className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  | 'GridPopoverEditDropDown-containerSmall'
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    | 'GridPopoverEditDropDown-containerMedium'
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    | 'GridPopoverEditDropDown-containerLarge'
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    | 'GridPopoverEditDropDown-containerUnlimited'
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    | 'GridPopoverEditDropDown-containerAutoWidth'
     | string
     | undefined;
   // local means the use the local filter, otherwise it's expected options will be passed a function that takes a filter
-  filtered?: "local" | "reload";
+  filtered?: 'local' | 'reload';
   filterDefaultValue?: string;
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
-  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void>;
-  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void>;
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
   options:
     | SelectOption[]
     | ((selectedRows: TData[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
@@ -64,14 +68,14 @@ export interface GridFormDropDownProps<TData extends GridBaseRow, TValue> extend
 }
 
 const fieldToString = (field: any) => {
-  return typeof field == "symbol" ? field.toString() : `${field}`;
+  return typeof field === 'symbol' ? field.toString() : `${field}`;
 };
 
 export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridFormDropDownProps<TData, TValue>) => {
   const { selectedRows, field, data } = useGridPopoverContext<TData>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-  const [filter, setFilter] = useState(props.filterDefaultValue ?? "");
+  const [filter, setFilter] = useState(props.filterDefaultValue ?? '');
   const [filteredValues, setFilteredValues] = useState<any[]>();
   const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
   const subComponentIsValid = useRef(false);
@@ -83,7 +87,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
   const selectItemHandler = useCallback(
     async (value: any, subComponentValue?: any): Promise<boolean> => {
       const hasChanged =
-        selectedRows.some((row) => row[field as keyof TData] !== value) ||
+        selectedRows.some((row) => row[field] !== value) ||
         (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
       if (hasChanged) {
         if (props.onSelectedItem) {
@@ -94,7 +98,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
             subComponentValue,
           });
         } else {
-          selectedRows.forEach((row) => (row[field] = value as any));
+          selectedRows.forEach((row) => (row[field] = value));
         }
       }
       return true;
@@ -107,13 +111,13 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
     if (options) return;
     let optionsConf = props.options;
 
-    (async () => {
-      if (typeof optionsConf == "function") {
+    void (async () => {
+      if (typeof optionsConf === 'function') {
         optionsConf = await optionsConf(selectedRows, filter);
       }
       if (optionsConf !== undefined) {
         const optionsList = optionsConf?.map((item) =>
-          item == null || typeof item == "string"
+          item == null || typeof item === 'string'
             ? ({
                 value: item,
                 label: item,
@@ -129,16 +133,16 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
 
   // Local filtering.
   useEffect(() => {
-    if (props.filtered == "local") {
+    if (props.filtered == 'local') {
       if (options == null) return;
       setFilteredValues(
         options
           .map((option) => {
-            if (option.label != null && typeof option.label !== "string") {
-              console.error("Cannot filter non-string labels", option);
+            if (option.label != null && typeof option.label !== 'string') {
+              console.error('Cannot filter non-string labels', option);
               return undefined;
             }
-            return textMatch((option.label as string) || "", filter) ? option : undefined;
+            return textMatch((option.label as string) || '', filter) ? option : undefined;
           })
           .filter((r) => r !== undefined),
       );
@@ -157,9 +161,9 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
 
   // Reload filtering.
   useEffect(() => {
-    if (previousFilter.current != filter && props.filtered == "reload") {
+    if (previousFilter.current != filter && props.filtered == 'reload') {
       previousFilter.current = filter;
-      reSearchOnFilterChange().then();
+      void reSearchOnFilterChange();
     }
   }, [filter, props, reSearchOnFilterChange]);
 
@@ -202,9 +206,9 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
   return popoverWrapper(
     <>
       {props.filtered && (
-        <div className={"GridFormDropDown-filter"}>
+        <div className={'GridFormDropDown-filter'}>
           <FocusableItem
-            className={"filter-item"}
+            className={'filter-item'}
             onFocus={() => {
               setSelectedItem(null);
               setSubSelectedValue(null);
@@ -212,13 +216,13 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
             }}
           >
             {({ ref }: any) => (
-              <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+              <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
                 <input
-                  className={"LuiTextInput-input"}
+                  className={'LuiTextInput-input'}
                   ref={ref}
                   type="text"
-                  placeholder={props.filterPlaceholder ?? "Filter..."}
-                  data-testid={"filteredMenu-free-text-input"}
+                  placeholder={props.filterPlaceholder ?? 'Filter...'}
+                  data-testid={'filteredMenu-free-text-input'}
                   defaultValue={filter}
                   data-allowtabtosave={true}
                   data-disableenterautosave={
@@ -236,15 +240,15 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
           <MenuDivider key={`$$divider_filter`} />
         </div>
       )}
-      <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
+      <ComponentLoadingWrapper loading={!options} className={'GridFormDropDown-options'}>
         <>
           {options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (
             <MenuItem
               key={`${fieldToString(field)}-empty`}
-              className={"GridPopoverEditDropDown-noOptions"}
+              className={'GridPopoverEditDropDown-noOptions'}
               disabled={true}
             >
-              {props.noOptionsMessage ?? "No Options"}
+              {props.noOptionsMessage ?? 'No Options'}
             </MenuItem>
           )}
           {options?.map((item: FinalSelectOption, index) => {
@@ -268,7 +272,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
                     <MenuItem
                       key={`${fieldToString(field)}-${index}`}
                       disabled={!!item.disabled}
-                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                      title={item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : ''}
                       value={item.value}
                       onFocus={() => {
                         if (selectedItem !== item) {
@@ -285,11 +289,11 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
                       }}
                     >
                       {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                      {item.subComponent ? "..." : ""}
+                      {item.subComponent ? '...' : ''}
                     </MenuItem>
 
                     {item.subComponent && selectedItem === item && (
-                      <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                      <FocusableItem className={'LuiDeprecatedForms'} key={`${String(item.label)}_subcomponent`}>
                         {() => (
                           <GridSubComponentContext.Provider
                             value={{
@@ -312,7 +316,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
                             }}
                           >
                             {item.subComponent && (
-                              <div className={"subComponent"}>
+                              <div className={'subComponent'}>
                                 <item.subComponent />
                               </div>
                             )}

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -1,11 +1,11 @@
-import { useCallback, useMemo, useState } from "react";
+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 { 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';
 
 export interface GridFormEditBearingProps<TData extends GridBaseRow> extends CellEditorCommon {
   formatValue?: (value: any) => string;
@@ -19,7 +19,7 @@ export const GridFormEditBearing = <TData extends GridBaseRow>(props: GridFormEd
 
   // This clears out any scientific precision
   const defaultValue = useMemo(
-    () => (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()),
+    () => (initialValue == null ? '' : parseFloat(parseFloat(initialValue).toFixed(10)).toString()),
     [initialValue],
   );
 
@@ -39,7 +39,7 @@ export const GridFormEditBearing = <TData extends GridBaseRow>(props: GridFormEd
         return await props.onSave({ selectedRows, value: parsedValue });
       } else {
         if (field == null) {
-          console.error("field is not defined in ColDef");
+          console.error('field is not defined in ColDef');
         } else {
           selectedRows.forEach((row) => {
             row[field] = parsedValue as any;
@@ -57,7 +57,7 @@ export const GridFormEditBearing = <TData extends GridBaseRow>(props: GridFormEd
   });
 
   return popoverWrapper(
-    <div className={"GridFormEditBearing-input"}>
+    <div className={'GridFormEditBearing-input'}>
       <TextInputFormatted
         value={defaultValue}
         onChange={(e) => {
@@ -67,11 +67,11 @@ export const GridFormEditBearing = <TData extends GridBaseRow>(props: GridFormEd
         placeholder={props.placeHolder}
         formatted={
           bearingStringValidator(value, props.range) || !props.formatValue
-            ? "?"
+            ? '?'
             : props.formatValue(bearingNumberParser(value))
         }
         error={bearingStringValidator(value, props.range)}
-        helpText={"Press enter or tab to save"}
+        helpText={'Press enter or tab to save'}
       />
     </div>,
   );

package/src/components/gridForm/GridFormMessage.tsx

@@ -1,11 +1,11 @@
-import clsx from "clsx";
-import { ReactElement, useEffect, useState } from "react";
+import clsx from 'clsx';
+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 { useGridPopoverContext } from '../../contexts/GridPopoverContext';
+import { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';
+import { GridBaseRow } from '../Grid';
+import { CellEditorCommon } from '../GridCell';
+import { useGridPopoverHook } from '../GridPopoverHook';
 
 export interface GridFormMessageProps<TData extends GridBaseRow> extends CellEditorCommon {
   message: (selectedRows: TData[]) => Promise<string | ReactElement> | string | ReactElement;
@@ -18,13 +18,13 @@ export const GridFormMessage = <TData extends GridBaseRow>(props: GridFormMessag
   const { popoverWrapper } = useGridPopoverHook({ className: props.className });
 
   useEffect(() => {
-    (async () => {
+    void (async () => {
       setMessage(await props.message(selectedRows));
-    })().then();
+    })();
   }, [props, selectedRows]);
 
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={message === null} className={clsx("GridFormMessage-container", props.className)}>
+    <ComponentLoadingWrapper loading={message === null} className={clsx('GridFormMessage-container', props.className)}>
       <>{message}</>
     </ComponentLoadingWrapper>,
   );