@linzjs/step-ag-grid 2.4.0 → 2.4.2

package/dist/index.js

@@ -2840,7 +2840,8 @@ var GridFormDropDown = function (_props) {
     var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = react.useRef(false);
     var _d = react.useState(null), options = _d[0], setOptions = _d[1];
-    var selectItemHandler = react.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+    var _e = react.useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
+    var selectItemHandler = react.useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var field;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2854,7 +2855,7 @@ var GridFormDropDown = function (_props) {
                                         hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
                                         if (!hasChanged) return [3 /*break*/, 3];
                                         if (!props.onSelectedItem) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value })];
+                                        return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
                                     case 1:
                                         _a.sent();
                                         return [3 /*break*/, 3];
@@ -2996,7 +2997,40 @@ var GridFormDropDown = function (_props) {
                             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); } }) })));
                         } })), 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]" }), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
-                            return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label })) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () { return selectItemHandler(item.value); } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index)));
+                            return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label })) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !item.subComponent ? (jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () {
+                                        selectItemHandler(item.value);
+                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index))) : (jsxRuntime.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;
+                                                    });
+                                                    if (subComponentValueIndex !== -1) {
+                                                        localSubComponentValues[subComponentValueIndex].subComponentValue = value;
+                                                    }
+                                                    else {
+                                                        localSubComponentValues.push({
+                                                            subComponentValue: value,
+                                                            optionValue: item.value
+                                                        });
+                                                    }
+                                                    setSubComponentValues(localSubComponentValues);
+                                                },
+                                                keyDown: function (key) {
+                                                    var subComponentItem = subComponentValues.find(function (_a) {
+                                                        var optionValue = _a.optionValue;
+                                                        return optionValue === item.value;
+                                                    });
+                                                    if (key === "Enter" && subComponentItem) {
+                                                        selectItemHandler(item.value, subComponentItem.subComponentValue);
+                                                        ref.closeMenu();
+                                                    }
+                                                }
+                                            }, ref);
+                                    } }), "".concat(props.field, "-").concat(index, "_subcomponent"))) }));
                         })] }) }))] }));
 };
 
@@ -3240,12 +3274,11 @@ var GridFormPopoutMenu = function (_props) {
 /**
  * Popout burger menu
  */
-var GridPopoverMenu = function (colDef, props) {
-    var _a;
-    return GridCell(__assign(__assign({ maxWidth: 64, editable: colDef.editable != null ? colDef.editable : true, cellRenderer: GridRenderPopoutMenuCell, cellClass: ((_a = colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) === null || _a === void 0 ? void 0 : _a.multiEdit) !== false ? GenericMultiEditCellClass : undefined }, colDef), { cellRendererParams: {
+var GridPopoverMenu = function (colDef, custom) {
+    return GridCell(__assign(__assign({ maxWidth: 64, editable: colDef.editable != null ? colDef.editable : true, cellRenderer: GridRenderPopoutMenuCell, cellClass: (custom === null || custom === void 0 ? void 0 : custom.multiEdit) ? GenericMultiEditCellClass : undefined }, colDef), { cellRendererParams: {
             // Menus open on single click, this parameter is picked up in Grid.tsx
             singleClickEdit: true
-        } }), __assign({ editor: GridFormPopoutMenu }, props));
+        } }), __assign({ editor: GridFormPopoutMenu }, custom));
 };
 
 var bearingValueFormatter = function (params) {
@@ -3627,6 +3660,25 @@ var GridPopoverTextInput = function (colDef, params) {
     return GridCell(colDef, __assign({ editor: GridFormTextInput }, params));
 };
 
+var GridFormSubComponentTextInput = function (_a) {
+    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue;
+    var placeholderText = placeholder || "Other...";
+    var _b = react.useState(""), inputValue = _b[0], setInputValue = _b[1];
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TextInputFormatted, { value: inputValue, onChange: function (e) {
+                var value = e.target.value;
+                setValue(value);
+                setInputValue(value);
+            }, inputProps: {
+                onKeyDown: function (k) { return keyDown(k.key); },
+                placeholder: placeholderText,
+                onMouseEnter: function (e) {
+                    if (document.activeElement != e.currentTarget) {
+                        e.currentTarget.focus();
+                    }
+                }
+            } }) }));
+};
+
 var GridSubComponentTextArea = function (props) {
     var _a = react.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
@@ -3743,15 +3795,30 @@ var minimumInProgressTimeMs = 950;
 var ActionButton = function (_a) {
     var _b;
     var _c;
-    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, inProgress = _a.inProgress, className = _a.className, title = _a.title, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? "sm" : _d;
+    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, className = _a.className, title = _a.title, onAction = _a.onAction, externalSetInProgress = _a.externalSetInProgress, _d = _a.size, size = _d === void 0 ? "sm" : _d;
+    var _e = react.useState(false), inProgress = _e[0], setInProgress = _e[1];
     var lastInProgress = usePrevious(inProgress !== null && inProgress !== void 0 ? inProgress : false);
-    var _e = useStateDeferred(!!inProgress), localInProgress = _e[0], setLocalInProgress = _e[1], setLocalInProgressDeferred = _e[2];
+    var _f = useStateDeferred(inProgress), localInProgress = _f[0], setLocalInProgress = _f[1], setLocalInProgressDeferred = _f[2];
     react.useEffect(function () {
         if (inProgress == lastInProgress)
             return;
         inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
     }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
-    return (jsxRuntime.jsxs(lui.LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: "tertiary", title: title !== null && title !== void 0 ? title : name, "aria-label": name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", onClick: onClick, disabled: localInProgress }, { children: [localInProgress ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 16, divProps: (_b = {
+    return (jsxRuntime.jsxs(lui.LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: "tertiary", title: title !== null && title !== void 0 ? title : name, "aria-label": name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setInProgress(true);
+                        externalSetInProgress && setInProgress(true);
+                        return [4 /*yield*/, onAction()];
+                    case 1:
+                        _a.sent();
+                        externalSetInProgress && setInProgress(false);
+                        setInProgress(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); }, disabled: localInProgress }, { children: [localInProgress ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 16, divProps: (_b = {
                         "data-testid": "loading-spinner",
                         style: { padding: 0, margin: 0, paddingRight: 8 },
                         role: "status"
@@ -3774,6 +3841,7 @@ exports.GridContextProvider = GridContextProvider;
 exports.GridFormDropDown = GridFormDropDown;
 exports.GridFormMultiSelect = GridFormMultiSelect;
 exports.GridFormPopoutMenu = GridFormPopoutMenu;
+exports.GridFormSubComponentTextInput = GridFormSubComponentTextInput;
 exports.GridHeaderSelect = GridHeaderSelect;
 exports.GridIcon = GridIcon;
 exports.GridLoadableCell = GridLoadableCell;