release of v10.63.1 (#4528)

.github/workflows/icons-lib.yml

@@ -21,7 +21,7 @@ jobs:
   process-icons:
     name: Fetch and Build Icons
 
-    runs-on: ubuntu-latest
+    runs-on: macos-15
 
     timeout-minutes: 60
 
@@ -48,67 +48,46 @@ jobs:
         if: steps.modules-cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
 
+      - name: Use Playwright cache
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/Library/Caches/ms-playwright
+            ~/.cache/ms-playwright
+            %USERPROFILE%\AppData\Local\ms-playwright
+          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
+      - run: yarn workspace @dnb/eufemia playwright install --with-deps firefox
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - run: yarn workspace @dnb/eufemia playwright install-deps firefox
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+
       - name: Icons fetch and prebuild
         run: yarn workspace @dnb/eufemia prebuild:figma:ci
 
-      - name: Prebuild Library
-        run: yarn workspace @dnb/eufemia prebuild:ci
-
       - name: Test prebuild
-        run: yarn workspace @dnb/eufemia test:update
+        run: yarn workspace @dnb/eufemia test:update --timeout=30000
 
       - name: Build portal
         run: yarn workspace dnb-design-system-portal build:visual-test
 
-      - name: Store portal artifacts
-        uses: actions/upload-artifact@v4
-        with:
-          name: portal-build-artifact
-          path: ./packages/dnb-design-system-portal/public
-
-      - name: Commit icons
-        run: yarn workspace @dnb/eufemia postbuild:commit
-
-  visual-test:
-    needs: process-icons
-    name: Run visual e2e-test for icons
-
-    runs-on: macos-latest
-
-    timeout-minutes: 60
-
-    steps:
-      - name: Git checkout
-        uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: 'package.json'
-
-      - name: Use yarn cache
-        uses: actions/cache@v4
-        id: yarn-cache
-        with:
-          path: ./.yarn/cache
-          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Run visual tests
+        run: yarn workspace dnb-design-system-portal test:screenshots:ci:update
 
-      - name: Re-store portal artifacts
-        uses: actions/download-artifact@v4.1.7
+      - uses: actions/upload-artifact@v4
+        if: failure()
         with:
-          name: portal-build-artifact
-          path: ./packages/dnb-design-system-portal/public
+          name: visual-test-artifact
+          path: |
+            ./packages/dnb-eufemia/src/**/*.snap-diff.png
+            ./packages/dnb-eufemia/jest-visual-diff-report/*
 
-      - name: Run visual tests
-        run: yarn workspace dnb-design-system-portal test:screenshots:ci
+      - name: Run visual tests info
+        if: failure()
+        run: echo '\n\n👉 Download the diff files as a ZIP file. \nIt is called "visual-test-artifact" and you find it in the test "Summary" under "Artifacts".\n\n\n'
 
-      - name: Commit updated snapshots
+      - name: Commit icons and updated snapshots
+        if: success()
         run: yarn workspace @dnb/eufemia postbuild:commit
 
       - name: Slack

.github/workflows/visual-regression.yml

@@ -37,6 +37,7 @@ env:
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
   RUN_POST_BUILD: ${{ startsWith(github.ref, 'refs/heads/main') || startsWith(github.ref, 'refs/heads/v') }}
+  RUN_VISUAL_TEST: ${{ !startsWith(github.ref, 'refs/heads/icon') }}
 
 jobs:
   visual-regression:
@@ -91,9 +92,11 @@ jobs:
         run: yarn workspace @dnb/eufemia postbuild:ci
 
       - name: Build portal
+        if: env.RUN_VISUAL_TEST == 'true'
         run: yarn workspace dnb-design-system-portal build:visual-test
 
       - name: Run visual tests
+        if: env.RUN_VISUAL_TEST == 'true'
         run: yarn workspace dnb-design-system-portal test:screenshots:ci
 
       - uses: actions/upload-artifact@v4

packages/dnb-design-system-portal/package.json

@@ -36,6 +36,7 @@
     "test:e2e:portal:watch": "playwright test --ui",
     "test:screenshots": "yarn workspace @dnb/eufemia test:screenshots",
     "test:screenshots:ci": "start-server-and-test serve http://localhost:8000 'yarn workspace @dnb/eufemia test:screenshots:ci'",
+    "test:screenshots:ci:update": "start-server-and-test serve http://localhost:8000 'yarn workspace @dnb/eufemia test:screenshots:ci:update'",
     "test:staged": "jest --bail --findRelatedTests ",
     "test:types": "tsc --noEmit",
     "test:types:watch": "tsc --noEmit --watch",

packages/dnb-design-system-portal/src/docs/uilib/extensions.mdx

@@ -13,7 +13,7 @@ import ListExtensions from 'dnb-design-system-portal/src/shared/parts/ListExtens
 ## Description
 
 Eufemia extensions are reusable parts that do not fit naturally in to a component or element, but rather has the nature of being an extended solution of Eufemia.
-There are several great reasons behind opting for having extensions seperated:
+There are several great reasons behind opting for having extensions separated:
 
 1. **Modularity and Reusability**: Separating extensions promotes a modular design and minimizes code duplication. It enables the creation of subsystems that are tightly integrated with their respective domains, such as a Forms extension that seamlessly connects to its associated data and functionality.
 1. **Decoupled Complexity**: Extensions often add specific or advanced functionality that may not be relevant for all use cases. Keeping them separate prevents the core components or elements from becoming overly complex.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx

@@ -408,7 +408,9 @@ export const TransformData = () => {
             const transformedData = transformData(
               data,
               ({ value, displayValue, label }) => {
-                return { value, displayValue, label }
+                if (!Array.isArray(value)) {
+                  return { value, displayValue, label }
+                }
               },
             )
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx

@@ -339,3 +339,35 @@ The callback function receives the following arguments as an object:
 Most of the fields will return the `displayValue` as a string. But there are some exceptions:
 
 - [ArraySelection](/uilib/extensions/forms/base-fields/ArraySelection/) will return the displayed/active options content as an array that contains a string (or React.ReactNode).
+
+##### `displayValue` from fields inside Iterate.Array
+
+When using the `Iterate.Array` component, you may check if the current entry is an array. This way you ensure you never transform the array itself, but only the values from the fields inside the array.
+
+```jsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+const MyForm = () => {
+  return (
+    <Form.Handler
+      onSubmit={(data, { transformData }) => {
+        const transformedData = transformData(
+          data,
+          ({ value, displayValue, label }) => {
+            if (!Array.isArray(value)) {
+              return { value, displayValue, label }
+            }
+          },
+        )
+      }}
+    >
+      <Form.Card>
+        <Iterate.Array path="/myArray">
+          <Field.String itemPath="/" label="My label" />
+        </Iterate.Array>
+      </Form.Card>
+      <Form.SubmitButton />
+    </Form.Handler>
+  )
+}
+```

packages/dnb-eufemia/package.json

@@ -84,7 +84,7 @@
     "test:postbuild": "yarn jest ./postbuild.test.ts --ci --testPathIgnorePatterns=[]",
     "test:screenshots": "yarn jest --config=./jest.config.screenshots.js --maxWorkers=1 --detectOpenHandles --testPathPattern ",
     "test:screenshots:ci": "yarn jest --config=./jest.config.screenshots.js --ci --bail --maxWorkers=1",
-    "test:screenshots:ci:update": "yarn test:screenshots:ci --maxWorkers=1 --updateSnapshot",
+    "test:screenshots:ci:update": "yarn test:screenshots:ci --updateSnapshot",
     "test:screenshots:reset": "find . -name '*.snap.png' -type f|xargs rm -f && yarn test:screenshots",
     "test:screenshots:update": "yarn jest --config=./jest.config.screenshots.js --maxWorkers=1 --updateSnapshot --testPathPattern ",
     "test:screenshots:watch": "JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest --config=./jest.config.screenshots.js --watchAll --detectOpenHandles --testPathPattern ",

packages/dnb-eufemia/scripts/figma/tasks/assetsExtractors.ts

@@ -221,15 +221,15 @@ async function collectIconsFromFigmaDoc({
     }
   )
 
-  runDiffControll({ controlStorageLists })
+  runDiffControl({ controlStorageLists })
 
   return {
     listWithNewFiles,
     listOfProcessedFiles,
   }
 }
 
-const runDiffControll = ({ controlStorageLists }) => {
+const runDiffControl = ({ controlStorageLists }) => {
   const collectDiff = []
   const sizes = Object.keys(ICON_SIZES).map((size) => `_${size}`)
   const removeSizes = (n) =>

packages/dnb-eufemia/scripts/prebuild/tasks/makeReleaseVersion.ts

@@ -15,6 +15,10 @@ import { log } from '../../lib'
 export async function makeReleaseVersion() {
   const branchName = getBranchName()
 
+  if (branchName.startsWith('icons/')) {
+    return // stop here
+  }
+
   let version = null
 
   if (releaseBranches.includes(branchName)) {

packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import HeightAnimation from '../HeightAnimation'
 import HeightAnimationInstance from '../HeightAnimationInstance'
 import {
@@ -10,6 +10,7 @@ import {
   runAnimation,
   simulateAnimationEnd,
 } from './HeightAnimationUtils'
+import { wait } from '../../../core/jest/jestSetup'
 
 describe('HeightAnimation', () => {
   initializeTestSetup()
@@ -400,6 +401,9 @@ describe('stopOuterAnimations', () => {
     mockHeight(100, innerElement)
     mockHeight(200, innerElement)
 
+    // To ensure the "dnb-height-animation--stop" className is set after rerender
+    await wait(10)
+
     rerender(
       <HeightAnimation className="outer">
         <HeightAnimation className="inner">456</HeightAnimation>
@@ -412,9 +416,11 @@ describe('stopOuterAnimations', () => {
 
     runAnimation()
 
-    expect(
-      document.querySelector('.dnb-height-animation--stop')
-    ).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(
+        document.querySelector('.dnb-height-animation--stop')
+      ).not.toBeInTheDocument()
+    })
   })
 
   it('should not animate when outer height animation has --stop className', async () => {

packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimationUtils.ts

@@ -43,6 +43,7 @@ export const mockHeight = (
   element.setAttribute('data-height', String(height))
 }
 
+// Will be overwritten when using "initializeTestSetup"
 export let nextAnimationFrame = () => null
 export const runAnimation = () => {
   nextAnimationFrame()

packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx

@@ -106,7 +106,7 @@ describe('P element', () => {
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 
-  describe('deprecated behaviour', () => {
+  describe('deprecated behavior', () => {
     it('can set className and modifier', () => {
       render(<P className="my-class" modifier="my-modifier" />)
       const element = document.querySelector('.dnb-p')

packages/dnb-eufemia/src/elements/typography/style/_dnb-t.scss

@@ -61,7 +61,7 @@
     font-weight: var(--font-weight-bold);
   }
 
-  // alignement
+  // alignment
   &__align--center {
     text-align: center;
   }

packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx

@@ -424,17 +424,26 @@ export default function Provider<Data extends JsonObject>(
    * Mutate the data set based on the filterData function
    */
   const mutateDataHandler = useCallback(
-    (data: Data, handler: TransformData | FilterData, remove = false) => {
-      const mutate = (path: Path, result: boolean | unknown) => {
+    (
+      data: Data,
+      handler: TransformData | FilterData,
+      { remove = false, mutate = true } = {}
+    ) => {
+      const freshData = {} as Data
+      const mutateEntry = (path: Path, result: boolean | unknown) => {
         if (remove) {
           if (result === false) {
             data = structuredClone(data)
             pointer.remove(data, path)
           }
         } else {
           if (typeof result !== 'undefined') {
-            data = structuredClone(data)
-            pointer.set(data, path, result)
+            if (mutate) {
+              data = structuredClone(data)
+              pointer.set(data, path, result)
+            } else {
+              pointer.set(freshData, path, result)
+            }
           }
         }
       }
@@ -458,11 +467,15 @@ export default function Provider<Data extends JsonObject>(
                 props,
                 internal,
               })
-              mutate(path, result)
+              mutateEntry(path, result)
             }
           }
         )
 
+        if (!mutate) {
+          return freshData
+        }
+
         return data
       } else if (handler) {
         const runFilter = ({ path, condition }) => {
@@ -480,7 +493,7 @@ export default function Provider<Data extends JsonObject>(
                     internal,
                   })
                 : condition
-            mutate(path, result)
+            mutateEntry(path, result)
           }
         }
 
@@ -567,7 +580,7 @@ export default function Provider<Data extends JsonObject>(
   const filterDataHandler = useCallback(
     (data: Data, filter: FilterData) => {
       if (filter) {
-        return mutateDataHandler(data, filter, true)
+        return mutateDataHandler(data, filter, { remove: true })
       }
 
       return data
@@ -1176,7 +1189,7 @@ export default function Provider<Data extends JsonObject>(
     }
 
     const transformData = (data: Data, handler: TransformData) => {
-      return mutateDataHandler(data, handler)
+      return mutateDataHandler(data, handler, { mutate: false })
     }
 
     const formElement = formElementRef.current