@linzjs/step-ag-grid 3.0.0 → 3.0.1

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

@@ -3,6 +3,7 @@ import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
     options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
+    defaultAction?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
 }
 /** Menu configuration types **/
 export declare const PopoutMenuSeparator: Readonly<{

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

@@ -1,4 +1,5 @@
 import { RefObject } from "react";
+import { GridBaseRow } from "../components/Grid";
 export interface PropsType {
     value: any;
     data: any;
@@ -6,14 +7,15 @@ export interface PropsType {
     selectedRows: any[];
     updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
 }
-export declare type GridPopoverContextType = {
+export interface GridPopoverContextType<RowType extends GridBaseRow> {
     anchorRef: RefObject<Element>;
     saving: boolean;
     setSaving: (saving: boolean) => void;
-    field: string;
+    field: keyof RowType;
     value: any;
-    data: any;
-    selectedRows: any[];
+    data: RowType;
+    selectedRows: RowType[];
     updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
-};
-export declare const GridPopoverContext: import("react").Context<GridPopoverContextType>;
+}
+export declare const GridPopoverContext: import("react").Context<GridPopoverContextType<any>>;
+export declare const useGridPopoverContext: <RowType extends GridBaseRow>() => GridPopoverContextType<RowType>;

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

@@ -2654,12 +2654,15 @@ var GridPopoverContext = createContext({
     setSaving: function () { },
     field: "",
     value: null,
-    data: null,
+    data: {},
     selectedRows: [],
     updateValue: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
         return [2 /*return*/, false];
     }); }); }
-});
+});
+var useGridPopoverContext = function () {
+    return useContext(GridPopoverContext);
+};
 
 var GridPopoverContextProvider = function (_a) {
     var _b, _c, _d;
@@ -2755,7 +2758,7 @@ var ComponentLoadingWrapper = function (props) {
 
 var useGridPopoverHook = function (props) {
     var stopEditing = useContext(GridContext).stopEditing;
-    var _a = useContext(GridPopoverContext), anchorRef = _a.anchorRef, saving = _a.saving, updateValue = _a.updateValue;
+    var _a = useGridPopoverContext(), anchorRef = _a.anchorRef, saving = _a.saving, updateValue = _a.updateValue;
     var saveButtonRef = useRef(null);
     var _b = useState(false), isOpen = _b[0], setOpen = _b[1];
     useEffect(function () {
@@ -2908,8 +2911,11 @@ var MenuHeaderString = "_____MENU_HEADER_____";
 var MenuHeaderItem = function (title) {
     return { label: title, value: MenuHeaderString };
 };
+var fieldToString = function (field) {
+    return typeof field == "symbol" ? field.toString() : "".concat(field);
+};
 var GridFormDropDown = function (props) {
-    var _a = useContext(GridPopoverContext), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue;
+    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue;
     var stopEditing = useContext(GridContext).stopEditing;
     var _b = useState(""), filter = _b[0], setFilter = _b[1];
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
@@ -3065,48 +3071,43 @@ var GridFormDropDown = function (props) {
                             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(field, "-empty")), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                        } })), 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 : (jsx("div", { children: !item.subComponent ? (jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () {
                                         selectItemHandler(item.value).then();
-                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(field, "-").concat(index))) : (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
-                                        return item.subComponent &&
-                                            item.subComponent({
-                                                setValue: function (value) {
-                                                    var localSubComponentValues = __spreadArray([], subComponentValues, true);
-                                                    var subComponentValueIndex = localSubComponentValues.findIndex(function (_a) {
-                                                        var optionValue = _a.optionValue;
-                                                        return optionValue === item.value;
+                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(fieldToString(field), "-").concat(index))) : (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                        return item.subComponent && (jsx(item.subComponent, { setValue: function (value) {
+                                                var localSubComponentValues = __spreadArray([], subComponentValues, true);
+                                                var subComponentValueIndex = localSubComponentValues.findIndex(function (_a) {
+                                                    var optionValue = _a.optionValue;
+                                                    return optionValue === item.value;
+                                                });
+                                                if (subComponentValueIndex !== -1) {
+                                                    localSubComponentValues[subComponentValueIndex].subComponentValue = value;
+                                                }
+                                                else {
+                                                    localSubComponentValues.push({
+                                                        subComponentValue: value,
+                                                        optionValue: item.value
                                                     });
-                                                    if (subComponentValueIndex !== -1) {
-                                                        localSubComponentValues[subComponentValueIndex].subComponentValue = value;
-                                                    }
-                                                    else {
-                                                        localSubComponentValues.push({
-                                                            subComponentValue: value,
-                                                            optionValue: item.value
-                                                        });
-                                                    }
-                                                    setSubComponentValues(localSubComponentValues);
-                                                },
-                                                keyDown: function (key, event) {
-                                                    var subComponentItem = subComponentValues.find(function (_a) {
-                                                        var optionValue = _a.optionValue;
-                                                        return optionValue === item.value;
+                                                }
+                                                setSubComponentValues(localSubComponentValues);
+                                            }, keyDown: function (key, event) {
+                                                var subComponentItem = subComponentValues.find(function (_a) {
+                                                    var optionValue = _a.optionValue;
+                                                    return optionValue === item.value;
+                                                });
+                                                if ((key === "Enter" || key === "Tab") && subComponentItem) {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                    return selectItemHandler(item.value, subComponentItem.subComponentValue).then(function () {
+                                                        ref.closeMenu();
+                                                        return true;
                                                     });
-                                                    if ((key === "Enter" || key === "Tab") && subComponentItem) {
-                                                        event.preventDefault();
-                                                        event.stopPropagation();
-                                                        return selectItemHandler(item.value, subComponentItem.subComponentValue).then(function () {
-                                                            ref.closeMenu();
-                                                            return true;
-                                                        });
-                                                    }
-                                                    return false;
-                                                },
-                                                key: "".concat(field, "-").concat(index, "_subcomponent_inner")
-                                            }, ref);
-                                    } }), "".concat(field, "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
+                                                }
+                                                return false;
+                                            } }, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")));
+                                    } }), "".concat(fieldToString(field), "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
                         })] }) }))] }));
 };
 
@@ -3127,7 +3128,7 @@ var GridSubComponentContext = createContext({
 });
 
 var GridFormMultiSelect = function (props) {
-    var selectedRows = useContext(GridPopoverContext).selectedRows;
+    var selectedRows = useGridPopoverContext().selectedRows;
     var initialiseValues = useMemo(function () {
         var r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
         // convert array of strings to object<value,null>
@@ -3289,7 +3290,7 @@ var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
  * you need a useMemo around your columnDefs
  */
 var GridFormPopoverMenu = function (props) {
-    var _a = useContext(GridPopoverContext), selectedRows = _a.selectedRows, updateValue = _a.updateValue;
+    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, updateValue = _a.updateValue;
     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
@@ -3297,6 +3298,22 @@ var GridFormPopoverMenu = function (props) {
     var _c = useState(null), subComponentSelected = _c[0], setSubComponentSelected = _c[1];
     var subComponentIsValid = useRef(false);
     var _d = useState(), subSelectedValue = _d[0], setSubSelectedValue = _d[1];
+    var defaultAction = useCallback(function (selectedRows, menuOption) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!props.defaultAction) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.defaultAction(selectedRows, menuOption)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    console.error("No action specified for ".concat(menuOption.label, " menu options"));
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [props]);
     // Load up options list if it's async function
     useEffect(function () {
         var _a;
@@ -3305,50 +3322,55 @@ var GridFormPopoverMenu = function (props) {
         optionsInitialising.current = true;
         var optionsConf = (_a = props.options) !== null && _a !== void 0 ? _a : [];
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var newOptions, _a, anyOptionsAreMissingAction;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        _a = setOptions;
                         if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
                         return [4 /*yield*/, optionsConf(selectedRows)];
                     case 1:
-                        _b = _c.sent();
+                        _a = _b.sent();
                         return [3 /*break*/, 3];
                     case 2:
-                        _b = optionsConf;
-                        _c.label = 3;
+                        _a = optionsConf;
+                        _b.label = 3;
                     case 3:
-                        _a.apply(void 0, [_b]);
+                        newOptions = _a;
+                        setOptions(newOptions);
+                        if (!props.defaultAction) {
+                            anyOptionsAreMissingAction = newOptions.some(function (option) { return !option.action; });
+                            if (anyOptionsAreMissingAction) {
+                                console.error("There's no default action handler and some Menu options are missing an action handler", {
+                                    invalidMenuOptions: newOptions.filter(function (option) { return !option.action; })
+                                });
+                            }
+                        }
                         optionsInitialising.current = false;
                         return [2 /*return*/];
                 }
             });
         }); })();
-    }, [options, props.options, selectedRows]);
+    }, [options, props.defaultAction, props.options, selectedRows]);
     var actionClick = useCallback(function (menuOption) { 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, _a;
+                    var result;
+                    var _a;
                     return __generator(this, function (_b) {
                         switch (_b.label) {
                             case 0:
                                 result = __assign(__assign({}, menuOption), { subValue: subSelectedValue });
-                                _a = menuOption.action;
-                                if (!_a) return [3 /*break*/, 2];
-                                return [4 /*yield*/, menuOption.action(selectedRows, result)];
+                                return [4 /*yield*/, ((_a = menuOption.action) !== null && _a !== void 0 ? _a : defaultAction)(selectedRows, result)];
                             case 1:
-                                _a = (_b.sent());
-                                _b.label = 2;
-                            case 2:
+                                _b.sent();
                                 actionProcessing.current = false;
                                 return [2 /*return*/, true];
                         }
                     });
                 }); })];
         });
-    }); }, [selectedRows, subSelectedValue, updateValue]);
+    }); }, [defaultAction, selectedRows, subSelectedValue, updateValue]);
     var onMenuItemClick = useCallback(function (e, item) {
         if (item.subComponent) {
             subComponentIsValid.current = false;
@@ -3505,7 +3527,7 @@ var TextInputFormatted = function (props) {
 };
 
 var GridFormEditBearing = function (props) {
-    var _a = useContext(GridPopoverContext), field = _a.field, initialValue = _a.value;
+    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];
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var parsedValue;
@@ -3527,7 +3549,9 @@ var GridFormEditBearing = function (props) {
                         console.error("field is not defined in ColDef");
                     }
                     else {
-                        selectedRows.forEach(function (row) { return (row[field] = parsedValue); });
+                        selectedRows.forEach(function (row) {
+                            row[field] = parsedValue;
+                        });
                     }
                     _a.label = 3;
                 case 3: return [2 /*return*/, true];
@@ -3587,7 +3611,7 @@ var GridPopoverEditDropDown = function (colDef, props) {
 };
 
 var GridFormMessage = function (props) {
-    var selectedRows = useContext(GridPopoverContext).selectedRows;
+    var selectedRows = useGridPopoverContext().selectedRows;
     var _a = useState(null), message = _a[0], setMessage = _a[1];
     var popoverWrapper = useGridPopoverHook({ className: props.className }).popoverWrapper;
     useEffect(function () {
@@ -3694,8 +3718,8 @@ var TextAreaInput = function (props) {
 
 var GridFormTextArea = function (props) {
     var _a;
-    var _b = useContext(GridPopoverContext), field = _b.field, initialVale = _b.value;
-    var _c = useState(initialVale !== null && initialVale !== void 0 ? initialVale : ""), value = _c[0], setValue = _c[1];
+    var _b = useGridPopoverContext(), field = _b.field, initialVale = _b.value;
+    var _c = useState(initialVale != null ? "".concat(initialVale) : ""), value = _c[0], setValue = _c[1];
     var invalid = useCallback(function () {
         if (props.required && value.length == 0) {
             return "Some text is required";
@@ -3724,7 +3748,9 @@ var GridFormTextArea = function (props) {
                         console.error("ColDef has no field set");
                         return [2 /*return*/, false];
                     }
-                    selectedRows.forEach(function (row) { return (row[field] = value); });
+                    selectedRows.forEach(function (row) {
+                        row[field] = value;
+                    });
                     return [2 /*return*/, true];
             }
         });
@@ -3737,7 +3763,7 @@ var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __
 
 var GridFormTextInput = function (props) {
     var _a;
-    var _b = useContext(GridPopoverContext), field = _b.field, data = _b.data, initialVale = _b.value;
+    var _b = useGridPopoverContext(), field = _b.field, data = _b.data, initialVale = _b.value;
     var initValue = initialVale == null ? "" : "".concat(initialVale);
     var _c = useState(initValue), value = _c[0], setValue = _c[1];
     var invalid = useCallback(function () {
@@ -3771,8 +3797,9 @@ var GridFormTextInput = function (props) {
                         console.error("ColDef has no field set");
                         return [2 /*return*/, false];
                     }
-                    // @ts-ignore row[field] row is of type any
-                    selectedRows.forEach(function (row) { return (row[field] = trimmedValue); });
+                    selectedRows.forEach(function (row) {
+                        row[field] = trimmedValue;
+                    });
                     return [2 /*return*/, true];
             }
         });