release of v10.61

packages/dnb-design-system-portal/src/docs/contribute/getting-started/commit-changes.mdx

@@ -12,12 +12,16 @@ From a Fork:
 - Make your changes in your Fork and create a _Pull Request_ back to the Eufemia repo and `origin/main`.
 - Watch the result of the tests.
 
-From a clone:
+With access to the Eufemia repo:
 
 - Make your changes and commit it to the repo in a new branch.
 - Make a _Pull Request_ to `origin/main`.
 - Watch the result of the tests.
 
+## How to write a commit message
+
+Please have a look at the [Git convention](/contribute/style-guides/git) for how to write a commit message.
+
 ## Submit Algolia search queries locally
 
 In order to submit Algolia search queries to the `dev_eufemia_docs` index, you have to:

packages/dnb-design-system-portal/src/docs/contribute/style-guides/git.mdx

@@ -13,11 +13,27 @@ Version numbers are handled automatically by using [semantic-release](https://gi
 
 ## Commit Messages
 
-Make sure to decorate your **commit messages** with either [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) or [simple-commit-message](https://github.com/bahmutov/simple-commit-message):
+For consistency, please write commit messages in the **imperative mood**.
 
-- `fix: an example fix message` as the subject
-- `feat: this is a new feature` as the subject
-- `e.g. feat: message` + `BREAKING CHANGE:` in the footer of the commit. See example below.
+A clear and concise commit message helps others understand the purpose of the commit and makes it easier to search through the history for specific changes.
+
+### Why the Imperative Mood?
+
+The imperative mood matches the implied "command" to the codebase. Think of the message as completing the phrase: _"This commit will..."_. For example:
+
+- **"Fix bug"** (instead of "Fixed bug")
+- **"Add feature"** (instead of "Added feature")
+- **"Refactor code"** (instead of "Refactored code")
+
+This convention helps maintain consistency and clarity across the Eufemia codebase.
+
+### Decorate your commit messages
+
+Make sure to **decorate** your commit messages with either [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) or [simple-commit-message](https://github.com/bahmutov/simple-commit-message):
+
+- `fix: fix message` as the subject
+- `feat: feature message` as the subject
+- For a major change: `feat: message` + `BREAKING CHANGE:` in the footer of the commit. See example below.
 
 If you are working on a single component update, you can use a decoration and a scope in parenthesis:
 

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

@@ -56,7 +56,7 @@ export const UploadPrefilledFileList = () => (
 
 export const UploadBasic = () => (
   <ComponentBox data-visual-test="upload-basic">
-    <Upload acceptedFileTypes={['jpg', 'png']} id="upload-basic" />
+    <Upload acceptedFileTypes={['jpg', 'png']} />
   </ComponentBox>
 )
 
@@ -88,14 +88,12 @@ export const UploadRemoveFile = () => (
   <ComponentBox data-visual-test="upload-remove-files">
     {() => {
       const Component = () => {
-        const { files, setFiles } = Upload.useUpload('upload-remove-files')
+        const myUploadId = 'unique-id' // or a function, object or React Context reference.
+        const { files, setFiles } = Upload.useUpload(myUploadId) // id is needed when wanting to connect with the useUpload hook.
 
         return (
           <>
-            <Upload
-              acceptedFileTypes={['jpg', 'png']}
-              id="upload-remove-files"
-            />
+            <Upload acceptedFileTypes={['jpg', 'png']} id={myUploadId} />
 
             <Button
               top="small"
@@ -269,7 +267,6 @@ export const UploadFileMaxSizeBasedOnFileType = () => (
     hideCode
   >
     <Upload
-      id="upload-file-max-size-based-on-file-format"
       fileMaxSize={99}
       acceptedFileTypes={[
         { fileType: 'jpg', fileMaxSize: 1 },
@@ -297,7 +294,6 @@ export const UploadFileMaxSizeBasedOnFileType = () => (
 export const UploadFileMaxSizeBasedOnFileTypeDisabled = () => (
   <ComponentBox>
     <Upload
-      id="upload-file-max-size-based-on-file-format-disabled"
       acceptedFileTypes={[
         { fileType: 'jpg', fileMaxSize: 0 },
         { fileType: 'doc', fileMaxSize: false },
@@ -309,11 +305,7 @@ export const UploadFileMaxSizeBasedOnFileTypeDisabled = () => (
 
 export const UploadDisabledFileMaxSize = () => (
   <ComponentBox data-visual-test="upload-disabled-file-max-size">
-    <Upload
-      acceptedFileTypes={['jpg', 'pdf']}
-      id="upload-disabled-file-max-size"
-      fileMaxSize={false}
-    />
+    <Upload acceptedFileTypes={['jpg', 'pdf']} fileMaxSize={false} />
   </ComponentBox>
 )
 
@@ -323,7 +315,6 @@ export const UploadNoTitleNoText = () => (
       title={false}
       text={false}
       acceptedFileTypes={['jpg', 'png']}
-      id="upload-no-title-no-text"
     />
   </ComponentBox>
 )
@@ -347,7 +338,6 @@ export const UploadOnFileDeleteAsync = () => (
         <Upload
           onFileDelete={mockAsyncFileRemoval}
           acceptedFileTypes={['jpg', 'png']}
-          id="upload-on-file-delete"
         />
       )
     }}
@@ -367,13 +357,15 @@ export const UploadOnFileClick = () => (
           setFiles([
             {
               file: createMockFile('1501870.jpg', 123, 'image/png'),
+              id: '1',
             },
             {
               file: createMockFile(
                 'file-name-that-is-very-long-and-has-letters.png',
                 123,
                 'image/png',
               ),
+              id: '2',
             },
           ])
         }, [setFiles])

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

@@ -22,7 +22,8 @@ The Upload component should be used in scenarios where the user has to upload an
 
 ```jsx
 function YourComponent() {
-  const { files, setFiles } = Upload.useUpload('unique-id')
+  const myUploadId = 'unique-id' // or a function, object or React Context reference
+  const { files, setFiles } = Upload.useUpload(myUploadId)
 
   React.useEffect(() => {
     setFiles(
@@ -35,7 +36,7 @@ function YourComponent() {
     )
   }, [fileNameFromBackend])
 
-  return <Upload id="unique-id" />
+  return <Upload id={myUploadId} />
 }
 ```
 

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

@@ -429,7 +429,7 @@ export const UsingWizard = () => {
   return (
     <ComponentBox>
       {() => {
-        const MyForm = () => {
+        function MyForm() {
           // Routers like "react-router" are supported as well
           Wizard.useQueryLocator('my-wizard')
           const { summaryTitle } = Form.useLocale().Step
@@ -622,7 +622,7 @@ export const UsingIterate = () => {
           )
         }
 
-        const MyForm = () => {
+        function MyForm() {
           return (
             <Form.Handler
               data={{
@@ -700,33 +700,37 @@ export const Transformers = () => {
 
 export const QuickStart = () => {
   return (
-    <ComponentBox>
+    <ComponentBox hideCode>
       {() => {
-        const MyForm = () => {
-          const existingData = { companyName: 'DNB' }
+        const existingData = { companyName: 'DNB' }
+
+        function MyForm() {
           return (
             <Form.Handler
               defaultData={existingData}
-              onChange={console.log}
-              onSubmit={console.log}
+              onSubmit={async (data) => console.log('onSubmit', data)}
+              required
             >
+              <Form.MainHeading>Quick start</Form.MainHeading>
+
               <Form.Card>
-                <Field.Name.Company path="/companyName" required />
-                <Field.OrganizationNumber
-                  path="/companyOrganizationNumber"
-                  required
-                />
+                <Field.Name.Company path="/companyName" />
+
+                <Field.OrganizationNumber path="/companyOrganizationNumber" />
+
                 <Field.Selection
                   path="/postalAddressSelect"
                   label="Ønsket sted for tilsendt post"
                   variant="radio"
+                  required={false}
                 >
                   <Field.Option
                     value="companyAddress"
                     title="Samme som forretningsadresse"
                   />
                   <Field.Option value="other" title="Annet" />
                 </Field.Selection>
+
                 <Form.Visibility
                   visibleWhen={{
                     path: '/postalAddressSelect',
@@ -737,10 +741,10 @@ export const QuickStart = () => {
                   <Field.String
                     path="/postalAddress"
                     label="Sted for tilsendt post"
-                    required
                   />
                 </Form.Visibility>
               </Form.Card>
+              <Form.SubmitButton variant="send" />
             </Form.Handler>
           )
         }

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SelectCountry/info.mdx

@@ -27,16 +27,21 @@ const MyComponent = () => {
 
 ### TransformIn and TransformOut
 
-You can use the `transformIn` and `transformOut` to transform the value before it gets displayed in the field and before it gets sent to the form. The second parameter is the country object. You may have a look at the demo below to see how it works.
+You can use the `transformIn` and `transformOut` to transform the value before it gets displayed in the field and before it gets sent to the form context. The second parameter is the country object. You may have a look at the demo below to see how it works.
 
 ```tsx
-const transformOut = (value, country) => {
-  if (value) {
-    return `${country.name} (${value})`
+import type { CountryType } from '@dnb/eufemia/extensions/forms/Field/SelectCountry'
+
+// From the Field (internal value) to the data context or event parameter
+const transformOut = (internal: string, country: CountryType) => {
+  if (internal) {
+    return `${country.name} (${internal})`
   }
 }
-const transformIn = (value) => {
-  return String(value).match(/\((.*)\)/)?.[1]
+
+// To the Field (from e.g. defaultValue)
+const transformIn = (external: unknown) => {
+  return String(external).match(/\((.*)\)/)?.[1] || 'NO'
 }
 ```