@entur/datepicker 10.1.3 → 11.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains the different Datepicker components.
 
-> 💡 Looking for the [documentation](https://design.entur.no/komponenter/skjemaelementer/datepicker)?
+> 💡 Looking for the [documentation](https://linje.entur.no/komponenter/skjemaelementer/datepicker)?
 
 ## Installation
 
@@ -14,4 +14,4 @@ yarn add @entur/datepicker
 
 ## Usage
 
-Please refer to the [documentation](https://design.entur.no/komponenter/skjemaelementer/datepicker) for usage information.
+Please refer to the [documentation](https://linje.entur.no/komponenter/skjemaelementer/datepicker) for usage information.

package/dist/DatePicker/Calendar.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import { AriaCalendarProps } from '@react-aria/calendar';
 import { CalendarDate, DateValue } from '@internationalized/date';
 import { MappedDateValue } from '@react-types/datepicker';
+import { DateFieldProps } from './DateField';
 import './Calendar.scss';
-export type CalendarProps<DateType extends DateValue> = {
+export type CalendarProps<DateType extends DateValue> = Omit<AriaCalendarProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'placeholderValue' | 'defaultValue' | 'minValue' | 'maxValue'> & {
     selectedDate: DateType | null;
-    onChange: (SelectedDate: MappedDateValue<DateType> | null) => void | React.Dispatch<React.SetStateAction<DateType | null>>;
+    onChange?: (selectedDate: MappedDateValue<DateType> | null) => void;
     navigationDescription?: string;
     style?: React.CSSProperties;
     /** Ekstra klassenavn */
@@ -48,5 +50,6 @@ export type CalendarProps<DateType extends DateValue> = {
     ariaLabelForDate?: (date: CalendarDate) => string;
     locale?: string;
     calendarRef?: React.MutableRefObject<HTMLDivElement | null>;
+    forcedReturnType?: DateFieldProps<DateType>['forcedReturnType'];
 };
 export declare const Calendar: <DateType extends DateValue>({ locale: localOverride, ...rest }: CalendarProps<DateType>) => React.JSX.Element;

package/dist/DatePicker/DateField.d.ts

@@ -1,18 +1,19 @@
 import React from 'react';
-import type { SpectrumDateFieldProps, DateValue, AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
+import type { DateValue, AriaDatePickerProps, MappedDateValue, Granularity } from '@react-types/datepicker';
 import { BaseFormControlProps } from '@entur/form';
 import { VariantType } from '@entur/utils';
+import { ForcedReturnType } from '../shared/utils';
 import './DateField.scss';
 /** @deprecated use variant="information" instead */
 declare const info = "info";
 /** @deprecated use variant="negative" instead */
 declare const error = "error";
-export type DateFieldProps<DateType extends DateValue> = {
+export type DateFieldProps<DateType extends DateValue> = Omit<AriaDatePickerProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'placeholderValue' | 'defaultValue' | 'minValue' | 'maxValue'> & Partial<Omit<BaseFormControlProps, 'children' | 'label'>> & {
     /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
     selectedDate: DateType | null;
-    /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
-    onChange: (value: MappedDateValue<DateType> | null) => void;
-    /** Label til TimePicker */
+    /** Kalles når dato endres. Tid i '@internationalized/date'-pakkens format */
+    onChange?: (value: MappedDateValue<DateType> | null) => void;
+    /** Ledetekst til DateField */
     label: string;
     /** BCP47-språkkoden til locale-en du ønsker å bruke.
      * @default Brukerenhetens selvvalgte locale
@@ -22,6 +23,15 @@ export type DateFieldProps<DateType extends DateValue> = {
      * @default false
      */
     showTimeZone?: boolean;
+    /** Brukes for å vise tid i datovelgeren. Velg minste enhet som skal vises.
+     * Hvis du vil vise tid vil "minute" vise minutt og ikke sekund, mens "second" viser
+     * sekunder også.
+     * @default "day"
+     */
+    granularity?: Granularity;
+    /** Viser tidspunkt i tillegg til dato.
+     * OBS: selectedDate må være av typen CalendarDateTime eller ZonedDateTime
+     */
     showTime?: boolean;
     /** Tidligste gyldige datovalg.
      * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
@@ -37,6 +47,19 @@ export type DateFieldProps<DateType extends DateValue> = {
      * Gyldig til og med den tiden som legges inn som maxDate.
      * Dato uten tid vil være gyldig hele maxDate-dagen */
     maxDate?: DateValue;
+    /** Funksjon som tar inn en dato og sier om den er utilgjengelig.
+     * Eks. (date) => isWeekend(date, 'no-NO') == helgedager er ikke tilgjengelig */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /** Tvinger typen på onChange til den gitte typen.
+     * Dette er nyttig når utgangsverdien din er 'null', men du ønsker at
+     * DatePicker alltid skal returnere f.eks ZonedDateTime.
+     *
+     * Som standard returnerer onChange DateValue basert på selectedDate,
+     * eller CalendarDate hvis selectedDate er 'null'.
+     *
+     * @default undefined
+     */
+    forcedReturnType?: ForcedReturnType;
     /** Varselmelding, som vil komme under TimePicker */
     feedback?: string;
     /** Valideringsvariant*/
@@ -51,13 +74,12 @@ export type DateFieldProps<DateType extends DateValue> = {
     validationVariant?: VariantType | typeof error | typeof info;
     labelTooltip?: React.ReactNode;
     labelProps?: React.DOMAttributes<Element>;
-    fieldProps?: AriaDatePickerProps<DateValue>;
-    groupProps?: React.DOMAttributes<Element>;
+    fieldProps?: DateFieldProps<DateType>;
     dateFieldRef?: React.Ref<HTMLDivElement>;
     disabled?: boolean;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-} & Omit<SpectrumDateFieldProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'placeholderValue' | 'defaultValue' | 'minValue' | 'maxValue'> & Omit<Partial<BaseFormControlProps>, 'children'>;
-export declare const DateField: <DateType extends DateValue>({ selectedDate, onChange, label, locale: customLocale, showTimeZone, showTime, granularity, disabled, isDisabled, variant, feedback, validationVariant, validationFeedback, labelTooltip, minDate, maxDate, style, className, labelProps: parentLabelProps, fieldProps: parentFieldProps, groupProps: parentGroupProps, append, prepend, dateFieldRef: ref, ...rest }: DateFieldProps<DateType>) => React.JSX.Element;
+};
+export declare const DateField: <DateType extends DateValue>({ selectedDate, onChange, label, locale: customLocale, showTimeZone, showTime, granularity, disabled, isDisabled, variant, feedback, validationVariant, validationFeedback, labelTooltip, minDate, maxDate, forcedReturnType, style, className, labelProps: parentLabelProps, append, prepend, dateFieldRef: ref, ...rest }: DateFieldProps<DateType>) => React.JSX.Element;
 export {};

package/dist/DatePicker/DatePicker.d.ts

@@ -1,62 +1,8 @@
 import React from 'react';
 import { CalendarDate, DateValue } from '@internationalized/date';
-import type { AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
-import type { BaseFormControlProps } from '@entur/form';
-import type { VariantType } from '@entur/utils';
+import { DateFieldProps } from './DateField';
 import './DatePicker.scss';
-/** @deprecated use variant="information" instead */
-declare const info = "info";
-/** @deprecated use variant="negative" instead */
-declare const error = "error";
-export type DatePickerProps<DateType extends DateValue> = {
-    /** Den valgte datoen. Dato i '@internationalized/date'-pakkens format */
-    selectedDate: DateType | null;
-    /** Kalles når tiden endres. Dato i '@internationalized/date'-pakkens format */
-    onChange: (value: MappedDateValue<DateType> | null) => void;
-    /** Ledetekst for inputfeltet til DatePicker */
-    label: string;
-    /** BCP47-språkkoden til locale-en du ønsker å bruke.
-     * @default Brukerenhetens selvvalgte locale
-     */
-    locale?: string;
-    /** Viser den gjeldende tidssonen hvis en er valgt (krever at tid også vises)
-     * @default false
-     */
-    showTimeZone?: boolean;
-    /** Viser tidspunkt i tillegg til dato.
-     * OBS: selectedDate må være av typen CalendarDateTime eller ZonedDateTime
-     */
-    showTime?: boolean;
-    /** Tidligste gyldige datovalg.
-     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
-     *
-     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
-     * Gyldig fra og med den tiden som legges inn som minDate.
-     * Dato uten tid vil være gyldig hele minDate-dagen */
-    minDate?: DateValue;
-    /** Seneste gyldige datovalg.
-     * Eks: today(getLocalTimeZone()).add({days: 1}) == i morgen i lokal tidssone
-     *
-     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
-     * Gyldig til og med den tiden som legges inn som maxDate.
-     * Dato uten tid vil være gyldig hele maxDate-dagen */
-    maxDate?: DateValue;
-    /** Funksjon som tar inn en dato og sier om den er utilgjengelig.
-     * Eks. (date) => isWeekend(date, 'no-NO') == helgedager er ikke tilgjengelig */
-    isDateUnavailable?: (date: DateValue) => boolean;
-    /** Varselmelding, som vil komme under DatePicker sitt inputfelt */
-    feedback?: string;
-    /** Valideringsvariant*/
-    variant?: VariantType | typeof error | typeof info;
-    /** Varselmelding som forteller om ugyldig dato
-     * @default "Ugyldig dato"
-     */
-    validationFeedback?: string;
-    /** Valideringsvariant for melding om ugyldig dato
-     * @default "negative"
-     */
-    validationVariant?: VariantType | typeof error | typeof info;
-    disabled?: boolean;
+export type DatePickerProps<DateType extends DateValue> = Omit<DateFieldProps<DateType>, 'labelProps' | 'fieldProps' | 'groupProps' | 'dateFieldRef'> & {
     /** Slå på visning av ukenummere i kalenderen. Overskriften for ukenummer-kolonnen
      * kan endres med prop-en 'weekNumberHeader'
      * @default false */
@@ -77,16 +23,6 @@ export type DatePickerProps<DateType extends DateValue> = {
      * @default 'Bruk piltastene til å navigere mellom datoer'
      */
     navigationDescription?: string;
-    /** Tvinger typen på onChange til den gitte typen.
-     * Dette er nyttig når utgangsverdien din er 'null', men du ønsker at
-     * DatePicker alltid skal returnere f.eks ZonedDateTime.
-     *
-     * Som standard returnerer onChange DateValue basert på selectedDate,
-     * eller CalendarDate hvis selectedDate er 'null'.
-     *
-     * @default undefined
-     */
-    forcedReturnType?: 'CalendarDate' | 'CalendarDateTime' | 'ZonedDateTime';
     /** Brukes for å legge til klassenavn på spesifikke datoer i kalenderen.
      *  Tar inn en dato og skal returnere klassenavnet som skal legges til den datoen.
      *  @default undefined
@@ -102,9 +38,5 @@ export type DatePickerProps<DateType extends DateValue> = {
      *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
      */
     ariaLabelForDate?: (date: CalendarDate) => string;
-    /** Ekstra klassenavn */
-    className?: string;
-    style?: React.CSSProperties;
-} & Omit<AriaDatePickerProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'> & Omit<Partial<BaseFormControlProps>, 'children'>;
-export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, classNameForDate, className, style, variant, feedback, validationVariant, validationFeedback, showWeekNumbers, weekNumberHeader, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, append, prepend, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
-export {};
+};
+export declare const DatePicker: <DateType extends DateValue>({ selectedDate, locale, disabled, showTime, showTimeZone, classNameForDate, className, variant, feedback, validationVariant, validationFeedback, showWeekNumbers, weekNumberHeader, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, append, prepend, granularity, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;

package/dist/TimePicker/TimePicker.d.ts

@@ -62,6 +62,6 @@ export type TimePickerProps<TimeType extends TimeValue> = {
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-} & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'> & Partial<BaseFormControlProps>;
+} & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'> & Omit<Partial<BaseFormControlProps>, 'children' | 'label'>;
 export declare const TimePicker: <TimeType extends TimeValue>({ selectedTime, onChange, disabled, className, style, label, labelTooltip, feedback, granularity, variant, locale: customLocale, showTimeZone, showSeconds, minuteIncrementForArrowButtons, leftArrowButtonAriaLabel, rightArrowButtonAriaLabel, inputRef, forcedReturnType, forcedTimeZone, append, prepend, ...rest }: TimePickerProps<TimeType>) => React.JSX.Element;
 export {};

package/dist/datepicker.cjs.development.js

@@ -52,7 +52,7 @@ var FieldSegment = function FieldSegment(_ref) {
     ref: ref,
     className: classNames('eds-date-and-time-field__segment', {
       'eds-date-and-time-field__segment--placeholder': segment.isPlaceholder,
-      'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
+      'eds-date-and-time-field__segment--dot-separator': segment.text === '.' || segment.text === ':'
     }),
     tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
   }, rest), segment.text);
@@ -205,17 +205,31 @@ function getWeekNumberForDate(date$1) {
   var weekNumber = Math.ceil((thursdayOfWeek.compare(firstDayOfYearForThursday) + 1) / 7);
   return weekNumber;
 }
+function handleOnChange(_ref2) {
+  var value = _ref2.value,
+    selectedDate = _ref2.selectedDate,
+    forcedReturnType = _ref2.forcedReturnType,
+    onChange = _ref2.onChange;
+  if (forcedReturnType !== undefined || !selectedDate) {
+    return onChange == null ? void 0 : onChange(convertValueToType({
+      value: value,
+      type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime',
+      timezone: value !== null && 'timezone' in value ? value.timezone : undefined
+    }));
+  }
+  onChange == null || onChange(value);
+}
 
-var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "fieldProps", "groupProps", "append", "prepend", "dateFieldRef"];
+var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "forcedReturnType", "style", "className", "labelProps", "append", "prepend", "dateFieldRef"];
 var DateField = function DateField(_ref) {
   var selectedDate = _ref.selectedDate,
-    onChange = _ref.onChange,
+    _onChange = _ref.onChange,
     label = _ref.label,
     customLocale = _ref.locale,
     showTimeZone = _ref.showTimeZone,
     showTime = _ref.showTime,
     _ref$granularity = _ref.granularity,
-    granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
+    granularity = _ref$granularity === void 0 ? showTime ? 'minute' : 'day' : _ref$granularity,
     disabled = _ref.disabled,
     isDisabled = _ref.isDisabled,
     variant = _ref.variant,
@@ -227,34 +241,40 @@ var DateField = function DateField(_ref) {
     labelTooltip = _ref.labelTooltip,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
+    forcedReturnType = _ref.forcedReturnType,
     style = _ref.style,
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
-    parentFieldProps = _ref.fieldProps,
-    parentGroupProps = _ref.groupProps,
     append = _ref.append,
     prepend = _ref.prepend,
     ref = _ref.dateFieldRef,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
-  var state = datepicker$1.useDateFieldState(_extends({}, rest, {
+  var _props = _extends({}, rest, {
+    label: label,
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
     value: selectedDate,
-    onChange: onChange,
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: forcedReturnType,
+        onChange: _onChange
+      });
+    },
     hideTimeZone: !showTimeZone,
-    granularity: showTime ? 'minute' : granularity,
+    granularity: granularity,
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
     maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
     isDisabled: isDisabled || disabled,
     shouldForceLeadingZeros: true
-  }));
+  });
+  var state = datepicker$1.useDateFieldState(_props);
   var dateFieldRef = React.useRef(null);
-  var _useDateField = datepicker.useDateField(_extends({}, parentFieldProps, rest, {
-      label: label
-    }), state, dateFieldRef),
+  var _useDateField = datepicker.useDateField(_props, state, dateFieldRef),
     labelProps = _useDateField.labelProps,
     fieldProps = _useDateField.fieldProps;
   var id = utils.useRandomId('datefield');
@@ -279,22 +299,16 @@ var DateField = function DateField(_ref) {
     labelProps: parentLabelProps != null ? parentLabelProps : labelProps,
     labelTooltip: labelTooltip,
     prepend: prepend,
-    ref: ref,
+    ref: utils.mergeRefs(ref, dateFieldRef),
     style: style,
-    variant: variant != null ? variant : state.validationState === 'invalid' ? validationVariant : undefined
-  }, parentGroupProps), React.createElement("span", _extends({
-    ref: dateFieldRef
-  }, fieldProps, {
-    style: {
-      display: 'contents'
-    }
-  }), state.segments.map(function (segment, i) {
+    variant: variant != null ? variant : state.isInvalid ? validationVariant : undefined
+  }, fieldProps), state.segments.map(function (segment, i) {
     return React.createElement(FieldSegment, {
       segment: segment,
       state: state,
       key: i
     });
-  }))));
+  })));
 };
 
 var _excluded$9 = ["children", "className", "style"];
@@ -400,9 +414,9 @@ var CalendarGrid = function CalendarGrid(_ref) {
     className: "eds-datepicker__calendar__grid"
   }), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, showWeekNumbers && React.createElement("th", {
     className: "eds-datepicker__calendar__grid__weeknumber-header"
-  }, weekNumberHeader), weekDaysMapped().map(function (day, index) {
+  }, weekNumberHeader), weekDaysMapped().map(function (day) {
     return React.createElement("th", {
-      key: index
+      key: day
     }, day);
   }))), React.createElement("tbody", null, weeksArray.map(function (weekIndex) {
     var weekNumber = getWeekNumberForDate(state.getDatesInWeek(weekIndex)[0]);
@@ -413,7 +427,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
       className: "eds-datepicker__calendar__grid__weeknumber"
     }, weekNumber), state.getDatesInWeek(weekIndex).map(function (date, i) {
       return date ? React.createElement(CalendarCell, {
-        key: i,
+        key: date.month + "." + date.day,
         state: state,
         date: date,
         "aria-describedby": calendarGridId + 'description',
@@ -431,7 +445,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
 };
 
 var _excluded$6 = ["locale"],
-  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "style", "className", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
+  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "forcedReturnType", "style", "className", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
 var Calendar = function Calendar(_ref) {
   var localOverride = _ref.locale,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
@@ -443,13 +457,14 @@ var Calendar = function Calendar(_ref) {
 };
 var CalendarBase = function CalendarBase(_ref2) {
   var selectedDate = _ref2.selectedDate,
-    onChange = _ref2.onChange,
+    _onChange = _ref2.onChange,
     minDate = _ref2.minDate,
     maxDate = _ref2.maxDate,
     _ref2$showWeekNumbers = _ref2.showWeekNumbers,
     showWeekNumbers = _ref2$showWeekNumbers === void 0 ? false : _ref2$showWeekNumbers,
     _ref2$weekNumberHeade = _ref2.weekNumberHeader,
     weekNumberHeader = _ref2$weekNumberHeade === void 0 ? 'uke' : _ref2$weekNumberHeade,
+    forcedReturnType = _ref2.forcedReturnType,
     style = _ref2.style,
     className = _ref2.className,
     navigationDescription = _ref2.navigationDescription,
@@ -463,16 +478,23 @@ var CalendarBase = function CalendarBase(_ref2) {
     rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   var _useLocale2 = i18n.useLocale(),
     locale = _useLocale2.locale;
-  var allProps = _extends({}, rest, {
+  var _props = _extends({}, rest, {
     value: selectedDate,
-    onChange: onChange,
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: forcedReturnType,
+        onChange: _onChange
+      });
+    },
     locale: locale,
     createCalendar: createCalendar,
     minValue: minDate,
     maxValue: maxDate
   });
-  var state = calendar$1.useCalendarState(allProps);
-  var _useCalendar = calendar.useCalendar(allProps, state),
+  var state = calendar$1.useCalendarState(_props);
+  var _useCalendar = calendar.useCalendar(_props, state),
     calendarProps = _useCalendar.calendarProps,
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
@@ -491,7 +513,7 @@ var CalendarBase = function CalendarBase(_ref2) {
     "aria-label": ariaLabelIfNorwegian('Neste måned', locale, nextButtonProps)
   }), React.createElement(icons.RightArrowIcon, {
     size: 20
-  }))), React.createElement(CalendarGrid, {
+  }))), React.createElement(CalendarGrid, _extends({}, rest, {
     state: state,
     navigationDescription: navigationDescription,
     onSelectedCellClick: onSelectedCellClick,
@@ -499,13 +521,12 @@ var CalendarBase = function CalendarBase(_ref2) {
     ariaLabelForDate: ariaLabelForDate,
     showWeekNumbers: showWeekNumbers,
     weekNumberHeader: weekNumberHeader
-  }));
+  })));
 };
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend"];
+var _excluded$5 = ["selectedDate", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend", "granularity"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
-    onChange = _ref.onChange,
     locale = _ref.locale,
     disabled = _ref.disabled,
     showTime = _ref.showTime,
@@ -513,7 +534,6 @@ var DatePicker = function DatePicker(_ref) {
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
     classNameForDate = _ref.classNameForDate,
     className = _ref.className,
-    style = _ref.style,
     variant = _ref.variant,
     feedback = _ref.feedback,
     validationVariant = _ref.validationVariant,
@@ -528,36 +548,27 @@ var DatePicker = function DatePicker(_ref) {
     maxDate = _ref.maxDate,
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
-    forcedReturnType = _ref.forcedReturnType,
     ariaLabelForDate = _ref.ariaLabelForDate,
     append = _ref.append,
     prepend = _ref.prepend,
+    _ref$granularity = _ref.granularity,
+    granularity = _ref$granularity === void 0 ? showTime ? 'minute' : 'day' : _ref$granularity,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = React.useRef(null);
   var calendarRef = React.useRef(null);
   var _useWindowDimensions = utils.useWindowDimensions(),
     width = _useWindowDimensions.width;
-  var handleOnChange = function handleOnChange(value) {
-    if (forcedReturnType !== undefined) {
-      return onChange(convertValueToType({
-        value: value,
-        type: forcedReturnType,
-        timezone: value !== null && 'timezone' in value ? value.timezone : undefined
-      }));
-    }
-    onChange(value);
-  };
-  var state = datepicker$1.useDatePickerState(_extends({}, rest, {
+  var _props = _extends({}, rest, {
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
     maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
     value: selectedDate,
-    onChange: handleOnChange,
-    granularity: showTime ? 'minute' : rest.granularity,
+    granularity: granularity,
     isDisabled: disabled
-  }));
-  var _useDatePicker = datepicker.useDatePicker(_extends({}, rest), state, datePickerRef),
+  });
+  var state = datepicker$1.useDatePickerState(_props);
+  var _useDatePicker = datepicker.useDatePicker(_props, state, datePickerRef),
     groupProps = _useDatePicker.groupProps,
     labelProps = _useDatePicker.labelProps,
     fieldProps = _useDatePicker.fieldProps,
@@ -586,13 +597,13 @@ var DatePicker = function DatePicker(_ref) {
     state.setOpen(false);
   });
   var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
+    onChange: rest.onChange,
     disabled: disabled,
     navigationDescription: navigationDescription,
     onSelectedCellClick: function onSelectedCellClick() {
       return state.setOpen(false);
     },
     selectedDate: selectedDate,
-    onChange: handleOnChange,
     minDate: minDate,
     maxDate: maxDate,
     calendarRef: calendarRef,
@@ -601,14 +612,14 @@ var DatePicker = function DatePicker(_ref) {
     showWeekNumbers: showWeekNumbers,
     weekNumberHeader: weekNumberHeader
   });
-  var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
+  var isModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
     style: _extends({}, floatingStyles, {
       zIndex: tokens.zIndexes.popover
     }),
     ref: refs.setFloating
   }, React.createElement(FocusLock, {
-    disabled: !state.isOpen || useModal,
+    disabled: !state.isOpen || isModal,
     returnFocus: true
   }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps))));
   var modalCalendar = React.createElement(modal.Modal, {
@@ -627,7 +638,7 @@ var DatePicker = function DatePicker(_ref) {
         locale: locale
       }, child);
     }
-  }, React.createElement(DateField, {
+  }, React.createElement(DateField, _extends({}, groupProps, fieldProps, rest, {
     append: !disabled && React.createElement("div", {
       style: {
         display: 'flex',
@@ -646,14 +657,10 @@ var DatePicker = function DatePicker(_ref) {
     }),
     disabled: disabled,
     feedback: feedback,
-    fieldProps: fieldProps,
-    groupProps: groupProps,
-    label: rest.label,
     labelProps: labelProps,
     labelTooltip: labelTooltip,
     maxDate: maxDate,
     minDate: minDate,
-    onChange: handleOnChange,
     dateFieldRef: function dateFieldRef(node) {
       refs.setReference(node);
       datePickerRef.current = node;
@@ -661,11 +668,10 @@ var DatePicker = function DatePicker(_ref) {
     selectedDate: selectedDate,
     showTime: showTime,
     showTimeZone: showTimeZone,
-    style: style,
     validationFeedback: validationFeedback,
     validationVariant: validationVariant,
     variant: variant
-  }), useModal ? modalCalendar : popoverCalendar);
+  })), isModal ? modalCalendar : popoverCalendar);
 };
 
 var _excluded$4 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
@@ -794,10 +800,10 @@ var TimePicker = function TimePicker(_ref) {
   var timePickerId = utils.useRandomId('eds-timepicker');
   var timeZone = forcedTimeZone != null ? forcedTimeZone : selectedTime !== null && 'timezone' in selectedTime ? selectedTime.timezone : 'Europe/Oslo';
   var handleOnChange = function handleOnChange(value) {
-    if (forcedReturnType !== undefined) {
+    if (forcedReturnType !== undefined || !selectedTime) {
       return onChange(convertValueToType({
         value: value,
-        type: forcedReturnType,
+        type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime',
         timezone: timeZone
       }));
     }
@@ -1201,6 +1207,7 @@ exports.convertValueToType = convertValueToType;
 exports.createCalendar = createCalendar;
 exports.focusSegment = focusSegment;
 exports.getWeekNumberForDate = getWeekNumberForDate;
+exports.handleOnChange = handleOnChange;
 exports.lastMillisecondOfDay = lastMillisecondOfDay;
 exports.modulo = modulo;
 exports.nativeDateToDateValue = nativeDateToDateValue;