@linzjs/step-ag-grid 8.0.0 → 8.1.0

package/dist/index.css

@@ -313,6 +313,10 @@
   text-transform: uppercase;
 }
 
+.react-menu-inline-test .szh-menu-container, .react-menu-inline-test .szh-menu {
+  position: static !important;
+}
+
 .Grid-container {
   flex: 1;
   width: 100%;

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

@@ -25,6 +25,7 @@ export type SelectOption = null | string | FinalSelectOption;
 export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
     className?: "GridPopoverEditDropDown-containerSmall" | "GridPopoverEditDropDown-containerMedium" | "GridPopoverEditDropDown-containerLarge" | "GridPopoverEditDropDown-containerUnlimited" | string | undefined;
     filtered?: "local" | "reload";
+    filterDefaultValue?: string;
     filterPlaceholder?: string;
     filterHelpText?: string;
     noOptionsMessage?: string;

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

@@ -1,16 +1,15 @@
 /// <reference types="react" />
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
-export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormPopoverMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
     options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
     defaultAction?: (props: {
         selectedRows: RowType[];
         menuOption: SelectedMenuOptionResult<RowType>;
     }) => Promise<void>;
 }
-/** Menu configuration types **/
 export declare const PopoutMenuSeparator: Readonly<{
-    __isMenuSeparator__: true;
+    label: "__isMenuSeparator__";
 }>;
 interface MenuSeparatorType {
     __isMenuSeparator__: boolean;
@@ -32,5 +31,5 @@ export interface MenuOption<RowType extends GridBaseRow> {
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
  * you need a useMemo around your columnDefs
  */
-export declare const GridFormPopoverMenu: <RowType extends GridBaseRow>(props: GridFormPopoutMenuProps<RowType>) => JSX.Element;
+export declare const GridFormPopoverMenu: <RowType extends GridBaseRow>(props: GridFormPopoverMenuProps<RowType>) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
-import { GridFormPopoutMenuProps } from "../gridForm/GridFormPopoverMenu";
+import { GridFormPopoverMenuProps } from "../gridForm/GridFormPopoverMenu";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 /**
  * Popout burger menu
  */
-export declare const GridPopoverMenu: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, custom: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>) => ColDefT<RowType>;
+export declare const GridPopoverMenu: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, custom: GenericCellEditorProps<GridFormPopoverMenuProps<RowType>>) => ColDefT<RowType>;

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

@@ -15,5 +15,6 @@ export interface ActionButtonProps {
     onClick: () => Promise<void> | void;
     level?: LuiButtonProps["level"];
     style?: CSSProperties;
+    disabled?: boolean;
 }
-export declare const ActionButton: ({ icon, name, inProgressName, dataTestId, style, className, title, onClick, size, iconPosition, level, "aria-label": ariaLabel, }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ icon, name, inProgressName, disabled, dataTestId, style, className, title, onClick, size, iconPosition, level, "aria-label": ariaLabel, }: ActionButtonProps) => JSX.Element;

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

@@ -3278,17 +3278,17 @@ var fieldToString = function (field) {
     return typeof field == "symbol" ? field.toString() : "".concat(field);
 };
 var GridFormDropDown = function (props) {
-    var _a;
-    var _b = useGridPopoverContext(), selectedRows = _b.selectedRows, field = _b.field, data = _b.data;
+    var _a, _b;
+    var _c = useGridPopoverContext(), selectedRows = _c.selectedRows, field = _c.field, data = _c.data;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-    var _c = useState(""), filter = _c[0], setFilter = _c[1];
-    var _d = useState(), filteredValues = _d[0], setFilteredValues = _d[1];
-    var _e = useState(null), options = _e[0], setOptions = _e[1];
+    var _d = useState((_a = props.filterDefaultValue) !== null && _a !== void 0 ? _a : ""), filter = _d[0], setFilter = _d[1];
+    var _e = useState(), filteredValues = _e[0], setFilteredValues = _e[1];
+    var _f = useState(null), options = _f[0], setOptions = _f[1];
     var subComponentIsValid = useRef(false);
     var subComponentInitialValue = useRef(null);
-    var _f = useState(null), subSelectedValue = _f[0], setSubSelectedValue = _f[1];
+    var _g = useState(null), subSelectedValue = _g[0], setSubSelectedValue = _g[1];
     // Note: null is assumed to be the filter
-    var _g = useState(null), selectedItem = _g[0], setSelectedItem = _g[1];
+    var _h = useState(null), selectedItem = _h[0], setSelectedItem = _h[1];
     var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var hasChanged;
         return __generator(this, function (_a) {
@@ -3367,7 +3367,7 @@ var GridFormDropDown = function (props) {
                 .filter(function (r) { return r !== undefined; }));
         }
     }, [props.filtered, filter, options]);
-    var researchOnFilterChange = useMemo(function () {
+    var reSearchOnFilterChange = useMemo(function () {
         return dist$1(function () {
             setOptions(null);
         }, 500);
@@ -3377,9 +3377,9 @@ var GridFormDropDown = function (props) {
     useEffect(function () {
         if (previousFilter.current != filter && props.filtered == "reload") {
             previousFilter.current = filter;
-            researchOnFilterChange().then();
+            reSearchOnFilterChange().then();
         }
-    }, [filter, props, researchOnFilterChange]);
+    }, [filter, props, reSearchOnFilterChange]);
     /**
      * Saves are wrapped in updateValue and triggered by blur events
      */
@@ -3419,6 +3419,8 @@ var GridFormDropDown = function (props) {
         invalid: function () { return !!(selectedItem && !subComponentIsValid.current); },
         save: save
     }).popoverWrapper;
+    var lastHeader = null;
+    var showHeader = null;
     return popoverWrapper(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsx(FocusableItem, __assign({ className: "filter-item", onFocus: function () {
                             setSelectedItem(null);
                             setSubSelectedValue(null);
@@ -3428,44 +3430,58 @@ var GridFormDropDown = function (props) {
                             var ref = _a.ref;
                             return (jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsx("input", { className: "LuiTextInput-input", ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter &&
                                             !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: function (e) { return setFilter(e.target.value); } }), props.filterHelpText && isNotEmpty(filter) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
-                        } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (jsx(MenuItem, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: (_a = props.noOptionsMessage) !== null && _a !== void 0 ? _a : "No Options" }), "".concat(fieldToString(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 && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (jsx(MenuItem, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: (_b = props.noOptionsMessage) !== null && _b !== void 0 ? _b : "No Options" }), "".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 || filteredValues.includes(item)) && (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: function () {
-                                            setSelectedItem(item);
-                                            if (item.subComponent) {
-                                                setSelectedItem(item);
-                                                subComponentIsValid.current = true;
-                                                subComponentInitialValue.current = null;
-                                            }
-                                            else {
-                                                setSubSelectedValue(null);
-                                                subComponentIsValid.current = true;
-                                            }
-                                        }, onClick: function (e) {
-                                            if (item.subComponent) {
-                                                e.keepOpen = true;
-                                            }
-                                        } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedItem === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
-                                                context: { options: options },
-                                                data: data,
-                                                value: subSelectedValue,
-                                                setValue: function (value) {
-                                                    setSubSelectedValue(value);
-                                                    if (subComponentInitialValue.current === null) {
-                                                        // copy the default value of the sub-component so we can change detect on save
-                                                        subComponentInitialValue.current = JSON.stringify(value);
+                            showHeader = null;
+                            if (item.value === MenuSeparatorString) {
+                                return jsx(MenuDivider, {}, "$$divider_".concat(index));
+                            }
+                            else if (item.value === MenuHeaderString) {
+                                lastHeader = jsx(MenuHeader, { children: item.label }, "$$header_".concat(index));
+                                return jsx(Fragment$1, {});
+                            }
+                            else {
+                                if (lastHeader) {
+                                    showHeader = lastHeader;
+                                    lastHeader = null;
+                                }
+                            }
+                            return ((!filteredValues || filteredValues.includes(item)) && (jsxs(Fragment$1, { children: [showHeader, jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: function () {
+                                                    setSelectedItem(item);
+                                                    if (item.subComponent) {
+                                                        setSelectedItem(item);
+                                                        subComponentIsValid.current = true;
+                                                        subComponentInitialValue.current = null;
+                                                    }
+                                                    else {
+                                                        setSubSelectedValue(null);
+                                                        subComponentIsValid.current = true;
+                                                    }
+                                                }, onClick: function (e) {
+                                                    if (item.subComponent) {
+                                                        e.keepOpen = true;
                                                     }
-                                                },
-                                                setValid: function (valid) {
-                                                    subComponentIsValid.current = valid;
-                                                },
-                                                triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
-                                                    return __generator(this, function (_a) {
-                                                        ref.closeMenu();
-                                                        return [2 /*return*/];
-                                                    });
-                                                }); }
-                                            } }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))));
+                                                } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedItem === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                                        context: { options: options },
+                                                        data: data,
+                                                        value: subSelectedValue,
+                                                        setValue: function (value) {
+                                                            setSubSelectedValue(value);
+                                                            if (subComponentInitialValue.current === null) {
+                                                                // copy the default value of the subcomponent so we can change detect on save
+                                                                subComponentInitialValue.current = JSON.stringify(value);
+                                                            }
+                                                        },
+                                                        setValid: function (valid) {
+                                                            subComponentIsValid.current = valid;
+                                                        },
+                                                        triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                                            return __generator(this, function (_a) {
+                                                                ref.closeMenu();
+                                                                return [2 /*return*/];
+                                                            });
+                                                        }); }
+                                                    } }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))] })));
                         })] }) }))] }));
 };
 
@@ -3848,7 +3864,8 @@ var GridPopoutEditMultiSelect = function (colDef, props) {
 };
 
 /** Menu configuration types **/
-var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+var __isMenuSeparator__ = "__isMenuSeparator__";
+var PopoutMenuSeparator = Object.freeze({ label: __isMenuSeparator__ });
 /**
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
  * you need a useMemo around your columnDefs
@@ -3969,8 +3986,8 @@ var GridFormPopoverMenu = function (props) {
         invalid: function () { return subComponentSelected && !subComponentIsValid.current; },
         save: save
     }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
-    return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, 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, 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 popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormPopupMenu" }, { children: jsx(Fragment$1, { children: (options === null || options === void 0 ? void 0 : options.length) === 0 ? (jsx(MenuItem, __assign({ className: "GridPopoverMenu-noOptions", disabled: true }, { children: "No actions" }), "GridPopoverMenu-empty")) : (options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                return item.label === "__isMenuSeparator__" ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxs(Fragment, { children: [jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled, 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: {
                                         context: {},
                                         data: data,
@@ -3984,7 +4001,7 @@ var GridFormPopoverMenu = function (props) {
                                         triggerSave: triggerSave
                                     } }, { children: jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}) })) })));
                             } }), "".concat(item.label, "_subcomponent")))] }, "".concat(item.label))));
-            }) }) })));
+            })) }) })));
 };
 
 /**
@@ -4519,7 +4536,7 @@ var useStateDeferred = function (initialValue) {
 var minimumInProgressTimeMs = 950;
 var ActionButton = function (_a) {
     var _b, _c, _d;
-    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, style = _a.style, className = _a.className, title = _a.title, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? "sm" : _e, _f = _a.iconPosition, iconPosition = _f === void 0 ? "left" : _f, _g = _a.level, level = _g === void 0 ? "tertiary" : _g, ariaLabel = _a["aria-label"];
+    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, disabled = _a.disabled, dataTestId = _a.dataTestId, style = _a.style, className = _a.className, title = _a.title, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? "sm" : _e, _f = _a.iconPosition, iconPosition = _f === void 0 ? "left" : _f, _g = _a.level, level = _g === void 0 ? "tertiary" : _g, ariaLabel = _a["aria-label"];
     var _h = useState(false), inProgress = _h[0], setInProgress = _h[1];
     var lastInProgress = usePrevious(inProgress !== null && inProgress !== void 0 ? inProgress : false);
     var _j = useStateDeferred(inProgress), localInProgress = _j[0], setLocalInProgress = _j[1], setLocalInProgressDeferred = _j[2];
@@ -4549,7 +4566,7 @@ var ActionButton = function (_a) {
                     case 3: return [2 /*return*/];
                 }
             });
-        }); }, disabled: localInProgress }, { children: [iconPosition === "right" && buttonText, localInProgress ? (jsx(LuiMiniSpinner, { size: 16, divProps: {
+        }); }, disabled: localInProgress || disabled }, { children: [iconPosition === "right" && buttonText, localInProgress ? (jsx(LuiMiniSpinner, { size: 16, divProps: {
                     "data-testid": "loading-spinner",
                     style: {
                         margin: 0,