Update outdated dependencies

.storybook/preview.js

@@ -1,5 +1,5 @@
 import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
-import '@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css';
+import '@gemeente-rotterdam/design-tokens/dist/index.css';
 import '@utrecht/design-tokens/dist/index.css';
 import 'design-token-editor/lib/css/dte.css';
 import 'design-token-editor/lib/css/root.css';

package.json

@@ -27,39 +27,37 @@
   },
   "license": "EUPL-1.2",
   "dependencies": {
-    "@floating-ui/react": "^0.26.9",
+    "@floating-ui/react": "^0.27.5",
     "@formio/protected-eval": "^1.2.1",
-    "@fortawesome/fontawesome-free": "6.4.0",
+    "@fortawesome/fontawesome-free": "^6.4.0",
     "@open-formulieren/design-tokens": "^0.55.0",
     "@open-formulieren/formio-renderer": "^0.2.0",
     "@open-formulieren/formiojs": "^4.13.14",
     "@open-formulieren/leaflet-tools": "^1.0.0",
     "@sentry/react": "^8.50.0",
-    "@storybook/test": "^8.6.3",
     "classnames": "^2.3.1",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "flatpickr": "^4.6.9",
     "formik": "^2.2.9",
-    "ibantools": "^3.3.0",
-    "immer": "^9.0.6",
+    "ibantools": "^4.5.1",
+    "immer": "^10.1.1",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
     "leaflet-geosearch": "^4.2.0",
     "leaflet-gesture-handling": "^1.2.2",
-    "microscope-sass": "^2.0.0",
     "moment": "^2.29.1",
     "proj4leaflet": "^1.0.2",
     "react-formio": "^4.3.0",
-    "react-intl": "^6.4.4",
+    "react-intl": "^7.1.6",
     "react-leaflet": "4.2.1",
     "react-leaflet-draw": "^0.20.6",
-    "react-modal": "3.16.1",
-    "react-number-format": "5.2.2",
+    "react-modal": "^3.16.1",
+    "react-number-format": "^5.2.2",
     "react-router": "^7.1.3",
     "react-select": "^5.7.3",
     "react-use": "^17.2.4",
-    "state-pool": "^0.8.0",
-    "use-immer": "^0.9.0",
+    "state-pool": "^0.10.1",
+    "use-immer": "^0.11.0",
     "zod": "^3.21.4",
     "zod-formik-adapter": "^1.2.0"
   },
@@ -92,20 +90,15 @@
   "workspaces": [
     "design-tokens"
   ],
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ],
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@codecov/vite-plugin": "^1.7.0",
     "@formatjs/cli": "^6.6.1",
-    "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.315",
+    "@gemeente-denhaag/design-tokens-components": "^2.0.0",
+    "@gemeente-rotterdam/design-tokens": "1.0.0-alpha.51",
     "@maykinmedia/eslint-config": "^1.0.0",
-    "@nl-design-system-unstable/rotterdam-design-tokens": "1.0.0-alpha.100",
     "@rollup/plugin-replace": "^6.0.2",
     "@sentry/vite-plugin": "^3.0.0",
     "@storybook/addon-actions": "^8.6.3",
@@ -118,50 +111,50 @@
     "@storybook/preview-api": "^8.6.3",
     "@storybook/react": "^8.6.3",
     "@storybook/react-vite": "^8.6.3",
+    "@storybook/test": "^8.6.3",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/types": "^8.6.3",
     "@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.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/google.maps": "^3.58.1",
     "@types/leaflet": "^1.9.16",
     "@types/node": "^20.17.22",
     "@types/proj4": "^2.5.6",
     "@types/proj4leaflet": "^1.0.10",
     "@types/react-dom": "^18.3.5",
-    "@typescript-eslint/parser": "^8.19.0",
-    "@utrecht/component-library-css": "1.0.0-alpha.604",
+    "@typescript-eslint/parser": "^8.26.0",
     "@utrecht/component-library-react": "1.0.0-alpha.353",
     "@utrecht/components": "1.0.0-alpha.565",
-    "@utrecht/design-tokens": "1.0.0-alpha.597",
+    "@utrecht/design-tokens": "^2.5.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-istanbul": "^3.0.7",
     "babel-plugin-formatjs": "^10.3.8",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "browserslist": "^4.18.1",
+    "babel-plugin-module-resolver": "^5.0.2",
     "design-token-editor": "^0.6.0",
-    "eslint": "^8.3.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "^0.11.2",
-    "globals": "^15.14.0",
-    "jsdom": "^25.0.1",
+    "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
+    "microscope-sass": "^2.0.0",
     "msw": "^2.5.0",
     "msw-storybook-addon": "^2.0.4",
     "prettier": "^3.4.2",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.2",
+    "rimraf": "^6.0.1",
     "rollup": "^4.31.0",
-    "sass": "^1.32.12",
+    "sass-embedded": "^1.85.1",
     "storybook": "^8.6.3",
     "storybook-addon-remix-react-router": "^4.0.1",
     "storybook-addon-theme-provider": "^0.2.8",
@@ -176,14 +169,16 @@
     "yargs": "^17.1.1"
   },
   "overrides": {
-    "state-pool": {
-      "immer": "9.0.21"
-    },
     "formiojs": "npm:@open-formulieren/formiojs@4.13.14"
   },
   "babel": {
     "presets": [
-      ["@babel/preset-react", { "runtime": "automatic" }],
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ],
       "@babel/preset-typescript"
     ],
     "plugins": [

public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.5.0'
-const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
+const PACKAGE_VERSION = '2.7.3'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -192,12 +192,26 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

src/api.js

@@ -1,4 +1,4 @@
-import {createGlobalstate} from 'state-pool';
+import {createState} from 'state-pool';
 
 import {
   APIError,
@@ -18,7 +18,7 @@ const fetchDefaults = {
 
 const SessionExpiresInHeader = 'X-Session-Expires-In';
 
-let sessionExpiresAt = createGlobalstate({expiry: null});
+let sessionExpiresAt = createState({expiry: null});
 
 export const updateSessionExpiry = seconds => {
   const newExpiry = new Date();

src/components/AppDebug.jsx

@@ -1,5 +1,5 @@
 import {FormattedDate, FormattedRelativeTime, useIntl} from 'react-intl';
-import {useGlobalState} from 'state-pool';
+import {useState as useGlobalState} from 'state-pool';
 
 import {sessionExpiresAt} from 'api';
 import {getVersion} from 'utils';

src/components/FormStepSummary/ComponentValueDisplay.jsx

@@ -159,7 +159,7 @@ const FileDisplay = ({component, value}) => {
 
   return (
     <Anchor key={url} href={url}>
-      {originalName} {/* eslint-disable-next-line react/style-prop-object */}
+      {originalName}
       (<FormattedNumber value={size} style="unit" unit={unit} />)
     </Anchor>
   );

src/components/LanguageSelection/LanguageSelection.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import {useContext, useState} from 'react';
 import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 import {useAsync} from 'react-use';
-import {useGlobalState} from 'state-pool';
+import {useState as useGlobalState} from 'state-pool';
 
 import {ConfigContext} from 'Context';
 import {get, put} from 'api';

src/components/forms/NumberField/NumberField.jsx

@@ -44,6 +44,7 @@ const NumberField = ({
         decimalSeparator,
         thousandSeparator,
         decimalScale: isInteger ? undefined : 2,
+        valueIsNumericString: thousandSeparator !== '.',
       };
   const errorMessageId = invalid ? `${id}-error-message` : undefined;
 

src/components/forms/NumberField/NumberField.stories.jsx

@@ -46,7 +46,7 @@ export const SmallNumbers = {
 
     // assert that we can type floats without localisation
     await userEvent.clear(input);
-    await userEvent.type(input, '1.5');
+    await userEvent.type(input, '1.5', {delay: 30});
     await expect(input).toHaveDisplayValue('1.5');
   },
 };

src/components/modals/FormStepSaveModal.stories.jsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/named
 import {useArgs} from '@storybook/preview-api';
 import {expect, userEvent, within} from '@storybook/test';
 import {HttpResponse, http} from 'msw';

src/data/submissions.js

@@ -1,4 +1,4 @@
-import {createGlobalstate} from 'state-pool';
+import {createState} from 'state-pool';
 
 import {post} from 'api';
 
@@ -32,7 +32,7 @@ export const createSubmission = async (
   return submissionResponse.data;
 };
 
-export const globalSubmissionState = createGlobalstate({hasSubmission: false});
+export const globalSubmissionState = createState({hasSubmission: false});
 
 export const flagActiveSubmission = () => {
   globalSubmissionState.updateValue(state => {

src/developer-docs.mdx

@@ -6,45 +6,19 @@ import {Meta} from '@storybook/blocks';
 
 This documentation is aimed at Open Formulieren-developers working on the SDK.
 
-## Router integration and flow of data
+## Typescript
 
-The SDK started with react-router v5, which didn't have data routers. Since the upgrade to v6.4, we
-_can_ make use of data routers, but not everything has been converted yet.
-
-New code should maximize the use of data routers. Ideally you can do this by exporting the nested
-routes in your code like so:
-
-```jsx
-export const routes = [
-  {
-    path: 'some-nested-path',
-    element: <MyComponent />,
-    // any additional data router features
-  },
-];
-```
-
-This implies that the element cannot take dynamic props anymore, which is the biggest draw-back.
-However, there are mechanisms to load data from the route arguments via the `loader` (see the
-react-router documentation). Currently we still do this manually using the `useAsync` hook.
-
-Often you need access to the `form` object. This is now exposed via React context for the entire
-application:
-
-```jsx
-const MyComponent = () => {
-  const form = useFormContext();
-  return (...);
-};
-```
+Since March 2025, you can use Typescript. New code should be done in Typescript, if you're updating
+existing code, check if you can convert that code to TS first before making the changes you want to
+make, so we can gradually improve the type safety of the codebase.
 
 ## Story guidelines
 
 Stories are written in [CSF](https://storybook.js.org/docs/react/writing-stories/introduction) and
 mixed in with proze documentation, written in
 [MDX](https://storybook.js.org/docs/react/writing-docs/mdx) (Markdown + JSX).
 
-- Stories go in `<Component>.stories.js`
+- Stories go in `<Component>.stories.ts`
 - Documentation goes in `<Component>.mdx`
 - MDX documentation can (and should) import from the stories module.
 
@@ -56,6 +30,8 @@ The stories must have a default export which sets the title (and thus the locati
 component meta, decorators/parameters/argtypes relevant for all or most of the stories, e.g.:
 
 ```js
+import type {Meta, StoryObj} from '@storybook/react';
+
 import ExampleComponent from './ExampleComponent';
 
 export default {
@@ -68,7 +44,9 @@ export default {
   argTypes: {
     children: {control: {disable: true}},
   },
-};
+} satisfies Meta<typeof ExampleComponent>;
+
+type Story = storObj<typeof ExampleComponent>;
 ```
 
 **Stories for variants**
@@ -82,7 +60,7 @@ typically test using the `play` function too.
 An example:
 
 ```jsx
-export const Default = {
+export const Default: Story = {
   name: 'Default', // optional, inferred from the exported name
   args: {
     isEnabled: true,
@@ -174,10 +152,10 @@ would see a folder structure like:
 
 ```
 MyComponent
-├── index.js
-├── mocks.js
-├── MyComponent.jsx
-├── MyComponent.stories.js
+├── index.ts
+├── mocks.ts
+├── MyComponent.tsx
+├── MyComponent.stories.ts
 └── MyComponent.mdx
 ```
 

src/formio/components/SoftRequiredErrors.stories.js

@@ -89,7 +89,7 @@ export const FillField = {
   play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
     // formio... :thisisfine:
-    await sleep(100);
+    await sleep(200);
 
     const ERROR_TEXT = 'Not all required fields are filled out. That can get expensive!';