release of v10.62 (#4414)

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

@@ -59,7 +59,7 @@
     "@babel/eslint-parser": "7.22.5",
     "@babel/node": "7.22.5",
     "@emotion/cache": "11.11.0",
-    "@playwright/test": "1.42.1",
+    "@playwright/test": "1.49.1",
     "@types/json-schema": "7.0.12",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",

packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx

@@ -182,10 +182,8 @@ export const VerticalFields = () => {
   return (
     <ComponentBox>
       <Form.Card>
-        <Flex.Vertical>
-          <Field.String label="Label" value="Value" />
-          <Field.String label="Label" value="Value" />
-        </Flex.Vertical>
+        <Field.String label="Label" value="Value" />
+        <Field.String label="Label" value="Value" />
       </Form.Card>
     </ComponentBox>
   )

packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx

@@ -10,6 +10,16 @@ import * as Examples from './Examples'
 
 <Examples.Default />
 
+### Stack
+
+When `stack` is set to `true`, the Card will add a gap between its children and stretch them to the full.
+
+For [form components](uilib/extensions/forms/), you should use [Form.Card](/uilib/extensions/forms/Form/Card/) instead of the original Card component.
+
+When `stack` is set to `true`, the Card will add a gap between its children and stretch them to the full.
+
+<Examples.Stack />
+
 ### Vertical fields
 
 When using Eufemia Forms, you may want to use [Form.Card](/uilib/extensions/forms/Form/Card/) instead of the original Card component.
@@ -22,16 +32,6 @@ When using Eufemia Forms, you may want to use [Form.Card](/uilib/extensions/form
 
 <Examples.HorizontalFields />
 
-### Stack
-
-When `stack` is set to `true`, the Card will add a gap between its children and stretch them to the full.
-
-For [form components](uilib/extensions/forms/), you should use [Form.Card](/uilib/extensions/forms/Form/Card/) instead of the original Card component.
-
-When `stack` is set to `true`, the Card will add a gap between its children and stretch them to the full.
-
-<Examples.Stack />
-
 ### Nested Cards
 
 Nested cards have `responsive={false}` by default and will not behave responsive.

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

@@ -128,3 +128,13 @@ export const WithinOtherComponents = () => {
     </ComponentBox>
   )
 }
+
+export const WithinALabel = () => {
+  return (
+    <ComponentBox data-visual-test="submit-indicator-with-label">
+      <Form.Handler>
+        <Form.SubmitIndicator state="pending" showLabel />
+      </Form.Handler>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx

@@ -29,3 +29,7 @@ Make a change in the input field.
 ### Used in other components
 
 <Examples.WithinOtherComponents />
+
+### With a label
+
+<Examples.WithinALabel />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx

@@ -2,9 +2,14 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { SubmitIndicatorProperties } from '@dnb/eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs'
 
 ## Properties
 
 <PropertiesTable props={SubmitIndicatorProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="SubmitIndicator" />

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import { Button } from '@dnb/eufemia/src'
 import { Form, Field } from '@dnb/eufemia/src/extensions/forms'
 
 export function Default() {
@@ -41,3 +42,33 @@ export function AfterFirstRender() {
     </ComponentBox>
   )
 }
+
+export function UpdateValue() {
+  return (
+    <ComponentBox>
+      {() => {
+        const myFormId = {}
+        const { update } = Form.setData(myFormId)
+
+        const Component = () => {
+          return (
+            <Form.Card>
+              <Form.Handler id={myFormId}>
+                <Field.Number path="/foo" defaultValue={1} />
+              </Form.Handler>
+              <Button
+                onClick={() => {
+                  update('/foo', (count) => count + 1)
+                }}
+              >
+                Update
+              </Button>
+            </Form.Card>
+          )
+        }
+
+        return <Component />
+      }}
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/setData/demos.mdx

@@ -13,3 +13,7 @@ import * as Examples from './Examples'
 ### Set data after first render
 
 <Examples.AfterFirstRender />
+
+### Using the update function
+
+<Examples.UpdateValue />

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

@@ -6,21 +6,57 @@ showTabs: true
 
 With the `Form.setData` method, you can manage your form data outside of the form itself. This is beneficial when you need to utilize the form data in other places within your application:
 
+Related helpers:
+
+- [getData](/uilib/extensions/forms/Form/getData/)
+- [useData](/uilib/extensions/forms/Form/useData/)
+
+## Replace the whole data set
+
+When a value is given to the `setData` function, the whole data set will be replaced.
+
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
 const myFormId = 'unique-id' // or a function, object or React Context reference
 
 Form.setData('unique', { foo: 'bar' })
 
-function Component() {
-  return <Form.Handler id={myFormId}>...</Form.Handler>
+function MyForm() {
+  return (
+    <Form.Handler id={myFormId}>
+      <Field.String path="/foo" />
+    </Form.Handler>
+  )
 }
 ```
 
-You link them together via the `id` (string, function, object or React Context as the reference) property.
+## Update a single value
 
-Related helpers:
+You can use the `update` function to update the data.
 
-- [getData](/uilib/extensions/forms/Form/getData/)
-- [useData](/uilib/extensions/forms/Form/useData/)
+```tsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+const myFormId = 'unique-id' // or a function, object or React Context reference
+const { update } = Form.setData(myFormId)
+
+function MyForm() {
+  return (
+    <Form.Handler id={myFormId}>
+      <Field.Number path="/foo" defaultValue={0} />
+    </Form.Handler>
+  )
+}
+
+// Call "update" with the path and the new value.
+update('/foo', 1)
+
+// Or with a function that gives you the current value, if any.
+update('/foo', (value) => {
+  if (typeof value === 'number') {
+    return value + 1
+  }
+  return 1
+})
+```

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

@@ -13,6 +13,11 @@ breadcrumb:
 
 Change log for the Eufemia Forms extension.
 
+## v10.62
+
+- Added `label` and `showLabel` properties to [Form.SubmitIndicator](/uilib/extensions/forms/Form/SubmitIndicator/).
+- Added `update` method to [Form.setData](/uilib/extensions/forms/Form/setData/).
+
 ## v10.61
 
 - Added support for async `onFileClick` in [Value.Upload](/uilib/extensions/forms/Value/Upload/).

packages/dnb-eufemia/package.json

@@ -153,7 +153,7 @@
     "@babel/traverse": "7.23.2",
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@playwright/test": "1.42.1",
+    "@playwright/test": "1.49.1",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-json": "6.0.0",
@@ -227,7 +227,7 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-image-snapshot": "6.2.0",
     "jest-matchmedia-mock": "1.1.0",
-    "jest-playwright-preset": "3.0.1",
+    "jest-playwright-preset": "4.0.0",
     "jest-raw-loader": "1.0.1",
     "jest-tobetype": "1.2.3",
     "lint-staged": "11.2.6",

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

@@ -1353,7 +1353,7 @@ class AutocompleteInstance extends React.PureComponent {
         .filter(({ word, wordIndex }) => {
           if (searchNumbers) {
             // Remove all other chars, except numbers, so we can compare
-            word = word.replace(/[^\d\w]/g, '')
+            word = word.replace(/[^\p{L}\p{N}]+/gu, '')
           } else {
             // To ensure we escape regex chars
             word = escapeRegexChars(word)
@@ -1474,7 +1474,7 @@ class AutocompleteInstance extends React.PureComponent {
 
               if (searchNumbers) {
                 word.split('').forEach((char) => {
-                  if (/[\d\w]/.test(char)) {
+                  if (/[\p{L}\p{N}]/u.test(char)) {
                     segment = segment.replace(
                       new RegExp(`(${char})`, 'gi'),
                       `${strS}$1${strE}`

packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx

@@ -684,6 +684,40 @@ describe('Autocomplete component', () => {
     ).toBe(mockData[3])
   })
 
+  it('has correct options when using search_numbers, and searching with æøå', () => {
+    const mockData = [
+      ['Åge Ørn Ærlig', format('12345678901')],
+      ["Andrè Ørjåsæter O'Neill", format('12345678901')],
+    ] as DrawerListData
+
+    render(
+      <Autocomplete
+        data={mockData}
+        search_numbers
+        show_submit_button
+        {...mockProps}
+      />
+    )
+
+    toggle()
+
+    fireEvent.change(document.querySelector('.dnb-input__input'), {
+      target: { value: 'Åge Ørn Ærlig' },
+    })
+    expect(
+      document.querySelectorAll('li.dnb-drawer-list__option')[0]
+        .textContent
+    ).toBe('Åge Ørn Ærlig12 345 678 901')
+
+    fireEvent.change(document.querySelector('.dnb-input__input'), {
+      target: { value: "Andrè Ørjåsæter O'Neill" },
+    })
+    expect(
+      document.querySelectorAll('li.dnb-drawer-list__option')[0]
+        .textContent
+    ).toBe("Andrè Ørjåsæter O'Neill12 345 678 901")
+  })
+
   it('has correct options when using search_numbers and search_in_word_index=1', () => {
     const mockData = ['100.222.333,40', '123456', '100 222 444,50']
 

packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.tsx

@@ -53,6 +53,21 @@ export const SearchNumbers = () => {
   )
 }
 
+export const SearchNumbersNonAlphaNumericChars = () => {
+  return (
+    <Autocomplete
+      label="Label:"
+      data={[
+        ['Edgar Wuckert', '1234.56.78901'],
+        ['Megan Abshire Jr.', '1234 56 78901'],
+        ['Åge Ørn Ærlig', '12345678901'],
+        ["Andrè O'Neill", '12345678901'],
+      ]}
+      search_numbers
+    />
+  )
+}
+
 const accounts = [
   { selectedKey: 1, content: 'A' },
   { selectedKey: 2, content: 'B' },

packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -1014,8 +1014,8 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 @media screen and (max-width: 40em) {
   .dnb-drawer {
     width: 100vw;
-    min-width: auto;
-    max-width: auto;
+    min-width: none;
+    max-width: none;
   }
 }
 @media screen and (max-width: 40em) {

packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss

@@ -39,8 +39,8 @@
 
   @include allBelow(small) {
     width: 100vw;
-    min-width: auto;
-    max-width: auto;
+    min-width: none;
+    max-width: none;
   }
 
   @include defaultDropShadow();