@linzjs/step-ag-grid 22.3.0 → 23.0.1

package/dist/vite.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vite").UserConfigExport;
+declare const _default: import("vite").UserConfigFnPromise;
 export default _default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "22.3.0",
+  "version": "23.0.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -39,7 +39,7 @@
     "debounce-promise": "^3.1.2",
     "lodash-es": ">=4",
     "matcher": "^5.0.0",
-    "react-transition-state": "^2.1.2",
+    "react-transition-state": "^2.2.0",
     "usehooks-ts": "^3.1.0"
   },
   "scripts": {
@@ -77,53 +77,53 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^2.0.2",
-    "@linzjs/lui": "^21.46.0",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@linzjs/lui": "^22.2.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.3.2",
-    "@storybook/addon-interactions": "^8.3.2",
-    "@storybook/addon-links": "^8.3.2",
-    "@storybook/react": "^8.3.2",
-    "@storybook/react-vite": "^8.3.2",
-    "@storybook/test": "^8.3.2",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@storybook/test-runner": "^0.21.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/debounce-promise": "^3.1.9",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.5.5",
+    "@types/node": "^22.10.7",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
-    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "ag-grid-community": "^32.2.0",
     "ag-grid-react": "^32.2.0",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^11.10.2",
+    "chromatic": "^11.25.0",
     "css-loader": "^7.1.2",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.24.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "eslint-plugin-testing-library": "^6.3.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
@@ -131,22 +131,22 @@
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.1",
     "postcss-loader": "^7.3.4",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.22.4",
+    "rollup": "^4.31.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.79.3",
+    "sass": "^1.83.4",
     "sass-loader": "^14.2.1",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.3.2",
+    "storybook": "^8.5.0",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "stylelint": "^15.11.0",
@@ -154,10 +154,10 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.7",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.10",
     "vite-plugin-html": "^3.2.2",
-    "vite-tsconfig-paths": "^5.0.1"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "babel": {
     "presets": [

package/src/components/gridFilter/GridFilterHeaderIconButton.tsx

@@ -21,7 +21,7 @@ export const GridFilterHeaderIconButton = forwardRef<HTMLButtonElement, GridFilt
         level={"tertiary"}
         className={"lui-button-icon-only"}
         ref={ref}
-        aria-label={title}
+        buttonProps={{ "aria-label": title }}
         title={title}
         onClick={onClick}
         disabled={disabled}

package/src/lui/ActionButton.scss

@@ -5,6 +5,10 @@
   align-items: center;
 }
 
+.ActionButton-inProgress .LuiIcon {
+  visibility: hidden;
+}
+
 .ActionButton-minimal.lui-button-lg.lui-button-icon-right {
   padding-right: 38px;
 }
@@ -41,14 +45,9 @@
   cursor: progress;
   color: #007198;
   background-color: colors.$polar;
-
-  svg * {
-    fill: transparent;
-  }
 }
 
 .ActionButton-fill {
   width: 100%;
   justify-content: center;
 }
-

package/src/lui/ActionButton.tsx

@@ -67,7 +67,7 @@ export const ActionButton = ({
       type={"button"}
       level={level}
       title={title ?? ariaLabel ?? name}
-      aria-label={ariaLabel ?? name}
+      buttonProps={{ "aria-label": ariaLabel ?? name }}
       className={clsx(
         "lui-button-icon-right",
         "ActionButton",
@@ -90,25 +90,26 @@ export const ActionButton = ({
       disabled={localInProgress || disabled}
     >
       {iconPosition === "right" && buttonText}
-      {localInProgress ? (
-        <LuiMiniSpinner
-          size={16}
-          divProps={{
-            "data-testid": "loading-spinner",
-            style: {
-              margin: 0,
-              paddingRight: 5,
-              paddingLeft: 3,
-              paddingBottom: 0,
-              paddingTop: 0,
-            },
-            role: "status",
-            "aria-label": "Loading",
-          }}
-        />
-      ) : (
-        <LuiIcon name={icon} alt={ariaLabel ?? name ?? ""} size={size} />
+      {localInProgress && (
+        <div style={{ position: "relative" }}>
+          <LuiMiniSpinner
+            size={14}
+            divProps={{
+              "data-testid": "loading-spinner",
+              style: {
+                position: "absolute",
+                left: 4,
+                top: -10,
+                bottom: 10,
+                right: -4,
+              },
+              role: "status",
+              "aria-label": "Loading",
+            }}
+          />
+        </div>
       )}
+      <LuiIcon name={icon} alt={ariaLabel ?? name ?? ""} size={size} />
       {iconPosition === "left" && buttonText}
     </LuiButton>
   );

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -22,6 +22,7 @@ const updateValue = fn((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabD
 const onSave = fn(async () => true);
 const onSelectFilter = fn();
 
+const five = <div>Five</div>;
 let options: MultiSelectGridOption[] = [];
 const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiSelectGridProps<any>) => {
   options = [
@@ -30,7 +31,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
     { label: "Two", value: 2 },
     { label: "Three", value: 3 },
     { label: "Four", value: 4 },
-    { label: <div>Five</div>, value: 5 },
+    { label: five, value: 5 },
   ];
   const config: GridFormMultiSelectGridProps<any> = {
     onSave,

package/src/styles/Grid.scss

@@ -2,7 +2,6 @@
 @use "./react-menu-customisations";
 @use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
-
 .LabelPreferencesPanelGridCellAlignCenter .ag-wrapper {
   margin-left: auto;
   margin-right: auto;
@@ -13,7 +12,6 @@
   justify-content: center;
 }
 
-
 .Grid-container {
   flex: 1;
   width: 100%;

package/src/styles/GridTheme.scss

@@ -1,5 +1,5 @@
 @use "@linzjs/lui/dist/scss/Core" as lui;
-@use "node_modules/ag-grid-community/styles" as ag;
+@use "ag-grid-community/styles" as ag;
 
 // ag-grid likes to add 1px to this, so we subtract to compensate
 $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);