diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection.mdx new file mode 100644 index 00000000000..c39bba600a8 --- /dev/null +++ b/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' + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/Examples.tsx new file mode 100644 index 00000000000..6866550cdac --- /dev/null +++ b/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 ( + + + + ) +} + +export const WithValue = () => { + return ( + + + + ) +} + +export const WithCustomFormat = () => { + return ( + + + + + + ) +} + +export const FieldArraySelectionAndOption = () => { + return ( + + + + + + + + + + + + + + ) +} + +export const FieldArraySelectionPath = () => { + return ( + + + + + + + + + ) +} + +export const Label = () => { + return ( + + + + ) +} + +export const LabelAndValue = () => { + return ( + + + + ) +} + +export const Inline = () => { + return ( + +

+ This is before the component + + This is after the component +

+ + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/demos.mdx new file mode 100644 index 00000000000..4e631174d22 --- /dev/null +++ b/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 + + + +### Value + + + +### Custom format + + + +### Label + + + +### Label and value + + + +### 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. */} +{/* */} + +### 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. + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/info.mdx new file mode 100644 index 00000000000..ce0c197aaf0 --- /dev/null +++ b/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() +``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/properties.mdx new file mode 100644 index 00000000000..aa3fd799124 --- /dev/null +++ b/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 + + + +### General props + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/info.mdx index 9486fc44662..e5ffcf8a5b5 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/info.mdx +++ b/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() diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx index 8af7da514df..98a06785a81 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx +++ b/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( - - - + + + , ) ``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx index 84c5b7c5533..ec05a7bce39 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx +++ b/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 diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx index 65eded6bc47..88c91ff79eb 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx +++ b/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 [Value.ArraySelection](/uilib/extensions/forms/Value/ArraySelection/) component to render an array of values. ## v10.43 diff --git a/packages/dnb-design-system-portal/tsconfig.json b/packages/dnb-design-system-portal/tsconfig.json index a06277421ee..4732b580f86 100644 --- a/packages/dnb-design-system-portal/tsconfig.json +++ b/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": ".", diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx index 3bbf5ca586c..d05e638e029 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useCallback, useContext, useMemo } from 'react' import { Checkbox, HelpButton, ToggleButton } from '../../../../components' import classnames from 'classnames' import OptionField from '../Option' @@ -10,6 +10,7 @@ import { pickSpacingProps } from '../../../../components/flex/utils' import { getStatus } from '../Selection' import { HelpButtonProps } from '../../../../components/HelpButton' import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext' +import DataContext from '../../DataContext/Context' type OptionProps = React.ComponentProps< React.FC<{ @@ -33,6 +34,7 @@ export type Props = FieldHelpProps & function ArraySelection(props: Props) { const { id, + path, className, variant = 'checkbox', layout = 'vertical', @@ -87,8 +89,9 @@ function ArraySelection(props: Props) { ...pickSpacingProps(props), } - const options = getCheckboxOrToggleOptions({ + const options = useCheckboxOrToggleOptions({ id, + path, variant, info, warning, @@ -122,8 +125,9 @@ function ArraySelection(props: Props) { } } -export function getCheckboxOrToggleOptions({ +export function useCheckboxOrToggleOptions({ id, + path, variant = 'checkbox', info, warning, @@ -136,6 +140,7 @@ export function getCheckboxOrToggleOptions({ handleChange, }: { id: Props['id'] + path?: Props['path'] variant?: Props['variant'] info?: Props['info'] warning?: Props['warning'] @@ -147,84 +152,117 @@ export function getCheckboxOrToggleOptions({ hasError?: ReturnAdditional['hasError'] handleChange?: ReturnAdditional['handleChange'] }) { - const optionsCount = React.Children.count(children) - - const Component = ( - variant === 'checkbox' ? Checkbox : ToggleButton - ) as typeof Checkbox & typeof ToggleButton - - const createOption = (props: OptionProps, i: number) => { - const { - value: selected, - error, - title, - help, - className, - children, - ...rest - } = props - - const label = title ?? children - const status = getStatus(error, info, warning) - const suffix = help ? ( - - {help.content} - - ) : undefined - const handleSelect = () => { - const newValue = value?.includes(selected) - ? value.filter((value) => value !== selected) - : [...(value ?? []), selected] - - handleChange?.( - newValue.length === 0 ? (emptyValue as typeof value) : newValue + const { setFieldProps } = useContext(DataContext) + const optionsCount = useMemo( + () => React.Children.count(children), + [children] + ) + const collectedData = [] + + const createOption = useCallback( + (props: OptionProps, i: number) => { + const { + value: selected, + error, + title, + help, + className, + children, + ...rest + } = props + + if (value?.includes(selected)) { + collectedData.push(props) + } + + const label = title ?? children + const status = getStatus(error, info, warning) + const suffix = help ? ( + + {help.content} + + ) : undefined + const handleSelect = () => { + const newValue = value?.includes(selected) + ? value.filter((value) => value !== selected) + : [...(value ?? []), selected] + + handleChange?.( + newValue.length === 0 ? (emptyValue as typeof value) : newValue + ) + } + + const Component = ( + variant === 'checkbox' ? Checkbox : ToggleButton + ) as typeof Checkbox & typeof ToggleButton + + return ( + ) - } - - return ( - - ) - } + }, + [ + disabled, + emptyValue, + handleChange, + hasError, + htmlAttributes, + id, + info, + optionsCount, + value, + variant, + warning, + ] + ) - const mapOptions = (children: React.ReactNode) => { - return React.Children.toArray(children).map( - (child: React.ReactElement, i) => { - if (React.isValidElement(child)) { - if (child.type === OptionField) { - return createOption(child.props, i) - } + const mapOptions = useCallback( + (children: React.ReactNode) => { + return React.Children.toArray(children).map( + (child: React.ReactElement, i) => { + if (React.isValidElement(child)) { + if (child.type === OptionField) { + return createOption(child.props, i) + } - if (child.props.children) { - const nestedChildren = mapOptions(child.props.children) - return React.cloneElement(child, child.props, nestedChildren) + if (child.props.children) { + const nestedChildren = mapOptions(child.props.children) + return React.cloneElement(child, child.props, nestedChildren) + } } + + return child } + ) + }, + [createOption] + ) - return child - } - ) + const result = mapOptions(children) + + if (path) { + setFieldProps?.(path + '/arraySelectionData', collectedData) } - return mapOptions(children) + return result } ArraySelection._supportsSpacingProps = true diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx index 319d9edd936..6ccdc6e62e9 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx @@ -43,13 +43,13 @@ describe('ArraySelection', () => { ) fireEvent.click(screen.getByText('Option 1')) - expect(handleChange).toHaveBeenCalledWith(['option1']) + expect(handleChange).toHaveBeenLastCalledWith(['option1']) fireEvent.click(screen.getByText('Option 2')) - expect(handleChange).toHaveBeenCalledWith(['option1', 'option2']) + expect(handleChange).toHaveBeenLastCalledWith(['option1', 'option2']) fireEvent.click(screen.getByText('Option 1')) - expect(handleChange).toHaveBeenCalledWith(['option2']) + expect(handleChange).toHaveBeenLastCalledWith(['option2']) }) it('handles emptyValue correctly', () => { @@ -63,7 +63,7 @@ describe('ArraySelection', () => { fireEvent.click(screen.getByText('Option 1')) fireEvent.click(screen.getByText('Option 1')) - expect(handleChange).toHaveBeenCalledWith('empty') + expect(handleChange).toHaveBeenLastCalledWith('empty') }) it('displays error message when error prop is provided', () => { diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/ArraySelection.tsx new file mode 100644 index 00000000000..3258fda46c6 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/ArraySelection.tsx @@ -0,0 +1,73 @@ +import React, { useContext, useMemo } from 'react' +import classnames from 'classnames' +import { useValueProps } from '../../hooks' +import { ValueProps } from '../../types' +import ValueBlock from '../../ValueBlock' +import { LOCALE } from '../../../../shared/defaults' +import { convertJsxToString } from '../../../../shared/component-helper' +import SharedContext, { InternalLocale } from '../../../../shared/Context' +import Context from '../../DataContext/Context' + +export type Props = ValueProps> & { + /** + * Formatting options for the value. + * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat + */ + format?: Intl.ListFormatOptions +} + +function ArraySelection(props: Props) { + const { locale } = useContext(SharedContext) + const { fieldPropsRef } = useContext(Context) || {} + const { path, value, format, className, ...rest } = useValueProps(props) + + const valueFromField = useMemo(() => { + if (path && value) { + const data = fieldPropsRef?.current?.[ + path + '/arraySelectionData' + ] as Array<{ + value: string + title: string | React.ReactNode + }> + return data?.map(({ title }) => convertJsxToString(title)) + } + }, [fieldPropsRef, path, value]) + + return ( + + {listFormat(valueFromField ?? value, { locale, format })} + + ) +} + +export function listFormat( + value: Array, + { + locale = LOCALE, + format = { + style: 'long', + type: 'conjunction', + }, + separator = ', ', + }: { + locale?: InternalLocale + format?: Intl.ListFormatOptions + separator?: string + } +) { + if (!Array.isArray(value)) { + return value + } + try { + const formatter = new Intl.ListFormat(locale, format) + return formatter.format(value.map((v) => String(v))) + } catch (error) { + return value.join(separator) + } +} + +ArraySelection._supportsSpacingProps = true +export default ArraySelection diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/ArraySelectionDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/ArraySelectionDocs.ts new file mode 100644 index 00000000000..1a35eaf12f5 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/ArraySelectionDocs.ts @@ -0,0 +1,9 @@ +import { PropertiesTableProps } from '../../../../shared/types' + +export const ArraySelectionProperties: PropertiesTableProps = { + format: { + doc: 'Formatting options for the value. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.', + type: 'Intl.ListFormatOptions', + status: 'optional', + }, +} diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/__tests__/ArraySelection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/__tests__/ArraySelection.test.tsx new file mode 100644 index 00000000000..74fc2292153 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/__tests__/ArraySelection.test.tsx @@ -0,0 +1,173 @@ +import React from 'react' +import { screen, render, fireEvent } from '@testing-library/react' +import { Value, Form, Field } from '../../..' + +describe('Value.ArraySelection', () => { + it('renders string values', () => { + render() + + expect( + document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + ).toHaveTextContent('Foo, Bar og Baz') + }) + + it('renders number values', () => { + render() + + expect( + document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + ).toHaveTextContent('123, 456 og 789') + }) + + it('renders custom format', () => { + render( + + ) + + expect( + document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + ).toHaveTextContent('123, 456 eller 789') + }) + + it('renders label when showEmpty is true', () => { + render() + expect(document.querySelector('.dnb-form-label')).toHaveTextContent( + 'My label' + ) + }) + + it('renders value and label', () => { + render( + + ) + expect( + document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + ).toHaveTextContent('Foo, Bar og Baz') + + expect(document.querySelector('.dnb-form-label')).toHaveTextContent( + 'My selections' + ) + }) + + it('renders custom label', () => { + render() + expect(document.querySelector('.dnb-form-label')).toHaveTextContent( + 'Custom label' + ) + }) + + it('renders placeholder', () => { + render() + expect(screen.getByText('Please select a value')).toBeInTheDocument() + }) + + it('renders value from path', () => { + render( + + + + ) + + expect( + document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + ).toHaveTextContent('Baz, Bar og Foo') + }) + + it('formats value in different locale', () => { + render( + + + + ) + + expect( + document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + ).toHaveTextContent('Baz, Bar and Foo') + }) + + it('should use Field.Option title rendered in Field.ArraySelection', () => { + render( + + + + Bar title} /> + + + + + + ) + + expect( + document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + ).toHaveTextContent('Foo title and Bar title') + }) + + it('should use Field.Option title rendered in Field.ArraySelection interactively', () => { + render( + + + + + + + + + + ) + + const element = document.querySelector( + '.dnb-forms-value-array-selection .dnb-forms-value-block__content' + ) + + expect(element).toHaveTextContent('Foo title and Bar title') + + fireEvent.click(screen.getAllByText('Foo title')[0]) + expect(element).toHaveTextContent('Bar title') + + fireEvent.click(screen.getAllByText('Bar title')[0]) + expect(element).toHaveTextContent('') + + fireEvent.click(screen.getAllByText('Bar title')[0]) + expect(element).toHaveTextContent('Bar title') + + fireEvent.click(screen.getAllByText('Foo title')[0]) + expect(element).toHaveTextContent('Foo title and Bar title') + + fireEvent.click(screen.getAllByText('Baz title')[0]) + expect(element).toHaveTextContent('Foo title, Bar title and Baz title') + }) +}) diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/index.ts b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/index.ts new file mode 100644 index 00000000000..a827b575eca --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/index.ts @@ -0,0 +1,2 @@ +export { default } from './ArraySelection' +export * from './ArraySelection' diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/stories/ArraySelection.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/stories/ArraySelection.stories.tsx new file mode 100644 index 00000000000..cd2a3dfcacc --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/ArraySelection/stories/ArraySelection.stories.tsx @@ -0,0 +1,29 @@ +import { useState } from 'react' +import { Field, Form, Value } from '../../..' +import { Flex } from '../../../../../components' + +export default { + title: 'Eufemia/Extensions/Forms/Value/ArraySelection', +} + +export function ArraySelectionValue() { + const [count, setCount] = useState(0) + return ( + + + + + Baar!} /> + + + + + + + + ) +} diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/index.ts b/packages/dnb-eufemia/src/extensions/forms/Value/index.ts index 390fa38241e..620c00ac600 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Value/index.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Value/index.ts @@ -12,3 +12,4 @@ export { default as BankAccountNumber } from './BankAccountNumber' export { default as OrganizationNumber } from './OrganizationNumber' export { default as SummaryList } from './SummaryList' export { default as Composition } from './Composition' +export { default as ArraySelection } from './ArraySelection' diff --git a/packages/dnb-eufemia/tsconfig.definitions.json b/packages/dnb-eufemia/tsconfig.definitions.json index 44ad74b6ea1..185e61c60fc 100644 --- a/packages/dnb-eufemia/tsconfig.definitions.json +++ b/packages/dnb-eufemia/tsconfig.definitions.json @@ -2,6 +2,7 @@ "compileOnSave": false, "compilerOptions": { "jsx": "react-jsx", + "lib": ["es2022", "dom"], "skipLibCheck": true, "declaration": true, "emitDeclarationOnly": true, diff --git a/packages/dnb-eufemia/tsconfig.json b/packages/dnb-eufemia/tsconfig.json index 17a87794a55..c36805f05be 100644 --- a/packages/dnb-eufemia/tsconfig.json +++ b/packages/dnb-eufemia/tsconfig.json @@ -8,7 +8,7 @@ "isolatedModules": true, "resolveJsonModule": true, "skipLibCheck": true, - "lib": ["es2018", "dom"], + "lib": ["es2022", "dom"], "types": ["node", "jest"], "outDir": "./build", "rootDir": ".",