@linzjs/step-ag-grid 5.0.1 → 6.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridPopoverHook.tsx

@@ -24,7 +24,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
 
   const triggerSave = useCallback(
     async (reason?: string) => {
-      if (reason == "cancel") {
+      if (reason == CloseReason.CANCEL) {
         stopEditing();
         return;
       }
@@ -64,7 +64,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               menuClassName={"step-ag-grid-react-menu"}
               onClose={(event: MenuCloseEvent) => {
                 // Prevent menu from closing when modals are invoked
-                if (event.reason === "blur") return;
+                if (event.reason === CloseReason.BLUR) return;
                 triggerSave(event.reason).then();
               }}
               viewScroll={"auto"}

package/src/components/gridForm/GridFormDropDown.tsx

@@ -13,15 +13,15 @@ import { GridSubComponentContext } from "contexts/GridSubComponentContext";
 import { ClickEvent, MenuInstance } from "../../react-menu3/types";
 import { CloseReason } from "../../react-menu3/utils";
 
-export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
+export interface GridPopoutEditDropDownSelectedItem<RowType> {
   // Note the row that was clicked on will be first
   selectedRows: RowType[];
-  value: ValueType;
-  subComponentValue?: ValueType;
+  value: any;
+  subComponentValue?: any;
 }
 
-interface FinalSelectOption<ValueType> {
-  value: ValueType;
+interface FinalSelectOption {
+  value: any;
   label?: JSX.Element | string;
   disabled?: boolean | string;
   subComponent?: (props: any, ref: any) => any;
@@ -35,9 +35,9 @@ export const MenuHeaderItem = (title: string) => {
   return { label: title, value: MenuHeaderString };
 };
 
-export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
+export type SelectOption = null | string | FinalSelectOption;
 
-export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
+export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?:
     | "GridPopoverEditDropDown-containerSmall"
@@ -49,11 +49,9 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
   // local means the filter won't change if it's reloaded, reload means it does change
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
-  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
-  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType, string>) => Promise<void>;
-  options:
-    | SelectOption<ValueType>[]
-    | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
+  options: SelectOption[] | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[]> | SelectOption[]);
   optionsRequestCancel?: () => void;
 }
 
@@ -61,41 +59,44 @@ const fieldToString = (field: any) => {
   return typeof field == "symbol" ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
-  props: GridFormPopoutDropDownProps<RowType, ValueType>,
-) => {
+export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPopoutDropDownProps<RowType>) => {
   const { selectedRows, field, updateValue, data } = useGridPopoverContext<RowType>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-  const hasSubmitted = useRef(false);
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
-  const [options, setOptions] = useState<FinalSelectOption<ValueType>[] | null>(null);
+  const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
   const subComponentIsValid = useRef(false);
   const [subSelectedValue, setSubSelectedValue] = useState<any>();
-  const [selectedSubComponent, setSelectedSubComponent] = useState<FinalSelectOption<any> | null>(null);
+  const [selectedSubComponent, setSelectedSubComponent] = useState<FinalSelectOption | null>(null);
 
   const selectItemHandler = useCallback(
-    async (value: ValueType, subComponentValue?: ValueType, reason?: string): Promise<boolean> => {
-      if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current)) return false;
-      hasSubmitted.current = true;
+    async (value: any, subComponentValue?: any): Promise<boolean> => {
+      const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
+      if (hasChanged) {
+        if (props.onSelectedItem) {
+          await props.onSelectedItem({ selectedRows, value, subComponentValue });
+        } else {
+          selectedRows.forEach((row) => (row[field] = value as any));
+        }
+      }
+      return true;
+    },
+    [field, props, selectedRows],
+  );
+
+  const clickItemHandler = useCallback(
+    async (value: any, subComponentValue?: any, reason?: string): Promise<boolean> => {
+      if (subComponentValue !== undefined && !subComponentIsValid.current) return false;
       return updateValue(
-        async (selectedRows) => {
-          const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
-          if (hasChanged) {
-            if (props.onSelectedItem) {
-              await props.onSelectedItem({ selectedRows, value, subComponentValue });
-            } else {
-              selectedRows.forEach((row) => (row[field as keyof RowType] = value));
-            }
-          }
-          return true;
+        async () => {
+          return await selectItemHandler(value, subComponentValue);
         },
         reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
       );
     },
-    [field, props, updateValue],
+    [selectItemHandler, updateValue],
   );
 
   const selectFilterHandler = useCallback(
@@ -118,16 +119,15 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
         optionsConf = await optionsConf(selectedRows, filter);
       }
 
-      const optionsList = optionsConf?.map((item) => {
-        if (item == null || typeof item == "string" || typeof item == "number") {
-          item = {
-            value: item as unknown as ValueType,
-            label: item,
-            disabled: false,
-          } as unknown as FinalSelectOption<ValueType>;
-        }
-        return item;
-      }) as any as FinalSelectOption<ValueType>[];
+      const optionsList = optionsConf?.map((item) =>
+        item == null || typeof item == "string"
+          ? ({
+              value: item,
+              label: item,
+              disabled: false,
+            } as FinalSelectOption)
+          : item,
+      );
 
       if (props.filtered) {
         // This is needed otherwise when filter input is rendered and sets autofocus
@@ -177,6 +177,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
     }
   }, [filter, props, researchOnFilterChange]);
 
+  /**
+   * Saves are wrapped in updateValue and triggered by blur events
+   */
   const save = useCallback(async () => {
     if (!options) return true;
     const activeOptions = options.filter((option) => !filteredValues.includes(option.value));
@@ -188,7 +191,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
       // Handler for sub-selected value
       if (!selectedSubComponent) return true;
       if (selectedSubComponent.subComponent && !subComponentIsValid.current) return false;
-      await selectItemHandler(selectedSubComponent.value as ValueType, subSelectedValue);
+      await selectItemHandler(selectedSubComponent.value, subSelectedValue);
     }
     return true;
   }, [
@@ -237,7 +240,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
           {options && options.length == filteredValues?.length && (
             <MenuItem key={`${fieldToString(field)}-empty`}>[Empty]</MenuItem>
           )}
-          {options?.map((item: FinalSelectOption<ValueType | string>, index) =>
+          {options?.map((item: FinalSelectOption, index) =>
             item.value === MenuSeparatorString ? (
               <MenuDivider key={`$$divider_${index}`} />
             ) : item.value === MenuHeaderString ? (
@@ -261,8 +264,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                       }
                       e.keepOpen = true;
                     } else {
-                      selectItemHandler(
-                        item.value as ValueType,
+                      clickItemHandler(
+                        item.value,
                         undefined,
                         e.key === "Tab"
                           ? e.shiftKey

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -7,7 +7,6 @@ import { CellEditorCommon } from "../GridCell";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { ClickEvent } from "../../react-menu3/types";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
-import { CloseReason } from "../../react-menu3/utils";
 
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
@@ -43,8 +42,6 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   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>();
@@ -79,19 +76,12 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   }, [options, props.defaultAction, props.options, selectedRows]);
 
   const actionClick = useCallback(
-    async (menuOption: MenuOption<RowType>, reason: string) => {
-      actionProcessing.current = true;
-      return updateValue(
-        async () => {
-          const result = { ...menuOption, subValue: subSelectedValue };
-          await (menuOption.action ?? defaultAction)(selectedRows, result);
-          actionProcessing.current = false;
-          return true;
-        },
-        reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
-      );
+    async (menuOption: MenuOption<RowType>) => {
+      const result = { ...menuOption, subValue: subSelectedValue };
+      await (menuOption.action ?? defaultAction)(selectedRows, result);
+      return true;
     },
-    [defaultAction, selectedRows, subSelectedValue, updateValue],
+    [defaultAction, selectedRows, subSelectedValue],
   );
 
   const onMenuItemClick = useCallback(
@@ -102,23 +92,19 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
         setSubComponentSelected(subComponentSelected === item ? null : item);
         e.keepOpen = true;
       } else {
-        await actionClick(
-          item,
-          e.key === "Tab" ? (e.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD) : CloseReason.CLICK,
-        ).then();
+        await updateValue(async () => actionClick(item), e.key === "Tab" ? (e.shiftKey ? -1 : 1) : 0);
       }
     },
-    [actionClick, subComponentSelected],
+    [actionClick, subComponentSelected, updateValue],
   );
 
   const save = useCallback(async () => {
     // if a subcomponent is open we assume that it's meant to be saved.
-    if (!actionProcessing.current && subComponentSelected) {
+    if (subComponentSelected) {
       if (!subComponentIsValid.current) return false;
-      await actionClick(subComponentSelected, "click");
-      return true;
+      await actionClick(subComponentSelected);
     }
-    // Otherwise assume it's a cancel, either way we close the menu
+    // Close the menu
     return true;
   }, [actionClick, subComponentSelected]);
 

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -3,9 +3,9 @@ import { GridBaseRow } from "../Grid";
 import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
-export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
+export const GridPopoverEditDropDown = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType, ValueType>>,
+  props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType>>,
 ): ColDefT<RowType> =>
   GridCell(colDef, {
     editor: GridFormDropDown,
@@ -13,6 +13,6 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
     editorParams: {
       // Defaults to medium size container
       className: "GridPopoverEditDropDown-containerMedium",
-      ...(props.editorParams as GridFormPopoutDropDownProps<RowType, ValueType>),
+      ...(props.editorParams as GridFormPopoutDropDownProps<RowType>),
     },
   });

package/src/contexts/GridContext.tsx

@@ -23,9 +23,9 @@ export interface GridContextType {
     props: { selectedRows: GridBaseRow[]; field?: string },
     fnUpdate: (selectedRows: any[]) => Promise<boolean>,
     setSaving?: (saving: boolean) => void,
+    tabDirection?: 1 | 0 | -1,
   ) => Promise<boolean>;
   redrawRows: (rowNodes?: RowNode[]) => void;
-  selectNextCell: (tabDirection: -1 | 0 | 1) => void;
 }
 
 export const GridContext = createContext<GridContextType>({
@@ -88,7 +88,4 @@ export const GridContext = createContext<GridContextType>({
   redrawRows: () => {
     console.error("no context provider for redrawRows");
   },
-  selectNextCell: () => {
-    console.error("no context provider for selectNextCell");
-  },
 });

package/src/contexts/GridContextProvider.tsx

@@ -234,10 +234,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     props: { selectedRows: GridBaseRow[]; field?: string },
     fnUpdate: (selectedRows: any[]) => Promise<boolean>,
     setSaving?: (saving: boolean) => void,
+    tabDirection?: 1 | 0 | -1,
   ): Promise<boolean> => {
     setSaving && setSaving(true);
-
     return await gridApiOp(async (gridApi) => {
+      const preOpCell = gridApi.getFocusedCell();
+
       const selectedRows = props.selectedRows;
 
       let ok = false;
@@ -265,6 +267,19 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         // Don't set saving if ok as the form has already closed
         setSaving && setSaving(false);
       }
+
+      // Only focus next cell if user hasn't already manually changed focus
+      const postOpCell = gridApi.getFocusedCell();
+      if (
+        tabDirection &&
+        preOpCell &&
+        postOpCell &&
+        preOpCell.rowIndex == postOpCell.rowIndex &&
+        preOpCell.column.getColId() == postOpCell.column.getColId()
+      ) {
+        selectNextCell(tabDirection);
+      }
+
       return ok;
     });
   };
@@ -303,7 +318,6 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         stopEditing,
         updatingCells,
         redrawRows,
-        selectNextCell,
       }}
     >
       {props.children}

package/src/contexts/GridPopoverContextProvider.tsx

@@ -11,9 +11,10 @@ interface GridPopoverContextProps {
 }
 
 export const GridPopoverContextProvider = ({ props, children }: GridPopoverContextProps) => {
-  const { getSelectedRows, updatingCells, stopEditing, selectNextCell } = useContext(GridContext);
+  const { getSelectedRows, updatingCells } = useContext(GridContext);
   const anchorRef = useRef<Element>(props.eGridCell);
 
+  const hasSaved = useRef(false);
   const [saving, setSaving] = useState(false);
 
   const { colDef } = props;
@@ -28,18 +29,13 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
 
   const updateValue = useCallback(
     async (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1): Promise<boolean> => {
-      let result = false;
-      if (!saving) {
-        result = await updatingCells({ selectedRows, field }, saveFn, setSaving);
-        if (result) {
-          stopEditing();
-          tabDirection && selectNextCell(tabDirection);
-        }
-      }
-
-      return result;
+      if (hasSaved.current) return true;
+      hasSaved.current = true;
+      const r = saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
+      //if (r) stopEditing();
+      return r;
     },
-    [field, saving, selectNextCell, selectedRows, stopEditing, updatingCells],
+    [field, saving, selectedRows, updatingCells],
   );
 
   return (

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

@@ -82,8 +82,10 @@ export const ControlledMenuFr = (
         // the cell doesn't refresh during update if save is invoked from a native event
         // This doesn't happen in React18
         // To work around it, I invoke the save by clicking on a passed in invisible button ref
-        if (saveButtonRef?.current) saveButtonRef.current.click();
-        else safeCall(onClose, { reason: CloseReason.BLUR });
+        if (saveButtonRef?.current) {
+          saveButtonRef.current.setAttribute("data-reason", CloseReason.BLUR);
+          saveButtonRef.current.click();
+        } else safeCall(onClose, { reason: CloseReason.BLUR });
 
         // If a user clicks on the menu button when a menu is open, we need to close the menu.
         // However, a blur event will be fired prior to the click event on menu button,
@@ -221,8 +223,8 @@ export const ControlledMenuFr = (
       thisDocument.addEventListener("click", handleScreenEventForCancel, true);
       thisDocument.addEventListener("dblclick", handleScreenEventForCancel, true);
       return () => {
-        thisDocument.addEventListener("keydown", handleKeydownTabAndEnter, true);
-        thisDocument.addEventListener("keyup", handleKeyupTabAndEnter, true);
+        thisDocument.removeEventListener("keydown", handleKeydownTabAndEnter, true);
+        thisDocument.removeEventListener("keyup", handleKeyupTabAndEnter, true);
         thisDocument.removeEventListener("mousedown", handleScreenEventForSave, true);
         thisDocument.removeEventListener("mouseup", handleScreenEventForCancel, true);
         thisDocument.removeEventListener("click", handleScreenEventForCancel, true);

package/src/stories/grid/GridPopoutEditDropDown.stories.tsx

@@ -66,7 +66,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       "Scrum Master",
       "Tester",
       MenuSeparatorString,
-      "(other)",
+      "Custom",
     ].filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true));
   }, []);
 
@@ -86,20 +86,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridPopoverEditDropDown(
-        {
-          field: "position",
-          initialWidth: 65,
-          maxWidth: 150,
-          headerName: "Position",
-        },
-        {
-          multiEdit: false,
-          editorParams: {
-            options: ["Architect", "Developer", "Product Owner", "Scrum Master", "Tester", MenuSeparator, "(other)"],
-          },
-        },
-      ),
       GridPopoverEditDropDown(
         {
           field: "position2",
@@ -133,7 +119,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
         {
           multiEdit: true,
           editorParams: {
-            options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
+            options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester"],
             onSelectedItem: async (selected) => {
               await wait(2000);
               selected.selectedRows.forEach((row) => {
@@ -178,7 +164,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           editorParams: {
             filtered: "local",
             filterPlaceholder: "Filter this",
-            options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
+            options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester"],
           },
         },
       ),
@@ -201,33 +187,12 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           },
         },
       ),
-      GridPopoverEditDropDown(
-        {
-          field: "code",
-          initialWidth: 65,
-          maxWidth: 150,
-          headerName: "Max height",
-          valueGetter: (params) => params.data.code,
-        },
-        {
-          multiEdit: true,
-          editorParams: {
-            className: "GridPopoverEditDropDown-containerSmall",
-            filtered: "local",
-            filterPlaceholder: "Filter this",
-            options: Array.from(Array(30).keys()).map((o) => {
-              return { value: o, label: `${o}` };
-            }),
-          },
-        },
-      ),
       GridPopoverEditDropDown(
         {
           field: "code",
           initialWidth: 65,
           maxWidth: 150,
           headerName: "Filter Selectable",
-          valueGetter: (params) => params.data.code,
         },
         {
           multiEdit: true,
@@ -291,7 +256,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
         {},
         {
           editorParams: {
-            options: async () => [{ label: "Hello", action: async () => {}, supportsMultiEdit: true }],
+            options: async () => [{ label: "Hello", action: async () => {} }],
           },
         },
       ),

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

@@ -63,7 +63,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
             required: true,
             maxLength: 12,
             placeholder: "Enter some text...",
-            validate: (value: string) => {
+            invalid: (value: string) => {
               if (value === "never") return "The value 'never' is not allowed";
               return null;
             },
@@ -91,7 +91,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
             maxLength: 12,
             placeholder: "Enter distance...",
             units: "m",
-            validate: (value: string) => {
+            invalid: (value: string) => {
               if (value.length && !isFloat(value)) return "Value must be a number";
               return null;
             },
@@ -118,7 +118,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
             maxLength: 32,
             placeholder: "Enter some text...",
 
-            validate: (value: string) => {
+            invalid: (value: string) => {
               if (value === "never") return "The value 'never' is not allowed";
               return null;
             },
@@ -144,7 +144,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
                   await wait(1500);
                   setRowData(rowData.filter((data) => !selectedRows.some((row) => row.id == data.id)));
                 },
-                supportsMultiEdit: true,
               },
             ],
           },

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -139,7 +139,6 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                 },
                 {
                   label: "Other (TextArea)",
-                  supportsMultiEdit: true,
                   action: async (_, menuOptionResult) => {
                     // eslint-disable-next-line no-console
                     console.log(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);

package/src/utils/bearing.ts

@@ -27,7 +27,7 @@ export const bearingNumberParser = (value: string): number | null => {
 const validMaskForDmsBearing = /^((-)?\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
 export const bearingStringValidator = (
   value: string,
-  customValidate?: (value: number | null) => string | null,
+  customInvalid?: (value: number | null) => string | null,
 ): string | null => {
   value = value.trim();
   if (value === "") return null;
@@ -39,7 +39,7 @@ export const bearingStringValidator = (
   }
 
   const bearing = parseFloat(value);
-  return customValidate ? customValidate(bearing) : null;
+  return customInvalid ? customInvalid(bearing) : null;
 };
 
 // Decimal-ish degrees to Degrees Minutes Seconds converter

package/src/utils/textValidator.ts

@@ -3,7 +3,8 @@ import { GridBaseRow } from "../components/Grid";
 export interface TextInputValidatorProps<RowType extends GridBaseRow> {
   required?: boolean;
   maxLength?: number;
-  validate?: (value: string, data: RowType) => string | null;
+  maxBytes?: number;
+  invalid?: (value: string, data: RowType) => string | null;
 }
 
 export const TextInputValidator = <RowType extends GridBaseRow>(
@@ -23,8 +24,11 @@ export const TextInputValidator = <RowType extends GridBaseRow>(
   if (props.maxLength && value.length > props.maxLength) {
     return `Text must be no longer than ${props.maxLength} characters`;
   }
-  if (props.validate) {
-    return props.validate(value, data);
+  if (props.maxBytes && new TextEncoder().encode(value).length > props.maxBytes) {
+    return `Text must be no longer than ${props.maxLength} bytes`;
+  }
+  if (props.invalid) {
+    return props.invalid(value, data);
   }
   return null;
 };