@linzjs/step-ag-grid 8.2.1 → 8.3.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -10,7 +10,7 @@ import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { fnOrVar, isNotEmpty } from "../utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
-import { CellClassParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export interface GridBaseRow {
   id: string | number;
@@ -46,6 +46,7 @@ export const Grid = (params: GridProps): JSX.Element => {
   const {
     gridReady,
     setGridApi,
+    prePopupOps,
     setQuickFilter,
     ensureRowVisible,
     selectRowsById,
@@ -161,6 +162,16 @@ export const Grid = (params: GridProps): JSX.Element => {
     updateQuickFilter();
   }, [updateQuickFilter]);
 
+  const combineEditables =
+    (...editables: (boolean | EditableCallback | undefined)[]) =>
+    (params: EditableCallbackParams): boolean => {
+      const results = editables.map((editable) => fnOrVar(editable, params));
+      // If editable is not set anywhere then it's non-editable
+      if (results.every((v) => v == null)) return false;
+      // If any editable value is or returns false then it's non-editable
+      return !results.some((v) => v == false);
+    };
+
   /**
    * Synchronise externally selected items to grid on externalSelectedItems change
    */
@@ -170,14 +181,14 @@ export const Grid = (params: GridProps): JSX.Element => {
 
   const columnDefs = useMemo((): ColDef[] => {
     const adjustColDefs = params.columnDefs.map((colDef) => {
+      const colDefEditable = colDef.editable;
+      const editable = combineEditables(params.readOnly !== false, params.defaultColDef?.editable, colDefEditable);
       return {
         ...colDef,
-        editable: params.readOnly ? false : params.defaultColDef?.editable ?? colDef.editable,
+        editable,
         cellClassRules: {
           ...colDef.cellClassRules,
-          "GridCell-readonly": (ccp: CellClassParams) =>
-            (params.readOnly != null || !params.readOnly) &&
-            !fnOrVar(params.defaultColDef?.editable ?? colDef.editable, ccp),
+          "GridCell-readonly": (ccp: CellClassParams) => !editable(ccp as any as EditableCallbackParams),
         },
       };
     });
@@ -186,9 +197,8 @@ export const Grid = (params: GridProps): JSX.Element => {
           {
             colId: "selection",
             editable: false,
-            initialWidth: 35,
-            minWidth: 35,
-            maxWidth: 35,
+            minWidth: 42,
+            maxWidth: 42,
             suppressSizeToFit: true,
             checkboxSelection: true,
             headerComponent: GridHeaderSelect,
@@ -241,6 +251,7 @@ export const Grid = (params: GridProps): JSX.Element => {
 
   const startCellEditing = useCallback(
     (event: CellEvent) => {
+      prePopupOps();
       if (!event.node.isSelected()) {
         event.node.setSelected(true, true);
       }
@@ -256,7 +267,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         });
       }
     },
-    [checkUpdating],
+    [checkUpdating, prePopupOps],
   );
 
   const onCellDoubleClick = useCallback(
@@ -278,6 +289,7 @@ export const Grid = (params: GridProps): JSX.Element => {
   const invokeEditAction = (e: CellEvent): boolean => {
     const editAction = e.colDef?.cellRendererParams?.editAction;
     if (!editAction) return false;
+
     const editable = fnOrVar(e.colDef?.editable, e);
     if (editable) {
       if (!e.node.isSelected()) {

package/src/components/GridCell.tsx

@@ -67,7 +67,7 @@ export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
 };
 
 /*
- * All cells should use this
+ * All cells should use this.
  */
 export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCommon>(
   props: GenericCellColDef<RowType>,
@@ -81,6 +81,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     colId: props.field,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
+    editable: props.editable ?? false,
     ...(custom?.editor && {
       cellClassRules: GridCellMultiSelectClassRules,
       editable: props.editable ?? true,

package/src/components/gridForm/GridFormDropDown.tsx

@@ -188,6 +188,23 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
     return true;
   }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
 
+  const onMouseEnterFocus = useCallback((item: FinalSelectOption) => {
+    setSelectedItem(item);
+    if (item.subComponent) {
+      subComponentIsValid.current = true;
+      subComponentInitialValue.current = null;
+    } else {
+      setSubSelectedValue(null);
+      subComponentIsValid.current = true;
+    }
+  }, []);
+
+  const onMouseLeaveFocus = useCallback(() => {
+    setSelectedItem(null);
+    setSubSelectedValue(null);
+    subComponentIsValid.current = true;
+  }, []);
+
   const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid: () => !!(selectedItem && !subComponentIsValid.current),
@@ -268,17 +285,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                       disabled={!!item.disabled}
                       title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                       value={item.value}
-                      onFocus={() => {
-                        setSelectedItem(item);
-                        if (item.subComponent) {
-                          setSelectedItem(item);
-                          subComponentIsValid.current = true;
-                          subComponentInitialValue.current = null;
-                        } else {
-                          setSubSelectedValue(null);
-                          subComponentIsValid.current = true;
-                        }
-                      }}
+                      onFocus={() => onMouseEnterFocus(item)}
+                      onMouseEnter={() => onMouseEnterFocus(item)}
+                      onMouseLeave={onMouseLeaveFocus}
                       onClick={(e: ClickEvent) => {
                         if (item.subComponent) {
                           e.keepOpen = true;

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -13,8 +13,8 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
 ): ColDefT<RowType> =>
   GridCell<RowType, GridFormPopoverMenuProps<RowType>>(
     {
-      minWidth: 40,
-      maxWidth: 40,
+      minWidth: 48,
+      maxWidth: 48,
       width: 40,
       editable: colDef.editable != null ? colDef.editable : true,
       cellStyle: { justifyContent: "center" },

package/src/contexts/GridContext.tsx

@@ -5,6 +5,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[];
@@ -34,6 +35,9 @@ export interface GridContextType {
 
 export const GridContext = createContext<GridContextType>({
   gridReady: false,
+  prePopupOps: () => {
+    console.error("no context provider for prePopupOps");
+  },
   externallySelectedItemsAreInSync: false,
   setGridApi: () => {
     console.error("no context provider for setGridApi");

package/src/contexts/GridContextProvider.tsx

@@ -5,6 +5,7 @@ import { defer, delay, difference, isEmpty, last, sortBy } from "lodash-es";
 import { isNotEmpty, wait } from "../utils/util";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 import { GridBaseRow } from "../components/Grid";
+import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
 
 interface GridContextProps {
   children: ReactNode;
@@ -20,6 +21,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const [gridApi, _setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
   const idsBeforeUpdate = useRef<number[]>([]);
+  const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
 
   const setGridApi = useCallback((gridApi: GridApi | undefined) => {
@@ -43,6 +45,13 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     [gridApi],
   );
 
+  /**
+   * Before a popup record the currently focused cell.
+   */
+  const prePopupOps = useCallback(() => {
+    prePopupFocusedCell.current = gridApi?.getFocusedCell() ?? undefined;
+  }, [gridApi]);
+
   /**
    * Set the quick filter value to grid.
    */
@@ -276,7 +285,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   }, [gridApiOp]);
 
-  const stopEditing = useCallback((): void => gridApiOp((gridApi) => gridApi.stopEditing()), [gridApiOp]);
+  const stopEditing = useCallback((): void => {
+    if (prePopupFocusedCell.current) {
+      gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+    }
+    gridApiOp((gridApi) => gridApi.stopEditing());
+  }, [gridApi, gridApiOp]);
 
   const selectNextCell = useCallback(
     (tabDirection: -1 | 0 | 1 = 0) => {
@@ -297,8 +311,6 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     ): Promise<boolean> => {
       setSaving && setSaving(true);
       return await gridApiOp(async (gridApi) => {
-        const preOpCell = gridApi.getFocusedCell();
-
         const selectedRows = props.selectedRows;
 
         let ok = false;
@@ -331,13 +343,13 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         }
 
         // Only focus next cell if user hasn't already manually changed focus
-        const postOpCell = gridApi.getFocusedCell();
+        const 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);
         }
@@ -368,6 +380,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     <GridContext.Provider
       value={{
         gridReady,
+        prePopupOps,
         setGridApi,
         setQuickFilter,
         selectRowsById,

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -168,17 +168,15 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
   return (
     <Grid
       {...props}
-      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       defaultColDef={defaultColDef}
       columnDefs={columnDefs}
       rowData={rowData}
       domLayout={"autoHeight"}
-      autoSelectFirstRow={true}
-      readOnly={false}
     />
   );
 };
 
 export const NonEditableRow = GridNonEditableRowTemplate.bind({});
+NonEditableRow.args = { autoSelectFirstRow: true, selectable: true };