@linzjs/step-ag-grid 17.4.9 → 17.5.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "17.4.9",
+  "version": "17.5.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -84,7 +84,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-essentials": "^7.2.3",
@@ -111,7 +111,7 @@
     "@typescript-eslint/parser": "^5.62.0",
     "babel-jest": "^29.6.2",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^6.21.0",
+    "chromatic": "^6.24.1",
     "conventional-changelog-conventionalcommits": "^6.1.0",
     "css-loader": "^6.8.1",
     "eslint": "^8.47.0",
@@ -132,7 +132,7 @@
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.29",
     "postcss-loader": "^7.3.3",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.8",
@@ -143,13 +143,13 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.35.0",
-    "sass": "1.64.2",
+    "sass": "1.66.1",
     "sass-loader": "^13.3.2",
-    "semantic-release": "^21.0.7",
+    "semantic-release": "^21.1.1",
     "storybook": "^7.2.3",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^3.0.0",

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/lui/FormError.scss

@@ -1,6 +1,6 @@
 @use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
-.helpText {
+.FormError-helpText {
   font-size: 0.75rem;
   color: colors.$fuscous;
   font-weight: 400;

package/src/lui/FormError.tsx

@@ -16,7 +16,7 @@ export const FormError = (props: FormErrorProps) => {
         </span>
       )}
 
-      {props.helpText && !props.error && <span className={"helpText"}>{props.helpText}</span>}
+      {props.helpText && !props.error && <span className={"FormError-helpText"}>{props.helpText}</span>}
     </>
   );
 };

package/src/lui/TextInputFormatted.scss

@@ -1,4 +1,4 @@
-.LuiTextInput {
+.LuiTextInput.GridLuiTextInput {
   margin-bottom: 0;
 }
 

package/src/lui/TextInputFormatted.tsx

@@ -19,7 +19,13 @@ export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes
 
 export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
   return (
-    <div className={clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className)}>
+    <div
+      className={clsx(
+        "LuiTextInput GridLuiTextInput Grid-popoverContainer",
+        props.error && "hasError",
+        props.className,
+      )}
+    >
       <span className="LuiTextInput-inputWrapper">
         {/* wrapper div used for error styling */}
         <input

package/src/stories/grid/FormTest.scss

@@ -4,6 +4,10 @@
   gap: 12px;
 }
 
+.FormTest .LuiTextInput {
+  margin-bottom: 0;
+}
+
 .FormTest-textInput {
   width: 100px;
 }

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
   }