@linzjs/step-ag-grid 8.2.1 → 8.3.0

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

@@ -4,6 +4,7 @@ import { GridBaseRow } from "../components/Grid";
 export interface GridContextType {
     gridReady: boolean;
     setGridApi: (gridApi: GridApi | undefined) => void;
+    prePopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;
     editingCells: () => boolean;
     getSelectedRows: <T extends GridBaseRow>() => T[];

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

@@ -1962,6 +1962,9 @@ var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
 var GridContext = createContext({
     gridReady: false,
+    prePopupOps: function () {
+        console.error("no context provider for prePopupOps");
+    },
     externallySelectedItemsAreInSync: false,
     setGridApi: function () {
         console.error("no context provider for setGridApi");
@@ -2071,6 +2074,7 @@ var GridContextProvider = function (props) {
     var _a = useState(), gridApi = _a[0], _setGridApi = _a[1];
     var _b = useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = useRef([]);
+    var prePopupFocusedCell = useRef();
     var _c = useState(false), externallySelectedItemsAreInSync = _c[0], setExternallySelectedItemsAreInSync = _c[1];
     var setGridApi = useCallback(function (gridApi) {
         _setGridApi(gridApi);
@@ -2088,6 +2092,13 @@ var GridContextProvider = function (props) {
         }
         return gridApi ? hasApiFn(gridApi) : noApiFn();
     }, [gridApi]);
+    /**
+     * Before a popup record the currently focused cell.
+     */
+    var prePopupOps = useCallback(function () {
+        var _a;
+        prePopupFocusedCell.current = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getFocusedCell()) !== null && _a !== void 0 ? _a : undefined;
+    }, [gridApi]);
     /**
      * Set the quick filter value to grid.
      */
@@ -2273,7 +2284,12 @@ var GridContextProvider = function (props) {
             document.body.clientWidth && gridApi.sizeColumnsToFit();
         });
     }, [gridApiOp]);
-    var stopEditing = useCallback(function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); }, [gridApiOp]);
+    var stopEditing = useCallback(function () {
+        if (prePopupFocusedCell.current) {
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+        }
+        gridApiOp(function (gridApi) { return gridApi.stopEditing(); });
+    }, [gridApi, gridApiOp]);
     var selectNextCell = useCallback(function (tabDirection) {
         if (tabDirection === void 0) { tabDirection = 0; }
         gridApiOp(function (gridApi) {
@@ -2289,12 +2305,11 @@ var GridContextProvider = function (props) {
                 case 0:
                     setSaving && setSaving(true);
                     return [4 /*yield*/, gridApiOp(function (gridApi) { return __awaiter(void 0, void 0, void 0, function () {
-                            var preOpCell, selectedRows, ok, cell, postOpCell;
+                            var selectedRows, ok, cell, postPopupFocusedCell;
                             var _a;
                             return __generator(this, function (_b) {
                                 switch (_b.label) {
                                     case 0:
-                                        preOpCell = gridApi.getFocusedCell();
                                         selectedRows = props.selectedRows;
                                         ok = false;
                                         return [4 /*yield*/, modifyUpdating((_a = props.field) !== null && _a !== void 0 ? _a : "", selectedRows.map(function (data) { return data.id; }), function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -2329,12 +2344,12 @@ var GridContextProvider = function (props) {
                                             // Don't set saving if ok as the form has already closed
                                             setSaving && setSaving(false);
                                         }
-                                        postOpCell = gridApi.getFocusedCell();
+                                        postPopupFocusedCell = gridApi.getFocusedCell();
                                         if (tabDirection &&
-                                            preOpCell &&
-                                            postOpCell &&
-                                            preOpCell.rowIndex == postOpCell.rowIndex &&
-                                            preOpCell.column.getColId() == postOpCell.column.getColId()) {
+                                            prePopupFocusedCell.current &&
+                                            postPopupFocusedCell &&
+                                            prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
+                                            prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
                                             selectNextCell(tabDirection);
                                         }
                                         return [2 /*return*/, ok];
@@ -2372,6 +2387,7 @@ var GridContextProvider = function (props) {
     }); }, [externallySelectedItemsAreInSync]);
     return (jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
+            prePopupOps: prePopupOps,
             setGridApi: setGridApi,
             setQuickFilter: setQuickFilter,
             selectRowsById: selectRowsById,
@@ -2722,7 +2738,7 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (params) {
     var _a, _b, _c;
-    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, focusByRowById = _d.focusByRowById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, externallySelectedItemsAreInSync = _d.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
+    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, prePopupOps = _d.prePopupOps, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, focusByRowById = _d.focusByRowById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, externallySelectedItemsAreInSync = _d.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
     var _e = useState(""), internalQuickFilter = _e[0], setInternalQuickFilter = _e[1];
     var lastSelectedIds = useRef([]);
@@ -2824,6 +2840,20 @@ var Grid = function (params) {
     useEffect(function () {
         updateQuickFilter();
     }, [updateQuickFilter]);
+    var combineEditables = function () {
+        var editables = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            editables[_i] = arguments[_i];
+        }
+        return function (params) {
+            var results = editables.map(function (editable) { return fnOrVar(editable, params); });
+            // If editable is not set anywhere then it's non-editable
+            if (results.every(function (v) { return v == null; }))
+                return false;
+            // If any editable value is or returns false then it's non-editable
+            return !results.some(function (v) { return v == false; });
+        };
+    };
     /**
      * Synchronise externally selected items to grid on externalSelectedItems change
      */
@@ -2832,21 +2862,18 @@ var Grid = function (params) {
     }, [synchroniseExternallySelectedItemsToGrid]);
     var columnDefs = useMemo(function () {
         var adjustColDefs = params.columnDefs.map(function (colDef) {
-            var _a, _b;
-            return __assign(__assign({}, colDef), { editable: params.readOnly ? false : (_b = (_a = params.defaultColDef) === null || _a === void 0 ? void 0 : _a.editable) !== null && _b !== void 0 ? _b : colDef.editable, cellClassRules: __assign(__assign({}, colDef.cellClassRules), { "GridCell-readonly": function (ccp) {
-                        var _a, _b;
-                        return (params.readOnly != null || !params.readOnly) &&
-                            !fnOrVar((_b = (_a = params.defaultColDef) === null || _a === void 0 ? void 0 : _a.editable) !== null && _b !== void 0 ? _b : colDef.editable, ccp);
-                    } }) });
+            var _a;
+            var colDefEditable = colDef.editable;
+            var editable = combineEditables(params.readOnly !== false, (_a = params.defaultColDef) === null || _a === void 0 ? void 0 : _a.editable, colDefEditable);
+            return __assign(__assign({}, colDef), { editable: editable, cellClassRules: __assign(__assign({}, colDef.cellClassRules), { "GridCell-readonly": function (ccp) { return !editable(ccp); } }) });
         });
         return params.selectable
             ? __spreadArray([
                 {
                     colId: "selection",
                     editable: false,
-                    initialWidth: 35,
-                    minWidth: 35,
-                    maxWidth: 35,
+                    minWidth: 42,
+                    maxWidth: 42,
                     suppressSizeToFit: true,
                     checkboxSelection: true,
                     headerComponent: GridHeaderSelect,
@@ -2888,6 +2915,7 @@ var Grid = function (params) {
     }, []);
     var startCellEditing = useCallback(function (event) {
         var _a;
+        prePopupOps();
         if (!event.node.isSelected()) {
             event.node.setSelected(true, true);
         }
@@ -2901,7 +2929,7 @@ var Grid = function (params) {
                 colKey: event.column.getColId()
             });
         }
-    }, [checkUpdating]);
+    }, [checkUpdating, prePopupOps]);
     var onCellDoubleClick = useCallback(function (event) {
         if (!invokeEditAction(event))
             startCellEditing(event);
@@ -2990,13 +3018,13 @@ var suppressCellKeyboardEvents = function (e) {
     return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " ", "Home", "End", "PageUp", "PageDown"].includes(e.event.key);
 };
 /*
- * All cells should use this
+ * All cells should use this.
  */
 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) && {
+    var _a, _b;
+    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, editable: (_a = props.editable) !== null && _a !== void 0 ? _a : false }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
         cellClassRules: GridCellMultiSelectClassRules,
-        editable: (_a = props.editable) !== null && _a !== void 0 ? _a : true,
+        editable: (_b = props.editable) !== null && _b !== void 0 ? _b : true,
         cellEditor: GenericCellEditorComponentWrapper(custom === null || custom === void 0 ? void 0 : custom.editor)
     })), { suppressKeyboardEvent: suppressCellKeyboardEvents }), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
         cellEditorParams: __assign(__assign({}, custom.editorParams), { multiEdit: custom.multiEdit })
@@ -3408,6 +3436,22 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
+    var onMouseEnterFocus = useCallback(function (item) {
+        setSelectedItem(item);
+        if (item.subComponent) {
+            subComponentIsValid.current = true;
+            subComponentInitialValue.current = null;
+        }
+        else {
+            setSubSelectedValue(null);
+            subComponentIsValid.current = true;
+        }
+    }, []);
+    var onMouseLeaveFocus = useCallback(function () {
+        setSelectedItem(null);
+        setSubSelectedValue(null);
+        subComponentIsValid.current = true;
+    }, []);
     var popoverWrapper = useGridPopoverHook({
         className: props.className,
         invalid: function () { return !!(selectedItem && !subComponentIsValid.current); },
@@ -3440,18 +3484,7 @@ var GridFormDropDown = function (props) {
                                     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) {
+                            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 () { return onMouseEnterFocus(item); }, onMouseEnter: function () { return onMouseEnterFocus(item); }, onMouseLeave: onMouseLeaveFocus, onClick: function (e) {
                                                     if (item.subComponent) {
                                                         e.keepOpen = true;
                                                     }
@@ -4006,7 +4039,7 @@ var GridFormPopoverMenu = function (props) {
  * Popout burger menu
  */
 var GridPopoverMenu = function (colDef, custom) {
-    return GridCell(__assign(__assign({ minWidth: 40, maxWidth: 40, width: 40, editable: colDef.editable != null ? colDef.editable : true, cellStyle: { justifyContent: "center" }, cellRenderer: GridRenderPopoutMenuCell }, colDef), { cellRendererParams: {
+    return GridCell(__assign(__assign({ minWidth: 48, maxWidth: 48, width: 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));