feat: make it possible to get all additional HTML attributes in every…

… #date-picker event return, by using `{ date, event, attributes }`

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

@@ -15,13 +15,15 @@ draft: true
 ## Returned Object
 
 The type of native event will depend on the interaction.
+All additional HTML attributes will be returned as well.
 
 ```js
 {
   date: null|"return_format", /* Gets returned if range is true */
   start_date: null|"return_format",
   end_date: null|"return_format",
   days_between: number,
+  attributes: { attributes },
   event: null|{ native event }
 }
 ```

packages/dnb-ui-lib/src/components/date-picker/DatePicker.js

@@ -453,9 +453,12 @@ export default class DatePicker extends PureComponent {
   getReturnObject({ event = null } = {}) {
     const { startDate, endDate } = this.state
 
+    const attributes = this.attributes || {}
+
     return isTrue(this.props.range)
       ? {
           event,
+          attributes,
           days_between: endDate
             ? differenceInCalendarDays(endDate, startDate)
             : null,
@@ -466,7 +469,11 @@ export default class DatePicker extends PureComponent {
             ? format(endDate, this.props.return_format)
             : null
         }
-      : { event, date: format(startDate, this.props.return_format) }
+      : {
+          event,
+          attributes,
+          date: format(startDate, this.props.return_format)
+        }
   }
 
   render() {
@@ -541,7 +548,8 @@ export default class DatePicker extends PureComponent {
       pickerParams['aria-labelledby'] = id + '-label'
     }
 
-    const inputParams = { ['aria-expanded']: opened, ...attributes }
+    const inputParams = { ...attributes }
+    const submitParams = { ['aria-expanded']: opened }
 
     const mainParams = {
       className: classnames(
@@ -559,8 +567,12 @@ export default class DatePicker extends PureComponent {
     }
 
     validateDOMAttributes(this.props, inputParams)
+    validateDOMAttributes(null, submitParams)
     validateDOMAttributes(null, pickerParams)
 
+    // make it pissible to grapt the rest attributes and return it with all events
+    this.attributes = inputParams
+
     return (
       <span {...mainParams}>
         {(label && (
@@ -599,6 +611,7 @@ export default class DatePicker extends PureComponent {
               status_state={status_state}
               // status_animation={status_animation}
               {...inputParams}
+              submitAttributes={submitParams}
               onChange={this.onInputChange}
               onFocus={this.showPicker}
               onSubmit={this.togglePicker}

packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js

@@ -29,6 +29,7 @@ export const propTypes = {
   separatorRexExp: PropTypes.instanceOf(RegExp),
   minDate: PropTypes.instanceOf(Date),
   maxDate: PropTypes.instanceOf(Date),
+  submitAttributes: PropTypes.object,
   range: PropTypes.bool,
   status: PropTypes.string,
   status_state: PropTypes.string,
@@ -47,6 +48,7 @@ export const defaultProps = {
   maskOrder: 'dd/mm/yyyy',
   maskPlaceholder: 'dd/mm/åååå',
   separatorRexExp: /[-/ ]/g,
+  submitAttributes: null,
   range: null,
   status: null,
   status_state: 'error',
@@ -486,6 +488,7 @@ export default class DatePickerInput extends PureComponent {
     const {
       id,
 
+      submitAttributes,
       range /* eslint-disable-line */,
       maskOrder /* eslint-disable-line */,
       maskPlaceholder /* eslint-disable-line */,
@@ -506,12 +509,13 @@ export default class DatePickerInput extends PureComponent {
       status_state,
       status_animation,
 
-      ...rest
+      ...attributes
     } = this.props
 
     const { focusState } = this.state
 
-    validateDOMAttributes(this.props, rest)
+    validateDOMAttributes(this.props, attributes)
+    validateDOMAttributes(null, submitAttributes)
 
     return (
       <Input
@@ -532,9 +536,10 @@ export default class DatePickerInput extends PureComponent {
             variant="secondary"
             on_submit={onSubmit}
             onKeyUp={this.onKeyUpHandler}
-            {...rest}
+            {...submitAttributes}
           />
         }
+        {...attributes}
       />
     )
   }

packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js

@@ -175,6 +175,15 @@ describe('DatePicker component', () => {
     })
   })
 
+  it('has to return all additional attributes the event return', () => {
+    const my_event = jest.fn()
+    const params = { 'data-attr': 'value' }
+    const Comp = mount(<Component on_show={my_event} {...params} />)
+    Comp.find('button').simulate('click')
+    expect(my_event.mock.calls.length).toBe(1)
+    expect(my_event.mock.calls[0][0].attributes).toMatchObject(params)
+  })
+
   it('is displaying correct month', () => {
     expect(
       Comp.find('.dnb-date-picker__header__title')

packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -86,7 +86,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
         className="dnb-date-picker__shell"
       >
         <DatePickerInput
-          aria-expanded={false}
           date="2019-01-01T00:00:00.000Z"
           disabled={false}
           endDate={2019-02-15T00:00:00.000Z}
@@ -107,6 +106,11 @@ exports[`DatePicker component have to match snapshot 1`] = `
           status="error"
           status_animation={null}
           status_state="error"
+          submitAttributes={
+            Object {
+              "aria-expanded": false,
+            }
+          }
         >
           <Input
             align={null}