@linzjs/step-ag-grid 7.8.0 → 7.9.0

package/README.md

@@ -5,7 +5,7 @@
 ## Features
 
 - [ag-grid-community](https://www.npmjs.com/package/ag-grid-community) based grid with custom popover components
-implemented using a modified [react-menu](https://www.npmjs.com/package/@szhsin/react-menu).
+  implemented using a modified [react-menu](https://www.npmjs.com/package/@szhsin/react-menu).
 - Default components
   - Text input
   - Text area
@@ -15,7 +15,7 @@ implemented using a modified [react-menu](https://www.npmjs.com/package/@szhsin/
   - Popover message
   - Custom form
 
-*Please note this requires React >=17, ag-grid-community >=27, and sass.*
+_Please note this requires React >=17, ag-grid-community >=27, and sass._
 
 ## Install
 
@@ -44,7 +44,7 @@ Storybook demo deployed at: https://linz.github.io/step-ag-grid/
 ```tsx
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/step-ag-grid/dist/index.css"
+import "@linzjs/step-ag-grid/dist/index.css";
 // Only required for LINZ themes otherwise import the default theme from ag-grid
 import "@linzjs/step-ag-grid/dist/GridTheme.scss";
 
@@ -55,7 +55,7 @@ import {
   ColDefT,
   GridCell,
   GridPopoverMessage,
-  GridPopoverEditDropDown
+  GridPopoverEditDropDown,
 } from "@linzjs/step-ag-grid";
 
 const GridDemo = () => {
@@ -63,9 +63,10 @@ const GridDemo = () => {
     id: number;
     name: number;
     position: string;
-  };
-  
-  const columnDefs: ColDefT<ITestRow>[] = useMemo(() => [
+  }
+
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
       GridCell({
         field: "id",
         headerName: "Id",
@@ -116,8 +117,8 @@ const GridDemo = () => {
 
   const rowData: ITestRow[] = useMemo(
     () => [
-        { id: 1000, name: "Tom", position: "Tester" },
-        { id: 1001, name: "Sue", position: "Developer" },
+      { id: 1000, name: "Tom", position: "Tester" },
+      { id: 1001, name: "Sue", position: "Developer" },
     ],
     [],
   );
@@ -125,13 +126,11 @@ const GridDemo = () => {
   return (
     <GridUpdatingContextProvider>
       <GridContextProvider>
-        <Grid
-          selectable={true}
-          columnDefs={columnDefs}
-          rowData={rowData}
-        />
+        <Grid selectable={true} columnDefs={columnDefs} rowData={rowData} />
       </GridContextProvider>
     </GridUpdatingContextProvider>
   );
 };
 ```
+
+Check `src\stories` for more usage examples

package/dist/index.css

@@ -343,8 +343,13 @@
   padding: 4px 8px;
 }
 
-.GridCell-editableIcon {
+.ag-cell .GridCell-editableIcon {
   fill: #beb9b4;
+  visibility: hidden;
+}
+
+.ag-cell:hover .GridCell-editableIcon, .ag-cell.ag-cell-focus .GridCell-editableIcon {
+  visibility: visible;
 }
 
 .GridFormMessage-container {

package/dist/index.js

@@ -2815,18 +2815,8 @@ var Grid = function (params) {
         }
     }, [checkUpdating]);
     var onCellDoubleClick = React.useCallback(function (event) {
-        var _a, _b, _c, _d, _e;
-        var editable = fnOrVar((_a = event.colDef) === null || _a === void 0 ? void 0 : _a.editable, event);
-        if (!editable)
-            return;
-        var editAction = (_c = (_b = event.colDef) === null || _b === void 0 ? void 0 : _b.cellRendererParams) === null || _c === void 0 ? void 0 : _c.editAction;
-        if (editAction) {
-            // Clicked row comes first in selected rows
-            editAction(__spreadArray([event.data], event.api.getSelectedRows().filter(function (row) { return row.id !== event.data.id; }), true));
-        }
-        else if (!((_e = (_d = event.colDef) === null || _d === void 0 ? void 0 : _d.cellRendererParams) === null || _e === void 0 ? void 0 : _e.singleClickEdit)) {
+        if (!invokeEditAction(event))
             startCellEditing(event);
-        }
     }, [startCellEditing]);
     var onCellClicked = React.useCallback(function (event) {
         var _a, _b;
@@ -2834,9 +2824,20 @@ var Grid = function (params) {
             startCellEditing(event);
         }
     }, [startCellEditing]);
+    var invokeEditAction = function (e) {
+        var _a, _b, _c;
+        var editAction = (_b = (_a = e.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) === null || _b === void 0 ? void 0 : _b.editAction;
+        if (!editAction)
+            return false;
+        var editable = fnOrVar((_c = e.colDef) === null || _c === void 0 ? void 0 : _c.editable, e);
+        editable && editAction(__spreadArray([e.data], e.api.getSelectedRows().filter(function (row) { return row.id !== e.data.id; }), true));
+        return true;
+    };
     var onCellKeyPress = React.useCallback(function (e) {
-        if (e.event.key === "Enter")
-            startCellEditing(e);
+        if (e.event.key === "Enter") {
+            if (!invokeEditAction(e))
+                startCellEditing(e);
+        }
     }, [startCellEditing]);
     var onCellEditingStopped = React.useCallback(function (event) {
         refreshSelectedRows(event);
@@ -2881,7 +2882,7 @@ var GridCellRenderer = function (props) {
     var warningText = warningFn ? warningFn(props) : undefined;
     var infoFn = rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.info;
     var infoText = infoFn ? infoFn(props) : undefined;
-    return (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_b = (_a = colDef.field) !== null && _a !== void 0 ? _a : colDef.colId) !== null && _b !== void 0 ? _b : "", props.data.id) }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [typeof warningText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_info", title: infoText }), jsxRuntime.jsx("div", __assign({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: ((_c = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _c === void 0 ? void 0 : _c.originalCellRenderer) ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))) : (jsxRuntime.jsx("span", __assign({ title: props.valueFormatted }, { children: props.valueFormatted }))) })), fnOrVar((_d = props.colDef) === null || _d === void 0 ? void 0 : _d.editable, props) && (rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.editableIcon) && (jsxRuntime.jsx("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.editableIcon })))] }) })));
+    return (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_b = (_a = colDef.field) !== null && _a !== void 0 ? _a : colDef.colId) !== null && _b !== void 0 ? _b : "", props.data.id) }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [typeof warningText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_info", title: infoText }), jsxRuntime.jsx("div", __assign({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: ((_c = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _c === void 0 ? void 0 : _c.originalCellRenderer) ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))) : (jsxRuntime.jsx("span", __assign({ title: props.valueFormatted }, { children: props.valueFormatted }))) })), fnOrVar((_d = props.colDef) === null || _d === void 0 ? void 0 : _d.editable, props) && (rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.rightHoverElement) && (jsxRuntime.jsx("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.rightHoverElement })))] }) })));
 };
 /*
  * All cells should use this
@@ -2893,6 +2894,13 @@ var GridCell = function (props, custom) {
         editable: (_a = props.editable) !== null && _a !== void 0 ? _a : true,
         cellEditor: GenericCellEditorComponentWrapper(custom)
     })), { suppressKeyboardEvent: function (e) {
+            var _a, _b, _c, _d;
+            var shortcutKeys = (_b = (_a = e.colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.shortcutKeys) !== null && _b !== void 0 ? _b : {};
+            var exec = shortcutKeys[e.event.key];
+            if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
+                var editable = fnOrVar((_c = e.colDef) === null || _c === void 0 ? void 0 : _c.editable, e);
+                return editable ? (_d = exec(e)) !== null && _d !== void 0 ? _d : true : true;
+            }
             // It's important that aggrid doesn't trigger edit on enter
             // as the incorrect selected rows will be returned
             return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " "].includes(e.event.key);
@@ -3931,7 +3939,7 @@ var bearingCorrectionValueFormatter = function (params) {
     if (typeof value === "string") {
         return convertDDToDMS(bearingNumberParser(value), true, true);
     }
-    return convertDDToDMS(value, true, true);
+    return convertDDToDMS(value, true, false);
 };
 var bearingNumberParser = function (value) {
     if (value === "")