Revert support for value and defaultValue inside iterate

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

@@ -365,19 +365,17 @@ export const WithVisibility = () => {
   )
 }
 
-export const WithInitialValue = () => {
+export const InitialOpen = () => {
   return (
     <ComponentBox scope={{ Iterate }}>
       {() => {
         const MyEditItemForm = () => {
           return (
-            <Field.Composition>
-              <Field.SelectCountry
-                label="Land du er statsborger i"
-                itemPath="/"
-                required
-              />
-            </Field.Composition>
+            <Field.SelectCountry
+              label="Land du er statsborger i"
+              itemPath="/"
+              required
+            />
           )
         }
 
@@ -403,7 +401,7 @@ export const WithInitialValue = () => {
         const MyForm = () => {
           return (
             <Form.Handler
-              onSubmit={(data) => console.log('onSubmit', data)}
+              onSubmit={async (data) => console.log('onSubmit', data)}
               onSubmitRequest={() => console.log('onSubmitRequest')}
             >
               <Flex.Stack>

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

@@ -59,8 +59,8 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T
 
 <Examples.ValueComposition />
 
-### With initial value and `containerMode="initial-open"`
+### Initially open
 
 By using `containerMode="initial-open"` and providing an initial value of `null` to the array, the user needs to fill out the first item.
 
-<Examples.WithInitialValue />
+<Examples.InitialOpen />

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

@@ -66,7 +66,6 @@ export interface ContextState {
   hasContext: boolean
   /** The dataset for the form / form wizard */
   data: any
-  internalDataRef?: React.MutableRefObject<any>
   /** Should the form validate data before submitting? */
   errors?: Record<string, Error>
   /** Will set autoComplete="on" on each nested Field.String and Field.Number */

packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx

@@ -1183,7 +1183,6 @@ export default function Provider<Data extends JsonObject>(
         /** Additional */
         id,
         data: internalDataRef.current,
-        internalDataRef,
         props,
         ...rest,
       }}

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx

@@ -13,6 +13,7 @@ import { useFieldProps } from '../../hooks'
 import { makeUniqueId } from '../../../../shared/component-helper'
 import { Flex } from '../../../../components'
 import { pickSpacingProps } from '../../../../components/flex/utils'
+import useMountEffect from '../../../../shared/helpers/useMountEffect'
 import {
   BasicProps as FlexContainerProps,
   Props as FlexContainerAllProps,
@@ -24,6 +25,7 @@ import IterateItemContext, {
 import SummaryListContext from '../../Value/SummaryList/SummaryListContext'
 import ValueBlockContext from '../../ValueBlock/ValueBlockContext'
 import FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider'
+import DataContext from '../../DataContext/Context'
 import useDataValue from '../../hooks/useDataValue'
 import { useSwitchContainerMode } from '../hooks'
 
@@ -82,6 +84,7 @@ function ArrayComponent(props: Props) {
   const {
     path,
     value: arrayValue,
+    defaultValue,
     withoutFlex,
     emptyValue,
     placeholder,
@@ -104,6 +107,15 @@ function ArrayComponent(props: Props) {
 
   const omitFlex = withoutFlex ?? (summaryListContext || valueBlockContext)
 
+  // To support React.StrictMode, we inject the defaultValue into the data context this way.
+  // The routine inside useFieldProps where updateDataValueDataContext is called, does not support React.StrictMode
+  const { handlePathChange } = useContext(DataContext) || {}
+  useMountEffect(() => {
+    if (defaultValue) {
+      handlePathChange?.(path, defaultValue)
+    }
+  })
+
   useEffect(() => {
     // Update inside the useEffect, to support React.StrictMode
     valueCountRef.current = arrayValue || []

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx

@@ -416,7 +416,35 @@ describe('Iterate.Array', () => {
       expect(onChangeIterate).toHaveBeenLastCalledWith(['foo'])
     })
 
-    it('should handle "defaultValue" and not overwrite "defaultValue" set by nested fields', () => {
+    it('should handle "defaultValue" with React.StrictMode', () => {
+      const onSubmit = jest.fn()
+
+      render(
+        <React.StrictMode>
+          <Form.Handler onSubmit={onSubmit}>
+            <Iterate.Array path="/myList" defaultValue={['']}>
+              <Field.String itemPath="/" />
+            </Iterate.Array>
+          </Form.Handler>
+        </React.StrictMode>
+      )
+
+      const form = document.querySelector('form')
+      const input = document.querySelector('input')
+
+      expect(input).toHaveValue('')
+
+      fireEvent.submit(form)
+
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+      expect(onSubmit).toHaveBeenLastCalledWith(
+        { myList: [''] },
+        expect.anything()
+      )
+    })
+
+    it('should warn when "defaultValue" is used inside iterate', () => {
+      const log = jest.spyOn(console, 'log').mockImplementation()
       const onSubmit = jest.fn()
 
       render(
@@ -430,15 +458,22 @@ describe('Iterate.Array', () => {
       const form = document.querySelector('form')
       const input = document.querySelector('input')
 
-      expect(input).toHaveValue('default value')
+      expect(input).toHaveValue('')
 
       fireEvent.submit(form)
 
       expect(onSubmit).toHaveBeenCalledTimes(1)
       expect(onSubmit).toHaveBeenLastCalledWith(
-        { myList: ['default value'] },
+        { myList: [''] },
         expect.anything()
       )
+
+      expect(log).toHaveBeenCalledWith(
+        expect.any(String),
+        'Using defaultValue="default value" prop inside iterate is not supported yet'
+      )
+
+      log.mockRestore()
     })
 
     describe('with primitive elements', () => {

packages/dnb-eufemia/src/extensions/forms/Iterate/PushButton/__tests__/PushButton.test.tsx

@@ -128,27 +128,25 @@ describe('PushButton', () => {
 
   it('should not overwrite initial data because of the same path as the Iterate.Array', async () => {
     const onSubmit = jest.fn()
+
     render(
       <Form.Handler onSubmit={onSubmit}>
         <Iterate.Array path="/myList" defaultValue={[null]}>
-          <Field.String itemPath="/" defaultValue="bar" />
+          <Field.String itemPath="/" />
         </Iterate.Array>
 
         <PushButton path="/myList" pushValue="push value" />
       </Form.Handler>
     )
 
     const form = document.querySelector('form')
-    const input = document.querySelector('input')
     const button = document.querySelector('.dnb-forms-iterate-push-button')
 
-    expect(input).toHaveValue('bar')
-
     fireEvent.submit(form)
 
     expect(onSubmit).toHaveBeenCalledTimes(1)
     expect(onSubmit).toHaveBeenLastCalledWith(
-      { myList: ['bar'] },
+      { myList: [null] },
       expect.anything()
     )
 
@@ -157,7 +155,7 @@ describe('PushButton', () => {
 
     expect(onSubmit).toHaveBeenCalledTimes(2)
     expect(onSubmit).toHaveBeenLastCalledWith(
-      { myList: ['bar', 'push value'] },
+      { myList: [null, 'push value'] },
       expect.anything()
     )
   })

packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx

@@ -36,7 +36,7 @@ export type Props = {
   /**
    * Prefilled data to add to the fields.
    */
-  data?: Record<string, unknown>
+  data?: unknown | Record<string, unknown>
 
   /**
    * A custom toolbar to be shown below the container.