@linzjs/step-ag-grid 4.0.1 → 4.0.3

package/dist/src/components/GridPopoverHook.d.ts

@@ -2,6 +2,7 @@ import { KeyboardEventHandler } from "react";
 import { GridBaseRow } from "./Grid";
 export interface GridPopoverHookProps<RowType> {
     className: string | undefined;
+    invalid?: () => Promise<boolean | string | null> | boolean | string | null;
     save?: (selectedRows: RowType[]) => Promise<boolean>;
 }
 export declare const useGridPopoverHook: <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { CellEditorCommon } from "../GridCell";
 import { TextInputValidatorProps } from "../../utils/textValidator";
-export interface GridSubComponentTextAreaProps extends TextInputValidatorProps, CellEditorCommon {
+import { GridBaseRow } from "../Grid";
+export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow> extends TextInputValidatorProps<RowType>, CellEditorCommon {
     placeholder?: string;
     width?: string | number;
     defaultValue: string;
     className?: string;
     helpText?: string;
 }
-export declare const GridFormSubComponentTextArea: (props: GridSubComponentTextAreaProps) => JSX.Element;
+export declare const GridFormSubComponentTextArea: <RowType extends GridBaseRow>(props: GridSubComponentTextAreaProps<RowType>) => JSX.Element;

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { TextInputValidatorProps } from "../../utils/textValidator";
 import { CellEditorCommon } from "../GridCell";
-export interface GridFormSubComponentTextInputProps extends TextInputValidatorProps, CellEditorCommon {
+import { GridBaseRow } from "../Grid";
+export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow> extends TextInputValidatorProps<RowType>, CellEditorCommon {
     placeholder?: string;
     width?: string | number;
     defaultValue: string;
     helpText?: string;
 }
-export declare const GridFormSubComponentTextInput: (props: GridFormSubComponentTextInputProps) => JSX.Element;
+export declare const GridFormSubComponentTextInput: <RowType extends GridBaseRow>(props: GridFormSubComponentTextInputProps<RowType>) => JSX.Element;

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

@@ -2,7 +2,7 @@
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { TextInputValidatorProps } from "../../utils/textValidator";
-export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends TextInputValidatorProps<RowType>, CellEditorCommon {
     placeholder?: string;
     width?: string | number;
     onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;

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

@@ -2,7 +2,7 @@
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { TextInputValidatorProps } from "../../utils/textValidator";
-export interface GridFormTextInputProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormTextInputProps<RowType extends GridBaseRow> extends TextInputValidatorProps<RowType>, CellEditorCommon {
     placeholder?: string;
     units?: string;
     width?: string | number;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface GridSubComponentContextType {
     value: any;
+    data: any;
     setValue: (value: string) => void;
     setValid: (valid: boolean) => void;
     triggerSave: () => Promise<void>;

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

@@ -1,6 +1,7 @@
-export interface TextInputValidatorProps {
+import { GridBaseRow } from "../components/Grid";
+export interface TextInputValidatorProps<RowType extends GridBaseRow> {
     required?: boolean;
     maxLength?: number;
-    validate?: (value: string) => string | null;
+    validate?: (value: string, data: RowType) => string | null;
 }
-export declare const TextInputValidator: (props: TextInputValidatorProps, value: string | null) => 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

@@ -2244,6 +2244,7 @@ var GridPopoverContextProvider = function (_a) {
 
 var GridSubComponentContext = createContext({
     value: "GridSubComponentContext value no context",
+    data: {},
     setValue: function () {
         console.error("GridSubComponentContext setValue no context");
     },
@@ -2793,30 +2794,35 @@ var useGridPopoverHook = function (props) {
         setOpen(true);
     }, []);
     var triggerSave = useCallback(function (reason) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
-                    _a = reason == "cancel" || !props.save;
-                    if (_a) return [3 /*break*/, 3];
-                    _b = updateValue;
-                    if (!_b) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updateValue(props.save)];
+                    if (reason == "cancel") {
+                        stopEditing();
+                        return [2 /*return*/];
+                    }
+                    if (props.invalid && props.invalid()) {
+                        return [2 /*return*/];
+                    }
+                    if (!!props.save) return [3 /*break*/, 1];
+                    stopEditing();
+                    return [3 /*break*/, 3];
                 case 1:
-                    _b = (_c.sent());
-                    _c.label = 2;
-                case 2:
-                    _a = (_b);
-                    _c.label = 3;
-                case 3:
-                    if (_a) {
-                        setOpen(false);
+                    if (!props.save) return [3 /*break*/, 3];
+                    // forms that don't provide an invalid fn must wait until they have saved to close
+                    if (props.invalid)
                         stopEditing();
+                    return [4 /*yield*/, updateValue(props.save)];
+                case 2:
+                    if (_a.sent()) {
+                        if (!props.invalid)
+                            stopEditing();
                     }
-                    return [2 /*return*/];
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
             }
         });
-    }); }, [props.save, stopEditing, updateValue]);
+    }); }, [props, stopEditing, updateValue]);
     var onlyInputKeyboardEventHandlers = {
         onKeyUp: function (e) {
             var isTextArea = e.currentTarget.type === "textarea";
@@ -2898,7 +2904,9 @@ var useGridPopoverHook = function (props) {
                             right: 0,
                             backgroundColor: "rgba(64,64,64,0.1)",
                             zIndex: 1000
-                        } })), children, jsx("button", { ref: saveButtonRef, onClick: function () { return triggerSave().then(); }, style: { display: "none" } })] }))) }));
+                        } })), children, jsx("button", { ref: saveButtonRef, onClick: function () {
+                            triggerSave().then();
+                        }, style: { display: "none" } })] }))) }));
     }, [anchorRef, isOpen, props.className, saving, triggerSave]);
     return {
         popoverWrapper: popoverWrapper,
@@ -3015,19 +3023,22 @@ var fieldToString = function (field) {
     return typeof field == "symbol" ? field.toString() : "".concat(field);
 };
 var GridFormDropDown = function (props) {
-    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue;
+    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
     var stopEditing = useContext(GridContext).stopEditing;
+    // 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);
     var _d = useState(null), options = _d[0], setOptions = _d[1];
     var subComponentIsValid = useRef(false);
     var _e = useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
-    var _f = useState(), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
+    var _f = useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
     var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            if (subComponentValue !== undefined && !subComponentIsValid.current)
+            if (hasSubmitted.current || (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 __generator(this, function (_a) {
@@ -3177,7 +3188,7 @@ var GridFormDropDown = function (props) {
                     // Handler for sub-selected value
                     if (!selectedSubComponent)
                         return [2 /*return*/, true];
-                    if (!subComponentIsValid.current)
+                    if (selectedSubComponent.subComponent && !subComponentIsValid.current)
                         return [2 /*return*/, false];
                     return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
                 case 1:
@@ -3186,20 +3197,26 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
-    var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
+    var popoverWrapper = useGridPopoverHook({
+        className: props.className,
+        invalid: function () { return !!(selectedSubComponent && !subComponentIsValid.current); },
+        save: save
+    }).popoverWrapper;
     return popoverWrapper(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
                             return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
                         } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsx(MenuItem, { children: "[Empty]" }, "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
-                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
+                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
                                             if (item.subComponent) {
                                                 if (selectedSubComponent === item) {
+                                                    // toggle selection off
                                                     setSelectedSubComponent(null);
                                                     subComponentIsValid.current = true;
                                                 }
                                                 else {
+                                                    // toggle selection on
                                                     setSelectedSubComponent(item);
                                                 }
                                                 e.keepOpen = true;
@@ -3207,7 +3224,8 @@ var GridFormDropDown = function (props) {
                                             else {
                                                 selectItemHandler(item.value).then();
                                             }
-                                        } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                                data: data,
                                                 value: subSelectedValue,
                                                 setValue: function (value) {
                                                     setSubSelectedValue(value);
@@ -3226,18 +3244,18 @@ var GridFormDropDown = function (props) {
 };
 
 var GridFormMultiSelect = function (props) {
-    var selectedRows = useGridPopoverContext().selectedRows;
+    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, data = _a.data;
     var initialiseValues = useMemo(function () {
         var r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
         // convert array of strings to object<value,null>
         return Array.isArray(r) ? fromPairs(r.map(function (v) { return [v, null]; })) : r;
     }, [props, selectedRows]);
     var subComponentIsValid = useRef({});
-    var _a = useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _a[0], setSelectedValues = _a[1];
-    var _b = useState(""), filter = _b[0], setFilter = _b[1];
-    var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
+    var _b = useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _b[0], setSelectedValues = _b[1];
+    var _c = useState(""), filter = _c[0], setFilter = _c[1];
+    var _d = useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
     var optionsInitialising = useRef(false);
-    var _d = useState(), options = _d[0], setOptions = _d[1];
+    var _e = useState(), options = _e[0], setOptions = _e[1];
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var validations, notValid, menuOptionSubValueResult;
         return __generator(this, function (_a) {
@@ -3329,10 +3347,10 @@ var GridFormMultiSelect = function (props) {
             setSelectedValues(__assign(__assign({}, selectedValues), (_a = {}, _a["".concat(item.value)] = null, _a)));
         }
     }, [selectedValues]);
-    var _e = useGridPopoverHook({
+    var _f = useGridPopoverHook({
         className: props.className,
         save: save
-    }), popoverWrapper = _e.popoverWrapper, lastInputKeyboardEventHandlers = _e.lastInputKeyboardEventHandlers, triggerSave = _e.triggerSave;
+    }), popoverWrapper = _f.popoverWrapper, lastInputKeyboardEventHandlers = _f.lastInputKeyboardEventHandlers, triggerSave = _f.triggerSave;
     return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxs(Fragment$1, { children: [options && props.filtered && (jsxs(Fragment$1, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                                 var _b;
                                 var ref = _a.ref;
@@ -3352,6 +3370,7 @@ var GridFormMultiSelect = function (props) {
                                             /*Do nothing, change handled by menuItem*/
                                         } }) })), "".concat(item.value) in selectedValues && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                         return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                                data: data,
                                                 value: selectedValues["".concat(item.value)],
                                                 setValue: function (value) {
                                                     var _a;
@@ -3380,7 +3399,7 @@ var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
  * you need a useMemo around your columnDefs
  */
 var GridFormPopoverMenu = function (props) {
-    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, updateValue = _a.updateValue;
+    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
@@ -3498,6 +3517,7 @@ var GridFormPopoverMenu = function (props) {
     return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions, className: "GridFormPopupMenu" }, { children: jsx(Fragment$1, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                 return item.label === PopoutMenuSeparator ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxs(Fragment, { children: [jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled || !(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.includes(item)), title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                 return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        data: data,
                                         value: subSelectedValue,
                                         setValue: function (value) {
                                             setSubSelectedValue(value);
@@ -3522,7 +3542,7 @@ var GridPopoverMenu = function (colDef, custom) {
 };
 
 var bearingValueFormatter = function (params) {
-    var value = params.value;
+    var value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
     if (value == null) {
         return "-";
     }
@@ -3616,17 +3636,18 @@ var TextInputFormatted = function (props) {
 
 var GridFormEditBearing = function (props) {
     var _a = useGridPopoverContext(), field = _a.field, initialValue = _a.value;
-    var _b = useState("".concat(initialValue !== null && initialValue !== void 0 ? initialValue : "")), value = _b[0], setValue = _b[1];
+    // This clears out any scientific precision
+    var defaultValue = useMemo(function () { return (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()); }, [initialValue]);
+    var _b = useState(defaultValue), value = _b[0], setValue = _b[1];
+    var invalid = useCallback(function () { return bearingStringValidator(value, props.range); }, [props.range, value]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var parsedValue;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (bearingStringValidator(value))
-                        return [2 /*return*/, false];
                     parsedValue = bearingNumberParser(value);
                     // Value didn't change so don't save just cancel
-                    if (parsedValue === initialValue) {
+                    if (parsedValue === bearingNumberParser(defaultValue)) {
                         return [2 /*return*/, true];
                     }
                     if (!props.onSave) return [3 /*break*/, 2];
@@ -3645,14 +3666,15 @@ var GridFormEditBearing = function (props) {
                 case 3: return [2 /*return*/, true];
             }
         });
-    }); }, [field, initialValue, props, value]);
+    }); }, [defaultValue, field, props, value]);
     var _c = useGridPopoverHook({
         className: props.className,
+        invalid: invalid,
         save: save
     }), popoverWrapper = _c.popoverWrapper, onlyInputKeyboardEventHandlers = _c.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, __assign({ value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
+    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, __assign({ value: defaultValue, onChange: function (e) {
                 setValue(e.target.value.trim());
-            }, autoFocus: true, placeholder: props.placeHolder }, onlyInputKeyboardEventHandlers, { formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range) })) })));
+            }, autoFocus: true, placeholder: props.placeHolder }, onlyInputKeyboardEventHandlers, { formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" })) })));
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
@@ -3802,7 +3824,7 @@ var TextAreaInput = function (props) {
                 } }, { children: props.helpText })))] })));
 };
 
-var TextInputValidator = function (props, value) {
+var TextInputValidator = function (props, value, data) {
     if (value == null)
         return null;
     // This can happen because subcomponent is invoked without type safety
@@ -3816,23 +3838,21 @@ var TextInputValidator = function (props, value) {
         return "Text must be no longer than ".concat(props.maxLength, " characters");
     }
     if (props.validate) {
-        return props.validate(value);
+        return props.validate(value, data);
     }
     return null;
 };
 
 var GridFormTextArea = function (props) {
     var _a, _b;
-    var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value;
+    var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
     var _d = useState(initialVale != null ? "".concat(initialVale) : ""), value = _d[0], setValue = _d[1];
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
-    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [props, value, data]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (invalid())
-                        return [2 /*return*/, false];
                     if (initialVale === (value !== null && value !== void 0 ? value : ""))
                         return [2 /*return*/, true];
                     if (!props.onSave) return [3 /*break*/, 2];
@@ -3849,8 +3869,12 @@ var GridFormTextArea = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, initialVale, value, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
+    }); }, [initialVale, value, props, field]);
+    var _e = useGridPopoverHook({
+        className: props.className,
+        invalid: invalid,
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
     return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsx(TextAreaInput, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }, onlyInputKeyboardEventHandlers)) })));
 };
 
@@ -3858,11 +3882,12 @@ var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __
 
 var GridFormTextInput = function (props) {
     var _a, _b;
-    var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value;
+    var stopEditing = useContext(GridContext).stopEditing;
+    var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
-    var initValue = initialVale == null ? "" : "".concat(initialVale);
+    var initValue = useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
     var _d = useState(initValue), value = _d[0], setValue = _d[1];
-    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var trimmedValue;
         return __generator(this, function (_a) {
@@ -3870,6 +3895,7 @@ var GridFormTextInput = function (props) {
                 case 0:
                     if (invalid())
                         return [2 /*return*/, false];
+                    stopEditing();
                     trimmedValue = value.trim();
                     if (initValue === trimmedValue)
                         return [2 /*return*/, true];
@@ -3887,8 +3913,12 @@ var GridFormTextInput = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, value, initValue, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
+    }); }, [invalid, stopEditing, value, initValue, props, field]);
+    var _e = useGridPopoverHook({
+        className: props.className,
+        invalid: invalid,
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
     return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, style: { width: "100%" }, placeholder: props.placeholder }, onlyInputKeyboardEventHandlers, { helpText: helpText })) })));
 };
 
@@ -3898,14 +3928,14 @@ var GridPopoverTextInput = function (colDef, params) {
 
 var GridFormSubComponentTextInput = function (props) {
     var _a;
-    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
+    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave, data = _b.data;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     // If is not initialised yet as it's just been created then set the default value
     useEffect(function () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
@@ -3932,14 +3962,14 @@ var GridFormSubComponentTextInput = function (props) {
 
 var GridFormSubComponentTextArea = function (props) {
     var _a;
-    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
+    var _b = useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
     // If is not initialised yet as it's just been created then set the default value
     useEffect(function () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);