release of v10.44 (#3826)

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

@@ -14,7 +14,7 @@
     "clean": "gatsby clean",
     "lint": "eslint --quiet .",
     "lint:ci": "NODE_ENV=test yarn lint:js && yarn lint:styles && yarn prettier:check && yarn prettier:package",
-    "lint:js": "yarn lint --fix",
+    "lint:js": "yarn lint",
     "lint:js:staged": "eslint --quiet --fix",
     "lint:styles": "stylelint './src/**/*.scss'",
     "lint:styles:staged": "stylelint './src/**/*.scss'",

packages/dnb-design-system-portal/src/docs/contribute/deploy/icons.mdx

@@ -44,7 +44,7 @@ If you need to re-fetch one or several icons that got updated or changed in the
 
 ## How to convert icons only?
 
-During development of the conversion script `convertSvgToJsx` you may consider to run `yarn workspace @dnb/eufemia icons:dev`. Its the same process, when calling `yarn build`. It will convert SVGs to JSXs and create all the needed index files in watch mode.
+During development of the conversion script `convertSvgToJsx` you may consider to run `yarn workspace @dnb/eufemia icons:dev`. It's the same process, when calling `yarn build`. It will convert SVGs to JSXs and create all the needed index files in watch mode.
 
 ## Icons CI/CD process description
 

packages/dnb-design-system-portal/src/docs/icons.mdx

@@ -8,7 +8,7 @@ import ListAllIcons from 'dnb-design-system-portal/src/shared/parts/icons/ListAl
 
 # Icons
 
-This is a list of all icons available sorted in categories. Its a list where primary and secondary icons are combined. You may be interested to [read more](/icons/details) about what [the difference](/icons/primary) is and [how to import](/icons/secondary#react-example-usage).
+This is a list of all icons available sorted in categories. It's a list where primary and secondary icons are combined. You may be interested to [read more](/icons/details) about what [the difference](/icons/primary) is and [how to import](/icons/secondary#react-example-usage).
 
 - for Web there are both [icons as SVG](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/assets/icons) and ready to use [React Components](/icons/secondary#react-example-usage).
 - for Android there is a [custom XML (drawable) package](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/assets/icons/dnb/eufemia-icons-xml.tgz) and a [categorized XML (drawable) package](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/assets/icons/dnb/eufemia-icons-xml-categorized.tgz).

packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx

@@ -10,7 +10,7 @@ showTabs: true
 | `text` or `children`                    | _(optional)_ the content of the button can be a string or a React Element.                                                                                                                                                                                             |
 | `title`                                 | _(optional)_ title of the button. Optional, but should always be included because of accessibility.                                                                                                                                                                    |
 | `variant`                               | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).                                                                                                     |
-| `size`                                  | _(optional)_ the size of the button. For now there is **small**, **medium**, **default** and **large**.                                                                                                                                                                |
+| `size`                                  | _(optional)_ the size of the button. For now there is `small`, `medium`, `default` and `large`.                                                                                                                                                                        |
 | `icon`                                  | _(optional)_ to be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.                                                                                          |
 | `icon_position`                         | _(optional)_ position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.                                                                                                                |
 | `icon_size`                             | _(optional)_ define icon width and height. Defaults to 16px.                                                                                                                                                                                                           |

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

@@ -1,6 +1,6 @@
 ---
 title: 'Upload'
-description: 'The Upload widget should be used in scenarios where the user has to upload files. Files can be uploaded by clicking button. You also have the opportunity to add descriptive texts below the title where you could put max file size, allowed file formats etc.'
+description: 'The Upload component should be used in scenarios where the user has to upload files. Files can be uploaded by clicking button. You also have the opportunity to add descriptive texts below the title where you could put max file size, allowed file formats etc.'
 showTabs: true
 theme: 'sbanken'
 ---

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

@@ -258,3 +258,67 @@ export const UploadAcceptedFormats = () => (
     }}
   </ComponentBox>
 )
+
+export const UploadDisabledFileMaxSize = () => (
+  <ComponentBox hideCode>
+    {() => {
+      const Component = () => {
+        const verifyFileMaxSize = (file: File) => {
+          const errorMapByType = {
+            ['application/pdf']: {
+              fileMaxSizeMb: 4,
+              errorMessage:
+                'Filen du prøver å laste opp er for stor, vi støtter ikke PDF-filer større enn 4 MB.',
+            },
+            ['image/jpeg']: {
+              fileMaxSizeMb: 1,
+              errorMessage:
+                'Filen du prøver å laste opp er for stor, vi støtter ikke JPG-filer større enn 1 MB.',
+            },
+          }
+          const BYTES_IN_A_MEGA_BYTE = 1048576
+
+          const errorObj = errorMapByType[file.type]
+
+          if (
+            errorObj &&
+            // Converts from b (binary) to MB (decimal)
+            file.size / BYTES_IN_A_MEGA_BYTE > errorObj.fileMaxSizeMb
+          ) {
+            return errorObj.errorMessage
+          }
+          return null
+        }
+
+        const { files, setFiles } = Upload.useUpload(
+          'upload-disabled-file-max-size',
+        )
+
+        if (files.length) {
+          console.log('files', files, setFiles)
+        }
+
+        return (
+          <Upload
+            text="Dra & slipp eller velg hvilke filer du vil laste opp. PDF-filer kan ikke være større enn 4 MB og JPG-filer ikke større enn 1 MB."
+            acceptedFileTypes={['jpg', 'pdf']}
+            id="upload-disabled-file-max-size"
+            fileMaxSize={false}
+            onChange={({ files }) => {
+              setFiles(
+                files.map((fileItem) => {
+                  return {
+                    ...fileItem,
+                    errorMessage: verifyFileMaxSize(fileItem.file),
+                  }
+                }),
+              )
+            }}
+          />
+        )
+      }
+
+      return <Component />
+    }}
+  </ComponentBox>
+)

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

@@ -10,6 +10,7 @@ import {
   UploadIsLoading,
   UploadErrorMessage,
   UploadAcceptedFormats,
+  UploadDisabledFileMaxSize,
 } from 'Docs/uilib/components/upload/Examples'
 
 ## Demos
@@ -51,3 +52,12 @@ You can pass the file formats as a string array. This will restrict which files
 ### Upload with prefilled error
 
 <UploadPrefilledFileList />
+
+### Upload without file max size, and custom error handling of file size
+
+You can disable the file max size, which will deactivate all file size verifications in the Upload component.
+This can also be used to manually implement more complex file max size verifications, like file max size based on file type, see the example below:
+
+<VisibleWhenNotVisualTest>
+  <UploadDisabledFileMaxSize />
+</VisibleWhenNotVisualTest>

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

@@ -1,6 +1,7 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Flex } from '@dnb/eufemia/src'
-import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
+import { Card, Flex, HeightAnimation, Section } from '@dnb/eufemia/src'
+import { Field, Form, Iterate } from '@dnb/eufemia/src/extensions/forms'
+import React from 'react'
 
 export const UsingCommitButton = () => {
   return (
@@ -15,10 +16,7 @@ export const UsingCommitButton = () => {
           >
             <Flex.Stack>
               <Field.String required label="Isolated" path="/isolated" />
-
-              <Flex.Horizontal>
-                <Form.Isolation.CommitButton text="Commit" />
-              </Flex.Horizontal>
+              <Form.Isolation.CommitButton text="Commit" />
             </Flex.Stack>
           </Form.Isolation>
 
@@ -39,3 +37,209 @@ export const UsingCommitButton = () => {
     </ComponentBox>
   )
 }
+
+export const CommitHandleRef = () => {
+  return (
+    <ComponentBox>
+      {() => {
+        const MyForm = () => {
+          const commitHandleRef = React.useRef(null)
+
+          return (
+            <>
+              <Form.Handler
+                bottom="large"
+                data={{
+                  contactPersons: [{ title: 'Hanne', value: 'hanne' }],
+                }}
+              >
+                <Card stack>
+                  <Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
+
+                  <HeightAnimation>
+                    <Field.Selection
+                      variant="radio"
+                      dataPath="/contactPersons"
+                    />
+                  </HeightAnimation>
+
+                  <Form.Isolation
+                    commitHandleRef={commitHandleRef}
+                    transformOnCommit={(isolatedData, handlerData) => {
+                      const value =
+                        isolatedData.newPerson.title.toLowerCase()
+                      const transformedData = {
+                        ...handlerData,
+                        contactPersons: [
+                          ...handlerData.contactPersons,
+                          {
+                            ...isolatedData.newPerson,
+                            value,
+                          },
+                        ],
+                      }
+
+                      return transformedData
+                    }}
+                  >
+                    <Flex.Stack>
+                      <Form.Section path="/newPerson">
+                        <Field.Name.First required path="/title" />
+                      </Form.Section>
+                    </Flex.Stack>
+                  </Form.Isolation>
+                  <Log />
+                </Card>
+              </Form.Handler>
+
+              <button
+                onClick={() => {
+                  commitHandleRef.current()
+                }}
+              >
+                Commit from outside of handler
+              </button>
+            </>
+          )
+        }
+
+        const Log = () => {
+          const { data } = Form.useData()
+          return (
+            <Section
+              element="output"
+              innerSpace
+              backgroundColor="sand-yellow"
+              top
+            >
+              {JSON.stringify(data || {}, null, 4)}
+            </Section>
+          )
+        }
+
+        return <MyForm />
+      }}
+    </ComponentBox>
+  )
+}
+
+export const TransformCommitData = () => {
+  return (
+    <ComponentBox scope={{ Iterate }}>
+      {() => {
+        const MyForm = () => {
+          return (
+            <Form.Handler
+              onChange={console.log}
+              defaultData={{
+                contactPersons: [{ title: 'Hanne', value: 'hanne' }],
+                mySelection: 'hanne',
+              }}
+            >
+              <Card stack>
+                <Form.SubHeading>
+                  Legg til ny hovedkontaktperson
+                </Form.SubHeading>
+
+                <HeightAnimation>
+                  <Field.Selection
+                    variant="radio"
+                    path="/mySelection"
+                    dataPath="/contactPersons"
+                  >
+                    <Field.Option title="Annen person" value="other" />
+                  </Field.Selection>
+                </HeightAnimation>
+
+                <Form.Visibility
+                  visibleWhen={{
+                    path: '/mySelection',
+                    hasValue: 'other',
+                  }}
+                  animate
+                >
+                  <Flex.Stack>
+                    <Form.SubHeading>
+                      Ny hovedkontaktperson
+                    </Form.SubHeading>
+
+                    <Form.Isolation
+                      transformOnCommit={(isolatedData, handlerData) => {
+                        return {
+                          ...handlerData,
+                          contactPersons: [
+                            ...handlerData.contactPersons,
+                            {
+                              ...isolatedData.newPerson,
+                              value:
+                                isolatedData.newPerson.title.toLowerCase(),
+                            },
+                          ],
+                        }
+                      }}
+                      onCommit={(data, { clearData }) => {
+                        clearData()
+                      }}
+                    >
+                      <Flex.Stack>
+                        <Form.Section path="/newPerson">
+                          <Field.Name.First required path="/title" />
+                        </Form.Section>
+
+                        <Form.Isolation.CommitButton />
+                      </Flex.Stack>
+                    </Form.Isolation>
+                  </Flex.Stack>
+                </Form.Visibility>
+              </Card>
+            </Form.Handler>
+          )
+        }
+
+        return <MyForm />
+      }}
+    </ComponentBox>
+  )
+}
+
+export const InsideSection = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler
+        defaultData={{
+          mySection: {
+            isolated: 'Isolated value defined outside',
+            regular: 'Outer regular value',
+          },
+        }}
+        onChange={(data) => {
+          console.log('Outer onChange:', data)
+        }}
+      >
+        <Form.Section path="/mySection">
+          <Flex.Stack>
+            <Form.Isolation
+              defaultData={{
+                isolated: 'The real initial "isolated" value',
+              }}
+              onPathChange={(path, value) => {
+                console.log('Isolated onChange:', path, value)
+              }}
+              onCommit={(data) => console.log('onCommit:', data)}
+            >
+              <Flex.Stack>
+                <Field.String label="Isolated" path="/isolated" required />
+                <Form.Isolation.CommitButton />
+              </Flex.Stack>
+            </Form.Isolation>
+
+            <Field.String label="Synced" path="/isolated" />
+            <Field.String label="Regular" path="/regular" required />
+
+            <Form.SubmitButton />
+          </Flex.Stack>
+        </Form.Section>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}

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

@@ -7,6 +7,18 @@ import * as Examples from './Examples'
 
 ## Demos
 
+### Transform data on commit
+
+<Examples.TransformCommitData />
+
 ### Using the CommitButton
 
 <Examples.UsingCommitButton />
+
+### Using commitHandleRef
+
+<Examples.CommitHandleRef />
+
+### Inside a section
+
+<Examples.InsideSection />