@entur/datepicker 4.0.0-RC.1 → 4.0.0-RC.2

package/dist/datepicker.esm.js

@@ -18,57 +18,47 @@ import { space, zIndexes } from '@entur/tokens';
 import { Modal } from '@entur/modal';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
 var FieldSegment = function FieldSegment(_ref) {
   var segment = _ref.segment,
-      state = _ref.state;
+    state = _ref.state;
   var ref = useRef(null);
-
   var _useDateSegment = useDateSegment(segment, state, ref),
-      segmentProps = _useDateSegment.segmentProps;
-
+    segmentProps = _useDateSegment.segmentProps;
   var is12HourFormatted = state.segments.some(function (segment) {
     return segment.text === 'AM' || segment.text === 'PM';
   });
-
   var segmentDisplayText = function segmentDisplayText() {
-    if (is12HourFormatted) return segment.text; // if number add '0' padding to start when one digit
-
+    if (is12HourFormatted) return segment.text;
+    // if number add '0' padding to start when one digit
     if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
     return segment.text;
   };
-
   return React.createElement("div", _extends({}, segmentProps, {
     ref: ref,
     className: classNames('eds-date-and-time-field__segment', {
@@ -88,24 +78,19 @@ var FieldSegment = function FieldSegment(_ref) {
  * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
  * @returns {Time | CalendarDateTime | ZonedDateTime | CalendarDate} et av Time- eller DateValue-objektene med verdier fra date
  */
-
 var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date, noDateOnlyTime, noTimeOnlyDate, timeZone, offset) {
   if (noDateOnlyTime === void 0) {
     noDateOnlyTime = false;
   }
-
   if (noTimeOnlyDate === void 0) {
     noTimeOnlyDate = false;
   }
-
   if (timeZone) {
     if (offset) {
       return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
     }
-
     return parseAbsolute(date.toISOString(), timeZone);
   }
-
   if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
   if (noTimeOnlyDate) return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
   return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
@@ -117,54 +102,55 @@ var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date, noD
  * @returns {Date} et Date-objekt med verdier fra time
  */
 // This function uses a lot of @ts-expect-error to make it work with all Date- and TimeValue types. Sorry ...
-
 var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
   // @ts-expect-error .day does not exist on Time-object
   if (!value.day) {
     // type is Time
-    var date = new Date(); // @ts-expect-error hour does not exist on CalendarDate
-
-    date.setHours(value.hour); // @ts-expect-error minute does not exist on CalendarDate
-
-    date.setMinutes(value.minute); // @ts-expect-error second does not exist on CalendarDate
-
+    var date = new Date();
+    // @ts-expect-error hour does not exist on CalendarDate
+    date.setHours(value.hour);
+    // @ts-expect-error minute does not exist on CalendarDate
+    date.setMinutes(value.minute);
+    // @ts-expect-error second does not exist on CalendarDate
     date.setSeconds(value.second);
     return date;
-  } // @ts-expect-error .day does not exist on Time-object
-
-
+  }
+  // @ts-expect-error .day does not exist on Time-object
   if (!value.hour) {
     // type is CalendarDate
     // @ts-expect-error .toDate(timeZone) does not exist in type Time
     return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : getLocalTimeZone());
-  } // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
-
-
+  }
+  // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
   if (!value.timeZone) {
     // type is CalendarDateTime
-    if (timeZoneForCalendarDateTime) // @ts-expect-error .toDate(timeZone) does not exist in type Time
+    if (timeZoneForCalendarDateTime)
+      // @ts-expect-error .toDate(timeZone) does not exist in type Time
       return value.toDate(timeZoneForCalendarDateTime);
-    return new Date( // @ts-expect-error not in type Time
-    value.year, // @ts-expect-error not in type Time
-    value.month - 1, // @ts-expect-error not in type Time
-    value.day, // @ts-expect-error not in type CalendarDate
-    value.hour, // @ts-expect-error not in type CalendarDate
-    value.minute, // @ts-expect-error not in type CalendarDate
+    return new Date(
+    // @ts-expect-error not in type Time
+    value.year,
+    // @ts-expect-error not in type Time
+    value.month - 1,
+    // @ts-expect-error not in type Time
+    value.day,
+    // @ts-expect-error not in type CalendarDate
+    value.hour,
+    // @ts-expect-error not in type CalendarDate
+    value.minute,
+    // @ts-expect-error not in type CalendarDate
     value.second);
-  } // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
-
-
+  }
+  // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
   return value.toDate();
 };
 var createCalendar = function createCalendar(identifier) {
   if (identifier === void 0) {
     identifier = 'gregory';
   }
-
   switch (identifier) {
     case 'gregory':
       return new GregorianCalendar();
-
     default:
       throw new Error("Unsupported calendar " + identifier);
   }
@@ -177,29 +163,27 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
 var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
-      label = _ref.label,
-      customLocale = _ref.locale,
-      showTimeZone = _ref.showTimeZone,
-      showTime = _ref.showTime,
-      _ref$granularity = _ref.granularity,
-      granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
-      disabled = _ref.disabled,
-      variant = _ref.variant,
-      feedback = _ref.feedback,
-      _ref$validationVarian = _ref.validationVariant,
-      validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
-      _ref$validationFeedba = _ref.validationFeedback,
-      validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
-      labelTooltip = _ref.labelTooltip,
-      style = _ref.style,
-      className = _ref.className,
-      parentLabelProps = _ref.labelProps,
-      append = _ref.append,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
+    label = _ref.label,
+    customLocale = _ref.locale,
+    showTimeZone = _ref.showTimeZone,
+    showTime = _ref.showTime,
+    _ref$granularity = _ref.granularity,
+    granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
+    disabled = _ref.disabled,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    _ref$validationVarian = _ref.validationVariant,
+    validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
+    _ref$validationFeedba = _ref.validationFeedback,
+    validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
+    labelTooltip = _ref.labelTooltip,
+    style = _ref.style,
+    className = _ref.className,
+    parentLabelProps = _ref.labelProps,
+    append = _ref.append,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var state = useDateFieldState(_extends({}, rest, {
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
@@ -208,14 +192,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     granularity: showTime ? 'minute' : granularity
   }));
   var dateFieldRef = useRef(null);
-
   var _useDateField = useDateField(_extends({}, rest, {
-    label: label,
-    isDisabled: disabled || rest.isDisabled
-  }), state, dateFieldRef),
-      labelProps = _useDateField.labelProps,
-      fieldProps = _useDateField.fieldProps;
-
+      label: label,
+      isDisabled: disabled || rest.isDisabled
+    }), state, dateFieldRef),
+    labelProps = _useDateField.labelProps,
+    fieldProps = _useDateField.fieldProps;
   var id = useRandomId('datefield');
   return React.createElement(ConditionalWrapper, {
     condition: customLocale !== undefined,
@@ -251,15 +233,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 var _excluded$7 = ["children", "className", "style"];
 var CalendarButton = function CalendarButton(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var ref = useRef(null);
-
   var _useButton = useButton(props, ref),
-      buttonProps = _useButton.buttonProps;
-
+    buttonProps = _useButton.buttonProps;
   return React.createElement(IconButton, _extends({}, buttonProps, {
     ref: ref,
     className: className,
@@ -270,28 +249,24 @@ var CalendarButton = function CalendarButton(_ref) {
 var _excluded$6 = ["state", "date", "onSelectedCellClick"];
 var CalendarCell = function CalendarCell(_ref) {
   var _state$timeZone;
-
   var state = _ref.state,
-      date = _ref.date,
-      _ref$onSelectedCellCl = _ref.onSelectedCellClick,
-      onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
-    return;
-  } : _ref$onSelectedCellCl,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
+    date = _ref.date,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var cellRef = useRef(null);
-
   var _useCalendarCell = useCalendarCell({
-    date: date
-  }, state, cellRef),
-      cellProps = _useCalendarCell.cellProps,
-      buttonProps = _useCalendarCell.buttonProps,
-      isSelected = _useCalendarCell.isSelected,
-      isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
-      isDisabled = _useCalendarCell.isDisabled,
-      isUnavailable = _useCalendarCell.isUnavailable,
-      formattedDate = _useCalendarCell.formattedDate;
-
+      date: date
+    }, state, cellRef),
+    cellProps = _useCalendarCell.cellProps,
+    buttonProps = _useCalendarCell.buttonProps,
+    isSelected = _useCalendarCell.isSelected,
+    isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
+    isDisabled = _useCalendarCell.isDisabled,
+    isUnavailable = _useCalendarCell.isUnavailable,
+    formattedDate = _useCalendarCell.formattedDate;
   return React.createElement("td", _extends({}, cellProps, {
     className: "eds-datepicker__calendar__grid__cell__td"
   }), React.createElement("div", _extends({}, buttonProps, {
@@ -314,26 +289,21 @@ var CalendarCell = function CalendarCell(_ref) {
 var _excluded$5 = ["state", "navigationDescription", "onSelectedCellClick"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
-      navigationDescription = _ref.navigationDescription,
-      _ref$onSelectedCellCl = _ref.onSelectedCellClick,
-      onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
-    return;
-  } : _ref$onSelectedCellCl,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-
+    navigationDescription = _ref.navigationDescription,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var calendarGridId = useRandomId('eds-calendar');
-
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var _useCalendarGrid = useCalendarGrid(rest, state),
-      gridProps = _useCalendarGrid.gridProps,
-      headerProps = _useCalendarGrid.headerProps,
-      weekDays = _useCalendarGrid.weekDays;
-
+    gridProps = _useCalendarGrid.gridProps,
+    headerProps = _useCalendarGrid.headerProps,
+    weekDays = _useCalendarGrid.weekDays;
   var weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   var weeksArray = Array.from(Array(weeksInMonth).keys());
-
   var weekDaysMapped = function weekDaysMapped() {
     if (locale.toLowerCase() === 'no-no' || locale.toLowerCase() === 'no') return ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'];
     if (weekDays.toString() === 'M,T,W,T,F,S,S') return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
@@ -341,13 +311,11 @@ var CalendarGrid = function CalendarGrid(_ref) {
       return day.toLowerCase();
     });
   };
-
   var getNavigationDescription = function getNavigationDescription() {
     if (navigationDescription) return navigationDescription;
     if (locale.toLowerCase().includes('en')) return 'Use the arrow keys to navigate between dates';
     return 'Bruk piltastene til å navigere mellom datoer';
   };
-
   return React.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
     cellSpacing: "0",
     className: "eds-datepicker__calendar__grid"
@@ -377,30 +345,26 @@ var CalendarGrid = function CalendarGrid(_ref) {
 var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-      customLocale = _ref.locale,
-      style = _ref.style,
-      navigationDescription = _ref.navigationDescription,
-      _ref$onSelectedCellCl = _ref.onSelectedCellClick,
-      onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
-    return;
-  } : _ref$onSelectedCellCl,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
+    customLocale = _ref.locale,
+    style = _ref.style,
+    navigationDescription = _ref.navigationDescription,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var state = useCalendarState(_extends({}, rest, {
     onChange: onChange,
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar
   }));
-
   var _useCalendar = useCalendar(rest, state),
-      calendarProps = _useCalendar.calendarProps,
-      prevButtonProps = _useCalendar.prevButtonProps,
-      nextButtonProps = _useCalendar.nextButtonProps,
-      title = _useCalendar.title;
-
+    calendarProps = _useCalendar.calendarProps,
+    prevButtonProps = _useCalendar.prevButtonProps,
+    nextButtonProps = _useCalendar.nextButtonProps,
+    title = _useCalendar.title;
   return React.createElement(ConditionalWrapper, {
     condition: customLocale,
     wrapper: function wrapper(child) {
@@ -432,83 +396,74 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold"];
 var DatePicker = function DatePicker(_ref) {
   var value = _ref.selectedDate,
-      onChange = _ref.onChange,
-      locale = _ref.locale,
-      isDisabled = _ref.disabled,
-      showTime = _ref.showTime,
-      _ref$showTimeZone = _ref.showTimeZone,
-      showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
-      className = _ref.className,
-      variant = _ref.variant,
-      feedback = _ref.feedback,
-      validationVariant = _ref.validationVariant,
-      validationFeedback = _ref.validationFeedback,
-      _ref$disableModal = _ref.disableModal,
-      disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
-      labelTooltip = _ref.labelTooltip,
-      navigationDescription = _ref.navigationDescription,
-      minValue = _ref.minDate,
-      maxValue = _ref.maxDate,
-      _ref$modalTreshold = _ref.modalTreshold,
-      modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+    onChange = _ref.onChange,
+    locale = _ref.locale,
+    isDisabled = _ref.disabled,
+    showTime = _ref.showTime,
+    _ref$showTimeZone = _ref.showTimeZone,
+    showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
+    className = _ref.className,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    validationVariant = _ref.validationVariant,
+    validationFeedback = _ref.validationFeedback,
+    _ref$disableModal = _ref.disableModal,
+    disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
+    labelTooltip = _ref.labelTooltip,
+    navigationDescription = _ref.navigationDescription,
+    minValue = _ref.minDate,
+    maxValue = _ref.maxDate,
+    _ref$modalTreshold = _ref.modalTreshold,
+    modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = useRef(null);
   var calendarRef = useRef(null);
   var dateFieldRef = useRef(null);
-
   var _useWindowDimensions = useWindowDimensions(),
-      width = _useWindowDimensions.width;
-
+    width = _useWindowDimensions.width;
   var state = useDatePickerState(_extends({}, rest, {
     minValue: minValue,
     maxValue: maxValue,
     value: value,
     onChange: onChange
   }));
-
   var _useDatePicker = useDatePicker(_extends({
-    isDisabled: isDisabled,
-    minValue: minValue,
-    maxValue: maxValue,
-    autoFocus: true
-  }, rest), state, datePickerRef),
-      groupProps = _useDatePicker.groupProps,
-      labelProps = _useDatePicker.labelProps,
-      fieldProps = _useDatePicker.fieldProps,
-      buttonProps = _useDatePicker.buttonProps,
-      dialogProps = _useDatePicker.dialogProps,
-      calendarProps = _useDatePicker.calendarProps; // calculations for floating-UI popover position
-
-
+      isDisabled: isDisabled,
+      minValue: minValue,
+      maxValue: maxValue
+    }, rest), state, datePickerRef),
+    groupProps = _useDatePicker.groupProps,
+    labelProps = _useDatePicker.labelProps,
+    fieldProps = _useDatePicker.fieldProps,
+    buttonProps = _useDatePicker.buttonProps,
+    dialogProps = _useDatePicker.dialogProps,
+    calendarProps = _useDatePicker.calendarProps;
+  // calculations for floating-UI popover position
   var _useFloating = useFloating({
-    whileElementsMounted: autoUpdate,
-    placement: 'bottom-start',
-    middleware: [offset(space.extraSmall), flip(), shift({
-      padding: space.extraSmall
-    })]
-  }),
-      x = _useFloating.x,
-      y = _useFloating.y,
-      reference = _useFloating.reference,
-      floating = _useFloating.floating,
-      strategy = _useFloating.strategy;
-
+      whileElementsMounted: autoUpdate,
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall), flip(), shift({
+        padding: space.extraSmall
+      })]
+    }),
+    x = _useFloating.x,
+    y = _useFloating.y,
+    reference = _useFloating.reference,
+    floating = _useFloating.floating,
+    strategy = _useFloating.strategy;
   var onChangeCalendar = function onChangeCalendar(newSelectedDate) {
     // Necessary to avoid state update on unmounted component
     requestAnimationFrame(function () {
       calendarProps.onChange && calendarProps.onChange(newSelectedDate);
     });
   };
-
   useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
   });
   useOnEscape(calendarRef, function () {
     state.setOpen(false);
   });
-
   var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
     disabled: calendarProps.isDisabled,
     navigationDescription: navigationDescription,
@@ -517,7 +472,6 @@ var DatePicker = function DatePicker(_ref) {
     },
     onChange: onChangeCalendar
   });
-
   var useModal = width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
     // styling for floating-UI popover
@@ -586,21 +540,20 @@ var DatePicker = function DatePicker(_ref) {
 };
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
-    _excluded2$1 = ["onChange", "variant", "value"];
+  _excluded2$1 = ["onChange", "variant", "value"];
 var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      style = _ref.style,
-      label = _ref.label,
-      onChange = _ref.onChange,
-      feedback = _ref.feedback,
-      variant = _ref.variant,
-      disableLabelAnimation = _ref.disableLabelAnimation,
-      _ref$prepend = _ref.prepend,
-      prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
-    inline: true
-  }) : _ref$prepend,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
+    style = _ref.style,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    feedback = _ref.feedback,
+    variant = _ref.variant,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    _ref$prepend = _ref.prepend,
+    prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
+      inline: true
+    }) : _ref$prepend,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var nativedatepickerId = useRandomId('eds-nativetimepicker');
   return React.createElement(BaseFormControl, {
     style: style,
@@ -621,17 +574,14 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
-      variant = _ref2.variant,
-      value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-
+    variant = _ref2.variant,
+    value = _ref2.value,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
-
   var _useInputGroupContext = useInputGroupContext(),
-      isDatepickerFilled = _useInputGroupContext.isFilled,
-      setFiller = _useInputGroupContext.setFilled;
-
+    isDatepickerFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
   useOnMount(function () {
     setFiller && !isDatepickerFilled && setFiller(true);
   });
@@ -642,19 +592,16 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       setFiller && isDatepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isDatepickerFilled]);
-
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
       setFiller && isDatepickerFilled && setFiller(false);
     }
-
     if (onChange) {
       onChange(event);
     }
   };
-
   return React.createElement("input", _extends({
     ref: ref,
     "aria-invalid": currentVariant === 'error',
@@ -667,9 +614,9 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 
 var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   var direction = _ref.direction,
-      onClick = _ref.onClick,
-      disabled = _ref.disabled,
-      ariaLabel = _ref['aria-label'];
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    ariaLabel = _ref['aria-label'];
   return React.createElement(IconButton, {
     className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
       'eds-timepicker__arrowbutton--disabled': disabled
@@ -685,27 +632,25 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
 var _excluded$1 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel"];
 var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedTime = _ref.selectedTime,
-      onChange = _ref.onChange,
-      disabled = _ref.disabled,
-      className = _ref.className,
-      style = _ref.style,
-      label = _ref.label,
-      labelTooltip = _ref.labelTooltip,
-      feedback = _ref.feedback,
-      variant = _ref.variant,
-      customLocale = _ref.locale,
-      showTimeZone = _ref.showTimeZone,
-      _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
-      minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
-      _ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
-      leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
-      _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
-      rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    style = _ref.style,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    feedback = _ref.feedback,
+    variant = _ref.variant,
+    customLocale = _ref.locale,
+    showTimeZone = _ref.showTimeZone,
+    _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
+    minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
+    _ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
+    leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
+    _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
+    rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   if (customLocale) locale = customLocale;
   var state = useTimeFieldState(_extends({
     onChange: onChange,
@@ -716,15 +661,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isDisabled: disabled
   }, rest));
   var timeFieldRef = useRef(null);
-
   var _useTimeField = useTimeField(_extends({}, rest, {
-    label: label
-  }), state, timeFieldRef),
-      labelProps = _useTimeField.labelProps,
-      fieldProps = _useTimeField.fieldProps;
-
+      label: label
+    }), state, timeFieldRef),
+    labelProps = _useTimeField.labelProps,
+    fieldProps = _useTimeField.fieldProps;
   var id = useRandomId('timepicker');
-
   var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
     if (someSegmentIsUndefined) {
       setTimeToNearestMinuteIncrement();
@@ -732,11 +674,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       addMinutesToSelectedTime(minutes);
     }
   };
-
   var someSegmentIsUndefined = state.segments.some(function (segment) {
     return segment.text === '––';
   });
-
   var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
     var currentTime = now(getLocalTimeZone());
     var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
@@ -745,15 +685,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
     onChange(newTime);
   };
-
   var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
     var _state$value;
-
     state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
       minutes: minutes
     }));
   };
-
   return React.createElement(I18nProvider, {
     locale: locale
   }, React.createElement("div", {
@@ -795,17 +732,16 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 
 var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
-    _excluded2 = ["onChange", "value"];
+  _excluded2 = ["onChange", "value"];
 var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      style = _ref.style,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      feedback = _ref.feedback,
-      variant = _ref.variant,
-      prepend = _ref.prepend,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    style = _ref.style,
+    onChange = _ref.onChange,
+    label = _ref.label,
+    feedback = _ref.feedback,
+    variant = _ref.variant,
+    prepend = _ref.prepend,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var nativetimepickerId = useRandomId('eds-native-timepicker');
   return React.createElement(BaseFormControl, {
     style: style,
@@ -824,16 +760,13 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
-      value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
+    value = _ref2.value,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   var contextVariant = useVariant();
   var currentVariant = rest.variant || contextVariant;
-
   var _useInputGroupContext = useInputGroupContext(),
-      isTimepickerFilled = _useInputGroupContext.isFilled,
-      setFiller = _useInputGroupContext.setFilled;
-
+    isTimepickerFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
   useOnMount(function () {
     setFiller && !isTimepickerFilled && setFiller(true);
   });
@@ -844,19 +777,16 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       setFiller && isTimepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isTimepickerFilled]);
-
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
       setFiller && isTimepickerFilled && setFiller(false);
     }
-
     if (onChange) {
       onChange(event);
     }
   };
-
   return React.createElement("input", _extends({
     ref: ref,
     "aria-invalid": currentVariant === 'error',