Merge branch 'main' into feature/table-radio-button

.gitignore

@@ -404,3 +404,5 @@ layout-sets.schema.v1.json
 layoutSettings.schema.v1.json
 
 eslint-results.html
+
+runner-results

.yarnrc.yml

@@ -4,4 +4,4 @@ enableTelemetry: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.0.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

eslint.config.mjs

@@ -165,6 +165,7 @@ export default tseslint.config(
     },
     rules: {
       'testing-library/await-async-queries': ['warn'],
+      'jsx-a11y/label-has-associated-control': ['off'],
     },
   },
   {

multi-reporter-config.json

@@ -0,0 +1,3 @@
+{
+  "reporterEnabled": "cypress-parallel/json-stream.reporter.js, cypress-parallel/simple-spec.reporter.js"
+}

package.json

@@ -21,18 +21,19 @@
     "test:watchall": "yarn gen && jest --watchAll",
     "test:preview": "jest-preview",
     "test:clear-cache": "jest --clearCache",
-    "cy:open": "cypress open --env environment=docker",
-    "cy:run": "cypress run --env environment=docker",
+    "cy:open": "cypress open --env environment=tt02",
+    "cy:run": "cypress run --env environment=tt02",
+    "cy:parallel": "cypress-parallel -s cy:run -t 3 -d test/e2e/integration",
     "tsc": "yarn gen && tsc && tsc --project test/tsconfig.json",
     "tsc:watch": "yarn gen && tsc --watch",
     "tsc:watch:cypress": "yarn gen && tsc --watch --project test/tsconfig.json",
     "lint": "yarn gen && eslint ."
   },
   "devDependencies": {
-    "@babel/core": "7.25.8",
+    "@babel/core": "7.26.0",
     "@babel/plugin-transform-runtime": "^7.21.0",
-    "@babel/preset-env": "7.25.8",
-    "@babel/preset-react": "7.25.7",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.25.9",
     "@babel/runtime": "^7.21.0",
     "@babel/runtime-corejs3": "^7.21.0",
     "@eslint/compat": "^1.1.1",
@@ -43,51 +44,51 @@
     "@tanstack/react-query-devtools": "^5.25.0",
     "@testing-library/cypress": "10.0.2",
     "@testing-library/dom": "^10.0.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/dompurify": "3.0.5",
     "@types/dot-object": "2.1.6",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/js-levenshtein": "^1.1.1",
     "@types/json-schema": "^7.0.11",
     "@types/leaflet": "^1",
     "@types/marked": "6.0.0",
     "@types/mime": "4.0.0",
     "@types/node": "^20.10.5",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/react-router-dom": "5.3.3",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "axe-core": "4.10.0",
+    "@typescript-eslint/eslint-plugin": "8.14.0",
+    "@typescript-eslint/parser": "8.14.0",
+    "axe-core": "4.10.2",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "caniuse-lite": "^1.0.30001466",
     "core-js": "^3.29.1",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
-    "cypress": "13.15.0",
+    "cypress": "13.15.2",
     "cypress-axe": "1.5.0",
     "cypress-iframe": "^1.0.1",
+    "cypress-multi-reporters": "^2.0.4",
     "cypress-network-idle": "^1.14.2",
     "cypress-plugin-tab": "1.0.5",
     "cypress-wait-until": "^3.0.0",
     "dotenv": "16.4.5",
     "esbuild-loader": "^4.0.2",
-    "eslint": "9.12.0",
+    "eslint": "9.14.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-cypress": "4.0.0",
+    "eslint-plugin-cypress": "4.1.0",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-no-relative-import-paths": "1.5.5",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
-    "eslint-plugin-sonarjs": "2.0.3",
-    "eslint-plugin-testing-library": "6.3.0",
+    "eslint-plugin-sonarjs": "2.0.4",
+    "eslint-plugin-testing-library": "6.4.0",
     "eslint-plugin-unused-imports": "^4.0.0",
     "fork-ts-checker-notifier-webpack-plugin": "9.0.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
@@ -98,13 +99,13 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
-    "jest-mock-axios": "4.7.3",
+    "jest-mock-axios": "4.8.0",
     "jest-preview": "^0.3.1",
     "js-levenshtein": "^1.1.6",
     "jsdom": "25.0.1",
     "lint-staged": "15.2.10",
     "mime": "4.0.4",
-    "mini-css-extract-plugin": "2.9.1",
+    "mini-css-extract-plugin": "2.9.2",
     "postcss-modules": "^6.0.0",
     "prettier": "3.3.3",
     "react-refresh": "0.14.2",
@@ -119,7 +120,7 @@
     "typescript-plugin-css-modules": "^5.1.0",
     "use-immer": "^0.10.0",
     "utility-types": "3.11.0",
-    "webpack": "5.95.0",
+    "webpack": "5.96.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0"
   },
@@ -140,8 +141,9 @@
     "ajv-formats-draft2019": "^1.6.1",
     "axios": "1.7.7",
     "classnames": "2.5.1",
+    "cypress-parallel": "^0.14.0",
     "date-fns": "^4.1.0",
-    "dompurify": "3.1.7",
+    "dompurify": "3.2.0",
     "dot-object": "2.1.5",
     "eslint-plugin-preferred-import-path": "^1.1.0",
     "fast-array-diff": "^1.1.0",
@@ -151,27 +153,27 @@
     "jsonpointer": "5.0.1",
     "leaflet": "^1.9.4",
     "lru-cache": "^11.0.0",
-    "marked": "14.1.2",
+    "marked": "14.1.4",
     "marked-mangle": "^1.0.1",
     "node-polyfill-webpack-plugin": "^4.0.0",
     "react": "18.3.1",
     "react-content-loader": "7.0.2",
     "react-day-picker": "^9.0.8",
     "react-device-detect": "2.2.3",
     "react-dom": "18.3.1",
-    "react-dropzone": "14.2.9",
+    "react-dropzone": "14.3.5",
     "react-helmet-async": "^2.0.5",
     "react-leaflet": "^4.2.1",
     "react-number-format": "^5.3.1",
-    "react-router-dom": "6.27.0",
+    "react-router-dom": "6.28.0",
     "react-toastify": "^10.0.0",
     "terraformer-wkt-parser": "^1.2.1",
     "typescript": "5.6.3",
     "typescript-eslint": "^8.0.0",
-    "uuid": "11.0.2",
-    "zustand": "^4.4.7"
+    "uuid": "11.0.3",
+    "zustand": "^5.0.0"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       ".husky/pre-commit-check-for-skipped-tests",

src/app-components/Input/Input.tsx

@@ -17,7 +17,7 @@ export type InputProps = {
   id?: string;
   readOnly?: boolean;
   type?: InputType;
-  textOnly?: boolean;
+  textonly?: boolean;
 } & Pick<
   InputHTMLAttributes<HTMLInputElement>,
   | 'value'
@@ -36,7 +36,7 @@ export type InputProps = {
 export function Input(props: InputProps) {
   const { size = 'sm', ...rest } = props;
 
-  if (props.textOnly) {
+  if (props.textonly) {
     const { value, id, className } = props;
     if (value === null || (typeof value === 'string' && value.length === 0)) {
       return null;

src/app-components/button/Button.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+import type { PropsWithChildren } from 'react';
+
+import { Button as DesignSystemButton, Spinner } from '@digdir/designsystemet-react';
+import type { ButtonProps as DesignSystemButtonProps } from '@digdir/designsystemet-react';
+
+import { useLanguage } from 'src/features/language/useLanguage';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | undefined;
+export type ButtonColor = 'first' | 'second' | 'success' | 'danger' | undefined;
+
+export type ButtonProps = {
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  isLoading?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+} & Pick<
+  DesignSystemButtonProps,
+  | 'id'
+  | 'title'
+  | 'disabled'
+  | 'icon'
+  | 'fullWidth'
+  | 'onClick'
+  | 'style'
+  | 'tabIndex'
+  | 'onMouseDown'
+  | 'aria-label'
+  | 'aria-busy'
+  | 'aria-controls'
+  | 'aria-haspopup'
+  | 'aria-expanded'
+  | 'aria-labelledby'
+  | 'aria-describedby'
+  | 'onKeyUp'
+>;
+
+export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(function Button(
+  { id, disabled, isLoading = false, variant = 'primary', color = 'first', size = 'sm', children, ...props },
+  ref,
+) {
+  const { langAsString } = useLanguage();
+  return (
+    <DesignSystemButton
+      id={id}
+      disabled={disabled || isLoading}
+      variant={variant}
+      color={color}
+      size={size}
+      ref={ref}
+      {...props}
+    >
+      {isLoading && (
+        <Spinner
+          aria-hidden='true'
+          color={color}
+          size={size === 'lg' ? 'sm' : 'xs'}
+          title={langAsString('general.loading')}
+        />
+      )}
+      {children}
+    </DesignSystemButton>
+  );
+});

src/codegen/ComponentConfig.ts

@@ -416,13 +416,11 @@ export class ComponentConfig {
         from: 'src/utils/layout/useNodeTraversal',
       });
       const LayoutNode = new CG.import({ import: 'LayoutNode', from: 'src/utils/layout/LayoutNode' });
-      const ChildClaim = new CG.import({ import: 'ChildClaim', from: 'src/utils/layout/generator/GeneratorContext' });
 
       const claimChildrenBody = childrenPlugins.map((plugin) =>
         `${pluginRef(plugin)}.claimChildren({
             ...props,
-            claimChild: (id: string, metadata: unknown) =>
-              props.claimChild('${plugin.getKey()}', id, metadata),
+            claimChild: (id: string) => props.claimChild('${plugin.getKey()}', id),
          });`.trim(),
       );
 
@@ -435,18 +433,12 @@ export class ComponentConfig {
       );
 
       additionalMethods.push(
-        `claimChildren(props: ${ChildClaimerProps}<'${this.type}', unknown>) {
+        `claimChildren(props: ${ChildClaimerProps}<'${this.type}'>) {
           ${claimChildrenBody.join('\n')}
         }`,
         `pickDirectChildren(state: ${NodeData}<'${this.type}'>, restriction?: ${TraversalRestriction}) {
           return [${pickDirectChildrenBody.join(', ')}];
         }`,
-        `addChild(state: ${NodeData}<'${this.type}'>, childNode: ${LayoutNode}, { pluginKey, metadata }: ${ChildClaim}, rowIndex: number | undefined) {
-          return this.plugins[pluginKey!].addChild(state as any, childNode, metadata, rowIndex) as Partial<${NodeData}<'${this.type}'>>;
-        }`,
-        `removeChild(state: ${NodeData}<'${this.type}'>, childNode: ${LayoutNode}, { pluginKey, metadata }: ${ChildClaim}, rowIndex: number | undefined) {
-          return this.plugins[pluginKey!].removeChild(state as any, childNode, metadata, rowIndex) as Partial<${NodeData}<'${this.type}'>>;
-        }`,
         `isChildHidden(state: ${NodeData}<'${this.type}'>, childNode: ${LayoutNode}) {
           return [${isChildHiddenBody.join(', ')}].some((h) => h);
         }`,
@@ -459,7 +451,7 @@ export class ComponentConfig {
 
       ${this.config.directRendering ? 'directRender(): boolean { return true; }' : ''}
 
-      renderNodeGenerator(props: ${NodeGeneratorProps}<'${this.type}'>): ${ReactJSX}.Element | null {
+      renderNodeGenerator(props: ${NodeGeneratorProps}): ${ReactJSX}.Element | null {
         return (
           <${NodeGenerator} {...props}>
             ${pluginGeneratorChildren}

src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { Button, Modal, Spinner } from '@digdir/designsystemet-react';
+import { Modal, Spinner } from '@digdir/designsystemet-react';
 import { FilePdfIcon } from '@navikt/aksel-icons';
 
+import { Button } from 'src/app-components/button/Button';
 import classes from 'src/features/devtools/components/PDFPreviewButton/PDFPreview.module.css';
 import { useLaxInstance } from 'src/features/instance/InstanceContext';
 import { useTaskTypeFromBackend } from 'src/features/instance/ProcessContext';
@@ -69,7 +70,6 @@ export function PDFGeneratorPreview({
     <>
       <Button
         onClick={generatePDF}
-        size='small'
         disabled={disabled}
         color='second'
       >

src/components/form/Form.test.tsx

@@ -11,8 +11,6 @@ import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import type { CompExternal, ILayout } from 'src/layout/layout';
 import type { CompSummaryExternal } from 'src/layout/Summary/config.generated';
 
-jest.mock('react-helmet-async');
-
 describe('Form', () => {
   const mockComponents: ILayout = [
     {