@linzjs/step-ag-grid 2.3.0 → 2.4.0

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { GridSubComponentProps } from "./gridForm/GridSubComponentProps";
-export interface GridSubComponentTextAreaProps extends GridSubComponentProps {
+export interface GridSubComponentTextAreaProps {
     placeholder?: string;
     required?: boolean;
-    maxlength?: number;
+    maxLength?: number;
     width?: string | number;
-    validate: (value: string) => string | null;
+    validate?: (value: string) => string | null;
+    defaultValue: string;
 }
 export declare const GridSubComponentTextArea: (props: GridSubComponentTextAreaProps) => JSX.Element;

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

@@ -4,7 +4,7 @@ import { CellEditorCommon } from "../GridCell";
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
     placeholder?: string;
     required?: boolean;
-    maxlength?: number;
+    maxLength?: number;
     width?: string | number;
     validate?: (value: string) => string | null;
     onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;

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

@@ -5,7 +5,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Cel
     placeholder?: string;
     units?: string;
     required?: boolean;
-    maxlength?: number;
+    maxLength?: number;
     width?: string | number;
     validate?: (value: string, data: RowType) => string | null;
     onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface GridSubComponentContextType {
+    value: any;
+    setValue: (value: string) => void;
+    setValid: (valid: boolean) => void;
+    triggerSave: () => Promise<void>;
+}
+export declare const GridSubComponentContext: import("react").Context<GridSubComponentContextType>;

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

@@ -1303,12 +1303,12 @@ var ControlledMenuFr = function (_a, externalRef) {
         reposition,
         viewScroll,
     ]);
-    var clickIsWithinMenu = useCallback(function (ev) {
-        return hasParentClass("szh-menu--state-open", ev.target) ||
-            (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, ev.target));
+    var isWithinMenu = useCallback(function (target) {
+        return hasParentClass("szh-menu--state-open", target) ||
+            (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, target));
     }, [closeMenuExclusionClassName]);
     var handleScreenEventForSave = useCallback(function (ev) {
-        if (!clickIsWithinMenu(ev)) {
+        if (!isWithinMenu(ev.target)) {
             ev.preventDefault();
             ev.stopPropagation();
             // FIXME There's an issue in React17
@@ -1330,13 +1330,13 @@ var ControlledMenuFr = function (_a, externalRef) {
                 setTimeout(function () { return (skipOpen.current = false); }, 300);
             }
         }
-    }, [clickIsWithinMenu, onClose, saveButtonRef, skipOpen]);
+    }, [isWithinMenu, onClose, saveButtonRef, skipOpen]);
     var handleScreenEventForCancel = useCallback(function (ev) {
-        if (!clickIsWithinMenu(ev)) {
+        if (!isWithinMenu(ev.target)) {
             ev.preventDefault();
             ev.stopPropagation();
         }
-    }, [clickIsWithinMenu]);
+    }, [isWithinMenu]);
     useEffect(function () {
         if (isMenuOpen(state)) {
             var thisDocument_1 = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
@@ -1389,7 +1389,9 @@ var ControlledMenuFr = function (_a, externalRef) {
         }
     };
     var onBlur = function (e) {
-        if (isMenuOpen(state) && !e.currentTarget.contains(e.relatedTarget || document.activeElement)) {
+        if (isMenuOpen(state) &&
+            !e.currentTarget.contains(e.relatedTarget || document.activeElement) &&
+            !isWithinMenu(e.relatedTarget)) {
             safeCall(onClose, { reason: CloseReason.BLUR });
             // If a user clicks on the menu button when a menu is open, we need to close the menu.
             // However, a blur event will be fired prior to the click event on menu button,
@@ -2709,8 +2711,6 @@ var useGridPopoverHook = function (props) {
     }); }, [props, stopEditing, propsRef]);
     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) {
-                    if (event.reason === "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
                     jsx("div", { style: {
@@ -2998,6 +2998,22 @@ var GridFormDropDown = function (_props) {
                         })] }) }))] }));
 };
 
+var GridSubComponentContext = createContext({
+    value: "GridSubComponentContext value no context",
+    setValue: function () {
+        console.error("GridSubComponentContext setValue no context");
+    },
+    setValid: function () {
+        console.error("GridSubComponentContext setValid no context");
+    },
+    triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("GridSubComponentContext triggerSave no context");
+            return [2 /*return*/];
+        });
+    }); }
+});
+
 var GridFormMultiSelect = function (props) {
     var selectedRows = props.selectedRows;
     var initialiseValues = useMemo(function () { return props.initialSelectedValues && props.initialSelectedValues(selectedRows); }, [props, selectedRows]);
@@ -3124,10 +3140,8 @@ var GridFormMultiSelect = function (props) {
                                             }
                                         }, onChange: function () {
                                             /*Do nothing, change handled by menuItem*/
-                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
-                                        return item.subComponent &&
-                                            item.subComponent({
-                                                ref: ref,
+                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+                                        return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 value: subSelectedValues["".concat(item.value)],
                                                 setValue: function (value) {
                                                     subSelectedValues["".concat(item.value)] = value;
@@ -3137,7 +3151,7 @@ var GridFormMultiSelect = function (props) {
                                                     subComponentIsValid.current["".concat(item.value)] = valid;
                                                 },
                                                 triggerSave: triggerSave
-                                            });
+                                            } }, { children: jsx(item.subComponent, {}) })));
                                     } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
                     }) }))] }) })));
 };
@@ -3513,8 +3527,8 @@ var GridFormTextArea = function (_props) {
         if (props.required && value.length == 0) {
             return "Some text is required";
         }
-        if (props.maxlength && value.length > props.maxlength) {
-            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        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);
@@ -3560,8 +3574,8 @@ var GridFormTextInput = function (_props) {
         if (props.required && trimmedValue.length == 0) {
             return "Some text is required";
         }
-        if (props.maxlength && trimmedValue.length > props.maxlength) {
-            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        if (props.maxLength && trimmedValue.length > props.maxLength) {
+            return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
             return props.validate(trimmedValue, props.data);
@@ -3612,13 +3626,24 @@ var GridPopoverTextInput = function (colDef, params) {
 };
 
 var GridSubComponentTextArea = function (props) {
-    var value = props.value, setValue = props.setValue, setValid = props.setValid, triggerSave = props.triggerSave;
+    var _a = useContext(GridSubComponentContext), value = _a.value, setValue = _a.setValue, setValid = _a.setValid, triggerSave = _a.triggerSave;
+    // 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 validate = useCallback(function (value) {
+        if (value == null)
+            return null;
+        // This can happen because subcomponent is invoked without type safety
+        if (typeof value !== "string") {
+            console.error("Value is not a string", value);
+        }
         if (props.required && value.length === 0) {
             return "Some text is required";
         }
-        if (props.maxlength && value.length > props.maxlength) {
-            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        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);
@@ -3626,7 +3651,7 @@ var GridSubComponentTextArea = function (props) {
         return null;
     }, [props]);
     useEffect(function () {
-        setValid(validate(value) == null);
+        setValid(value != null && validate(value) == null);
     }, [setValid, validate, value]);
     return (jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsx(TextInputFormatted, { className: "free-text-input", value: value, onMouseEnter: function (e) {
                 if (document.activeElement != e.currentTarget) {