release of v10.48 (#3920)

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

@@ -4,15 +4,15 @@ showTabs: true
 
 ## Properties
 
-| Properties                              | Description                                                                                             |
-| --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `forId`                                 | _(required)_ the same unique `id` like the linked HTML element has.                                     |
-| `text`                                  | _(optional)_ the `text` of the label. You can use `children` as well.                                   |
-| `srOnly`                                | _(optional)_ when `true`, the label will be invisible and only accessible for screen readers.           |
-| `vertical`                              | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**.          |
-| `size`                                  | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                     |
-| `disabled`                              | _(optional)_ if set to `true`, the label will behave as not interactive.                                |
-| `element`                               | _(optional)_ defines the HTML element used. Defaults to `label`.                                        |
-| `innerRef`                              | _(optional)_ attach a React Ref to the inner label `element`.                                           |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                   |
+| Properties                              | Description                                                                                              |
+| --------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `forId`                                 | _(required)_ the same unique `id` like the linked HTML element has.                                      |
+| `text`                                  | _(optional)_ the `text` of the label. You can use `children` as well.                                    |
+| `srOnly`                                | _(optional)_ when `true`, the label will be invisible and only accessible for screen readers.            |
+| `vertical`                              | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**.           |
+| `size`                                  | _(optional)_ define one of the following [heading sizes](/uilib/elements/heading/): `medium` or `large`. |
+| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                      |
+| `disabled`                              | _(optional)_ if set to `true`, the label will behave as not interactive.                                 |
+| `element`                               | _(optional)_ defines the HTML element used. Defaults to `label`.                                         |
+| `innerRef`                              | _(optional)_ attach a React Ref to the inner label `element`.                                            |
+| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                    |

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

@@ -5,6 +5,26 @@ import { Button, Card, Flex, P, Section } from '@dnb/eufemia/src'
 import { debounceAsync } from '@dnb/eufemia/src/shared/helpers/debounce'
 import { createRequest } from '../SubmitIndicator/Examples'
 
+export const RequiredAndOptionalFields = () => {
+  return (
+    <ComponentBox data-visual-test="required-and-optional-fields">
+      <Form.Handler required>
+        <Card stack>
+          <Field.Email path="/email" required={false} />
+          <Field.String
+            path="/custom"
+            label="Label"
+            labelDescription="\nLabel description"
+            required={false}
+          />
+          <Field.Currency path="/amount" label="Amount" />
+          <Form.SubmitButton />
+        </Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
 export const AsyncSubmit = () => {
   return (
     <ComponentBox>

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

@@ -6,6 +6,14 @@ import * as Examples from './Examples'
 
 ## Demos
 
+### Required and Optional Fields
+
+To make all fields required, set the `required` prop on the `Form.Handler` component.
+
+For fields that should remain optional, use `required={false}` prop on the specific field. When doing so, it will append "(optional)" to the optional field's label(`labelSuffix`).
+
+<Examples.RequiredAndOptionalFields />
+
 ### In combination with a SubmitButton
 
 This example uses an async `onSubmit` event handler. It will disable all fields and show an indicator on the [SubmitButton](/uilib/extensions/forms/Form/SubmitButton/) while the form is pending.

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

@@ -22,7 +22,7 @@ export const UsingCommitButton = () => {
 
           <Field.String
             required
-            label="Commited from isolation"
+            label="Committed from isolation"
             path="/isolated"
           />
           <Field.String

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

@@ -17,8 +17,8 @@ It's a provider that lets you provide a `schema` or `data` very similar to what
 - You can provide a `schema`, `data` or `defaultData` like you would do with the `Form.Handler`.
 - You can also provide `data` or `defaultData` to the `Form.Handler` component. If not given on the `Form.Isolation` component, this will define the data that will be used for the isolated data.
 - Using `Form.Isolation` inside of a `Form.Section` is supported.
-- `onChange` on the `Form.Handler` will be called when the isolated data gets commited.
-- `onChange` on the `Form.Isolation` will be called on every change of the isolated data. Use `onCommit` to get the data that gets commited.
+- `onChange` on the `Form.Handler` will be called when the isolated data gets committed.
+- `onChange` on the `Form.Isolation` will be called on every change of the isolated data. Use `onCommit` to get the data that gets committed.
 
 ## Usage
 

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

@@ -82,6 +82,7 @@ export const ViewAndEditContainer = () => {
             defaultData={{
               nestedPath: {
                 firstName: 'Nora',
+                lastName: 'Mørk',
               },
             }}
           >
@@ -100,6 +101,55 @@ export const ViewAndEditContainer = () => {
   )
 }
 
+export const ViewAndEditContainerValidation = () => {
+  return (
+    <ComponentBox hideCode>
+      {() => {
+        const MyEditContainer = () => {
+          return (
+            <Form.Section.EditContainer>
+              <Field.Name.First path="/firstName" />
+              <Field.Name.Last path="/lastName" />
+            </Form.Section.EditContainer>
+          )
+        }
+
+        const MyViewContainer = () => {
+          return (
+            <Form.Section.ViewContainer>
+              <Value.SummaryList>
+                <Value.Name.First path="/firstName" />
+                <Value.Name.Last path="/lastName" />
+              </Value.SummaryList>
+            </Form.Section.ViewContainer>
+          )
+        }
+
+        return (
+          <Form.Handler
+            onSubmit={async (data) => console.log('onSubmit', data)}
+            defaultData={{
+              nestedPath: {
+                firstName: 'Nora',
+                lastName: undefined, // initiate error
+              },
+            }}
+          >
+            <Card stack>
+              <Form.SubHeading>Your account</Form.SubHeading>
+              <Form.Section path="/nestedPath" required validateInitially>
+                <MyEditContainer />
+                <MyViewContainer />
+              </Form.Section>
+            </Card>
+            <Form.SubmitButton />
+          </Form.Handler>
+        )
+      }}
+    </ComponentBox>
+  )
+}
+
 export const BasicViewAndEditContainer = () => {
   return (
     <ComponentBox
@@ -133,6 +183,7 @@ export const BasicViewAndEditContainer = () => {
             defaultData={{
               nestedPath: {
                 firstName: 'Nora',
+                lastName: 'Mørk',
               },
             }}
           >

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

@@ -23,6 +23,12 @@ This example uses the [EditContainer](/uilib/extensions/forms/Form/Section/EditC
 
 <Examples.ViewAndEditContainer />
 
+### Show errors on the whole section
+
+When a field in the section has an error and the section has `containerMode` set to `auto` (default), the whole section will switch to edit mode. The errors will be shown when `validateInitially` is set to `true`.
+
+<Examples.ViewAndEditContainerValidation />
+
 Using `variant="basic"` will render the view and edit container without the additional Card `outline`.
 
 <Examples.BasicViewAndEditContainer />

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

@@ -5,6 +5,7 @@ import {
   Field,
   Value,
   Form,
+  Tools,
 } from '@dnb/eufemia/src/extensions/forms'
 export { Default as AnimatedContainer } from '../AnimatedContainer/Examples'
 
@@ -172,7 +173,7 @@ export const ArrayFromFormHandler = () => {
         }}
         onChange={(data) => console.log('DataContext/onChange', data)}
       >
-        <Flex.Vertical>
+        <Flex.Stack>
           <Form.MainHeading>Avengers</Form.MainHeading>
 
           <Card stack>
@@ -212,7 +213,7 @@ export const ArrayFromFormHandler = () => {
               pushValue={{}}
             />
           </Card>
-        </Flex.Vertical>
+        </Flex.Stack>
       </Form.Handler>
     </ComponentBox>
   )
@@ -282,7 +283,7 @@ export const ViewAndEditContainer = () => {
                 accounts: [
                   {
                     firstName: 'Tony',
-                    lastName: undefined, // initiate error
+                    lastName: 'Rogers',
                   },
                 ],
               }}
@@ -291,7 +292,7 @@ export const ViewAndEditContainer = () => {
               }
               onSubmit={async (data) => console.log('onSubmit', data)}
             >
-              <Flex.Vertical>
+              <Flex.Stack>
                 <Form.MainHeading>Accounts</Form.MainHeading>
 
                 <Card stack>
@@ -304,7 +305,7 @@ export const ViewAndEditContainer = () => {
                 </Card>
 
                 <Form.SubmitButton variant="send" />
-              </Flex.Vertical>
+              </Flex.Stack>
             </Form.Handler>
           )
         }
@@ -364,3 +365,117 @@ export const WithVisibility = () => {
     </ComponentBox>
   )
 }
+
+export const InitialOpen = () => {
+  return (
+    <ComponentBox scope={{ Iterate, Tools }}>
+      <Form.Handler
+        onSubmit={async (data) => console.log('onSubmit', data)}
+        onSubmitRequest={() => console.log('onSubmitRequest')}
+      >
+        <Flex.Stack>
+          <Form.MainHeading>Statsborgerskap</Form.MainHeading>
+
+          <Card align="stretch">
+            <Iterate.Array path="/countries" defaultValue={[null]}>
+              <Iterate.ViewContainer toolbarVariant="minimumOneItem">
+                <Value.SelectCountry
+                  label="Land du er statsborger i"
+                  itemPath="/"
+                />
+              </Iterate.ViewContainer>
+
+              <Iterate.EditContainer toolbarVariant="minimumOneItem">
+                <Field.SelectCountry
+                  label="Land du er statsborger i"
+                  itemPath="/"
+                  required
+                />
+              </Iterate.EditContainer>
+            </Iterate.Array>
+
+            <Iterate.PushButton
+              path="/countries"
+              pushValue={null}
+              text="Legg til flere statsborgerskap"
+            />
+          </Card>
+
+          <Form.SubmitButton variant="send" />
+
+          <Tools.Log />
+        </Flex.Stack>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const ToolbarVariantMiniumOneItemOneItem = () => {
+  return (
+    <ComponentBox hideCode>
+      <Iterate.Array value={['foo']}>
+        <Iterate.ViewContainer toolbarVariant="minimumOneItem">
+          View Content
+        </Iterate.ViewContainer>
+        <Iterate.EditContainer toolbarVariant="minimumOneItem">
+          Edit Content
+        </Iterate.EditContainer>
+      </Iterate.Array>
+    </ComponentBox>
+  )
+}
+
+export const ToolbarVariantMiniumOneItemTwoItems = () => {
+  return (
+    <ComponentBox hideCode>
+      <Iterate.Array value={['foo', 'bar']}>
+        <Iterate.ViewContainer toolbarVariant="minimumOneItem">
+          View Content
+        </Iterate.ViewContainer>
+        <Iterate.EditContainer toolbarVariant="minimumOneItem">
+          Edit Content
+        </Iterate.EditContainer>
+      </Iterate.Array>
+    </ComponentBox>
+  )
+}
+
+export const WithArrayValidator = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler
+        defaultData={{ items: ['foo'] }}
+        onSubmit={async () => console.log('onSubmit')}
+      >
+        <Card stack>
+          <Iterate.Array
+            path="/items"
+            validator={(arrayValue) => {
+              if (!(arrayValue && arrayValue.length > 1)) {
+                return new Error('You need at least two items')
+              }
+            }}
+          >
+            <Flex.Horizontal align="flex-end">
+              <Field.String
+                label="Item no. {itemNr}"
+                itemPath="/"
+                width="medium"
+                size="medium"
+              />
+              <Iterate.RemoveButton />
+            </Flex.Horizontal>
+          </Iterate.Array>
+
+          <Iterate.PushButton
+            top
+            path="/items"
+            pushValue={null}
+            text="Add"
+          />
+          <Form.SubmitButton />
+        </Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx

@@ -21,6 +21,8 @@ import * as Examples from './Examples'
 
 ### Render props with primitive items
 
+You can provide the child as a function that receives the value of the item as the first argument, and the index of which item you are on as the second.
+
 <Examples.RenderPropsPrimitiveItems />
 
 ### Render props with object items
@@ -47,6 +49,14 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T
 
 <Examples.ViewAndEditContainer />
 
+### Initially open
+
+This example uses the container's `toolbarVariant` property with the value `minimumOneItem`.
+
+It hides the toolbar in the `EditContainer` when there is only one item in the array. And it hides the remove button in the `ViewContainer` when there is only one item in the array.
+
+<Examples.InitialOpen />
+
 ### With DataContext and add/remove buttons
 
 <Examples.ArrayFromFormHandler />
@@ -58,3 +68,17 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T
 ### Value composition
 
 <Examples.ValueComposition />
+
+### Array validator
+
+You can also add a validator to ensure that the array contains at least one item:
+
+```tsx
+const validator = (arrayValue) => {
+  if (!(arrayValue?.length > 0)) {
+    return new Error('You need at least one item')
+  }
+}
+```
+
+<Examples.WithArrayValidator />