@entur/datepicker 0.10.8 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.11.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@0.10.8...@entur/datepicker@0.11.0) (2022-02-09)
+
+### Features
+
+- **date picker:** add visual date validation to date picker and hideCalendar prop ([aae7cbf](https://bitbucket.org/enturas/design-system/commits/aae7cbfe4e02c1e5ebc676c1e083f74c54bafbbb))
+
+### BREAKING CHANGES
+
+- **date picker:** - Validation icon introduces visual changes. Use hideFeedback to remove.
+
+* dateFormat prop removed
+
 ## [0.10.8](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@0.10.7...@entur/datepicker@0.10.8) (2022-01-21)
 
 **Note:** Version bump only for package @entur/datepicker

package/dist/DatePicker.d.ts

@@ -8,16 +8,20 @@ export declare type DatePickerProps = {
     /** Kalles når datoen/tiden endres */
     onChange: (date: Date | null, event: React.SyntheticEvent<any, Event>) => void;
     /** Placeholder om ingen dato er valgt
-     * @default "Velg dato"
+     * @default "dd.mm.yyyy"
      */
     placeholder?: string;
     /** Ekstra klassenavn */
     className?: string;
     /** Label over DatePicker */
     label: string;
-    /** Varselmelding, som vil komme under DatePicker */
+    /** Varselmelding, som vil komme under DatePicker
+     * @default "Ugyldig dato"
+     */
     feedback?: string;
-    /** Valideringsvariant */
+    /** Valideringsvariant
+     * @default "error"
+     */
     variant?: VariantType;
     style?: React.CSSProperties;
     /** Plasserer labelen statisk på toppen av inputfeltet
@@ -32,6 +36,14 @@ export declare type DatePickerProps = {
      * @default false
      */
     hideCalendarButton?: boolean;
+    /** Skjuler tilbakemeldingsteksten ved feil dato-input
+     * @default false
+     */
+    hideFeedback?: boolean;
+    /** Skjuler kalender-GUI-et
+     * @default false
+     */
+    hideCalendar?: boolean;
     'data-cy'?: any;
 } & Omit<ReactDatePickerProps, 'selected' | 'customInput'>;
 export declare const DatePicker: React.ForwardRefExoticComponent<{
@@ -40,17 +52,21 @@ export declare const DatePicker: React.ForwardRefExoticComponent<{
     /** Kalles når datoen/tiden endres */
     onChange: (date: Date | null, event: React.SyntheticEvent<any, Event>) => void;
     /** Placeholder om ingen dato er valgt
-     * @default "Velg dato"
+     * @default "dd.mm.yyyy"
      */
     placeholder?: string | undefined;
     /** Ekstra klassenavn */
     className?: string | undefined;
     /** Label over DatePicker */
     label: string;
-    /** Varselmelding, som vil komme under DatePicker */
+    /** Varselmelding, som vil komme under DatePicker
+     * @default "Ugyldig dato"
+     */
     feedback?: string | undefined;
-    /** Valideringsvariant */
-    variant?: "success" | "error" | "warning" | "info" | undefined;
+    /** Valideringsvariant
+     * @default "error"
+     */
+    variant?: VariantType | undefined;
     style?: React.CSSProperties | undefined;
     /** Plasserer labelen statisk på toppen av inputfeltet
      * @default false
@@ -64,5 +80,13 @@ export declare const DatePicker: React.ForwardRefExoticComponent<{
      * @default false
      */
     hideCalendarButton?: boolean | undefined;
+    /** Skjuler tilbakemeldingsteksten ved feil dato-input
+     * @default false
+     */
+    hideFeedback?: boolean | undefined;
+    /** Skjuler kalender-GUI-et
+     * @default false
+     */
+    hideCalendar?: boolean | undefined;
     'data-cy'?: any;
-} & Pick<ReactDatePickerProps<never>, "adjustDateOnChange" | "allowSameDay" | "ariaDescribedBy" | "ariaInvalid" | "ariaLabelClose" | "ariaLabelledBy" | "ariaRequired" | "autoComplete" | "autoFocus" | "calendarClassName" | "calendarContainer" | "calendarStartDay" | "children" | "chooseDayAriaLabelPrefix" | "className" | "clearButtonClassName" | "clearButtonTitle" | "closeOnScroll" | "customInputRef" | "customTimeInput" | "dateFormat" | "dateFormatCalendar" | "dayClassName" | "weekDayClassName" | "monthClassName" | "timeClassName" | "disabledDayAriaLabelPrefix" | "disabled" | "disabledKeyboardNavigation" | "dropdownMode" | "endDate" | "excludeDates" | "excludeTimes" | "filterDate" | "filterTime" | "fixedHeight" | "forceShowMonthNavigation" | "formatWeekDay" | "formatWeekNumber" | "highlightDates" | "id" | "includeDates" | "includeTimes" | "injectTimes" | "inline" | "focusSelectedMonth" | "isClearable" | "locale" | "maxDate" | "maxTime" | "minDate" | "minTime" | "monthsShown" | "name" | "nextMonthButtonLabel" | "nextYearButtonLabel" | "onBlur" | "onCalendarClose" | "onCalendarOpen" | "onChange" | "onChangeRaw" | "onClickOutside" | "onDayMouseEnter" | "onFocus" | "onInputClick" | "onInputError" | "onKeyDown" | "onMonthChange" | "onMonthMouseLeave" | "onSelect" | "onWeekSelect" | "onYearChange" | "open" | "openToDate" | "peekNextMonth" | "placeholderText" | "popperClassName" | "popperContainer" | "popperModifiers" | "popperPlacement" | "popperProps" | "preventOpenOnFocus" | "previousMonthButtonLabel" | "previousYearButtonLabel" | "readOnly" | "renderCustomHeader" | "renderDayContents" | "required" | "scrollableMonthYearDropdown" | "scrollableYearDropdown" | "selectsEnd" | "selectsStart" | "selectsRange" | "shouldCloseOnSelect" | "showDisabledMonthNavigation" | "showFullMonthYearPicker" | "showMonthDropdown" | "showMonthYearDropdown" | "showMonthYearPicker" | "showPopperArrow" | "showPreviousMonths" | "showQuarterYearPicker" | "showTimeInput" | "showTimeSelect" | "showTimeSelectOnly" | "showTwoColumnMonthYearPicker" | "showFourColumnMonthYearPicker" | "showWeekNumbers" | "showYearDropdown" | "showYearPicker" | "startDate" | "startOpen" | "strictParsing" | "tabIndex" | "timeCaption" | "timeFormat" | "timeInputLabel" | "timeIntervals" | "title" | "todayButton" | "useShortMonthInDropdown" | "useWeekdaysShort" | "weekAriaLabelPrefix" | "value" | "weekLabel" | "withPortal" | "portalId" | "wrapperClassName" | "yearDropdownItemNumber" | "excludeScrollbar" | "enableTabLoop" | "yearItemNumber"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<ReactDatePickerProps<never>, "selected" | "customInput"> & React.RefAttributes<HTMLInputElement>>;

package/dist/NativeDatePicker.d.ts

@@ -26,7 +26,7 @@ export declare const NativeDatePicker: React.ForwardRefExoticComponent<{
     /** Varselmelding, som vil komme under NativeDatePicker */
     feedback?: string | undefined;
     /** Valideringsvariant */
-    variant?: "success" | "error" | "warning" | "info" | undefined;
+    variant?: VariantType | undefined;
     /** Plasserer labelen statisk på toppen av inputfeltet
      * @default false
      */

package/dist/NativeTimePicker.d.ts

@@ -26,7 +26,7 @@ export declare const NativeTimePicker: React.ForwardRefExoticComponent<{
     /** Varselmelding, som vil komme under NativeTimePicker */
     feedback?: string | undefined;
     /** Valideringsvariant */
-    variant?: "success" | "error" | "warning" | "info" | undefined;
+    variant?: VariantType | undefined;
     /** Plasserer labelen statisk på toppen av inputfeltet
      * @default false
      */

package/dist/TimePicker.d.ts

@@ -50,7 +50,7 @@ export declare const TimePicker: React.ForwardRefExoticComponent<{
     /** Varselmelding, som vil komme under TimePicker */
     feedback?: string | undefined;
     /** Valideringsvariant */
-    variant?: "success" | "error" | "warning" | "info" | undefined;
+    variant?: VariantType | undefined;
     style?: React.CSSProperties | undefined;
     labelTooltip?: React.ReactNode;
     /** Plasserer labelen statisk på toppen av inputfeltet

package/dist/datepicker.cjs.development.js

@@ -2,18 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var utils = require('@entur/utils');
-var React = _interopDefault(require('react'));
+var React = require('react');
 var ReactDatepicker = require('react-datepicker');
-var ReactDatepicker__default = _interopDefault(ReactDatepicker);
-var classNames = _interopDefault(require('classnames'));
+var classNames = require('classnames');
 var form = require('@entur/form');
 var icons = require('@entur/icons');
+var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var tooltip = require('@entur/tooltip');
-var dateFns = require('date-fns');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDatepicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatepicker);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+function _extends() {
+  _extends = Object.assign || 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 {};
@@ -30,38 +51,56 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$3 = ["selectedDate", "onChange", "placeholder", "className", "style", "readOnly", "disableLabelAnimation", "locale", "prepend", "disabled", "variant", "feedback", "label", "hideCalendarButton", "hideCalendar", "hideFeedback", "id"],
+    _excluded2$3 = ["value", "onClick", "onFocus", "onKeyDown", "variant", "feedback", "style", "disableLabelAnimation", "disabled", "label", "readOnly", "id", "prepend", "className", "hideCalendarButton", "inputId", "onKeyDownInput", "onBlurInput"];
 ReactDatepicker.registerLocale('nb', locale.nb);
-var POPPER_MODIFIERS = [{
+var POPPER_MODIFIERS$1 = [{
   name: 'offset',
   enabled: true,
   options: {
     offset: [0, 0]
   }
 }];
-var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$selectedDate = _ref.selectedDate,
       selectedDate = _ref$selectedDate === void 0 ? null : _ref$selectedDate,
       onChange = _ref.onChange,
       _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Velg dato' : _ref$placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'dd.mm.yyyy' : _ref$placeholder,
       className = _ref.className,
       style = _ref.style,
       readOnly = _ref.readOnly,
       _ref$disableLabelAnim = _ref.disableLabelAnimation,
       disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
       _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? 'nb' : _ref$locale,
+      locale$1 = _ref$locale === void 0 ? 'nb' : _ref$locale,
       prepend = _ref.prepend,
       disabled = _ref.disabled,
-      _ref$dateFormat = _ref.dateFormat,
-      dateFormat = _ref$dateFormat === void 0 ? ['dd.MM.yyyy', 'ddMMyyyy'] : _ref$dateFormat,
-      variant = _ref.variant,
-      feedback = _ref.feedback,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'error' : _ref$variant,
+      _ref$feedback = _ref.feedback,
+      feedback = _ref$feedback === void 0 ? 'Ugyldig dato' : _ref$feedback,
       label = _ref.label,
       _ref$hideCalendarButt = _ref.hideCalendarButton,
       hideCalendarButton = _ref$hideCalendarButt === void 0 ? false : _ref$hideCalendarButt,
+      _ref$hideCalendar = _ref.hideCalendar,
+      hideCalendar = _ref$hideCalendar === void 0 ? false : _ref$hideCalendar,
+      _ref$hideFeedback = _ref.hideFeedback,
+      hideFeedback = _ref$hideFeedback === void 0 ? false : _ref$hideFeedback,
       id = _ref.id,
-      rest = _objectWithoutPropertiesLoose(_ref, ["selectedDate", "onChange", "placeholder", "className", "style", "readOnly", "disableLabelAnimation", "locale", "prepend", "disabled", "dateFormat", "variant", "feedback", "label", "hideCalendarButton", "id"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  var _useState = React.useState(false),
+      showFeedback = _useState[0],
+      setShowFeedback = _useState[1];
+
+  var _useState2 = React.useState(''),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  var _useState3 = React.useState(''),
+      lastValidValue = _useState3[0],
+      setLastValidValue = _useState3[1];
 
   var datepickerId = utils.useRandomId('eds-datepicker');
 
@@ -74,7 +113,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setFiller && !isDatepickerFilled && setFiller(true);
     }
   });
-  React.useEffect(function () {
+  React__default["default"].useEffect(function () {
     if (selectedDate) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
@@ -91,30 +130,78 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     if (onChange) {
       onChange(date, event);
+      var dateString = date == null ? void 0 : date.toLocaleDateString('no-NO', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+      });
+      setCurrentValue(dateString != null ? dateString : '');
+      setLastValidValue(dateString != null ? dateString : '');
     }
   };
 
-  return React.createElement(ReactDatepicker__default, Object.assign({
-    className: classNames(className),
+  var handleChangeRaw = function handleChangeRaw(event) {
+    setShowFeedback(false);
+    setCurrentValue(event.target.value);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    if (showFeedback) {
+      setShowFeedback(false);
+    } else {
+      var inputValue = event.target.value;
+      if (inputValue) validateInput(inputValue);
+    }
+  };
+
+  var handleKeyDownInput = function handleKeyDownInput(event) {
+    if (event.key === 'Enter') validateInput(currentValue);
+  };
+
+  var validateInput = function validateInput(inputValue) {
+    var parsedDate = dateFns.parse(inputValue, 'dd.MM.yyyy', new Date(), {
+      locale: locale.nb
+    });
+    var yearIsFourCharacters = currentValue.slice(currentValue.lastIndexOf('.') + 1).length === 4;
+    var isValidDate = dateFns.isValid(parsedDate) && yearIsFourCharacters;
+
+    if (!isValidDate) {
+      setShowFeedback(true);
+      setCurrentValue(lastValidValue);
+    } else {
+      setShowFeedback(false);
+      setLastValidValue(currentValue);
+    }
+  };
+
+  return React__default["default"].createElement(ReactDatepicker__default["default"], _extends({
+    className: classNames__default["default"](className),
     calendarClassName: "eds-datepicker__calender",
     selected: selectedDate,
     onChange: handleChange,
     showWeekNumbers: true,
-    dateFormat: dateFormat,
+    dateFormat: ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy'],
     showPopperArrow: false,
     placeholderText: placeholder,
     readOnly: readOnly,
     id: datepickerId,
     ariaLabelledBy: datepickerId,
     disabled: disabled,
-    locale: locale,
-    popperModifiers: POPPER_MODIFIERS
+    locale: locale$1,
+    popperModifiers: POPPER_MODIFIERS$1,
+    onBlur: handleBlur,
+    onChangeRaw: handleChangeRaw,
+    onCalendarOpen: function onCalendarOpen() {
+      return setShowFeedback(false);
+    },
+    value: currentValue,
+    open: hideCalendar === true ? false : rest.open
   }, rest, {
-    customInput: React.createElement(DatePickerInput, {
+    customInput: React__default["default"].createElement(DatePickerInput, {
       style: style,
       readOnly: readOnly,
-      variant: variant,
-      feedback: feedback,
+      variant: !hideFeedback && showFeedback ? variant : '',
+      feedback: !hideFeedback && showFeedback ? feedback : '',
       label: label,
       disabled: disabled,
       ref: ref,
@@ -122,7 +209,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disableLabelAnimation: disableLabelAnimation,
       prepend: prepend,
       hideCalendarButton: hideCalendarButton,
-      inputId: id
+      inputId: id,
+      onKeyDownInput: handleKeyDownInput,
+      onBlurInput: handleBlur
     })
   }));
 }); // Props fra customInput i react-datepicker
@@ -148,7 +237,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 // "aria-labelledby": this.props.ariaLabelledBy,
 // "aria-required": this.props.ariaRequired,
 
-var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
   var value = _ref2.value,
       onClick = _ref2.onClick,
       onKeyDown = _ref2.onKeyDown,
@@ -164,11 +253,14 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       className = _ref2.className,
       hideCalendarButton = _ref2.hideCalendarButton,
       inputId = _ref2.inputId,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["value", "onClick", "onFocus", "onKeyDown", "variant", "feedback", "style", "disableLabelAnimation", "disabled", "label", "readOnly", "id", "prepend", "className", "hideCalendarButton", "inputId"]);
+      onKeyDownInput = _ref2.onKeyDownInput,
+      onBlurInput = _ref2.onBlurInput,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
 
-  return React.createElement("span", {
-    className: className
-  }, React.createElement(form.BaseFormControl, {
+  return React__default["default"].createElement("span", {
+    className: className,
+    onBlur: onBlurInput
+  }, React__default["default"].createElement(form.BaseFormControl, {
     style: style,
     className: "eds-datepicker__form-control",
     readOnly: readOnly,
@@ -180,7 +272,7 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disableLabelAnimation: disableLabelAnimation,
     isFilled: value ? true : false,
     prepend: prepend
-  }, React.createElement("input", Object.assign({
+  }, React__default["default"].createElement("input", _extends({
     value: value,
     onClick: onClick,
     readOnly: readOnly,
@@ -188,14 +280,15 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     ref: ref,
     // aria-labelledby={id}
     className: "eds-form-control",
-    id: inputId
-  }, rest)), !hideCalendarButton && React.createElement(tooltip.Tooltip, {
+    id: inputId,
+    onKeyDown: onKeyDownInput
+  }, rest)), !hideCalendarButton && React__default["default"].createElement(tooltip.Tooltip, {
     placement: "top",
     content: "\xC5pne kalender",
     disableHoverListener: disabled,
     disableFocusListener: disabled
-  }, React.createElement("button", {
-    className: classNames('eds-datepicker__calendar-button', {
+  }, React__default["default"].createElement("button", {
+    className: classNames__default["default"]('eds-datepicker__calendar-button', {
       'eds-datepicker__calendar-button--open': true,
       'eds-datepicker__calendar-button--disabled': disabled
     }),
@@ -203,10 +296,12 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onClick: onClick,
     disabled: disabled,
     type: "button"
-  }, React.createElement(icons.CalendarIcon, null)))));
+  }, React__default["default"].createElement(icons.CalendarIcon, null)))));
 });
 
-var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
+    _excluded2$2 = ["onChange", "variant", "value"];
+var NativeDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       style = _ref.style,
       label = _ref.label,
@@ -215,13 +310,13 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       variant = _ref.variant,
       disableLabelAnimation = _ref.disableLabelAnimation,
       _ref$prepend = _ref.prepend,
-      prepend = _ref$prepend === void 0 ? React.createElement(icons.DateIcon, {
+      prepend = _ref$prepend === void 0 ? React__default["default"].createElement(icons.DateIcon, {
     inline: true
   }) : _ref$prepend,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var nativedatepickerId = utils.useRandomId('eds-nativetimepicker');
-  return React.createElement(form.BaseFormControl, {
+  return React__default["default"].createElement(form.BaseFormControl, {
     style: style,
     className: className,
     prepend: prepend,
@@ -231,18 +326,18 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     labelId: nativedatepickerId,
     disableLabelAnimation: disableLabelAnimation,
     isFilled: true
-  }, React.createElement(NativeDatePickerBase, Object.assign({
+  }, React__default["default"].createElement(NativeDatePickerBase, _extends({
     onChange: onChange,
     "aria-labelledby": nativedatepickerId,
     ref: ref,
     variant: variant
   }, rest)));
 });
-var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
       variant = _ref2.variant,
       value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["onChange", "variant", "value"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
 
   var contextVariant = form.useVariant();
   var currentVariant = variant || contextVariant;
@@ -254,7 +349,7 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   utils.useOnMount(function () {
     setFiller && !isDatepickerFilled && setFiller(true);
   });
-  React.useEffect(function () {
+  React__default["default"].useEffect(function () {
     if (value) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
@@ -274,7 +369,7 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }
   };
 
-  return React.createElement("input", Object.assign({
+  return React__default["default"].createElement("input", _extends({
     ref: ref,
     "aria-invalid": currentVariant === 'error',
     type: "date",
@@ -284,8 +379,11 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, rest));
 });
 
+var _excluded$1 = ["selectedTime", "onChange", "placeholder", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "disableLabelAnimation", "locale", "onLeftArrowClick", "onRightArrowClick"],
+    _excluded2$1 = ["className", "onChange", "selectedTime", "placeholder", "timeFormat", "dateFormat"],
+    _excluded3 = ["direction"];
 ReactDatepicker.registerLocale('nb', locale.nb);
-var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$selectedTime = _ref.selectedTime,
       selectedTime = _ref$selectedTime === void 0 ? null : _ref$selectedTime,
       onChange = _ref.onChange,
@@ -313,10 +411,10 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       minutes: 30
     }), event);
   } : _ref$onRightArrowClic,
-      rest = _objectWithoutPropertiesLoose(_ref, ["selectedTime", "onChange", "placeholder", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "disableLabelAnimation", "locale", "onLeftArrowClick", "onRightArrowClick"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var timepickerId = utils.useRandomId('eds-timepicker');
-  return React.createElement(form.BaseFormControl, {
+  return React__default["default"].createElement(form.BaseFormControl, {
     style: style,
     ref: ref,
     label: label,
@@ -327,7 +425,7 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disableLabelAnimation: disableLabelAnimation,
     className: "eds-timepicker-form-control",
     disabled: disabled,
-    prepend: React.createElement(TimePickerArrowButton, {
+    prepend: React__default["default"].createElement(TimePickerArrowButton, {
       direction: "left",
       tabIndex: -1,
       onClick: function onClick(e) {
@@ -335,7 +433,7 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       disabled: disabled
     })
-  }, React.createElement(TimePickerBase, Object.assign({
+  }, React__default["default"].createElement(TimePickerBase, _extends({
     selectedTime: selectedTime,
     onChange: onChange,
     placeholder: placeholder,
@@ -343,7 +441,7 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     locale: locale,
     ariaLabelledBy: timepickerId,
     disabled: disabled
-  }, rest)), React.createElement(TimePickerArrowButton, {
+  }, rest)), React__default["default"].createElement(TimePickerArrowButton, {
     direction: "right",
     tabIndex: -1,
     onClick: function onClick(e) {
@@ -352,7 +450,7 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled
   }));
 });
-var POPPER_MODIFIERS$1 = [{
+var POPPER_MODIFIERS = [{
   name: 'offset',
   enabled: true,
   options: {
@@ -369,7 +467,7 @@ var TimePickerBase = function TimePickerBase(_ref2) {
       timeFormat = _ref2$timeFormat === void 0 ? 'HH:mm' : _ref2$timeFormat,
       _ref2$dateFormat = _ref2.dateFormat,
       dateFormat = _ref2$dateFormat === void 0 ? ['HH:mm', 'HHmm'] : _ref2$dateFormat,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["className", "onChange", "selectedTime", "placeholder", "timeFormat", "dateFormat"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
   var _useInputGroupContext = form.useInputGroupContext(),
       isTimepickerFilled = _useInputGroupContext.isFilled,
@@ -380,7 +478,7 @@ var TimePickerBase = function TimePickerBase(_ref2) {
       setFiller && !isTimepickerFilled && setFiller(true);
     }
   });
-  React.useEffect(function () {
+  React__default["default"].useEffect(function () {
     if (selectedTime) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
@@ -400,8 +498,8 @@ var TimePickerBase = function TimePickerBase(_ref2) {
     }
   };
 
-  return React.createElement(ReactDatepicker__default, Object.assign({
-    className: classNames('eds-form-control', 'eds-timepicker__input', className),
+  return React__default["default"].createElement(ReactDatepicker__default["default"], _extends({
+    className: classNames__default["default"]('eds-form-control', 'eds-timepicker__input', className),
     calendarClassName: "eds-timepicker",
     selected: selectedTime,
     onChange: handleChange,
@@ -413,22 +511,24 @@ var TimePickerBase = function TimePickerBase(_ref2) {
     showPopperArrow: false,
     placeholderText: placeholder,
     popperClassName: "eds-datepicker__popper",
-    popperModifiers: POPPER_MODIFIERS$1,
+    popperModifiers: POPPER_MODIFIERS,
     open: false
   }, rest));
 };
 
 var TimePickerArrowButton = function TimePickerArrowButton(_ref3) {
   var direction = _ref3.direction,
-      rest = _objectWithoutPropertiesLoose(_ref3, ["direction"]);
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
-  return React.createElement("button", Object.assign({
-    className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction),
+  return React__default["default"].createElement("button", _extends({
+    className: classNames__default["default"]('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction),
     type: "button"
-  }, rest), direction === 'left' ? React.createElement(icons.LeftArrowIcon, null) : React.createElement(icons.RightArrowIcon, null));
+  }, rest), direction === 'left' ? React__default["default"].createElement(icons.LeftArrowIcon, null) : React__default["default"].createElement(icons.RightArrowIcon, null));
 };
 
-var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "disableLabelAnimation", "prepend"],
+    _excluded2 = ["onChange", "value"];
+var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       style = _ref.style,
       onChange = _ref.onChange,
@@ -437,11 +537,11 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       variant = _ref.variant,
       disableLabelAnimation = _ref.disableLabelAnimation,
       _ref$prepend = _ref.prepend,
-      prepend = _ref$prepend === void 0 ? React.createElement(icons.ClockIcon, null) : _ref$prepend,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "style", "onChange", "label", "feedback", "variant", "disableLabelAnimation", "prepend"]);
+      prepend = _ref$prepend === void 0 ? React__default["default"].createElement(icons.ClockIcon, null) : _ref$prepend,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var nativetimepickerId = utils.useRandomId('eds-nativetimepicker');
-  return React.createElement(form.BaseFormControl, {
+  return React__default["default"].createElement(form.BaseFormControl, {
     style: style,
     className: className,
     prepend: prepend,
@@ -450,16 +550,16 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant: variant,
     labelId: nativetimepickerId,
     disableLabelAnimation: disableLabelAnimation
-  }, React.createElement(NativeTimePickerBase, Object.assign({
+  }, React__default["default"].createElement(NativeTimePickerBase, _extends({
     onChange: onChange,
     "aria-labelledby": nativetimepickerId,
     ref: ref
   }, rest)));
 });
-var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
       value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["onChange", "value"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   var contextVariant = form.useVariant();
   var currentVariant = rest.variant || contextVariant;
@@ -471,7 +571,7 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   utils.useOnMount(function () {
     setFiller && !isTimepickerFilled && setFiller(true);
   });
-  React.useEffect(function () {
+  React__default["default"].useEffect(function () {
     if (value) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
@@ -491,7 +591,7 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }
   };
 
-  return React.createElement("input", Object.assign({
+  return React__default["default"].createElement("input", _extends({
     ref: ref,
     "aria-invalid": currentVariant === 'error',
     type: "time",