fix: make value available in #dropdown event return instead of only…

… `selected_key` if object was given as data

packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/events.md

@@ -4,12 +4,12 @@ showTabs: true
 
 ## Events
 
-| Events      | Description                                                                                                                                                                                                                                                                             |
-| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.                                                                                                                                |
-| `on_select` | _(optional)_ will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation |
-| `on_show`   | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                           |
-| `on_hide`   | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                           |
+| Events      | Description                                                                                                                                                                                                                                                                                           |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value }`.                                                                                                                                |
+| `on_select` | _(optional)_ will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation |
+| `on_show`   | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                                         |
+| `on_hide`   | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                                         |
 
 ### The `on_change` vs `on_select` difference
 

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.md

@@ -74,8 +74,8 @@ const ChangeLocale = () => {
   return <Dropdown
     value={locale}
     data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
-    on_change={({ data: { selected_key } }) => {
-      setLocale(selected_key)
+    on_change={({ data: { value } }) => {
+      setLocale(value)
     }}
   />
 }

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/provider-info.md

@@ -25,8 +25,8 @@ const ChangeLocale = () => {
     <Dropdown
       value={locale}
       data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
-      on_change={({ data: { selected_key } }) => {
-        setLocale(selected_key)
+      on_change={({ data: { value } }) => {
+        setLocale(value)
       }}
     />
   )

packages/dnb-ui-lib/src/components/dropdown/__tests__/Dropdown.test.js

@@ -310,6 +310,13 @@ describe('Dropdown component', () => {
     selectedItem = mockData[props.value + 1]
     expect(on_change.mock.calls[0][0].data).toStrictEqual(selectedItem)
     expect(on_select.mock.calls[1][0].data).toStrictEqual(selectedItem)
+    expect(on_change).toHaveBeenCalledWith({
+      attributes: {},
+      data: selectedItem,
+      event: new KeyboardEvent('keydown', {}),
+      selected_item: props.value + 1,
+      value: props.value + 1
+    })
 
     // then simulate changes
     keydown(Comp, 40) // down
@@ -320,6 +327,55 @@ describe('Dropdown component', () => {
     expect(on_select.mock.calls[3][0].data).toStrictEqual(selectedItem) // second call!
   })
 
+  it('has valid on_change callback if object was given', () => {
+    // const selectedItem = 'nb-NO'
+    const on_change = jest.fn()
+
+    const Comp = mount(
+      <Component
+        {...props}
+        data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
+        on_change={on_change}
+      />
+    )
+
+    open(Comp)
+    keydown(Comp, 40) // down
+    keydown(Comp, 32) // space
+
+    expect(on_change).toHaveBeenCalledWith({
+      attributes: {},
+      data: {
+        __id: 0,
+        content: 'English',
+        selected_key: 'en-US',
+        type: 'object',
+        value: 'en-US'
+      },
+      event: new KeyboardEvent('keydown', {}),
+      selected_item: 0,
+      value: 'en-US'
+    })
+
+    open(Comp)
+    keydown(Comp, 40) // down
+    keydown(Comp, 40) // down
+    keydown(Comp, 32) // space
+
+    expect(on_change).toHaveBeenLastCalledWith({
+      attributes: {},
+      data: {
+        content: 'Norsk',
+        selected_key: 'nb-NO',
+        type: 'object',
+        value: 'nb-NO'
+      },
+      event: new KeyboardEvent('keydown', {}),
+      selected_item: 1,
+      value: 'nb-NO'
+    })
+  })
+
   it('has correct "aria-expanded"', () => {
     const Comp = mount(<Component {...props} data={mockData} />)
     open(Comp)

packages/dnb-ui-lib/src/fragments/drawer-list/DrawerListHelpers.js

@@ -101,7 +101,12 @@ export const normalizeData = (props) => {
   if (data && typeof data === 'object' && !Array.isArray(data)) {
     const list = []
     for (let i in data) {
-      list.push({ selected_key: i, content: data[i], type: 'object' })
+      list.push({
+        selected_key: i,
+        value: i,
+        content: data[i],
+        type: 'object'
+      })
     }
     data = list
   }

packages/dnb-ui-lib/stories/components/DatePicker.js

@@ -58,8 +58,8 @@ const ChangeLocale = () => {
     <Dropdown
       value={locale}
       data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
-      on_change={({ data: { selected_key: locale } }) => {
-        setLocale(locale)
+      on_change={({ data: { value } }) => {
+        setLocale(value)
       }}
     />
   )