fix(Forms): add support for using Visibility inside PushContainer (#4623)

This change allows `Form.Visibility` to work as expected inside an
`Iterate.PushContainer`.

Using it within a `Form.Isolation` already behaved correctly, because
the data context flows in from the outside. That wasn’t happening in a
`PushContainer`, and since `Form.Visibility` depends on a reachable data
context, it now functions properly there as well.

Author: tujoworker

packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx

@@ -1705,4 +1705,44 @@ describe('Form.Isolation', () => {
       expect(onCommit).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('Visibility', () => {
+    it('should show the children initially', () => {
+      render(
+        <Form.Handler
+          defaultData={{
+            isVisible: true,
+          }}
+        >
+          <Form.Isolation>
+            <Form.Visibility pathTrue="/isVisible">
+              <output>content</output>
+            </Form.Visibility>
+          </Form.Isolation>
+        </Form.Handler>
+      )
+
+      expect(document.querySelector('output')).toBeInTheDocument()
+    })
+
+    it('should support Visibility', async () => {
+      render(
+        <Form.Handler>
+          <Field.Boolean variant="button" path="/isVisible" />
+
+          <Form.Isolation>
+            <Form.Visibility pathTrue="/isVisible">
+              <output>content</output>
+            </Form.Visibility>
+          </Form.Isolation>
+        </Form.Handler>
+      )
+
+      expect(document.querySelector('output')).toBeNull()
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(document.querySelector('output')).toBeInTheDocument()
+    })
+  })
 })

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

@@ -120,7 +120,8 @@ export type AllProps = Props & SpacingProps & ArrayItemAreaProps
 
 function PushContainer(props: AllProps) {
   const [, forceUpdate] = useReducer(() => ({}), {})
-  const requiredInherited = useContext(DataContext)?.required
+  const { data: outerData, required: requiredInherited } =
+    useContext(DataContext) || {}
 
   const {
     data: dataProp,
@@ -180,6 +181,14 @@ function PushContainer(props: AllProps) {
     }
   }, [dataProp, defaultDataProp, isolatedData])
 
+  if (outerData) {
+    // Use assign to avoid mutating the original data object.
+    // Because changes from outside should only silently be applied to the
+    // data object, without triggering a rerender.
+    // This way "pushContainerItems" will not clear/unset changed data.
+    Object.assign(data, outerData)
+  }
+
   const defaultData = useMemo(() => {
     return {
       ...(!dataProp ? isolatedData : null),

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

@@ -1235,4 +1235,33 @@ describe('PushContainer', () => {
       )
     })
   })
+
+  it('should support Visibility', async () => {
+    render(
+      <Form.Handler
+        defaultData={{
+          isVisible: false,
+          entries: [
+            {
+              foo: 'First entry',
+            },
+          ],
+        }}
+      >
+        <Field.Boolean variant="button" path="/isVisible" />
+
+        <Iterate.PushContainer path="/entries">
+          <Form.Visibility pathTrue="/isVisible">
+            <output>content</output>
+          </Form.Visibility>
+        </Iterate.PushContainer>
+      </Form.Handler>
+    )
+
+    expect(document.querySelector('output')).toBeNull()
+
+    await userEvent.click(document.querySelector('button'))
+
+    expect(document.querySelector('output')).toBeInTheDocument()
+  })
 })