@linzjs/step-ag-grid 17.4.10 → 17.5.1

package/package.json

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

package/src/components/Grid.tsx

@@ -96,6 +96,11 @@ export interface GridProps {
    * Whether to select row on context menu.
    */
   contextMenuSelectRow?: boolean;
+
+  /**
+   * Defaults to false.
+   */
+  singleClickEdit?: boolean;
 }
 
 /**
@@ -109,6 +114,7 @@ export const Grid = ({
   sizeColumns = "auto",
   selectColumnPinned = null,
   contextMenuSelectRow = false,
+  singleClickEdit = false,
   rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined,
   ...params
 }: GridProps): ReactElement => {
@@ -469,11 +475,11 @@ export const Grid = ({
    */
   const onCellClicked = useCallback(
     (event: CellEvent) => {
-      if (event.colDef?.cellRendererParams?.singleClickEdit) {
+      if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
         startCellEditing(event);
       }
     },
-    [startCellEditing],
+    [singleClickEdit, startCellEditing],
   );
 
   /**

package/src/styles/GridTheme.scss

@@ -10,18 +10,21 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     themes: (
       'step-compact.theme-specific': (
         extend-theme: alpine,
-        --ag-row-height: 36px,
-        --ag-header-height: 36px,
-        --ag-font-size: calc($grid-base-font-size - 2px),
+        row-height: 36px,
+        header-height: 36px,
+        font-size: calc($grid-base-font-size - 2px),
       ),
       'step-default.theme-specific': (
         extend-theme: alpine,
-        --ag-row-height: 40px,
-        --ag-header-height: 40px,
-        --ag-font-size: calc($grid-base-font-size),
+        row-height: 40px,
+        header-height: 40px,
+        font-size: calc($grid-base-font-size),
       ),
     ),
 
+    input-focus-border-color: lui.$sea,
+    borders-input: 1px solid,
+    input-border-color: lui.$silver,
     alpine-active-color: lui.$sea,
     background-color: lui.$white,
     border-color: lui.$dew,
@@ -49,6 +52,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
+  .ag-text-area-input:focus {
+    border-color: lui.$sea;
+  }
+
   .ag-cell[col-id="selection"] {
     display: flex; // Fix that when you click below checkbox it doesn't process a click
   }
@@ -187,4 +194,19 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-cell-wrapper {
     width: 100%;
   }
+
+  .ag-row-highlight-above::after, .ag-row-highlight-below::after {
+    content: '';
+    height: 2px;
+    background-color: transparent;
+  }
+  
+  .ag-row-highlight-above::after{
+    border-top: 2px dashed lui.$andrea;
+  
+  }
+
+  .ag-row-highlight-below::after {
+    border-bottom: 2px dashed lui.$andrea;
+  }
 }