@linzjs/step-ag-grid 17.4.8 → 17.4.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "17.4.8",
+  "version": "17.4.10",
   "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/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/utils/testUtil.ts

@@ -28,15 +28,20 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
       { tagName: `.ag-center-cols-container div[row-id='${rowId}']:not(:empty)` },
       within,
     );
-    const leftCols = await findQuick<HTMLDivElement>(
+    let combineChildren = [...row.children];
+
+    const leftCols = queryQuick<HTMLDivElement>(
       { tagName: `.ag-pinned-left-cols-container div[row-id='${rowId}']` },
       within,
     );
-    const rightCols = await findQuick<HTMLDivElement>(
+    if (leftCols) combineChildren = [...leftCols.children, ...combineChildren];
+
+    const rightCols = queryQuick<HTMLDivElement>(
       { tagName: `.ag-pinned-right-cols-container div[row-id='${rowId}']` },
       within,
     );
-    const combineChildren = [...leftCols.children, ...row.children, ...rightCols.children];
+    if (rightCols) combineChildren = [...rightCols.children, ...combineChildren];
+
     row.replaceChildren(...combineChildren);
   });
   return row;