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(