@linzjs/step-ag-grid 4.0.1 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -2246,6 +2246,7 @@ var GridPopoverContextProvider = function (_a) {
2246
2246
 
2247
2247
  var GridSubComponentContext = react.createContext({
2248
2248
  value: "GridSubComponentContext value no context",
2249
+ data: {},
2249
2250
  setValue: function () {
2250
2251
  console.error("GridSubComponentContext setValue no context");
2251
2252
  },
@@ -2795,30 +2796,35 @@ var useGridPopoverHook = function (props) {
2795
2796
  setOpen(true);
2796
2797
  }, []);
2797
2798
  var triggerSave = react.useCallback(function (reason) { return __awaiter(void 0, void 0, void 0, function () {
2798
- var _a, _b;
2799
- return __generator(this, function (_c) {
2800
- switch (_c.label) {
2799
+ return __generator(this, function (_a) {
2800
+ switch (_a.label) {
2801
2801
  case 0:
2802
- _a = reason == "cancel" || !props.save;
2803
- if (_a) return [3 /*break*/, 3];
2804
- _b = updateValue;
2805
- if (!_b) return [3 /*break*/, 2];
2806
- return [4 /*yield*/, updateValue(props.save)];
2802
+ if (reason == "cancel") {
2803
+ stopEditing();
2804
+ return [2 /*return*/];
2805
+ }
2806
+ if (props.invalid && props.invalid()) {
2807
+ return [2 /*return*/];
2808
+ }
2809
+ if (!!props.save) return [3 /*break*/, 1];
2810
+ stopEditing();
2811
+ return [3 /*break*/, 3];
2807
2812
  case 1:
2808
- _b = (_c.sent());
2809
- _c.label = 2;
2810
- case 2:
2811
- _a = (_b);
2812
- _c.label = 3;
2813
- case 3:
2814
- if (_a) {
2815
- setOpen(false);
2813
+ if (!props.save) return [3 /*break*/, 3];
2814
+ // forms that don't provide an invalid fn must wait until they have saved to close
2815
+ if (props.invalid)
2816
2816
  stopEditing();
2817
+ return [4 /*yield*/, updateValue(props.save)];
2818
+ case 2:
2819
+ if (_a.sent()) {
2820
+ if (!props.invalid)
2821
+ stopEditing();
2817
2822
  }
2818
- return [2 /*return*/];
2823
+ _a.label = 3;
2824
+ case 3: return [2 /*return*/];
2819
2825
  }
2820
2826
  });
2821
- }); }, [props.save, stopEditing, updateValue]);
2827
+ }); }, [props, stopEditing, updateValue]);
2822
2828
  var onlyInputKeyboardEventHandlers = {
2823
2829
  onKeyUp: function (e) {
2824
2830
  var isTextArea = e.currentTarget.type === "textarea";
@@ -2900,7 +2906,9 @@ var useGridPopoverHook = function (props) {
2900
2906
  right: 0,
2901
2907
  backgroundColor: "rgba(64,64,64,0.1)",
2902
2908
  zIndex: 1000
2903
- } })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, onClick: function () { return triggerSave().then(); }, style: { display: "none" } })] }))) }));
2909
+ } })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, onClick: function () {
2910
+ triggerSave().then();
2911
+ }, style: { display: "none" } })] }))) }));
2904
2912
  }, [anchorRef, isOpen, props.className, saving, triggerSave]);
2905
2913
  return {
2906
2914
  popoverWrapper: popoverWrapper,
@@ -3017,19 +3025,22 @@ var fieldToString = function (field) {
3017
3025
  return typeof field == "symbol" ? field.toString() : "".concat(field);
3018
3026
  };
3019
3027
  var GridFormDropDown = function (props) {
3020
- var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue;
3028
+ var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
3021
3029
  var stopEditing = react.useContext(GridContext).stopEditing;
3030
+ // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
3031
+ var hasSubmitted = react.useRef(false);
3022
3032
  var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
3023
3033
  var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
3024
3034
  var optionsInitialising = react.useRef(false);
3025
3035
  var _d = react.useState(null), options = _d[0], setOptions = _d[1];
3026
3036
  var subComponentIsValid = react.useRef(false);
3027
3037
  var _e = react.useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
3028
- var _f = react.useState(), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
3038
+ var _f = react.useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
3029
3039
  var selectItemHandler = react.useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
3030
3040
  return __generator(this, function (_a) {
3031
- if (subComponentValue !== undefined && !subComponentIsValid.current)
3041
+ if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current))
3032
3042
  return [2 /*return*/, false];
3043
+ hasSubmitted.current = true;
3033
3044
  return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
3034
3045
  var hasChanged;
3035
3046
  return __generator(this, function (_a) {
@@ -3179,7 +3190,7 @@ var GridFormDropDown = function (props) {
3179
3190
  // Handler for sub-selected value
3180
3191
  if (!selectedSubComponent)
3181
3192
  return [2 /*return*/, true];
3182
- if (!subComponentIsValid.current)
3193
+ if (selectedSubComponent.subComponent && !subComponentIsValid.current)
3183
3194
  return [2 /*return*/, false];
3184
3195
  return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
3185
3196
  case 1:
@@ -3188,20 +3199,26 @@ var GridFormDropDown = function (props) {
3188
3199
  }
3189
3200
  });
3190
3201
  }); }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
3191
- var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
3202
+ var popoverWrapper = useGridPopoverHook({
3203
+ className: props.className,
3204
+ invalid: function () { return !!(selectedSubComponent && !subComponentIsValid.current); },
3205
+ save: save
3206
+ }).popoverWrapper;
3192
3207
  return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
3193
3208
  var _b;
3194
3209
  var ref = _a.ref;
3195
3210
  return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.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); } }) })));
3196
3211
  } })), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] }))), jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsxRuntime.jsx(MenuItem, { children: "[Empty]" }, "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
3197
3212
  var _a;
3198
- return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
3213
+ return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
3199
3214
  if (item.subComponent) {
3200
3215
  if (selectedSubComponent === item) {
3216
+ // toggle selection off
3201
3217
  setSelectedSubComponent(null);
3202
3218
  subComponentIsValid.current = true;
3203
3219
  }
3204
3220
  else {
3221
+ // toggle selection on
3205
3222
  setSelectedSubComponent(item);
3206
3223
  }
3207
3224
  e.keepOpen = true;
@@ -3209,7 +3226,8 @@ var GridFormDropDown = function (props) {
3209
3226
  else {
3210
3227
  selectItemHandler(item.value).then();
3211
3228
  }
3212
- } }, { 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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
3229
+ } }, { 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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
3230
+ data: data,
3213
3231
  value: subSelectedValue,
3214
3232
  setValue: function (value) {
3215
3233
  setSubSelectedValue(value);
@@ -3228,18 +3246,18 @@ var GridFormDropDown = function (props) {
3228
3246
  };
3229
3247
 
3230
3248
  var GridFormMultiSelect = function (props) {
3231
- var selectedRows = useGridPopoverContext().selectedRows;
3249
+ var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, data = _a.data;
3232
3250
  var initialiseValues = react.useMemo(function () {
3233
3251
  var r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
3234
3252
  // convert array of strings to object<value,null>
3235
3253
  return Array.isArray(r) ? lodashEs.fromPairs(r.map(function (v) { return [v, null]; })) : r;
3236
3254
  }, [props, selectedRows]);
3237
3255
  var subComponentIsValid = react.useRef({});
3238
- var _a = react.useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _a[0], setSelectedValues = _a[1];
3239
- var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
3240
- var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
3256
+ var _b = react.useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _b[0], setSelectedValues = _b[1];
3257
+ var _c = react.useState(""), filter = _c[0], setFilter = _c[1];
3258
+ var _d = react.useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
3241
3259
  var optionsInitialising = react.useRef(false);
3242
- var _d = react.useState(), options = _d[0], setOptions = _d[1];
3260
+ var _e = react.useState(), options = _e[0], setOptions = _e[1];
3243
3261
  var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
3244
3262
  var validations, notValid, menuOptionSubValueResult;
3245
3263
  return __generator(this, function (_a) {
@@ -3331,10 +3349,10 @@ var GridFormMultiSelect = function (props) {
3331
3349
  setSelectedValues(__assign(__assign({}, selectedValues), (_a = {}, _a["".concat(item.value)] = null, _a)));
3332
3350
  }
3333
3351
  }, [selectedValues]);
3334
- var _e = useGridPopoverHook({
3352
+ var _f = useGridPopoverHook({
3335
3353
  className: props.className,
3336
3354
  save: save
3337
- }), popoverWrapper = _e.popoverWrapper, lastInputKeyboardEventHandlers = _e.lastInputKeyboardEventHandlers, triggerSave = _e.triggerSave;
3355
+ }), popoverWrapper = _f.popoverWrapper, lastInputKeyboardEventHandlers = _f.lastInputKeyboardEventHandlers, triggerSave = _f.triggerSave;
3338
3356
  return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && props.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
3339
3357
  var _b;
3340
3358
  var ref = _a.ref;
@@ -3354,6 +3372,7 @@ var GridFormMultiSelect = function (props) {
3354
3372
  /*Do nothing, change handled by menuItem*/
3355
3373
  } }) })), "".concat(item.value) in selectedValues && item.subComponent && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
3356
3374
  return item.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
3375
+ data: data,
3357
3376
  value: selectedValues["".concat(item.value)],
3358
3377
  setValue: function (value) {
3359
3378
  var _a;
@@ -3382,7 +3401,7 @@ var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
3382
3401
  * you need a useMemo around your columnDefs
3383
3402
  */
3384
3403
  var GridFormPopoverMenu = function (props) {
3385
- var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, updateValue = _a.updateValue;
3404
+ var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, updateValue = _a.updateValue, data = _a.data;
3386
3405
  var optionsInitialising = react.useRef(false);
3387
3406
  var _b = react.useState(), options = _b[0], setOptions = _b[1];
3388
3407
  // Save triggers during async action processing which triggers another action(), this ref blocks that
@@ -3500,6 +3519,7 @@ var GridFormPopoverMenu = function (props) {
3500
3519
  return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions, className: "GridFormPopupMenu" }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
3501
3520
  return item.label === PopoutMenuSeparator ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
3502
3521
  return item.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
3522
+ data: data,
3503
3523
  value: subSelectedValue,
3504
3524
  setValue: function (value) {
3505
3525
  setSubSelectedValue(value);
@@ -3524,7 +3544,7 @@ var GridPopoverMenu = function (colDef, custom) {
3524
3544
  };
3525
3545
 
3526
3546
  var bearingValueFormatter = function (params) {
3527
- var value = params.value;
3547
+ var value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
3528
3548
  if (value == null) {
3529
3549
  return "-";
3530
3550
  }
@@ -3618,17 +3638,18 @@ var TextInputFormatted = function (props) {
3618
3638
 
3619
3639
  var GridFormEditBearing = function (props) {
3620
3640
  var _a = useGridPopoverContext(), field = _a.field, initialValue = _a.value;
3621
- var _b = react.useState("".concat(initialValue !== null && initialValue !== void 0 ? initialValue : "")), value = _b[0], setValue = _b[1];
3641
+ // This clears out any scientific precision
3642
+ var defaultValue = react.useMemo(function () { return (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()); }, [initialValue]);
3643
+ var _b = react.useState(defaultValue), value = _b[0], setValue = _b[1];
3644
+ var invalid = react.useCallback(function () { return bearingStringValidator(value, props.range); }, [props.range, value]);
3622
3645
  var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
3623
3646
  var parsedValue;
3624
3647
  return __generator(this, function (_a) {
3625
3648
  switch (_a.label) {
3626
3649
  case 0:
3627
- if (bearingStringValidator(value))
3628
- return [2 /*return*/, false];
3629
3650
  parsedValue = bearingNumberParser(value);
3630
3651
  // Value didn't change so don't save just cancel
3631
- if (parsedValue === initialValue) {
3652
+ if (parsedValue === bearingNumberParser(defaultValue)) {
3632
3653
  return [2 /*return*/, true];
3633
3654
  }
3634
3655
  if (!props.onSave) return [3 /*break*/, 2];
@@ -3647,14 +3668,15 @@ var GridFormEditBearing = function (props) {
3647
3668
  case 3: return [2 /*return*/, true];
3648
3669
  }
3649
3670
  });
3650
- }); }, [field, initialValue, props, value]);
3671
+ }); }, [defaultValue, field, props, value]);
3651
3672
  var _c = useGridPopoverHook({
3652
3673
  className: props.className,
3674
+ invalid: invalid,
3653
3675
  save: save
3654
3676
  }), popoverWrapper = _c.popoverWrapper, onlyInputKeyboardEventHandlers = _c.onlyInputKeyboardEventHandlers;
3655
- return popoverWrapper(jsxRuntime.jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsxRuntime.jsx(TextInputFormatted, __assign({ value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
3677
+ return popoverWrapper(jsxRuntime.jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsxRuntime.jsx(TextInputFormatted, __assign({ value: defaultValue, onChange: function (e) {
3656
3678
  setValue(e.target.value.trim());
3657
- }, autoFocus: true, placeholder: props.placeHolder }, onlyInputKeyboardEventHandlers, { formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range) })) })));
3679
+ }, 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" })) })));
3658
3680
  };
3659
3681
 
3660
3682
  var GridPopoverEditBearingLike = function (colDef, props) {
@@ -3804,7 +3826,7 @@ var TextAreaInput = function (props) {
3804
3826
  } }, { children: props.helpText })))] })));
3805
3827
  };
3806
3828
 
3807
- var TextInputValidator = function (props, value) {
3829
+ var TextInputValidator = function (props, value, data) {
3808
3830
  if (value == null)
3809
3831
  return null;
3810
3832
  // This can happen because subcomponent is invoked without type safety
@@ -3818,23 +3840,21 @@ var TextInputValidator = function (props, value) {
3818
3840
  return "Text must be no longer than ".concat(props.maxLength, " characters");
3819
3841
  }
3820
3842
  if (props.validate) {
3821
- return props.validate(value);
3843
+ return props.validate(value, data);
3822
3844
  }
3823
3845
  return null;
3824
3846
  };
3825
3847
 
3826
3848
  var GridFormTextArea = function (props) {
3827
3849
  var _a, _b;
3828
- var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value;
3850
+ var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
3829
3851
  var _d = react.useState(initialVale != null ? "".concat(initialVale) : ""), value = _d[0], setValue = _d[1];
3830
3852
  var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
3831
- var invalid = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
3853
+ var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [props, value, data]);
3832
3854
  var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
3833
3855
  return __generator(this, function (_a) {
3834
3856
  switch (_a.label) {
3835
3857
  case 0:
3836
- if (invalid())
3837
- return [2 /*return*/, false];
3838
3858
  if (initialVale === (value !== null && value !== void 0 ? value : ""))
3839
3859
  return [2 /*return*/, true];
3840
3860
  if (!props.onSave) return [3 /*break*/, 2];
@@ -3851,8 +3871,12 @@ var GridFormTextArea = function (props) {
3851
3871
  return [2 /*return*/, true];
3852
3872
  }
3853
3873
  });
3854
- }); }, [invalid, initialVale, value, props, field]);
3855
- var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
3874
+ }); }, [initialVale, value, props, field]);
3875
+ var _e = useGridPopoverHook({
3876
+ className: props.className,
3877
+ invalid: invalid,
3878
+ save: save
3879
+ }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
3856
3880
  return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsxRuntime.jsx(TextAreaInput, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }, onlyInputKeyboardEventHandlers)) })));
3857
3881
  };
3858
3882
 
@@ -3860,11 +3884,12 @@ var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __
3860
3884
 
3861
3885
  var GridFormTextInput = function (props) {
3862
3886
  var _a, _b;
3863
- var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value;
3887
+ var stopEditing = react.useContext(GridContext).stopEditing;
3888
+ var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
3864
3889
  var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
3865
- var initValue = initialVale == null ? "" : "".concat(initialVale);
3890
+ var initValue = react.useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
3866
3891
  var _d = react.useState(initValue), value = _d[0], setValue = _d[1];
3867
- var invalid = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
3892
+ var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
3868
3893
  var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
3869
3894
  var trimmedValue;
3870
3895
  return __generator(this, function (_a) {
@@ -3872,6 +3897,7 @@ var GridFormTextInput = function (props) {
3872
3897
  case 0:
3873
3898
  if (invalid())
3874
3899
  return [2 /*return*/, false];
3900
+ stopEditing();
3875
3901
  trimmedValue = value.trim();
3876
3902
  if (initValue === trimmedValue)
3877
3903
  return [2 /*return*/, true];
@@ -3889,8 +3915,12 @@ var GridFormTextInput = function (props) {
3889
3915
  return [2 /*return*/, true];
3890
3916
  }
3891
3917
  });
3892
- }); }, [invalid, value, initValue, props, field]);
3893
- var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
3918
+ }); }, [invalid, stopEditing, value, initValue, props, field]);
3919
+ var _e = useGridPopoverHook({
3920
+ className: props.className,
3921
+ invalid: invalid,
3922
+ save: save
3923
+ }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
3894
3924
  return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsxRuntime.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 })) })));
3895
3925
  };
3896
3926
 
@@ -3900,14 +3930,14 @@ var GridPopoverTextInput = function (colDef, params) {
3900
3930
 
3901
3931
  var GridFormSubComponentTextInput = function (props) {
3902
3932
  var _a;
3903
- var _b = react.useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
3933
+ var _b = react.useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave, data = _b.data;
3904
3934
  var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
3905
3935
  // If is not initialised yet as it's just been created then set the default value
3906
3936
  react.useEffect(function () {
3907
3937
  if (value == null)
3908
3938
  setValue(props.defaultValue);
3909
3939
  }, [props.defaultValue, setValue, value]);
3910
- var invalid = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
3940
+ var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
3911
3941
  react.useEffect(function () {
3912
3942
  setValid(value != null && invalid() == null);
3913
3943
  }, [setValid, invalid, value]);
@@ -3934,14 +3964,14 @@ var GridFormSubComponentTextInput = function (props) {
3934
3964
 
3935
3965
  var GridFormSubComponentTextArea = function (props) {
3936
3966
  var _a;
3937
- var _b = react.useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
3967
+ var _b = react.useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
3938
3968
  var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
3939
3969
  // If is not initialised yet as it's just been created then set the default value
3940
3970
  react.useEffect(function () {
3941
3971
  if (value == null)
3942
3972
  setValue(props.defaultValue);
3943
3973
  }, [props.defaultValue, setValue, value]);
3944
- var invalid = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
3974
+ var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
3945
3975
  react.useEffect(function () {
3946
3976
  setValid(value != null && invalid() == null);
3947
3977
  }, [setValid, invalid, value]);