From 4d83c77b77bf9a7a7b32fcd5e18bafbaa2b9144c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Tue, 1 Oct 2024 20:29:53 +0200
Subject: [PATCH] feat(Forms): add `isolatedData` to Iterate.PushContainer

---
 .../forms/Iterate/PushContainer/info.mdx      |  20 ++-
 .../extensions/forms/DataContext/Context.ts   |   1 +
 .../forms/DataContext/Provider/Provider.tsx   |  15 ++
 .../Isolation/__tests__/Isolation.test.tsx    |   3 +
 .../Iterate/PushContainer/PushContainer.tsx   |  38 ++--
 .../PushContainer/PushContainerDocs.ts        |   9 +-
 .../Iterate/stories/PushContainer.stories.tsx | 168 ++++++++++++++++++
 .../extensions/forms/hooks/useFieldProps.ts   |   3 +-
 .../dnb-eufemia/src/extensions/forms/types.ts |   6 +-
 9 files changed, 244 insertions(+), 19 deletions(-)
 create mode 100644 packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/info.mdx
index 946aa6c04de..0cd074a197b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/info.mdx
@@ -5,13 +5,19 @@ hideInMenu: true
 
 ## Description
 
-`Iterate.PushContainer` enables users to create a new item in the array. It can be used instead of the [PushButton](/uilib/extensions/forms/Iterate/PushButton/).
+`Iterate.PushContainer` enables users to create a new item in the array. It can be used instead of the [PushButton](/uilib/extensions/forms/Iterate/PushButton/), but with fields in the container.
 
 It allows the user to fill in the fields without storing them in the data context.
 
-Fields inside the container must have an `itemPath` defined.
+Good to know:
 
-You can place it below the [Array](/uilib/extensions/forms/Iterate/Array/) component like this:
+- Fields inside the container must have an `itemPath` defined, instead of a `path`.
+- You can provide `data` or `defaultData` to prefill the fields.
+- The `path` you define needs to point to an array an existing [Iterate.Array](/uilib/extensions/forms/Iterate/Array/) path.
+
+## Usage
+
+You may place it below the [Iterate.Array](/uilib/extensions/forms/Iterate/Array/) component like this:
 
 ```tsx
 import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
@@ -27,8 +33,6 @@ render(
 )
 ```
 
-Technically it uses the [EditContainer](/uilib/extensions/forms/Iterate/EditContainer/) and the [Form.Isolation](/uilib/extensions/forms/Form/Isolation/) under the hood.
-
 ## Show a button to create a new item
 
 By default, it keeps the form open after a new item has been created. You can change this behavior by using the `openButton` and `showOpenButtonWhen` properties.
@@ -84,3 +88,9 @@ render(
   </Form.Handler>,
 )
 ```
+
+## Technical details
+
+Under the hood, it uses the [Form.Isolation](/uilib/extensions/forms/Form/Isolation/) component to isolate the data from the rest of the form. It also uses the the [EditContainer](/uilib/extensions/forms/Iterate/EditContainer/) inside the [Iterate.Array](/uilib/extensions/forms/Iterate/Array/) component to render the fields.
+
+All fields inside the container will be stored in the data context at this path: `/pushContainerItems/0`.
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts b/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
index ef8edd97246..7b38bd80961 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
@@ -154,6 +154,7 @@ export interface ContextState {
     params?: { remove?: boolean }
   ) => void
   setFieldConnection?: (path: Path, connections: FieldConnections) => void
+  isEmptyDataRef?: React.MutableRefObject<boolean>
   fieldPropsRef?: React.MutableRefObject<Record<string, FieldProps>>
   valuePropsRef?: React.MutableRefObject<Record<string, ValueProps>>
   fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx
index 6ad23d97955..4eef3be8333 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx
@@ -682,7 +682,9 @@ export default function Provider<Data extends JsonObject>(
       ? pointer.get(internalData, props.path)
       : internalData
 
+  const isEmptyDataRef = useRef(false)
   const clearData = useCallback(() => {
+    isEmptyDataRef.current = true
     internalDataRef.current = (emptyData ?? clearedData) as Data
 
     if (id) {
@@ -691,6 +693,10 @@ export default function Provider<Data extends JsonObject>(
 
     forceUpdate()
     onClear?.()
+
+    requestAnimationFrame?.(() => {
+      isEmptyDataRef.current = false
+    }) // Delay so the field validation error message are not shown
   }, [emptyData, id, onClear, setSharedData])
 
   useEffect(() => {
@@ -996,6 +1002,7 @@ export default function Provider<Data extends JsonObject>(
           if (isolate) {
             submitResult = await onCommit?.(internalDataRef.current, {
               clearData,
+              setData,
             })
           } else {
             submitResult = await onSubmit()
@@ -1068,6 +1075,7 @@ export default function Provider<Data extends JsonObject>(
       setFormState,
       setShowAllErrors,
       setSubmitState,
+      setData,
     ]
   )
 
@@ -1329,6 +1337,7 @@ export default function Provider<Data extends JsonObject>(
         id,
         data: internalDataRef.current,
         internalDataRef,
+        isEmptyDataRef,
         props,
         ...rest,
       }}
@@ -1481,3 +1490,9 @@ function useFormStatusBuffer(props: FormStatusBufferProps) {
 }
 
 export const clearedData = Object.freeze({})
+export const getClearedData = (mergeData?: Record<string, unknown>) => {
+  if (mergeData) {
+    return Object.assign(clearedData, mergeData)
+  }
+  return clearedData
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx
index d3fc9d6cd3f..8099eb94cf5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx
@@ -1466,6 +1466,7 @@ describe('Form.Isolation', () => {
       { isolated: 'inside changed' },
       {
         clearData: expect.any(Function),
+        setData: expect.any(Function),
         preventCommit: expect.any(Function),
       }
     )
@@ -1557,6 +1558,7 @@ describe('Form.Isolation', () => {
       { isolated: 'inside' },
       {
         clearData: expect.any(Function),
+        setData: expect.any(Function),
         preventCommit: expect.any(Function),
       }
     )
@@ -1619,6 +1621,7 @@ describe('Form.Isolation', () => {
       { isolated: 'inside changed' },
       {
         clearData: expect.any(Function),
+        setData: expect.any(Function),
         preventCommit: expect.any(Function),
       }
     )
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx
index 58c75f77421..b11ea93dde0 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx
@@ -39,15 +39,20 @@ export type Props = {
   showOpenButtonWhen?: (list: unknown[]) => boolean
 
   /**
-   * Prefilled data to add to the fields.
+   * Prefilled data to add to the fields. The data will be put into this path: "/pushContainerItems/0".
    */
   data?: unknown | Record<string, unknown>
 
   /**
-   * Prefilled data to add to the fields.
+   * Prefilled data to add to the fields. The data will be put into this path: "/pushContainerItems/0".
    */
   defaultData?: unknown | Record<string, unknown>
 
+  /**
+   * Provide additional data that will be put into the root of the isolated data context (parallel to "/pushContainerItems/0").
+   */
+  isolatedData?: Record<string, unknown>
+
   /**
    * A custom toolbar to be shown below the container.
    */
@@ -65,6 +70,7 @@ function PushContainer(props: AllProps) {
   const {
     data: dataProp,
     defaultData: defaultDataProp,
+    isolatedData,
     path,
     title,
     children,
@@ -101,12 +107,18 @@ function PushContainer(props: AllProps) {
     if (defaultDataProp) {
       return // don't return a fallback, because we want to use the defaultData
     }
-    return { newItems: [dataProp ?? clearedData] }
-  }, [dataProp, defaultDataProp])
+    return {
+      ...isolatedData,
+      pushContainerItems: [dataProp ?? clearedData],
+    }
+  }, [dataProp, defaultDataProp, isolatedData])
 
   const defaultData = useMemo(() => {
-    return { newItems: [defaultDataProp ?? clearedData] }
-  }, [defaultDataProp])
+    return {
+      ...(!dataProp ? isolatedData : null),
+      pushContainerItems: [defaultDataProp ?? clearedData],
+    }
+  }, [dataProp, defaultDataProp, isolatedData])
 
   return (
     <Isolation
@@ -114,10 +126,10 @@ function PushContainer(props: AllProps) {
       defaultData={defaultData}
       emptyData={defaultData}
       commitHandleRef={commitHandleRef}
-      transformOnCommit={({ newItems }) => {
-        return moveValueToPath(path, [...entries, ...newItems])
+      transformOnCommit={({ pushContainerItems }) => {
+        return moveValueToPath(path, [...entries, ...pushContainerItems])
       }}
-      onCommit={(data, { clearData, preventCommit }) => {
+      onCommit={(data, { clearData, setData, preventCommit }) => {
         if (hasReachedLimit) {
           preventCommit()
           setShowStatus(true)
@@ -125,12 +137,18 @@ function PushContainer(props: AllProps) {
           setNextContainerMode('view')
           switchContainerModeRef.current?.('view')
           clearData()
+          if (isolatedData) {
+            setData({
+              ...isolatedData,
+              pushContainerItems: [clearedData],
+            })
+          }
         }
       }}
     >
       <PushContainerContext.Provider value={newItemContextProps}>
         <IterateArray
-          path="/newItems"
+          path="/pushContainerItems"
           containerMode={showOpenButton ? 'view' : 'edit'}
         >
           <NewContainer
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts
index 6639dbae316..e8f56900dd5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts
@@ -12,15 +12,20 @@ export const PushContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   data: {
-    doc: 'Prefilled data to be used by fields. Use `defaultData` when possible.',
+    doc: 'Prefilled data to be used by fields. The data will be put into this path: `/pushContainerItems/0`. Use `defaultData` when possible.',
     type: ['object', 'array'],
     status: 'optional',
   },
   defaultData: {
-    doc: 'Prefilled data to be used by fields.',
+    doc: 'Prefilled data to be used by fields. The data will be put into this path: `/pushContainerItems/0`',
     type: ['object', 'array'],
     status: 'optional',
   },
+  isolatedData: {
+    doc: 'Provide additional data that will be put into the root of the isolated data context (parallel to `/pushContainerItems/0`).',
+    type: 'object',
+    status: 'optional',
+  },
   openButton: {
     doc: 'The button to open container.',
     type: 'React.Node',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx
new file mode 100644
index 00000000000..73636f1c885
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx
@@ -0,0 +1,168 @@
+import React, { useLayoutEffect } from 'react'
+import { Field, Form, Iterate, Value, Wizard } from '../..'
+import { Card, Flex } from '../../../../components'
+
+export default {
+  title: 'Eufemia/Extensions/Forms/Iterate/PushContainer',
+}
+
+const formData = {
+  persons: [
+    {
+      firstName: 'Test',
+      lastName: 'Bruker',
+    },
+    {
+      firstName: 'Some',
+      lastName: 'Person',
+    },
+    {
+      firstName: 'Geir',
+      lastName: 'Service',
+    },
+  ],
+}
+
+export const ComplexPushContainer = () => {
+  return (
+    <Form.Handler id="main-form">
+      <RepresentativesSection />
+      <Wizard.Buttons />
+    </Form.Handler>
+  )
+}
+
+function RepresentativesSection() {
+  return (
+    <Form.Section>
+      <Form.MainHeading bottom="1rem">Representatives</Form.MainHeading>
+      <Card stack>
+        <Iterate.Array path="/representatives">
+          <RepresentativesView />
+          <RepresentativesEdit />
+        </Iterate.Array>
+        <RepresentativesCreateNew />
+      </Card>
+    </Form.Section>
+  )
+}
+
+function RepresentativesView() {
+  return (
+    <Iterate.ViewContainer>
+      <Value.Composition>
+        <Value.String itemPath="/firstName" />
+        <Value.String itemPath="/lastName" />
+      </Value.Composition>
+    </Iterate.ViewContainer>
+  )
+}
+
+function RepresentativesEdit() {
+  return (
+    <Iterate.EditContainer>
+      <Field.Name.First itemPath="/firstName" />
+      <Field.Name.Last itemPath="/lastName" />
+    </Iterate.EditContainer>
+  )
+}
+
+function ExistingPersonDetails() {
+  const { data, getValue } = Form.useData()
+  const person = getValue(data.selectedPerson)?.data || {}
+
+  return (
+    <Flex.Stack>
+      <Field.Name.First
+        readOnly
+        itemPath="/firstName"
+        value={person.firstName}
+      />
+      <Field.Name.Last
+        readOnly
+        itemPath="/lastName"
+        value={person.lastName}
+      />
+    </Flex.Stack>
+  )
+}
+
+function NewPersonDetails() {
+  return (
+    <Flex.Stack>
+      <Field.Name.First required itemPath="/firstName" />
+      <Field.Name.Last required itemPath="/lastName" />
+    </Flex.Stack>
+  )
+}
+
+function PushContainerContent() {
+  const { data, update } = Form.useData()
+
+  // Clear the PushContainer data when the selected person is "other",
+  // so the fields do not inherit existing data.
+  useLayoutEffect(() => {
+    if (data.selectedPerson === 'other') {
+      update('/pushContainerItems/0', {})
+    }
+  }, [data.selectedPerson, update])
+
+  return (
+    <Flex.Stack>
+      <Field.Selection
+        variant="radio"
+        required
+        path="/selectedPerson"
+        dataPath="/persons"
+      >
+        <Field.Option value="other" label="Other person" />
+      </Field.Selection>
+      <Form.Visibility
+        visibleWhen={{
+          path: '/selectedPerson',
+          hasValue: (value) =>
+            typeof value === 'string' && value !== 'other',
+        }}
+      >
+        <ExistingPersonDetails />
+      </Form.Visibility>
+
+      <Form.Visibility
+        visibleWhen={{
+          path: '/selectedPerson',
+          hasValue: (value) => value === 'other',
+        }}
+      >
+        <NewPersonDetails />
+      </Form.Visibility>
+    </Flex.Stack>
+  )
+}
+
+function RepresentativesCreateNew() {
+  return (
+    <Iterate.PushContainer
+      path="/representatives"
+      title="Add new representative"
+      isolatedData={{
+        persons: formData.persons.map((data, i) => {
+          return {
+            title: [data.firstName, data.lastName].join(' '),
+            value: '/persons/' + i,
+            data,
+          }
+        }),
+      }}
+      openButton={
+        <Iterate.PushContainer.OpenButton
+          text="Add new representative"
+          variant="tertiary"
+          icon="add"
+        />
+      }
+      showOpenButtonWhen={(list) => list.length > 0}
+    >
+      <PushContainerContent />
+    </Iterate.PushContainer>
+  )
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
index a382858069b..fb02d0138ef 100644
--- a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
@@ -1785,8 +1785,9 @@ export default function useFieldProps<Value, EmptyValue, Props>(
   const isEmptyData = useCallback(
     () => {
       return (
+        dataContext.isEmptyDataRef?.current ||
         dataContext.internalDataRef?.current ===
-        (dataContext.props?.emptyData ?? clearedData)
+          (dataContext.props?.emptyData ?? clearedData)
       )
     },
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
index 87e9ef9c3c3..c84c6a1606d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/types.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -600,7 +600,11 @@ export type OnCommit<Data = JsonObject> = (
   {
     clearData,
     preventCommit,
-  }: { clearData: () => void; preventCommit?: () => void }
+  }: {
+    clearData: () => void
+    setData?: (data: Data) => void
+    preventCommit?: () => void
+  }
 ) =>
   | EventReturnWithStateObject
   | void