improve DrawerList types

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('')
     )

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: (

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(<Dropdown {...props} value={value} data={mockData} />)
 
     expect(document.querySelector('.dnb-dropdown__text').textContent).toBe(
-      (mockData[value] as DrawerListDataObject).selected_value
+      (mockData[value] as DrawerListDataArrayObject).selected_value
     )
 
     rerender(<Dropdown {...props} value={undefined} data={mockData} />)
@@ -520,7 +522,7 @@ describe('Dropdown component', () => {
     rerender(<Dropdown {...props} value={value} data={mockData} />)
 
     expect(document.querySelector('.dnb-dropdown__text').textContent).toBe(
-      (mockData[value] as DrawerListDataObject).selected_value
+      (mockData[value] as DrawerListDataArrayObject).selected_value
     )
 
     rerender(<Dropdown {...props} value={null} data={mockData} />)
@@ -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(<Dropdown {...props} data={mockData} />)
     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()
 

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 = () => (
   </CustomStyle>
 )
 
-let dropdownData: DrawerListDataObjectUnion[] = [
+let dropdownData: DrawerListDataArray = [
   {
     selected_value: 'Brukskonto - Kari Nordmann',
     content: (

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: (

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['value']>(props?.emptyValue)
   const numberRef = React.useRef<Props['value']>(props?.emptyValue)
-  const dataRef = React.useRef<Array<DrawerListDataObject>>(null)
+  const dataRef = React.useRef<Array<DrawerListDataArrayItem>>(null)
   const langRef = React.useRef<string>(lang)
   const wasFilled = React.useRef<boolean>(false)
 

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<string, DrawerListContent>;
+export type DrawerListDataAll = DrawerListDataRecord | DrawerListDataArray;
 export type DrawerListData =
   | string
-  | ((...args: any[]) => any)
+  | ((...args: any[]) => DrawerListDataAll)
+  | DrawerListDataAll;
+export type DrawerListContent =
+  | string
   | React.ReactNode
-  | Record<string, unknown>
-  | 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<string, unknown>
@@ -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;
   /**

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(
       <DrawerList
         {...props}
-        data={Object.freeze(mockData) as DrawerListDataObjectUnion}
+        data={Object.freeze(mockData) as DrawerListDataArray}
         on_select={on_select}
       />
     )
@@ -204,7 +204,7 @@ describe('DrawerList component', () => {
     rerender(
       <DrawerList
         {...props}
-        data={Object.freeze(mockData) as DrawerListDataObjectUnion}
+        data={Object.freeze(mockData) as DrawerListDataArray}
         on_select={on_select}
         opened={null}
       />
@@ -214,7 +214,7 @@ describe('DrawerList component', () => {
     rerender(
       <DrawerList
         {...props}
-        data={Object.freeze(mockData) as DrawerListDataObjectUnion}
+        data={Object.freeze(mockData) as DrawerListDataArray}
         on_select={on_select}
         opened={true}
       />