@linzjs/step-ag-grid 4.0.0 → 4.0.2

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");
     },
@@ -3015,7 +3016,7 @@ 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;
     var _b = useState(""), filter = _b[0], setFilter = _b[1];
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
@@ -3208,6 +3209,7 @@ var GridFormDropDown = function (props) {
                                                 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: {
+                                                data: data,
                                                 value: subSelectedValue,
                                                 setValue: function (value) {
                                                     setSubSelectedValue(value);
@@ -3226,18 +3228,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 +3331,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 +3354,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 +3383,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 +3501,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);
@@ -3802,7 +3806,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,17 +3820,17 @@ 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) {
@@ -3850,19 +3854,19 @@ var GridFormTextArea = function (props) {
             }
         });
     }); }, [invalid, initialVale, value, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, lastInputKeyboardEventHandlers = _e.lastInputKeyboardEventHandlers;
-    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 }, lastInputKeyboardEventHandlers)) })));
+    var _e = useGridPopoverHook({ className: props.className, 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)) })));
 };
 
 var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __assign({ editor: GridFormTextArea }, params)); };
 
 var GridFormTextInput = 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 helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     var initValue = initialVale == null ? "" : "".concat(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) {
@@ -3888,8 +3892,8 @@ var GridFormTextInput = function (props) {
             }
         });
     }); }, [invalid, value, initValue, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, lastInputKeyboardEventHandlers = _e.lastInputKeyboardEventHandlers;
-    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 }, lastInputKeyboardEventHandlers, { helpText: helpText })) })));
+    var _e = useGridPopoverHook({ className: props.className, 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 })) })));
 };
 
 var GridPopoverTextInput = function (colDef, params) {
@@ -3898,14 +3902,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]);
@@ -3916,9 +3920,9 @@ var GridFormSubComponentTextInput = function (props) {
             }
         }, onKeyUp: function (e) {
             if (e.key === "Tab") {
-                !e.shiftKey && triggerSave().then();
                 e.preventDefault();
                 e.stopPropagation();
+                !e.shiftKey && triggerSave().then();
             }
             else if (e.key === "Enter") {
                 triggerSave().then();
@@ -3932,14 +3936,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]);
@@ -3950,9 +3954,9 @@ var GridFormSubComponentTextArea = function (props) {
                 }
             }, onKeyUp: function (e) {
                 if (e.key === "Tab") {
-                    !e.shiftKey && triggerSave().then();
                     e.preventDefault();
                     e.stopPropagation();
+                    !e.shiftKey && triggerSave().then();
                 }
             } }) })));
 };