@linzjs/step-ag-grid 5.0.1 → 6.0.0

package/dist/src/components/gridForm/GridFormDropDown.d.ts

@@ -2,13 +2,13 @@
 import "../../styles/GridFormDropDown.scss";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
-export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
+export interface GridPopoutEditDropDownSelectedItem<RowType> {
     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;
@@ -22,15 +22,15 @@ export declare const MenuHeaderItem: (title: string) => {
     label: string;
     value: string;
 };
-export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
-export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
+export type SelectOption = null | string | FinalSelectOption;
+export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
     className?: "GridPopoverEditDropDown-containerSmall" | "GridPopoverEditDropDown-containerMedium" | "GridPopoverEditDropDown-containerLarge" | "GridPopoverEditDropDown-containerUnlimited" | string | undefined;
     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;
 }
-export declare const GridFormDropDown: <RowType extends GridBaseRow, ValueType>(props: GridFormPopoutDropDownProps<RowType, ValueType>) => JSX.Element;
+export declare const GridFormDropDown: <RowType extends GridBaseRow>(props: GridFormPopoutDropDownProps<RowType>) => JSX.Element;
 export {};

package/dist/src/components/gridPopoverEdit/GridPopoverEditDropDown.d.ts

@@ -2,4 +2,4 @@ import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
-export declare const GridPopoverEditDropDown: <RowType extends GridBaseRow, ValueType>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType, ValueType>>) => ColDefT<RowType>;
+export declare const GridPopoverEditDropDown: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType>>) => ColDefT<RowType>;

package/dist/src/contexts/GridContext.d.ts

@@ -21,8 +21,7 @@ export interface GridContextType {
     updatingCells: (props: {
         selectedRows: GridBaseRow[];
         field?: string;
-    }, fnUpdate: (selectedRows: any[]) => Promise<boolean>, setSaving?: (saving: boolean) => void) => Promise<boolean>;
+    }, 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 declare const GridContext: import("react").Context<GridContextType>;

package/dist/src/utils/bearing.d.ts

@@ -2,5 +2,5 @@ import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef
 export declare const bearingValueFormatter: (params: ValueFormatterParams) => string;
 export declare const bearingCorrectionValueFormatter: (params: ValueFormatterParams) => string;
 export declare const bearingNumberParser: (value: string) => number | null;
-export declare const bearingStringValidator: (value: string, customValidate?: ((value: number | null) => string | null) | undefined) => string | null;
+export declare const bearingStringValidator: (value: string, customInvalid?: ((value: number | null) => string | null) | undefined) => string | null;
 export declare const convertDDToDMS: (dd: number | null, showPositiveSymbol?: boolean, addTrailingZeros?: boolean) => string;

package/dist/src/utils/textValidator.d.ts

@@ -2,6 +2,7 @@ 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 declare const TextInputValidator: <RowType extends GridBaseRow>(props: TextInputValidatorProps<RowType>, value: string | null, data: RowType) => string | null;

package/dist/step-ag-grid.esm.js

@@ -1345,8 +1345,10 @@ var ControlledMenuFr = function (_a, externalRef) {
             // 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 === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current)
+            if (saveButtonRef === null || saveButtonRef === void 0 ? void 0 : 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.
@@ -1479,8 +1481,8 @@ var ControlledMenuFr = function (_a, externalRef) {
             thisDocument_1.addEventListener("click", handleScreenEventForCancel, true);
             thisDocument_1.addEventListener("dblclick", handleScreenEventForCancel, true);
             return function () {
-                thisDocument_1.addEventListener("keydown", handleKeydownTabAndEnter, true);
-                thisDocument_1.addEventListener("keyup", handleKeyupTabAndEnter, true);
+                thisDocument_1.removeEventListener("keydown", handleKeydownTabAndEnter, true);
+                thisDocument_1.removeEventListener("keyup", handleKeyupTabAndEnter, true);
                 thisDocument_1.removeEventListener("mousedown", handleScreenEventForSave, true);
                 thisDocument_1.removeEventListener("mouseup", handleScreenEventForCancel, true);
                 thisDocument_1.removeEventListener("click", handleScreenEventForCancel, true);
@@ -1989,9 +1991,6 @@ var GridContext = createContext({
     }); },
     redrawRows: function () {
         console.error("no context provider for redrawRows");
-    },
-    selectNextCell: function () {
-        console.error("no context provider for selectNextCell");
     }
 });
 
@@ -2211,17 +2210,18 @@ var GridContextProvider = function (props) {
         });
     };
     var stopEditing = function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); };
-    var updatingCells = function (props, fnUpdate, setSaving) { return __awaiter(void 0, void 0, void 0, function () {
+    var updatingCells = function (props, fnUpdate, setSaving, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setSaving && setSaving(true);
                     return [4 /*yield*/, gridApiOp(function (gridApi) { return __awaiter(void 0, void 0, void 0, function () {
-                            var selectedRows, ok, cell;
+                            var preOpCell, selectedRows, ok, cell, postOpCell;
                             var _a;
                             return __generator(this, function (_b) {
                                 switch (_b.label) {
                                     case 0:
+                                        preOpCell = gridApi.getFocusedCell();
                                         selectedRows = props.selectedRows;
                                         ok = false;
                                         return [4 /*yield*/, modifyUpdating((_a = props.field) !== null && _a !== void 0 ? _a : "", selectedRows.map(function (data) { return data.id; }), function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -2253,6 +2253,14 @@ var GridContextProvider = function (props) {
                                             // Don't set saving if ok as the form has already closed
                                             setSaving && setSaving(false);
                                         }
+                                        postOpCell = gridApi.getFocusedCell();
+                                        if (tabDirection &&
+                                            preOpCell &&
+                                            postOpCell &&
+                                            preOpCell.rowIndex == postOpCell.rowIndex &&
+                                            preOpCell.column.getColId() == postOpCell.column.getColId()) {
+                                            selectNextCell(tabDirection);
+                                        }
                                         return [2 /*return*/, ok];
                                 }
                             });
@@ -2293,8 +2301,7 @@ var GridContextProvider = function (props) {
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
             updatingCells: updatingCells,
-            redrawRows: redrawRows,
-            selectNextCell: selectNextCell
+            redrawRows: redrawRows
         } }, { children: props.children })));
 };
 
@@ -2359,8 +2366,9 @@ var useGridPopoverContext = function () {
 var GridPopoverContextProvider = function (_a) {
     var _b, _c, _d;
     var props = _a.props, children = _a.children;
-    var _e = useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells, stopEditing = _e.stopEditing, selectNextCell = _e.selectNextCell;
+    var _e = useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells;
     var anchorRef = useRef(props.eGridCell);
+    var hasSaved = useRef(false);
     var _f = useState(false), saving = _f[0], setSaving = _f[1];
     var colDef = props.colDef;
     var cellEditorParams = colDef.cellEditorParams;
@@ -2369,24 +2377,27 @@ var GridPopoverContextProvider = function (_a) {
     var selectedRows = useMemo(function () { return (multiEdit ? sortBy(getSelectedRows(), function (row) { return row.id !== props.data.id; }) : [props.data]); }, [getSelectedRows, multiEdit, props.data]);
     var field = (_d = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.field) !== null && _d !== void 0 ? _d : "";
     var updateValue = useCallback(function (saveFn, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var r, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    result = false;
-                    if (!!saving) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving)];
-                case 1:
-                    result = _a.sent();
-                    if (result) {
-                        stopEditing();
-                        tabDirection && selectNextCell(tabDirection);
-                    }
-                    _a.label = 2;
-                case 2: return [2 /*return*/, result];
+                    if (hasSaved.current)
+                        return [2 /*return*/, true];
+                    hasSaved.current = true;
+                    if (!saving) return [3 /*break*/, 1];
+                    _a = false;
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving, tabDirection)];
+                case 2:
+                    _a = _b.sent();
+                    _b.label = 3;
+                case 3:
+                    r = _a;
+                    //if (r) stopEditing();
+                    return [2 /*return*/, r];
             }
         });
-    }); }, [field, saving, selectNextCell, selectedRows, stopEditing, updatingCells]);
+    }); }, [field, saving, selectedRows, updatingCells]);
     return (jsx(GridPopoverContext.Provider, __assign({ value: {
             anchorRef: anchorRef,
             saving: saving,
@@ -2918,7 +2929,7 @@ var useGridPopoverHook = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (reason == "cancel") {
+                    if (reason == CloseReason.CANCEL) {
                         stopEditing();
                         return [2 /*return*/];
                     }
@@ -2947,7 +2958,7 @@ var useGridPopoverHook = function (props) {
     var popoverWrapper = useCallback(function (children) {
         return (jsx(Fragment$1, { children: anchorRef.current && (jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
                     // Prevent menu from closing when modals are invoked
-                    if (event.reason === "blur")
+                    if (event.reason === CloseReason.BLUR)
                         return;
                     triggerSave(event.reason).then();
                 }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, closeMenuExclusionClassName: "ReactModal__Content" }, { children: [saving && ( // This is the overlay that prevents editing when the editor is saving
@@ -3078,7 +3089,6 @@ var fieldToString = function (field) {
 var GridFormDropDown = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-    var hasSubmitted = useRef(false);
     var _b = useState(""), filter = _b[0], setFilter = _b[1];
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = useRef(false);
@@ -3086,32 +3096,39 @@ var GridFormDropDown = function (props) {
     var subComponentIsValid = useRef(false);
     var _e = useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
     var _f = useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
-    var selectItemHandler = useCallback(function (value, subComponentValue, reason) { return __awaiter(void 0, void 0, void 0, function () {
+    var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
+        var hasChanged;
         return __generator(this, function (_a) {
-            if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current))
+            switch (_a.label) {
+                case 0:
+                    hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
+                    if (!hasChanged) return [3 /*break*/, 3];
+                    if (!props.onSelectedItem) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    selectedRows.forEach(function (row) { return (row[field] = value); });
+                    _a.label = 3;
+                case 3: return [2 /*return*/, true];
+            }
+        });
+    }); }, [field, props, selectedRows]);
+    var clickItemHandler = useCallback(function (value, subComponentValue, reason) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (subComponentValue !== undefined && !subComponentIsValid.current)
                 return [2 /*return*/, false];
-            hasSubmitted.current = true;
-            return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-                    var hasChanged;
+            return [2 /*return*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () {
                     return __generator(this, function (_a) {
                         switch (_a.label) {
-                            case 0:
-                                hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
-                                if (!hasChanged) return [3 /*break*/, 3];
-                                if (!props.onSelectedItem) return [3 /*break*/, 2];
-                                return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
-                            case 1:
-                                _a.sent();
-                                return [3 /*break*/, 3];
-                            case 2:
-                                selectedRows.forEach(function (row) { return (row[field] = value); });
-                                _a.label = 3;
-                            case 3: return [2 /*return*/, true];
+                            case 0: return [4 /*yield*/, selectItemHandler(value, subComponentValue)];
+                            case 1: return [2 /*return*/, _a.sent()];
                         }
                     });
                 }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
         });
-    }); }, [field, props, updateValue]);
+    }); }, [selectItemHandler, updateValue]);
     var selectFilterHandler = useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3151,14 +3168,13 @@ var GridFormDropDown = function (props) {
                         _a.label = 2;
                     case 2:
                         optionsList = optionsConf === null || optionsConf === void 0 ? void 0 : optionsConf.map(function (item) {
-                            if (item == null || typeof item == "string" || typeof item == "number") {
-                                item = {
+                            return item == null || typeof item == "string"
+                                ? {
                                     value: item,
                                     label: item,
                                     disabled: false
-                                };
-                            }
-                            return item;
+                                }
+                                : item;
                         });
                         if (props.filtered) {
                             // This is needed otherwise when filter input is rendered and sets autofocus
@@ -3203,6 +3219,9 @@ var GridFormDropDown = function (props) {
             researchOnFilterChange().then();
         }
     }, [filter, props, researchOnFilterChange]);
+    /**
+     * Saves are wrapped in updateValue and triggered by blur events
+     */
     var save = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var activeOptions;
         return __generator(this, function (_a) {
@@ -3270,7 +3289,7 @@ var GridFormDropDown = function (props) {
                                                 e.keepOpen = true;
                                             }
                                             else {
-                                                selectItemHandler(item.value, undefined, e.key === "Tab"
+                                                clickItemHandler(item.value, undefined, e.key === "Tab"
                                                     ? e.shiftKey
                                                         ? CloseReason.TAB_BACKWARD
                                                         : CloseReason.TAB_FORWARD
@@ -3462,8 +3481,6 @@ var GridFormPopoverMenu = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, updateValue = _a.updateValue, data = _a.data;
     var optionsInitialising = useRef(false);
     var _b = useState(), options = _b[0], setOptions = _b[1];
-    // Save triggers during async action processing which triggers another action(), this ref blocks that
-    var actionProcessing = useRef(false);
     var _c = useState(null), subComponentSelected = _c[0], setSubComponentSelected = _c[1];
     var subComponentIsValid = useRef(false);
     var _d = useState(), subSelectedValue = _d[0], setSubSelectedValue = _d[1];
@@ -3520,26 +3537,20 @@ var GridFormPopoverMenu = function (props) {
             });
         }); })();
     }, [options, props.defaultAction, props.options, selectedRows]);
-    var actionClick = useCallback(function (menuOption, reason) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            actionProcessing.current = true;
-            return [2 /*return*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var result;
-                    var _a;
-                    return __generator(this, function (_b) {
-                        switch (_b.label) {
-                            case 0:
-                                result = __assign(__assign({}, menuOption), { subValue: subSelectedValue });
-                                return [4 /*yield*/, ((_a = menuOption.action) !== null && _a !== void 0 ? _a : defaultAction)(selectedRows, result)];
-                            case 1:
-                                _b.sent();
-                                actionProcessing.current = false;
-                                return [2 /*return*/, true];
-                        }
-                    });
-                }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
+    var actionClick = useCallback(function (menuOption) { return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    result = __assign(__assign({}, menuOption), { subValue: subSelectedValue });
+                    return [4 /*yield*/, ((_a = menuOption.action) !== null && _a !== void 0 ? _a : defaultAction)(selectedRows, result)];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/, true];
+            }
         });
-    }); }, [defaultAction, selectedRows, subSelectedValue, updateValue]);
+    }); }, [defaultAction, selectedRows, subSelectedValue]);
     var onMenuItemClick = useCallback(function (e, item) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -3550,27 +3561,29 @@ var GridFormPopoverMenu = function (props) {
                     setSubComponentSelected(subComponentSelected === item ? null : item);
                     e.keepOpen = true;
                     return [3 /*break*/, 3];
-                case 1: return [4 /*yield*/, actionClick(item, e.key === "Tab" ? (e.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD) : CloseReason.CLICK).then()];
+                case 1: return [4 /*yield*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                        return [2 /*return*/, actionClick(item)];
+                    }); }); }, e.key === "Tab" ? (e.shiftKey ? -1 : 1) : 0)];
                 case 2:
                     _a.sent();
                     _a.label = 3;
                 case 3: return [2 /*return*/];
             }
         });
-    }); }, [actionClick, subComponentSelected]);
+    }); }, [actionClick, subComponentSelected, updateValue]);
     var save = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!(!actionProcessing.current && subComponentSelected)) return [3 /*break*/, 2];
+                    if (!subComponentSelected) return [3 /*break*/, 2];
                     if (!subComponentIsValid.current)
                         return [2 /*return*/, false];
-                    return [4 /*yield*/, actionClick(subComponentSelected, "click")];
+                    return [4 /*yield*/, actionClick(subComponentSelected)];
                 case 1:
                     _a.sent();
-                    return [2 /*return*/, true];
+                    _a.label = 2;
                 case 2: 
-                // Otherwise assume it's a cancel, either way we close the menu
+                // Close the menu
                 return [2 /*return*/, true];
             }
         });
@@ -3630,7 +3643,7 @@ var bearingNumberParser = function (value) {
     return parseFloat(value);
 };
 var validMaskForDmsBearing = /^((-)?\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
-var bearingStringValidator = function (value, customValidate) {
+var bearingStringValidator = function (value, customInvalid) {
     value = value.trim();
     if (value === "")
         return null;
@@ -3642,7 +3655,7 @@ var bearingStringValidator = function (value, customValidate) {
         return "Bearing has a maximum of 5 decimal places";
     }
     var bearing = parseFloat(value);
-    return customValidate ? customValidate(bearing) : null;
+    return customInvalid ? customInvalid(bearing) : null;
 };
 // Decimal-ish degrees to Degrees Minutes Seconds converter
 var convertDDToDMS = function (dd, showPositiveSymbol, addTrailingZeros) {
@@ -3905,8 +3918,11 @@ var TextInputValidator = function (props, value, data) {
     if (props.maxLength && value.length > props.maxLength) {
         return "Text must be no longer than ".concat(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 ".concat(props.maxLength, " bytes");
+    }
+    if (props.invalid) {
+        return props.invalid(value, data);
     }
     return null;
 };