Extract VegaVisualization to separate package

.changeset/polite-eyes-film.md

@@ -0,0 +1,7 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+- Upgraded react-vega, vega, vega-lite.
+- `VegaVisualization` was updated to handle the changed API.
+- `VegaVisualization` now has an `options` prop which is passed into the underlying `VegaEmbed` component. The `actions` prop, which can also be controlled through `options`, has been deprecated.

.changeset/sharp-rats-double.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/vega-visualization-react": major
+---
+
+Initial version as extracted from `@utrecht/component-library-react`

documentation/package.json

@@ -18,14 +18,15 @@
     "@babel/preset-env": "7.24.8",
     "@babel/preset-react": "7.24.7",
     "@mdx-js/react": "2.3.0",
-    "@storybook/blocks": "7.6.21",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "lodash.clonedeepwith": "4.5.0",
     "lodash.isplainobject": "4.0.6",
     "lodash.mapvalues": "4.6.0",
     "lodash.omitby": "4.6.0",
     "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "typescript": "5.9.3",
     "webpack": "5.89.0"
   }

packages/astro/package.json

@@ -40,12 +40,12 @@
     "@astrojs/react": "4.4.2",
     "@nl-design-system/tsconfig": "1.0.5",
     "@types/hast": "3.0.4",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "hast-util-is-element": "3.0.0",
     "hast-util-select": "6.0.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "unist-util-visit": "5.0.0"
   }
 }

packages/component-library-pdf/jest.config.ts → packages/component-library-pdf/jest.config.mjs

@@ -1,6 +1,7 @@
-import type { Config } from 'jest';
-
-const config: Config = {
+/**
+ * @type {import('jest').Config}
+ */
+const config = {
   coverageProvider: 'v8',
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   rootDir: './src/',

packages/component-library-pdf/package.json

@@ -31,20 +31,21 @@
     "@babel/plugin-transform-runtime": "7.24.7",
     "@babel/preset-react": "7.24.7",
     "@jest/globals": "29.7.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
     "@types/node": "24.10.4",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "@utrecht/component-library-css": "workspace:*",
     "@utrecht/component-library-react": "workspace:*",
     "@utrecht/design-tokens": "workspace:*",
     "cross-env": "7.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prince": "1.11.8",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "rimraf": "5.0.10",
     "ts-jest": "29.2.6",
     "tsx": "4.19.4",

packages/component-library-react/package.json

@@ -226,6 +226,7 @@
     "@utrecht/unordered-list-css": "workspace:*",
     "@utrecht/url-data-css": "workspace:*",
     "@utrecht/vega-visualization-css": "workspace:*",
+    "@utrecht/vega-visualization-react": "workspace:*",
     "clsx": "2.1.1",
     "lodash.chunk": "4.2.0"
   },
@@ -242,21 +243,21 @@
     "@rollup/plugin-node-resolve": "15.2.4",
     "@rollup/plugin-typescript": "12.1.4",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "16.3.1",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
     "@types/jest": "29.5.14",
     "@types/lodash.chunk": "4.2.9",
-    "@types/react": "18.3.27",
+    "@types/react": "19.2.14",
     "@types/testing-library__jest-dom": "5.14.9",
     "@utrecht/build-utils-react": "workspace:*",
-    "gatsby": "5.12.12",
+    "gatsby": "5.16.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "next": "13.5.11",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-vega": "7.6.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-vega": "8.0.0",
     "rimraf": "5.0.10",
     "rollup": "4.23.0",
     "rollup-plugin-delete": "2.0.0",
@@ -270,9 +271,9 @@
     "sort-package-json": "2.11.0",
     "tslib": "2.6.3",
     "typescript": "5.9.3",
-    "vega": "5.26.1",
-    "vega-embed": "6.23.0",
-    "vega-lite": "5.16.3"
+    "vega": "6.2.0",
+    "vega-embed": "7.1.0",
+    "vega-lite": "6.4.2"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.23.6",

packages/component-library-react/src/Accordion.tsx

@@ -67,7 +67,7 @@ export interface AccordionSectionProps extends HTMLAttributes<HTMLDivElement> {
   onActivate?: Function;
   onButtonFocus?: Function;
   onButtonBlur?: Function;
-  buttonRef?: RefObject<HTMLButtonElement>;
+  buttonRef?: RefObject<HTMLButtonElement | null>;
   icon?: ReactNode;
 }
 
@@ -181,9 +181,9 @@ export const Accordion = forwardRef(
 
 Accordion.displayName = 'Accordion';
 
-export const useAccordion = <T,>(sections: T[], ref: RefObject<HTMLDivElement | undefined>) => {
+export const useAccordion = <T,>(sections: T[], ref: RefObject<HTMLDivElement | null>) => {
   // const sections: AccordionSectionProviderProps[] = [];
-  const refs: RefObject<HTMLDivElement>[] = sections.map((_) => useRef<HTMLDivElement>(null));
+  const refs: RefObject<HTMLDivElement | null>[] = sections.map((_) => useRef<HTMLDivElement>(null));
   const buttonRefs = sections.map((_) => useRef<HTMLButtonElement>(null));
 
   return {
@@ -241,7 +241,7 @@ export interface AccordionProviderProps
 }
 
 export const AccordionProvider = ({ sections, icon, heading, headingLevel }: AccordionProviderProps) => {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
   const { refs, buttonRefs, focusNextSection, focusFirstSection, focusLastSection, focusPreviousSection } =
     useAccordion(sections, ref);
 

packages/component-library-react/src/VegaVisualization.tsx

@@ -4,96 +4,5 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import clsx from 'clsx';
-import { Vega } from 'react-vega';
-import { VegaProps } from 'react-vega/lib/Vega';
-import { Config } from 'vega';
-
-export interface VegaVisualizationProps extends Omit<VegaProps, 'renderer'> {
-  label?: string;
-  config?: Config;
-}
-
-const defaultConfig = {
-  font: 'var(--utrecht-vega-visualization-font-family, var(--utrecht-document-font-family))',
-  title: {
-    fontSize: 20,
-    anchor: 'start',
-    offset: 32,
-    subtitleFontSize: 16,
-  },
-  range: {
-    category: { scheme: 'set1' },
-  },
-  axis: {
-    labelFontSize: 16,
-    titleFontSize: 16,
-    labelFontWeight: 'bold',
-    titleFontWeight: 'normal',
-    labelAngle: 0,
-    ticks: false,
-    labelPadding: 12,
-    domainColor: 'var(--utrecht-vega-visualization-axis-domain-color, black)',
-    gridColor: 'var(--utrecht-vega-visualization-axis-grid-color, gray)',
-    tickColor: 'var(--utrecht-vega-visualization-axis-tick-color, black)',
-  },
-  axisY: {
-    titleAngle: 0,
-    titleX: 0,
-    titleY: 7,
-    titleAlign: 'left',
-    titleFontWeight: 'bold',
-    domain: false,
-  },
-  legend: { labelFontSize: 16, titleFontSize: 16 },
-  bar: { width: { band: 0.85 } },
-  view: { stroke: null },
-  padding: { left: 20, top: 20, right: 25, bottom: 20 },
-  locale: {
-    number: {
-      decimal: ',',
-      thousands: '.',
-      grouping: [3],
-      currency: ['', '\u00a0€'],
-    },
-    time: {
-      dateTime: '%a %e %B %Y %X',
-      date: '%d-%m-%Y',
-      time: '%H:%M:%S',
-      periods: ['AM', 'PM'],
-      days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
-      shortDays: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
-      months: [
-        'januari',
-        'februari',
-        'maart',
-        'april',
-        'mei',
-        'juni',
-        'juli',
-        'augustus',
-        'september',
-        'oktober',
-        'november',
-        'december',
-      ],
-      shortMonths: ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
-    },
-  },
-} as Config;
-
-export const VegaVisualization = ({
-  actions = false,
-  className,
-  config,
-  label,
-  ...restProps
-}: VegaVisualizationProps) => {
-  return (
-    <div className={clsx('utrecht-vega-visualization', className)} role="img" aria-label={label}>
-      <div aria-hidden={true}>
-        <Vega {...restProps} actions={actions} renderer={'svg'} config={{ ...defaultConfig, ...config }} />
-      </div>
-    </div>
-  );
-};
+export { type VegaVisualizationProps } from '@utrecht/vega-visualization-react';
+export { VegaVisualization } from '@utrecht/vega-visualization-react';

packages/components-react/action-group-react/package.json

@@ -54,17 +54,19 @@
     "clsx": "2.1.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "8.20.1",
-    "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/react": "16.0.1",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
     "@types/jest": "29.5.14",
-    "@types/react": "18.3.27",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "@types/testing-library__jest-dom": "5.14.9",
     "@utrecht/build-utils-react": "workspace:*",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "react": "18.3.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "rollup": "4.23.0",
     "typescript": "5.9.3"
   },