@linzjs/step-ag-grid 2.4.0 → 2.4.2

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

@@ -5,11 +5,13 @@ import { CellEditorCommon } from "../GridCell";
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
     selectedRows: RowType[];
     value: ValueType;
+    subComponentValue?: ValueType;
 }
 interface FinalSelectOption<ValueType> {
     value: ValueType;
     label?: JSX.Element | string;
     disabled?: boolean | string;
+    subComponent?: (props: any, ref: any) => any;
 }
 export declare const MenuSeparatorString = "_____MENU_SEPARATOR_____";
 export declare const MenuSeparator: Readonly<{

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface GridFormSubComponentTextInput {
+    setValue: (value: string) => void;
+    keyDown: (key: string) => void;
+    placeholder?: string;
+}
+export declare const GridFormSubComponentTextInput: ({ keyDown, placeholder, setValue }: GridFormSubComponentTextInput) => JSX.Element;

package/dist/src/components/gridPopoverEdit/GridPopoverMenu.d.ts

@@ -6,4 +6,4 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 /**
  * Popout burger menu
  */
-export declare const GridPopoverMenu: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>) => ColDefT<RowType>;
+export declare const GridPopoverMenu: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, custom: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>) => ColDefT<RowType>;

package/dist/src/index.d.ts

@@ -23,6 +23,7 @@ export { GridPopoverEditDropDown } from "./components/gridPopoverEdit/GridPopove
 export { GridPopoverMessage } from "./components/gridPopoverEdit/GridPopoverMessage";
 export { GridPopoverTextArea } from "./components/gridPopoverEdit/GridPopoverTextArea";
 export { GridPopoverTextInput } from "./components/gridPopoverEdit/GridPopoverTextInput";
+export { GridFormSubComponentTextInput } from "./components/gridForm/GridFormSubComponentTextInput";
 export * from "./components/gridForm/GridFormDropDown";
 export * from "./components/gridForm/GridFormMultiSelect";
 export * from "./components/gridForm/GridFormPopoutMenu";

package/dist/src/lui/ActionButton.d.ts

@@ -9,7 +9,7 @@ export interface ActionButtonProps {
     dataTestId?: string;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
     className?: string;
-    onClick?: () => void;
-    inProgress?: boolean;
+    onAction: () => Promise<void>;
+    externalSetInProgress?: () => void;
 }
-export declare const ActionButton: ({ icon, name, inProgressName, dataTestId, inProgress, className, title, onClick, size, }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ icon, name, inProgressName, dataTestId, className, title, onAction, externalSetInProgress, size, }: ActionButtonProps) => JSX.Element;

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

@@ -2838,7 +2838,8 @@ var GridFormDropDown = function (_props) {
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = useRef(false);
     var _d = useState(null), options = _d[0], setOptions = _d[1];
-    var selectItemHandler = useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+    var _e = useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
+    var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var field;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2852,7 +2853,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];
@@ -2994,7 +2995,40 @@ var GridFormDropDown = function (_props) {
                             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]" }), 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 })) : filteredValues.includes(item.value) ? null : (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 ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label })) : filteredValues.includes(item.value) ? null : (jsx(Fragment$1, { 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);
+                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.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;
+                                                    });
+                                                    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"))) }));
                         })] }) }))] }));
 };
 
@@ -3238,12 +3272,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) {
@@ -3625,6 +3658,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 = useState(""), inputValue = _b[0], setInputValue = _b[1];
+    return (jsx(Fragment$1, { children: 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 = 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
@@ -3741,15 +3793,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 = 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];
     useEffect(function () {
         if (inProgress == lastInProgress)
             return;
         inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
     }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
-    return (jsxs(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 ? (jsx(LuiMiniSpinner, { size: 16, divProps: (_b = {
+    return (jsxs(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 ? (jsx(LuiMiniSpinner, { size: 16, divProps: (_b = {
                         "data-testid": "loading-spinner",
                         style: { padding: 0, margin: 0, paddingRight: 8 },
                         role: "status"
@@ -3758,5 +3825,5 @@ var ActionButton = function (_a) {
                     _b) })) : (jsx(LuiIcon, { name: icon, alt: name, size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_c = (localInProgress ? inProgressName : name)) !== null && _c !== void 0 ? _c : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoutMenu, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoutMenu, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map