diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx
index 2a3f72d2819..f669146e5d9 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx
+++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx
@@ -17,8 +17,8 @@ import {
import { fireEvent, render, act, waitFor } from '@testing-library/react'
import {
DrawerListData,
- DrawerListDataObject,
- DrawerListDataObjectUnion,
+ DrawerListDataArrayObject,
+ DrawerListDataArray,
} from '../../../fragments/drawer-list'
import { Provider } from '../../../shared'
@@ -36,7 +36,7 @@ const props: AutocompleteAllProps = {
skip_portal: true,
}
-const mockData: DrawerListDataObjectUnion[] = [
+const mockData: DrawerListDataArray = [
'AA c',
'BB cc zethx',
{ content: ['CC', 'cc'] },
@@ -379,7 +379,7 @@ describe('Autocomplete component', () => {
const nodes1 = document.querySelectorAll('.dnb-sr-only')
expect(nodes1[nodes1.length - 1].textContent).toBe('2 alternativer')
- const content = (mockData[2] as DrawerListDataObject).content
+ const content = (mockData[2] as DrawerListDataArrayObject).content
expect(
document.querySelectorAll('li.dnb-drawer-list__option')[0]
.textContent
@@ -757,7 +757,7 @@ describe('Autocomplete component', () => {
fireEvent.change(inputElement, {
target: { value: 'cc' },
})
- const content = (mockData[2] as DrawerListDataObject).content
+ const content = (mockData[2] as DrawerListDataArrayObject).content
expect(optionElements()[0].textContent).toBe(
(content as string[]).join('')
)
diff --git a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.tsx b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.tsx
index 3eb1e9b8dc5..1c4e09e0971 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.tsx
+++ b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.tsx
@@ -20,7 +20,7 @@ import { SubmitButton } from '../../input/Input'
import { format } from '../../number-format/NumberUtils'
import {
DrawerListData,
- DrawerListDataObjectUnion,
+ DrawerListDataArray,
} from '../../../fragments/DrawerList'
export default {
@@ -856,7 +856,7 @@ const WideStyle = styled.div`
export function DataSuffix() {
const { locale } = React.useContext(Context)
const ban = format(21001234567, { ban: true, locale }) as string
- const numbers: DrawerListDataObjectUnion[] = [
+ const numbers: DrawerListDataArray = [
{
selected_value: `Brukskonto (${ban})`,
suffix_value: (
diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx b/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx
index f636babfc48..4a6375e97a4 100644
--- a/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx
+++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx
@@ -13,8 +13,8 @@ import {
testDirectionObserver,
} from '../../../fragments/drawer-list/__tests__/DrawerListTestMocks'
import {
- DrawerListDataObject,
- DrawerListDataObjectUnion,
+ DrawerListDataArrayObject,
+ DrawerListDataArray,
} from '../../../fragments/drawer-list'
// use no_animation so we don't need to wait
@@ -28,7 +28,7 @@ const props: DropdownAllProps = {
no_animation: true,
}
-const mockData: DrawerListDataObjectUnion[] = [
+const mockData: DrawerListDataArray = [
{
selected_value: 'Brukskonto - Kari Nordmann',
content: ['1234 56 78901', 'Brukskonto - Kari Nordmann'],
@@ -72,7 +72,9 @@ describe('Dropdown component', () => {
expect(
document.querySelector('.dnb-dropdown__text__inner').textContent
- ).toBe((mockData[props.value] as DrawerListDataObject).selected_value)
+ ).toBe(
+ (mockData[props.value] as DrawerListDataArrayObject).selected_value
+ )
keydown(32) // space
@@ -96,7 +98,7 @@ describe('Dropdown component', () => {
expect(
document.querySelector('.dnb-dropdown__text__inner').textContent
).toBe(
- (mockData[(props.value as number) + 1] as DrawerListDataObject)
+ (mockData[(props.value as number) + 1] as DrawerListDataArrayObject)
.selected_value
)
})
@@ -507,7 +509,7 @@ describe('Dropdown component', () => {
rerender()
expect(document.querySelector('.dnb-dropdown__text').textContent).toBe(
- (mockData[value] as DrawerListDataObject).selected_value
+ (mockData[value] as DrawerListDataArrayObject).selected_value
)
rerender()
@@ -520,7 +522,7 @@ describe('Dropdown component', () => {
rerender()
expect(document.querySelector('.dnb-dropdown__text').textContent).toBe(
- (mockData[value] as DrawerListDataObject).selected_value
+ (mockData[value] as DrawerListDataArrayObject).selected_value
)
rerender()
@@ -1073,7 +1075,7 @@ describe('Dropdown component', () => {
expect(
document.querySelector('.dnb-dropdown__text__inner').textContent
).toBe(
- (mockData[(props.value as number) + 1] as DrawerListDataObject)
+ (mockData[(props.value as number) + 1] as DrawerListDataArrayObject)
.selected_value
)
})
@@ -1082,7 +1084,9 @@ describe('Dropdown component', () => {
render()
expect(
document.querySelector('.dnb-dropdown__text__inner').textContent
- ).toBe((mockData[props.value] as DrawerListDataObject).selected_value)
+ ).toBe(
+ (mockData[props.value] as DrawerListDataArrayObject).selected_value
+ )
})
it('has correct selected value after new selection', () => {
@@ -1094,7 +1098,9 @@ describe('Dropdown component', () => {
expect(
document.querySelector('.dnb-dropdown__text__inner').textContent
- ).toBe((mockData[props.value] as DrawerListDataObject).selected_value)
+ ).toBe(
+ (mockData[props.value] as DrawerListDataArrayObject).selected_value
+ )
})
it('has correct value after useEffect value state change', () => {
@@ -1113,7 +1119,9 @@ describe('Dropdown component', () => {
expect(
document.querySelector('.dnb-dropdown__text__inner').textContent
- ).toBe((mockData[newValue] as DrawerListDataObject).selected_value)
+ ).toBe(
+ (mockData[newValue] as DrawerListDataArrayObject).selected_value
+ )
open()
diff --git a/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.tsx b/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.tsx
index 49f9a8d0d73..1ce4d4877d3 100644
--- a/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.tsx
+++ b/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.tsx
@@ -20,7 +20,7 @@ import {
GlobalStatus,
} from '../..'
import { Flex, Link } from '../../..'
-import { DrawerListDataObjectUnion } from '../../../fragments/DrawerList'
+import { DrawerListDataArray } from '../../../fragments/DrawerList'
import { Provider } from '../../../shared'
export default {
@@ -628,7 +628,7 @@ export const DropdownSandbox = () => (
)
-let dropdownData: DrawerListDataObjectUnion[] = [
+let dropdownData: DrawerListDataArray = [
{
selected_value: 'Brukskonto - Kari Nordmann',
content: (
diff --git a/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx b/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx
index b64100525a0..266c1fa5a5e 100644
--- a/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx
+++ b/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx
@@ -25,7 +25,7 @@ import {
} from '../..'
import { Link } from '../../..'
import { format } from '../../number-format/NumberUtils'
-import { DrawerListDataObject } from '../../../fragments/DrawerList'
+import { DrawerListDataArray } from '../../../fragments/DrawerList'
export default {
title: 'Eufemia/Components/FormStatus',
@@ -228,7 +228,7 @@ export const GlobalStatusExample = () => {
export const SuffixAndStretchedStatus = () => {
const ban = format(21001234567, { ban: true }) as string
- const numbers: DrawerListDataObject[] = [
+ const numbers: DrawerListDataArray = [
{
selected_value: `Brukskonto (${ban})`,
suffix_value: (
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
index 3451cfe2da0..01750ed2021 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -23,7 +23,7 @@ import {
} from '../SelectCountry'
import useErrorMessage from '../../hooks/useErrorMessage'
import useTranslation from '../../hooks/useTranslation'
-import { DrawerListDataObject } from '../../../../fragments/DrawerList'
+import { DrawerListDataArrayItem } from '../../../../fragments/DrawerList'
export type Props = FieldHelpProps &
FieldPropsWithExtraValue<
@@ -84,7 +84,7 @@ function PhoneNumber(props: Props) {
const countryCodeRef = React.useRef(props?.emptyValue)
const numberRef = React.useRef(props?.emptyValue)
- const dataRef = React.useRef>(null)
+ const dataRef = React.useRef>(null)
const langRef = React.useRef(lang)
const wasFilled = React.useRef(false)
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts
index ee8fbc06e87..e3fb9681234 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts
@@ -13,27 +13,30 @@ export type DrawerListWrapperElement =
| React.ReactNode;
export type DrawerListDefaultValue = string | number;
export type DrawerListValue = string | number;
-export type DrawerListDataObject = {
+export type DrawerListDataObject = DrawerListDataArrayObject; // deprecated, use "DrawerListDataArrayObject"
+export type DrawerListDataArrayObject = {
selected_value?: string | React.ReactNode;
selectedKey?: string | number;
selected_key?: string | number;
suffix_value?: string | React.ReactNode;
- content?: string | React.ReactNode | string[];
+ content?: DrawerListContent;
search_content?: string | React.ReactNode | string[];
};
-export type DrawerListDataObjectUnion =
- | string
- | React.ReactNode
- | DrawerListDataObject;
+export type DrawerListDataObjectUnion = DrawerListDataArrayItem; // deprecated, use "DrawerListDataArrayItem"
+export type DrawerListDataArrayItem =
+ | DrawerListDataArrayObject
+ | DrawerListContent;
+export type DrawerListDataArray = DrawerListDataArrayItem[];
+export type DrawerListDataRecord = Record;
+export type DrawerListDataAll = DrawerListDataRecord | DrawerListDataArray;
export type DrawerListData =
| string
- | ((...args: any[]) => any)
+ | ((...args: any[]) => DrawerListDataAll)
+ | DrawerListDataAll;
+export type DrawerListContent =
+ | string
| React.ReactNode
- | Record
- | DrawerListDataObjectUnion[];
-export type DrawerListSelectedValue = string | React.ReactNode;
-export type DrawerListSuffixValue = string | React.ReactNode;
-export type DrawerListContent = string | React.ReactNode | string[];
+ | (string | React.ReactNode)[];
export type DrawerListRawData =
| any[]
| Record
@@ -149,9 +152,6 @@ export interface DrawerListProps {
* The data we want to fill the list with. Provide the data as a JSON string, array, or object in the specified data structure. If you don't have to define a value, you can also send in a function which will be called once the user opens the DrawerList.
*/
data?: DrawerListData;
- selected_value?: DrawerListSelectedValue;
- suffix_value?: DrawerListSuffixValue;
- content?: DrawerListContent;
prepared_data?: any[];
raw_data?: DrawerListRawData;
/**
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx
index 2ff704cfec1..f61a510fc94 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx
@@ -8,7 +8,7 @@ import { axeComponent, loadScss } from '../../../core/jest/jestSetup'
import { act, render, screen, waitFor } from '@testing-library/react'
import DrawerList, {
DrawerListAllProps,
- DrawerListDataObjectUnion,
+ DrawerListDataArray,
DrawerListData,
} from '../DrawerList'
@@ -32,7 +32,7 @@ const props: DrawerListAllProps = {
no_animation: true,
}
-const mockData: DrawerListDataObjectUnion[] = [
+const mockData: DrawerListDataArray = [
{
content: ['1234 56 78901', 'Brukskonto - Kari Nordmann'],
},
@@ -185,7 +185,7 @@ describe('DrawerList component', () => {
const { rerender } = render(
)
@@ -204,7 +204,7 @@ describe('DrawerList component', () => {
rerender(
@@ -214,7 +214,7 @@ describe('DrawerList component', () => {
rerender(