@linzjs/step-ag-grid 24.0.0 → 25.0.0

package/dist/vite.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vite").UserConfigFnPromise;
+declare const _default: import("vite").UserConfigFnObject;
 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": "24.0.0",
+  "version": "25.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -12,7 +12,7 @@
     "react",
     "react-component"
   ],
-  "main": "dist/step-ag-grid.cjs.js",
+  "main": "dist/step-ag-grid.cjs",
   "type": "module",
   "typings": "dist/src/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
@@ -37,19 +37,19 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
-    "lodash-es": ">=4",
     "matcher": "^5.0.0",
-    "react-transition-state": "^2.2.0",
+    "react-transition-state": "^2.3.0",
     "usehooks-ts": "^3.1.0"
   },
   "scripts": {
     "build": "run-s clean stylelint lint css bundle",
-    "yalc": "run-s clean css bundle && yalc publish",
+    "yalc": "run-s clean css bundle && yalc push",
     "clean": "rimraf dist && mkdirp ./dist",
     "bundle": "rollup -c",
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
-    "test": "jest",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
     "lint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
     "lint:fix": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
     "storybook": "storybook dev -p 6006",
@@ -61,8 +61,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {
@@ -78,7 +77,6 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^3.2.4",
     "@linzjs/lui": "^22.4.2",
     "@linzjs/style": "^5.4.0",
@@ -86,35 +84,31 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
-    "@storybook/addon-links": "^8.5.2",
-    "@storybook/react": "^8.5.2",
-    "@storybook/react-vite": "^8.5.2",
-    "@storybook/test": "^8.5.2",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-interactions": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-vite": "^8.5.3",
+    "@storybook/test": "^8.5.3",
     "@storybook/test-runner": "^0.21.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/debounce-promise": "^3.1.9",
-    "@types/jest": "^29.5.14",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.12.0",
+    "@types/node": "^22.13.0",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.5",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
+    "@vitest/ui": "^3.0.4",
     "ag-grid-community": "^32.3.3",
     "ag-grid-react": "^32.3.3",
-    "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^11.25.1",
+    "chromatic": "^11.25.2",
     "css-loader": "^7.1.2",
-    "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-expect-message": "^1.1.3",
+    "jsdom": "^26.0.0",
+    "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.1",
@@ -123,7 +117,7 @@
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.32.1",
+    "rollup": "^4.34.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -131,7 +125,7 @@
     "sass": "^1.83.4",
     "sass-loader": "^14.2.1",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.5.2",
+    "storybook": "^8.5.3",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "stylelint": "^15.11.0",
@@ -142,7 +136,9 @@
     "typescript": "^5.7.3",
     "vite": "^6.0.11",
     "vite-plugin-html": "^3.2.2",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.4",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "babel": {
     "presets": [

package/src/components/GridCell.test.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import { GridBaseRow } from './Grid';
 import { generateFilterGetter, SAValueGetterParams } from './GridCell';
 

package/src/contexts/GridContextProvider.test.tsx

@@ -1,4 +1,5 @@
 import { ValueFormatterParams } from 'ag-grid-community';
+import { describe, expect, test } from 'vitest';
 
 import { downloadCsvUseValueFormattersProcessCellCallback as Dpcc } from './GridContextProvider';
 

package/src/contexts/GridContextProvider.tsx

@@ -618,8 +618,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         try {
           gridApi && gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
         } catch (ex) {
-          // Hide errors in jest, but log them in browser
-          if (typeof jest === 'undefined') console.error(ex);
+          console.error(ex);
         }
       }, 50),
     [gridApi],

package/src/index.ts

@@ -14,4 +14,6 @@ export * from './react-menu3/index';
 export * from './react-menu3/types';
 export * from './utils/bearing';
 export * from './utils/deferredPromise';
+export * from './utils/textMatcher';
+export * from './utils/textValidator';
 export * from './utils/util';

package/src/lui/ActionButton.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .ActionButton {
   display: flex;
@@ -44,7 +44,7 @@
 .ActionButton-inProgress.lui-button-lg.lui-button-icon-right {
   cursor: progress;
   color: #007198;
-  background-color: colors.$polar;
+  background-color: lui.$polar;
 }
 
 .ActionButton-fill {

package/src/lui/FormError.scss

@@ -1,12 +1,11 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
-
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .FormError {
   display: flex;
 
   &-helpText {
     font-size: 0.75rem;
-    color: colors.$fuscous;
+    color: lui.$fuscous;
     font-weight: 400;
   }
 
@@ -19,7 +18,7 @@
     padding-left: 0;
     font-size: 14px;
     font-weight: 600;
-    color: colors.$charcoal;
+    color: lui.$charcoal;
     align-items: center;
   }
 }

package/src/lui/TextInputFormatted.scss

@@ -1,4 +1,4 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .LuiTextInput.GridLuiTextInput {
   margin-bottom: 0;

package/src/lui/reactUtils.test.tsx

@@ -2,6 +2,7 @@ import { screen } from '@testing-library/dom';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ReactElement, useEffect, useState } from 'react';
+import { describe, expect, test } from 'vitest';
 
 import { usePrevious } from './reactUtils';
 

package/src/lui/timeoutHook.test.tsx

@@ -1,14 +1,15 @@
 import { render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { useTimeoutHook } from './timeoutHook';
 
 describe('useTimeoutHook', () => {
   beforeEach(() => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
   });
 
   afterEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   const TestComponent = (props: { callback: () => void; repeat?: number }) => {
@@ -20,20 +21,20 @@ describe('useTimeoutHook', () => {
   };
 
   test('invokes on timeout', () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
 
     render(<TestComponent callback={callback} />);
     expect(callback).toHaveBeenCalledTimes(0);
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(callback).toHaveBeenCalledTimes(1);
   });
 
   test('invokes once on double invocation', () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
 
     render(<TestComponent callback={callback} repeat={2} />);
     expect(callback).toHaveBeenCalledTimes(0);
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(callback).toHaveBeenCalledTimes(1);
   });
 });

package/src/stories/grid/GridDragRow.stories.tsx

@@ -15,7 +15,7 @@ import {
   GridUpdatingContextProvider,
   GridWrapper,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -18,7 +18,7 @@ import {
   GridUpdatingContextProvider,
   GridWrapper,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -21,7 +21,7 @@ import {
   MenuOption,
   wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/GridPinnedRow.stories.tsx

@@ -15,7 +15,7 @@ import {
   GridUpdatingContextProvider,
   GridWrapper,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -19,7 +19,7 @@ import {
   MenuItem,
   wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 import { IFormTestRow } from './FormTest';
 
 export default {

package/src/stories/grid/GridPopoutEditBoolean.stories.tsx

@@ -15,7 +15,7 @@ import {
   GridEditBoolean,
   GridUpdatingContextProvider,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 import { IFormTestRow } from './FormTest';
 
 export default {

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -7,7 +7,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import { useMemo, useState } from 'react';
 
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 import { FormTest, IFormTestRow } from './FormTest';
 
 export default {

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -25,7 +25,7 @@ import {
   isFloat,
   wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 import { IFormTestRow } from './FormTest';
 
 export default {

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -22,7 +22,7 @@ import {
   GridWrapper,
   wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -27,7 +27,7 @@ import {
   MenuSeparatorString,
   wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -20,7 +20,7 @@ import {
   MultiSelectOption,
   wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -10,7 +10,7 @@ import { useMemo, useState } from 'react';
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../..';
 import { MultiSelectGridOption } from '../../components/gridForm/GridFormMultiSelectGrid';
 import { GridPopoutEditMultiSelectGrid } from '../../components/gridPopoverEdit/GridPopoutEditMultiSelectGrid';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 import { EditMultiSelect } from './GridPopoverEditMultiSelect.stories';
 
 export default {

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -28,7 +28,7 @@ import {
 } from '../..';
 import { GridFilterColumnsToggle, GridFilterDownloadCsvButton } from '../../components';
 import { GridCellFiller } from '../../components/GridCellFiller';
-import { waitForGridReady } from '../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -24,7 +24,7 @@ import {
   MenuOption,
   wait,
 } from '../../../';
-import { waitForGridReady } from '../../../utils/storybookTestUtil';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
 
 export default {
   title: 'Components / Grids',

package/src/styles/Grid.scss

@@ -1,6 +1,6 @@
 @use "../react-menu3/styles/index";
 @use "./react-menu-customisations";
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .LabelPreferencesPanelGridCellAlignCenter .ag-wrapper {
   margin-left: auto;
@@ -40,9 +40,9 @@
   align-items: center;
   flex-direction: row;
   padding: 12px;
-  background-color: colors.$hint;
-  border-bottom: 1px solid colors.$silver;
-  border-top: 2px solid colors.$lily;
+  background-color: lui.$hint;
+  border-bottom: 1px solid lui.$silver;
+  border-top: 2px solid lui.$lily;
 }
 
 .Grid-container-filters button {
@@ -68,21 +68,21 @@
   position: absolute;
   margin: 8px;
   pointer-events: none;
-  fill: colors.$fuscous;
+  fill: lui.$fuscous;
 }
 
 .GridFilterQuick-input {
   width: 100%;
   height: 40px;
   min-height: 40px;
-  border: 0.06rem solid colors.$silver;
+  border: 0.06rem solid lui.$silver;
   border-radius: 3px;
   padding-left: 36px;
   padding-right: 0.75rem;
   font-family: "Open Sans", system-ui, sans-serif;
 
   &::placeholder {
-    color: colors.$fuscous;
+    color: lui.$fuscous;
     font-style: italic;
   }
 }
@@ -109,11 +109,11 @@
 }
 
 .ag-floating-top-container .ag-row {
-  background-color: colors.$hint;
+  background-color: lui.$hint;
 }
 
 .ag-floating-bottom-container .ag-row {
-  background-color: colors.$hint;
+  background-color: lui.$hint;
 }
 
 .GridHeaderAlignCenter .ag-header-cell-text {

package/src/styles/GridIcon.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .AgGridGenericCellRenderer-icon {
   margin-right: 4px;
@@ -6,24 +6,24 @@
 
 .AgGridGenericCellRenderer-ic_infoIcon {
   margin-right: 4px;
-  fill: colors.$info;
+  fill: lui.$info;
 }
 
 .AgGridGenericCellRenderer-ic_info_outlineIcon {
   margin-right: 4px;
-  fill: colors.$info;
+  fill: lui.$info;
 }
 
 .AgGridGenericCellRenderer-ic_warningIcon {
   margin-right: 4px;
-  fill: colors.$warning;
+  fill: lui.$warning;
 }
 
 .AgGridGenericCellRenderer-ic_warning_outlineIcon {
   margin-right: 4px;
-  fill: colors.$warning;
+  fill: lui.$warning;
 }
 
 .GridIcon-disabled {
-  fill: colors.$silver !important;
+  fill: lui.$silver !important;
 }

package/src/styles/GridPopoverMenu.scss

@@ -1,14 +1,14 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .ag-cell .GridPopoutMenu-burger {
   cursor: pointer;
   display: block;
 
   svg {
-    fill: colors.$sea;
+    fill: lui.$sea;
   }
 }
 
 .ag-cell .GridPopoutMenu-burgerDisabled svg {
-  fill: colors.$disabled-color;
+  fill: lui.$disabled-color;
 }

package/src/styles/GridTheme.scss

@@ -1,4 +1,4 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 @use "ag-grid-community/styles" as ag;
 
 // ag-grid likes to add 1px to this, so we subtract to compensate