fix(Visibility): add support for being used in Flex.Container

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Visibility.mdx

@@ -7,6 +7,8 @@ showTabs: true
 tabs:
   - title: Info
     key: '/info'
+  - title: Demos
+    key: '/demos'
   - title: Properties
     key: '/properties'
 breadcrumb:

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Visibility/Examples.tsx

@@ -1,20 +1,67 @@
+import React from 'react'
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { P } from '@dnb/eufemia/src'
-import { Form, Visibility } from '@dnb/eufemia/src/extensions/forms'
+import { Flex, P } from '@dnb/eufemia/src'
+import {
+  Field,
+  Form,
+  TestElement,
+  Visibility,
+} from '@dnb/eufemia/src/extensions/forms'
 
-export const BasedOnBooleanTrue = () => {
+export const BooleanExample = () => {
+  return (
+    <ComponentBox scope={{ Visibility, TestElement }}>
+      <Form.Handler>
+        <Flex.Stack>
+          <Field.Boolean
+            variant="buttons"
+            path="/toggleValue"
+            label="Show content"
+            value={false}
+          />
+          <Visibility pathTrue="/toggleValue">
+            <TestElement>Item 1</TestElement>
+            <TestElement>Item 2</TestElement>
+          </Visibility>
+        </Flex.Stack>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const InferData = () => {
   return (
     <ComponentBox scope={{ Visibility }}>
-      <Visibility visible={true}>This is visible</Visibility>
+      {() => {
+        const MyComponent = () => {
+          const [state, setState] = React.useState(false)
+          const inferData = React.useCallback(() => state, [state])
+
+          return (
+            <Form.Handler>
+              <Field.Boolean
+                path="/toggleValue"
+                onChange={setState}
+                label="Check me"
+              />
+              <Visibility inferData={inferData}>
+                <P>This is visible</P>
+              </Visibility>
+            </Form.Handler>
+          )
+        }
+
+        return <MyComponent />
+      }}
     </ComponentBox>
   )
 }
 
-export const BasedOnBooleanFalse = () => {
+export const BasedOnBooleanTrue = () => {
   return (
     <ComponentBox scope={{ Visibility }}>
-      <Visibility visible={{ foo: 'foo' }.foo === 'bar'}>
-        This is not visible
+      <Visibility visible={true}>
+        <P>This is visible</P>
       </Visibility>
     </ComponentBox>
   )

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Visibility/demos.mdx

@@ -6,14 +6,18 @@ import * as Examples from './Examples'
 
 ## Demos
 
-### Direct properties
+### Boolean example
 
-<Examples.BasedOnBooleanTrue />
+<Examples.BooleanExample />
 
-### False (not visible)
+### Direct properties
 
-<Examples.BasedOnBooleanFalse />
+<Examples.BasedOnBooleanTrue />
 
 ### Based on DataContext
 
 <Examples.BasedOnContext />
+
+### InferData
+
+<Examples.InferData />

packages/dnb-eufemia/src/extensions/forms/Visibility/Visibility.tsx

@@ -82,5 +82,5 @@ function Visibility({
   return <>{children}</>
 }
 
-Visibility._supportsSpacingProps = true
+Visibility._supportsSpacingProps = 'children'
 export default Visibility

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

@@ -9,6 +9,10 @@ describe('Visibility', () => {
     expect(screen.getByText('Child')).toBeInTheDocument()
   })
 
+  it('should have constant of _supportsSpacingProps="children"', () => {
+    expect(Visibility._supportsSpacingProps).toBe('children')
+  })
+
   describe('visibility-prop', () => {
     it('renders children when visible is true', () => {
       render(<Visibility visible={true}>Child</Visibility>)