feat(forms): add Value.ArraySelection component

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection.mdx

@@ -0,0 +1,27 @@
+---
+title: 'ArraySelection'
+description: '`Value.ArraySelection` is a wrapper component for displaying string values, with user experience tailored for an array of selected values.'
+componentType: 'base-value'
+hideInMenu: true
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/
+  - text: Value
+    href: /uilib/extensions/forms/Value/
+  - text: ArraySelection
+    href: /uilib/extensions/forms/Value/ArraySelection/
+---
+
+import Info from 'Docs/uilib/extensions/forms/Value/ArraySelection/info'
+import Demos from 'Docs/uilib/extensions/forms/Value/ArraySelection/demos'
+
+<Info />
+<Demos />

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

@@ -0,0 +1,106 @@
+import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import { Flex, P } from '@dnb/eufemia/src'
+import { Field, Form, Value } from '@dnb/eufemia/src/extensions/forms'
+
+export const Placeholder = () => {
+  return (
+    <ComponentBox>
+      <Value.ArraySelection placeholder="No values given" />
+    </ComponentBox>
+  )
+}
+
+export const WithValue = () => {
+  return (
+    <ComponentBox>
+      <Value.ArraySelection value={['Foo', 'Bar', 'Baz']} />
+    </ComponentBox>
+  )
+}
+
+export const WithCustomFormat = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler locale="en-GB" data={{ myPath: [123, 456, 789] }}>
+        <Value.ArraySelection
+          path="/myPath"
+          format={{ type: 'disjunction' }}
+        />
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const FieldArraySelectionAndOption = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler>
+        <Flex.Stack>
+          <Field.ArraySelection
+            label="My selections"
+            path="/myPath"
+            value={['bar', 'baz']}
+          >
+            <Field.Option value="foo" title="Foo" />
+            <Field.Option value="bar" title="Bar" />
+            <Field.Option value="baz" title="Baz" />
+          </Field.ArraySelection>
+
+          <Value.ArraySelection label="My selections" path="/myPath" />
+        </Flex.Stack>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const FieldArraySelectionPath = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler
+        data={{
+          myPath: [
+            { value: 'foo', title: 'Foo' },
+            { value: 'bar', title: 'Bar' },
+            { value: 'baz', title: 'Baz' },
+          ],
+        }}
+      >
+        <Flex.Stack>
+          <Field.ArraySelection label="My selections" path="/myPath" />
+          <Value.ArraySelection label="My selections" path="/myPath" />
+        </Flex.Stack>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const Label = () => {
+  return (
+    <ComponentBox>
+      <Value.ArraySelection label="Label text" showEmpty />
+    </ComponentBox>
+  )
+}
+
+export const LabelAndValue = () => {
+  return (
+    <ComponentBox>
+      <Value.ArraySelection
+        label="Label text"
+        value={['Foo', 'Bar', 'Baz']}
+      />
+    </ComponentBox>
+  )
+}
+
+export const Inline = () => {
+  return (
+    <ComponentBox>
+      <P>
+        This is before the component
+        <Value.ArraySelection value={['Foo', 'Bar', 'Baz']} inline />
+        This is after the component
+      </P>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/demos.mdx

@@ -0,0 +1,42 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Placeholder
+
+<Examples.Placeholder />
+
+### Value
+
+<Examples.WithValue />
+
+### Custom format
+
+<Examples.WithCustomFormat />
+
+### Label
+
+<Examples.Label />
+
+### Label and value
+
+<Examples.LabelAndValue />
+
+### Inline
+
+<Examples.Inline />
+
+{/* This is not yet supported */}
+{/* ### Field.ArraySelection with path */}
+{/* When using the same `path` as on a `Field.ArraySelection`, the title will be used as the displayed value. */}
+{/* <Examples.FieldArraySelectionPath /> */}
+
+### Field.Option and Field.ArraySelection
+
+When using the same `path` as on a `Field.ArraySelection`, the `Field.Option` title will be used as the displayed value.
+
+<Examples.FieldArraySelectionAndOption />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/info.mdx

@@ -0,0 +1,14 @@
+---
+showTabs: true
+---
+
+## Description
+
+`Value.ArraySelection` is a wrapper component for displaying string values, with user experience tailored for an array of selected values.
+
+There is a corresponding [Field.ArraySelection](/uilib/extensions/forms/base-fields/ArraySelection) component.
+
+```jsx
+import { Value } from '@dnb/eufemia/extensions/forms'
+render(<Value.ArraySelection />)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/properties.mdx

@@ -0,0 +1,20 @@
+---
+showTabs: true
+---
+
+import { ArraySelectionProperties } from '@dnb/eufemia/src/extensions/forms/Value/ArraySelection/ArraySelectionDocs'
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
+
+## Properties
+
+### Value-specific props
+
+<PropertiesTable props={ArraySelectionProperties} />
+
+### General props
+
+<PropertiesTable
+  props={ValueProperties}
+  valueType="Array<string | number>"
+/>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/info.mdx

@@ -6,6 +6,8 @@ showTabs: true
 
 `Value.String` is a base component for displaying values of the type `string`.
 
+There is a corresponding [Field.String](/uilib/extensions/forms/base-fields/String) component.
+
 ```jsx
 import { Value } from '@dnb/eufemia/extensions/forms'
 render(<Value.String />)

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx

@@ -6,12 +6,14 @@ showTabs: true
 
 `Field.ArraySelection` is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.
 
+There is a corresponding [Value.ArraySelection](/uilib/extensions/forms/Value/ArraySelection) component.
+
 ```jsx
 import { Field } from '@dnb/eufemia/extensions/forms'
 render(
-  <Field.ArraySelection label="Label text">
-    <Field.Option value="foo" title="Fooo!" />
-    <Field.Option value="bar" title="Baar!" />
+  <Field.ArraySelection>
+    <Field.Option />
+    <Field.Option />
   </Field.ArraySelection>,
 )
 ```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx

@@ -16,5 +16,5 @@ import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDo
 
 <PropertiesTable
   props={fieldProperties}
-  valueType="Array<number | string>"
+  valueType="Array<string | number>"
 />

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

@@ -16,6 +16,7 @@ Change log for the Eufemia Forms extension.
 ## v10.45
 
 - Added [Iterate.PushContainer](/uilib/extensions/forms/Iterate/PushContainer/) to create new items in an array.
+- Added [Valule.ArraySelection](/uilib/extensions/forms/Value/ArraySelection/) component to render an array of values.
 
 ## v10.43
 

packages/dnb-design-system-portal/tsconfig.json

@@ -8,7 +8,7 @@
     "isolatedModules": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "lib": ["es2018", "dom"],
+    "lib": ["es2022", "dom"],
     "types": ["node", "jest"],
     "outDir": "./out",
     "rootDir": ".",