@linzjs/step-ag-grid 7.1.0 → 7.2.0

package/dist/index.js

@@ -2825,20 +2825,17 @@ var Grid = function (params) {
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (jsxRuntime.jsxs("div", __assign({ "data-testid": params.dataTestId, className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { children: [params.quickFilter && (jsxRuntime.jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsxRuntime.jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
                         setInternalQuickFilter(event.target.value);
-                    } }) }))), jsxRuntime.jsx(agGridReact.AgGridReact, { getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_b = params.postSortRows) !== null && _b !== void 0 ? _b : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
+                    } }) }))), jsxRuntime.jsx(agGridReact.AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_b = params.postSortRows) !== null && _b !== void 0 ? _b : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
 };
 
-var GenericMultiEditCellClass = function (props) {
-    var api = props.api;
-    if (api == null)
-        return "";
-    var rowSelected = api
-        .getSelectedNodes()
-        .map(function (row) { return row.id; })
-        .includes(props.node.id);
-    return rowSelected && api.getEditingCells().some(function (cell) { return cell.column.getColDef() === props.colDef; })
-        ? "ag-selected-for-edit"
-        : "";
+var GridCellMultiSelectClassRules = {
+    "ag-selected-for-edit": function (_a) {
+        var api = _a.api, node = _a.node, colDef = _a.colDef;
+        return api
+            .getSelectedNodes()
+            .map(function (row) { return row.id; })
+            .includes(node.id) && api.getEditingCells().some(function (cell) { return cell.column.getColDef() === colDef; });
+    }
 };
 
 function styleInject(css, ref) {
@@ -2916,7 +2913,7 @@ var GridCellRenderer = function (props) {
 var GridCell = function (props, custom) {
     var _a;
     return __assign(__assign(__assign(__assign(__assign(__assign({ colId: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
-        cellClass: (custom === null || custom === void 0 ? void 0 : custom.multiEdit) ? GenericMultiEditCellClass : undefined,
+        cellClassRules: GridCellMultiSelectClassRules,
         editable: (_a = props.editable) !== null && _a !== void 0 ? _a : true,
         cellEditor: GenericCellEditorComponentWrapper(custom)
     })), { suppressKeyboardEvent: function (e) {
@@ -3537,8 +3534,8 @@ function isMatch(inputs, patterns, options) {
  * "*L" => *L
  * "A B" => A* and B*
  * "A B, C" => (A* and B*) or C*
- *
- * Returns ture if there's a text match.
+ * "!A" => all values must not match A
+ * Returns true if there's a text match.
  */
 var textMatch = function (text, filter) {
     if (text == null)
@@ -3547,12 +3544,15 @@ var textMatch = function (text, filter) {
         .split(",")
         .map(function (sf) { return sf.trim(); })
         .filter(function (sf) { return sf; });
+    var _a = lodashEs.partition(superFilters, function (superFilters) { return superFilters.startsWith("!"); }), negativeFilters = _a[0], positiveFilters = _a[1];
     var values = text.replaceAll(",", " ").trim().split(/\s+/);
-    return (lodashEs.isEmpty(superFilters) || // Not filtered
-        superFilters.some(function (superFilter) {
+    return ((lodashEs.isEmpty(positiveFilters) || // Not filtered
+        positiveFilters.some(function (superFilter) {
             var subFilters = superFilter.split(/\s+/).map(function (s) { return s.replaceAll(/([!?])/g, "\\$1"); });
             return subFilters.every(function (subFilter) { return values.some(function (value) { return isMatch(value, subFilter); }); });
-        }));
+        })) &&
+        (lodashEs.isEmpty(negativeFilters) ||
+            negativeFilters.every(function (superFilter) { return values.every(function (value) { return isMatch(value, superFilter); }); })));
 };
 
 var GridFormMultiSelect = function (props) {
@@ -3614,8 +3614,32 @@ var GridFormMultiSelect = function (props) {
      * Groups options into their header groups
      */
     var headerGroups = React.useMemo(function () {
-        return options &&
-            lodashEs.groupBy(options.filter(function (o) { return textMatch(o.label, filter) && o.value; }), "filter");
+        if (!options)
+            return undefined;
+        var result = lodashEs.groupBy(options.filter(function (o) { return textMatch(o.label, filter) && o.value; }), "filter");
+        // remove leading/trailing/duplicate dividers
+        return lodashEs.fromPairs(lodashEs.toPairs(result).map(function (_a) {
+            var key = _a[0], arr = _a[1];
+            var lastWasDivider = true;
+            return [
+                key,
+                arr
+                    .map(function (row, index) {
+                    if (row.value === MenuSeparatorString) {
+                        if (lastWasDivider)
+                            return null;
+                        if (index === arr.length - 1)
+                            return null;
+                        lastWasDivider = true;
+                    }
+                    else {
+                        lastWasDivider = false;
+                    }
+                    return row;
+                })
+                    .filter(function (r) { return r; }),
+            ];
+        }));
     }, [filter, options]);
     var headers = React.useMemo(function () { var _a; return (_a = props.headers) !== null && _a !== void 0 ? _a : [{ header: "" }]; }, [props.headers]);
     var _e = useGridPopoverHook({
@@ -3623,7 +3647,7 @@ var GridFormMultiSelect = function (props) {
         invalid: invalid,
         save: save
     }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
-    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups && (jsxRuntime.jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header) {
+    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter, triggerSave: triggerSave }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups && (jsxRuntime.jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header) {
                         var subOptions = headerGroups["".concat(header.filter)];
                         return (!lodashEs.isEmpty(subOptions) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.header && jsxRuntime.jsx(MenuHeader, { children: header.header }), subOptions.map(function (item, index) {
                                     return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "div_".concat(index))) : (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions }), item.checked && item.subComponent && (jsxRuntime.jsx(MenuSubComponent, __assign({}, { item: item, options: options, setOptions: setOptions, data: data, triggerSave: triggerSave }, { subComponentIsValid: subComponentIsValidRef.current })))] }, "val_".concat(item.value)));
@@ -3631,14 +3655,19 @@ var GridFormMultiSelect = function (props) {
                     }) })))] })) })));
 };
 var FilterInput = function (props) {
-    var options = props.options, setOptions = props.setOptions, onSelectFilter = props.onSelectFilter, filter = props.filter, setFilter = props.setFilter, headerGroups = props.headerGroups, filterPlaceholder = props.filterPlaceholder, filterHelpText = props.filterHelpText;
+    var options = props.options, setOptions = props.setOptions, onSelectFilter = props.onSelectFilter, filter = props.filter, setFilter = props.setFilter, headerGroups = props.headerGroups, filterPlaceholder = props.filterPlaceholder, filterHelpText = props.filterHelpText, triggerSave = props.triggerSave;
+    var enterHasBeenPressed = React.useRef(false);
+    var lastKeyWasEnter = React.useRef(false);
     var toggleSelectAllVisible = React.useCallback(function () {
         if (!options || !headerGroups)
             return;
         if (lodashEs.isEmpty(filter.trim())) {
             // Toggle off if any items are checked otherwise on
             var anyChecked_1 = options.some(function (o) { return o.checked; });
-            options.forEach(function (o) { return (o.checked = !anyChecked_1); });
+            options.forEach(function (o) {
+                if (o.label !== undefined)
+                    o.checked = !anyChecked_1;
+            });
         }
         else {
             // Toggle on if any filtered items are checked otherwise off
@@ -3647,7 +3676,7 @@ var FilterInput = function (props) {
             });
             Object.values(headerGroups).forEach(function (headerOptions) {
                 headerOptions.forEach(function (o) {
-                    if (o.checked !== undefined)
+                    if (o.label !== undefined)
                         o.checked = anyChecked_2;
                 });
             });
@@ -3657,28 +3686,52 @@ var FilterInput = function (props) {
     var addCustomFilterValue = React.useCallback(function () {
         if (!options || !onSelectFilter)
             return;
+        var filterTrimmed = filter.trim();
+        if (lodashEs.isEmpty(filterTrimmed)) {
+            triggerSave().then();
+            return;
+        }
         var preFilterOptions = JSON.stringify(options);
-        onSelectFilter(filter.trim(), options);
+        onSelectFilter(filterTrimmed, options);
         // Detect if options list changed and update
         if (preFilterOptions === JSON.stringify(options))
             return;
         setOptions(__spreadArray([], options, true));
         setFilter("");
-    }, [filter, onSelectFilter, options, setFilter, setOptions]);
+    }, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
+    var handleKeyDown = React.useCallback(function (e) {
+        if (e.key === "Enter") {
+            enterHasBeenPressed.current = true;
+        }
+    }, []);
     var handleKeyUp = React.useCallback(function (e) {
         if (e.key === "Enter") {
             e.stopPropagation();
             e.preventDefault();
             if (e.ctrlKey)
                 toggleSelectAllVisible();
-            else if (onSelectFilter)
-                addCustomFilterValue();
+            else if (enterHasBeenPressed.current) {
+                var filterTrimmed = filter.trim();
+                if (lodashEs.isEmpty(filterTrimmed)) {
+                    triggerSave().then();
+                    return;
+                }
+                onSelectFilter && addCustomFilterValue();
+            }
+            lastKeyWasEnter.current = true;
+        }
+        else if (e.key === "Control") {
+            lastKeyWasEnter.current && setFilter("");
+            lastKeyWasEnter.current = false;
+        }
+        else {
+            lastKeyWasEnter.current = false;
         }
-    }, [addCustomFilterValue, onSelectFilter, toggleSelectAllVisible]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_) { return (jsxRuntime.jsxs("div", __assign({ style: { width: "100%" }, className: "GridFormMultiSelect-filter" }, { children: [jsxRuntime.jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder !== null && filterPlaceholder !== void 0 ? filterPlaceholder : "Placeholder", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyUp: handleKeyUp }), filterHelpText && (jsxRuntime.jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] }))); } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter"), headerGroups && !lodashEs.toPairs(headerGroups).some(function (_a) {
+    }, [addCustomFilterValue, filter, onSelectFilter, setFilter, toggleSelectAllVisible, triggerSave]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_) { return (jsxRuntime.jsxs("div", __assign({ style: { width: "100%" }, className: "GridFormMultiSelect-filter" }, { children: [jsxRuntime.jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder !== null && filterPlaceholder !== void 0 ? filterPlaceholder : "Placeholder", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), filterHelpText && (jsxRuntime.jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] }))); } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter"), headerGroups && !lodashEs.toPairs(headerGroups).some(function (_a) {
                 _a[0]; var options = _a[1];
                 return !lodashEs.isEmpty(options);
-            }) && (jsxRuntime.jsx("div", __assign({ className: "szh-menu__item" }, { children: "[No items match the filter]" })))] }));
+            }) && (jsxRuntime.jsx("div", __assign({ className: "szh-menu__item GridPopoverEditDropDown-noOptions" }, { children: "No Options" })))] }));
 };
 var MenuRadioItem = function (props) {
     var _a, _b;
@@ -3693,7 +3746,7 @@ var MenuRadioItem = function (props) {
                 e.keepOpen = true;
                 toggleValue(item);
             }
-        } }, { children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: (_a = item.checked) !== null && _a !== void 0 ? _a : false, value: "".concat(item.value), label: (_b = item.label) !== null && _b !== void 0 ? _b : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
+        } }, { children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: (_a = item.checked) !== null && _a !== void 0 ? _a : false, value: "".concat(item.value), label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.warning && jsxRuntime.jsx(GridIcon, { icon: "ic_warning", title: item.warning }), (_b = item.label) !== null && _b !== void 0 ? _b : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value))] }), inputProps: {
                 onClick: function (e) {
                     // Click is handled by MenuItem onClick
                     e.preventDefault();
@@ -3873,7 +3926,7 @@ var GridFormPopoverMenu = function (props) {
  * Popout burger menu
  */
 var GridPopoverMenu = function (colDef, custom) {
-    return GridCell(__assign(__assign({ maxWidth: 40, editable: colDef.editable != null ? colDef.editable : true, cellStyle: { justifyContent: "flex-end" }, cellRenderer: GridRenderPopoutMenuCell, cellClass: (custom === null || custom === void 0 ? void 0 : custom.multiEdit) ? GenericMultiEditCellClass : undefined }, colDef), { cellRendererParams: {
+    return GridCell(__assign(__assign({ maxWidth: 40, editable: colDef.editable != null ? colDef.editable : true, cellStyle: { justifyContent: "center" }, cellRenderer: GridRenderPopoutMenuCell }, colDef), { cellRendererParams: {
             // Menus open on single click, this parameter is picked up in Grid.tsx
             singleClickEdit: true
         } }), __assign({ editor: GridFormPopoverMenu }, custom));
@@ -4047,8 +4100,8 @@ var GridPopoverEditBearingCorrection = function (colDef, props) {
 
 var GridPopoverEditDropDown = function (colDef, props) {
     return GridCell(colDef, __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
-            // Defaults to medium size container
-            className: "GridPopoverEditDropDown-containerMedium" }, props.editorParams) }));
+            // Defaults to large size container
+            className: "GridPopoverEditDropDown-containerLarge" }, props.editorParams) }));
 };
 
 var GridFormMessage = function (props) {
@@ -24585,9 +24638,9 @@ exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
 exports.ControlledMenu = ControlledMenu;
 exports.FocusableItem = FocusableItem;
 exports.GenericCellEditorComponentWrapper = GenericCellEditorComponentWrapper;
-exports.GenericMultiEditCellClass = GenericMultiEditCellClass;
 exports.Grid = Grid;
 exports.GridCell = GridCell;
+exports.GridCellMultiSelectClassRules = GridCellMultiSelectClassRules;
 exports.GridCellRenderer = GridCellRenderer;
 exports.GridContext = GridContext;
 exports.GridContextProvider = GridContextProvider;