@linzjs/step-ag-grid 8.2.2 → 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.2",
+  "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;
@@ -162,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
    */
@@ -171,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),
         },
       };
     });
@@ -187,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,
@@ -280,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/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 };