release of v10.49 (#3940)

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

@@ -376,7 +376,7 @@ export const InitialOpen = () => {
         <Flex.Stack>
           <Form.MainHeading>Statsborgerskap</Form.MainHeading>
 
-          <Card align="stretch">
+          <Card stack>
             <Iterate.Array path="/countries" defaultValue={[null]}>
               <Iterate.ViewContainer toolbarVariant="minimumOneItem">
                 <Value.SelectCountry
@@ -455,6 +455,7 @@ export const WithArrayValidator = () => {
                 return new Error('You need at least two items')
               }
             }}
+            animate
           >
             <Flex.Horizontal align="flex-end">
               <Field.String

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushButton/info.mdx

@@ -11,14 +11,40 @@ hideInMenu: true
 import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
 
 render(
-  <>
-    <Iterate.Array path="/">
+  <Form.Handler>
+    <Iterate.Array path="/myList">
       <Field.Name.Last itemPath="/name" />
     </Iterate.Array>
 
-    <Iterate.PushButton text="Add another item" path="/" pushValue={{}} />
-  </>,
+    <Iterate.PushButton
+      path="/myList"
+      text="Add another item"
+      pushValue={{}}
+    />
+  </Form.Handler>,
 )
 ```
 
 In order to create new items you can also use the [Iterate.PushContainer](/uilib/extensions/forms/Iterate/PushContainer/) component.
+
+## Show the next item number in the button
+
+You can use the `{nextItemNo}` variable in the `text` or `children` property to display the next item number.
+
+```tsx
+import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler>
+    <Iterate.Array path="/myList">
+      <Field.String itemPath="/" />
+    </Iterate.Array>
+
+    <Iterate.PushButton
+      path="/myList"
+      pushValue="push value"
+      text="Add no. {nextItemNo}"
+    />
+  </Form.Handler>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/info.mdx

@@ -17,13 +17,13 @@ You can place it below the [Array](/uilib/extensions/forms/Iterate/Array/) compo
 import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
 
 render(
-  <>
-    <Iterate.Array>...</Iterate.Array>
+  <Form.Handler>
+    <Iterate.Array path="/myList">...</Iterate.Array>
 
-    <Iterate.PushContainer title="New item title">
+    <Iterate.PushContainer path="/myList" title="New item title">
       <Field.Name.Last itemPath="/name" />
     </Iterate.PushContainer>
-  </>,
+  </Form.Handler>,
 )
 ```
 
@@ -41,10 +41,11 @@ The button will be shown instead of the content provided by the children when th
 import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
 
 render(
-  <>
-    <Iterate.Array>...</Iterate.Array>
+  <Form.Handler>
+    <Iterate.Array path="/myList">...</Iterate.Array>
 
     <Iterate.PushContainer
+      path="/myList"
       title="New item title"
       openButton={
         <Iterate.PushContainer.OpenButton text="Add another item" />
@@ -53,8 +54,33 @@ render(
     >
       Will be hidden based on the showOpenButtonWhen function
     </Iterate.PushContainer>
-  </>,
+  </Form.Handler>,
 )
 ```
 
 The `Iterate.PushContainer.OpenButton` accepts the same props as the [Button](/uilib/components/button/) component.
+
+## Show the next item number in the open button
+
+You can use the `{nextItemNo}` variable in the `text` or `children` property to display the next item number.
+
+```tsx
+import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler>
+    <Iterate.Array path="/myList">...</Iterate.Array>
+
+    <Iterate.PushContainer
+      path="/myList"
+      title="New item title"
+      openButton={
+        <Iterate.PushContainer.OpenButton text="Add no. {nextItemNo}" />
+      }
+      showOpenButtonWhen={(list) => list.length > 0}
+    >
+      <Field.Name.Last itemPath="/name" />
+    </Iterate.PushContainer>
+  </Form.Handler>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Container/info.mdx

@@ -146,8 +146,6 @@ You can also prevent the user from navigating to the next or previous step, by u
 import { Form, Wizard } from '@dnb/eufemia/extensions/forms'
 
 const MyForm = () => {
-  const { setActiveIndex, activeIndex } = Wizard.useStep('unique-id')
-
   return (
     <Form.Handler>
       <Wizard.Container

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

@@ -12,7 +12,7 @@ breadcrumb:
 
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { ChildrenWithAgeProperties } from '@dnb/eufemia/src/extensions/forms/blocks/ChildrenWithAge/ChildrenWithAgeDocs'
-import { ChildrenWithAge, ChildrenWithAgeWizard } from './Examples'
+import * as Examples from './Examples'
 
 # ChildrenWithAge
 
@@ -29,20 +29,26 @@ render(<ChildrenWithAge />)
 
 All features are enabled in this example.
 
-<ChildrenWithAgeWizard />
+<Examples.ChildrenWithAgeWizard />
 
 ## Basic
 
-<ChildrenWithAge />
+<Examples.ChildrenWithAge />
 
 ## With `joint-responsibility` question
 
-<ChildrenWithAge enableAdditionalQuestions={['joint-responsibility']} />
+<Examples.ChildrenWithAge
+  enableAdditionalQuestions={['joint-responsibility']}
+/>
 
 ## With `daycare` question
 
-<ChildrenWithAge enableAdditionalQuestions={['daycare']} />
+<Examples.ChildrenWithAge enableAdditionalQuestions={['daycare']} />
 
 ## Properties
 
 <PropertiesTable props={ChildrenWithAgeProperties} />
+
+<VisibleWhenVisualTest>
+  <Examples.ChildrenWithAgePrefilledYes />
+</VisibleWhenVisualTest>

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

@@ -31,6 +31,7 @@ export const ChildrenWithAge = (props) => {
     </Form.Handler>
   )
 }
+
 export const ChildrenWithAgeWizard = (props) => {
   return (
     <ComponentBox scope={{ Blocks, props }}>
@@ -160,3 +161,28 @@ function Output({ title, generateRef, transform = (data) => data }) {
     </>
   )
 }
+
+export const ChildrenWithAgePrefilledYes = (props) => {
+  return (
+    <ComponentBox
+      data-visual-test="children-with-age-prefilled"
+      scope={{ Blocks }}
+    >
+      <Form.Handler
+        data={{
+          hasChildren: true,
+          hasJointResponsibility: true,
+          usesDaycare: true,
+          countChildren: 2,
+          children: [{}, {}],
+        }}
+      >
+        <Flex.Stack>
+          <Blocks.ChildrenWithAge
+            enableAdditionalQuestions={['joint-responsibility', 'daycare']}
+          />
+        </Flex.Stack>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}

packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts

@@ -168,7 +168,7 @@ export default class HeightAnimation {
     this.callAnimationEnd()
   }
   getHeight() {
-    return parseFloat(String(this.elem?.clientHeight)) || null
+    return this.withFallback(this.elem, 'clientHeight') ?? null
   }
   getUnknownHeight() {
     if (!this.elem) {
@@ -198,20 +198,15 @@ export default class HeightAnimation {
     // so we need to set the width to the original width
     const elemWidth = this.elem.clientWidth
     const clonedWidth =
-      clonedElem.clientWidth ||
-      // data-width is used for mockup testing with "mockHeight"
-      parseFloat(clonedElem.getAttribute('data-width')) ||
-      0
+      this.withFallback(clonedElem, 'clientWidth', 'data-width') ?? 0
 
     if (clonedWidth > elemWidth) {
       clonedElem.style.width = `${elemWidth}px`
     }
 
     const height =
-      clonedElem.clientHeight ||
       // data-height is used for mockup testing with "mockHeight"
-      parseFloat(clonedElem.getAttribute('data-height')) ||
-      null
+      this.withFallback(this.elem, 'clientHeight', 'data-height') ?? null
 
     clonedElem.parentNode?.removeChild(clonedElem)
 
@@ -221,6 +216,22 @@ export default class HeightAnimation {
 
     return height
   }
+  withFallback(
+    elem: HTMLElement,
+    key: 'clientHeight' | 'clientWidth',
+    fallback?: 'data-height' | 'data-width'
+  ) {
+    const val =
+      fallback && elem.hasAttribute(fallback)
+        ? parseFloat(elem.getAttribute(fallback))
+        : elem?.[key]
+
+    if (isNaN(val)) {
+      return null
+    }
+
+    return val
+  }
   onStart(fn: HeightAnimationOnStartCallback) {
     this.onStartStack.push(fn)
   }
@@ -348,7 +359,7 @@ export default class HeightAnimation {
       return
     }
 
-    if (fromHeight === 0 || fromHeight === null) {
+    if (fromHeight === null) {
       fromHeight = this.getHeight()
     }
     if (toHeight === null) {

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

@@ -61,6 +61,24 @@ describe('HeightAnimationInstance', () => {
     expect(inst.getHeight()).toBe(100)
   })
 
+  it('getHeight with 0 should return 0', () => {
+    const inst = new HeightAnimationInstance()
+    inst.setElement(element)
+
+    mockHeight(0, element)
+
+    expect(inst.getHeight()).toBe(0)
+  })
+
+  it('getHeight with unknown value should return "null"', () => {
+    const inst = new HeightAnimationInstance()
+    inst.setElement(element)
+
+    mockHeight(undefined, element)
+
+    expect(inst.getHeight()).toBe(null)
+  })
+
   describe('getUnknownHeight', () => {
     it('should return proper height', () => {
       const inst = new HeightAnimationInstance()

packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts

@@ -19,6 +19,10 @@ type HandleSubmitProps = {
   formElement?: HTMLFormElement
 }
 
+export type MountOptions = {
+  isMounted?: boolean
+}
+
 export type EventListenerCall = {
   path?: Path
   type?: 'onSubmit' | 'onPathChange'
@@ -93,8 +97,7 @@ export interface ContextState {
   hasFieldError: (path: Path) => boolean
   setFieldState: (path: Path, fieldState: SubmitState) => void
   setFieldError: (path: Path, error: Error | FormError) => void
-  handleMountField: (path: Path) => void
-  handleUnMountField: (path: Path) => void
+  setMountedFieldState: (path: Path, options: MountOptions) => void
   setFormState?: (state: SubmitState) => void
   setSubmitState?: (state: EventStateObject) => void
   addOnChangeHandler?: (callback: OnChange) => void
@@ -117,13 +120,13 @@ export interface ContextState {
     type: EventListenerCall['type'],
     callback: EventListenerCall['callback']
   ) => void
-  setHasVisibleError?: (path: Path, hasError: boolean) => void
+  setVisibleError?: (path: Path, hasError: boolean) => void
   setFieldProps?: (path: Path, props: unknown) => void
   setValueProps?: (path: Path, props: unknown) => void
   setHandleSubmit?: (callback: HandleSubmitCallback) => void
   fieldPropsRef?: React.MutableRefObject<Record<string, FieldProps>>
   valuePropsRef?: React.MutableRefObject<Record<string, ValueProps>>
-  mountedFieldPathsRef?: React.MutableRefObject<Path[]>
+  mountedFieldsRef?: React.MutableRefObject<Record<Path, MountOptions>>
   showAllErrors: boolean
   hasVisibleError: boolean
   formState: SubmitState
@@ -158,8 +161,7 @@ export const defaultContextState: ContextState = {
   setSubmitState: () => null,
   handleSubmitCall: () => null,
   setShowAllErrors: () => null,
-  handleMountField: () => null,
-  handleUnMountField: () => null,
+  setMountedFieldState: () => null,
   hasErrors: () => false,
   hasFieldState: () => false,
   hasFieldError: () => false,

packages/dnb-eufemia/src/extensions/forms/DataContext/FieldBoundary/FieldBoundaryContext.ts

@@ -39,6 +39,11 @@ export interface FieldBoundaryContextState {
    * To set the local error state.
    */
   setFieldError?: (path: Path, error: Error) => void
+
+  /**
+   * To set the local visible error state.
+   */
+  setVisibleError?: (path: Path, hasError: boolean) => void
 }
 
 const FieldBoundaryContext = React.createContext<