@entur/datepicker 0.11.6 → 2.0.1

package/dist/datepicker.esm.js

@@ -1,12 +1,15 @@
 import { useRandomId, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import ReactDatepicker, { registerLocale } from 'react-datepicker';
-import classNames from 'classnames';
-import { useInputGroupContext, BaseFormControl, useVariant, isFilled } from '@entur/form';
-import { CalendarIcon, DateIcon, LeftArrowIcon, RightArrowIcon, ClockIcon } from '@entur/icons';
 import { parse, isSameDay, sub, add } from 'date-fns';
 import { nb } from 'date-fns/locale';
+import classNames from 'classnames';
+import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon, ClockIcon } from '@entur/icons';
+import { Heading3 } from '@entur/typography';
+import { IconButton } from '@entur/button';
+import { TextField, BaseFormControl, useVariant, useInputGroupContext, isFilled } from '@entur/form';
 import { Tooltip } from '@entur/tooltip';
+import 'react-datepicker/dist/react-datepicker.css';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -41,264 +44,385 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$3 = ["selectedDate", "onChange", "onChangeInput", "placeholder", "className", "style", "readOnly", "disableLabelAnimation", "locale", "prepend", "disabled", "variant", "validationVariant", "feedback", "validationFeedback", "label", "hideCalendarButton", "hideCalendar", "hideValidationFeedback", "id"],
-    _excluded2$3 = ["value", "onClick", "onFocus", "onKeyDown", "variant", "feedback", "style", "disableLabelAnimation", "disabled", "label", "readOnly", "id", "prepend", "className", "hideCalendarButton", "inputId", "onChangeInput", "onKeyDownInput", "onBlurInput"];
-registerLocale('nb', nb);
-var POPPER_MODIFIERS$1 = [{
-  name: 'offset',
-  enabled: true,
-  options: {
-    offset: [0, 0]
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
-}];
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var DatePickerHeader = function DatePickerHeader(_ref) {
+  var _date$getMonth;
+
+  var date = _ref.date,
+      decreaseMonth = _ref.decreaseMonth,
+      increaseMonth = _ref.increaseMonth,
+      prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
+      nextMonthButtonDisabled = _ref.nextMonthButtonDisabled;
+  var monthNames = getMonthList();
+  return React.createElement("div", {
+    className: "eds-datepicker__calender__header"
+  }, React.createElement(IconButton, {
+    className: "eds-datepicker__calender__header__month-button--left",
+    onClick: decreaseMonth,
+    disabled: prevMonthButtonDisabled
+  }, React.createElement(LeftArrowIcon, null)), React.createElement(Heading3, {
+    className: "eds-datepicker__calender__header__month-text"
+  }, monthNames[(_date$getMonth = date == null ? void 0 : date.getMonth()) != null ? _date$getMonth : 0]), React.createElement(Heading3, {
+    className: "eds-datepicker__calender__header__month-text"
+  }, date == null ? void 0 : date.getFullYear()), React.createElement(IconButton, {
+    className: "eds-datepicker__calender__header__month-button--right",
+    onClick: increaseMonth,
+    disabled: nextMonthButtonDisabled
+  }, React.createElement(RightArrowIcon, null)));
+};
+
+function getMonthList(locale) {
+  if (locale === void 0) {
+    locale = 'nb';
+  }
+
+  var year = new Date().getFullYear();
+  var monthList = Array(12).keys();
+  var formatter = new Intl.DateTimeFormat(locale, {
+    month: 'long'
+  });
+
+  var getMonthName = function getMonthName(monthIndex) {
+    return formatter.format(new Date(year, monthIndex));
+  };
+
+  return Array.from(monthList, getMonthName);
+}
+
+var _excluded$4 = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltip", "hideCalendarButton", "disableLabelAnimation", "inputRef", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "placeholder"];
+var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var style = _ref.style,
+      label = _ref.label,
+      inputPlaceholder = _ref.inputPlaceholder,
+      prepend = _ref.prepend,
+      feedback = _ref.feedback,
+      variant = _ref.variant,
+      disabled = _ref.disabled,
+      calendarButtonTooltip = _ref.calendarButtonTooltip,
+      hideCalendarButton = _ref.hideCalendarButton,
+      disableLabelAnimation = _ref.disableLabelAnimation,
+      inputRef = _ref.inputRef,
+      forwardRef = _ref.forwardRef,
+      toggleCalendarGUI = _ref.toggleCalendarGUI,
+      onKeyDownInput = _ref.onKeyDownInput,
+      onBlurInput = _ref.onBlurInput,
+      selectedDate = _ref.selectedDate,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
+  React.useEffect(function () {
+    var _inputRef$current, _inputRef$current2, _inputRef$current3;
+
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.addEventListener('keydown', handleOnKeyDown);
+    (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.addEventListener('blur', handleOnBlur);
+    (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.addEventListener('focus', handleOnFocus);
+    return function () {
+      var _inputRef$current4, _inputRef$current5, _inputRef$current6;
+
+      (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.removeEventListener('keydown', handleOnKeyDown);
+      (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.removeEventListener('blur', handleOnBlur);
+      (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.removeEventListener('focus', handleOnFocus);
+    };
+  }, [inputRef, selectedDate]);
+
+  function handleOnKeyDown(event) {
+    onKeyDownInput(event);
+  }
+
+  function handleOnBlur(event) {
+    onBlurInput(event);
+  }
+
+  function handleOnFocus() {
+    setTimeout(function () {
+      var _inputRef$current7;
+
+      return (_inputRef$current7 = inputRef.current) == null ? void 0 : _inputRef$current7.select();
+    }, 5);
+  }
+
+  return React.createElement(TextField, _extends({
+    style: style,
+    label: label,
+    placeholder: inputPlaceholder,
+    prepend: prepend,
+    feedback: feedback,
+    variant: variant,
+    disableLabelAnimation: disableLabelAnimation,
+    ref: mergeRefs(ref, inputRef, forwardRef),
+    append: !hideCalendarButton && React.createElement(Tooltip, {
+      placement: "top",
+      content: calendarButtonTooltip,
+      disableHoverListener: disabled,
+      disableFocusListener: disabled
+    }, React.createElement(IconButton, {
+      type: "button",
+      onClick: toggleCalendarGUI
+    }, React.createElement(CalendarIcon, null)))
+  }, rest));
+});
+
+var mergeRefs = function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return function (node) {
+    for (var _iterator = _createForOfIteratorHelperLoose(refs), _step; !(_step = _iterator()).done;) {
+      var ref = _step.value;
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) ref.current = node;
+    }
+  };
+};
+
+var _excluded$3 = ["style", "className", "selectedDate", "label", "placeholder", "onChange", "onKeyDown", "dateFormats", "minDate", "maxDate", "inline", "disabled", "prepend", "feedback", "variant", "validationFeedback", "validationVariant", "disableLabelAnimation", "calendarButtonTooltip", "hideCalendarButton", "hideCalendar", "hideValidation", "weekLabel", "locale", "open"];
+registerLocale('nb', nb);
 var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$selectedDate = _ref.selectedDate,
-      selectedDate = _ref$selectedDate === void 0 ? null : _ref$selectedDate,
-      onChange = _ref.onChange,
-      onChangeInput = _ref.onChangeInput,
+  var style = _ref.style,
+      className = _ref.className,
+      selectedDate = _ref.selectedDate,
+      label = _ref.label,
       _ref$placeholder = _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,
-      prepend = _ref.prepend,
+      onChange = _ref.onChange,
+      _ref$onKeyDown = _ref.onKeyDown,
+      onKeyDown = _ref$onKeyDown === void 0 ? function () {
+    return null;
+  } : _ref$onKeyDown,
+      _ref$dateFormats = _ref.dateFormats,
+      dateFormats = _ref$dateFormats === void 0 ? ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy'] : _ref$dateFormats,
+      minDate = _ref.minDate,
+      maxDate = _ref.maxDate,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
       disabled = _ref.disabled,
+      prepend = _ref.prepend,
+      _ref$feedback = _ref.feedback,
+      feedback = _ref$feedback === void 0 ? '' : _ref$feedback,
       variant = _ref.variant,
-      _ref$validationVarian = _ref.validationVariant,
-      validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
-      feedback = _ref.feedback,
       _ref$validationFeedba = _ref.validationFeedback,
       validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
-      label = _ref.label,
+      _ref$validationVarian = _ref.validationVariant,
+      validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
+      _ref$disableLabelAnim = _ref.disableLabelAnimation,
+      disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
+      _ref$calendarButtonTo = _ref.calendarButtonTooltip,
+      calendarButtonTooltip = _ref$calendarButtonTo === void 0 ? 'Åpne\xa0kalender' : _ref$calendarButtonTo,
       _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$hideValidationFe = _ref.hideValidationFeedback,
-      hideValidationFeedback = _ref$hideValidationFe === void 0 ? false : _ref$hideValidationFe,
-      id = _ref.id,
+      _ref$hideValidation = _ref.hideValidation,
+      hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation,
+      _ref$weekLabel = _ref.weekLabel,
+      weekLabel = _ref$weekLabel === void 0 ? 'uke' : _ref$weekLabel,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? nb : _ref$locale,
+      open = _ref.open,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
+  var datepickerId = useRandomId('eds-datepicker');
+
   var _useState = useState(false),
-      showValidationFeedback = _useState[0],
-      setShowValidationFeedback = _useState[1];
+      showValidation = _useState[0],
+      setShowValidation = _useState[1];
 
-  var _useState2 = useState(''),
-      currentValue = _useState2[0],
-      setCurrentValue = _useState2[1];
+  var datepickerRef = useRef(null);
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    return validateInput();
+  }, [selectedDate]);
 
-  var _useState3 = useState(''),
-      lastValidValue = _useState3[0],
-      setLastValidValue = _useState3[1];
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    var _datepickerRef$curren;
 
-  var datepickerId = useRandomId('eds-datepicker');
+    var calendarIsClosed = !((_datepickerRef$curren = datepickerRef.current) != null && _datepickerRef$curren.isCalendarOpen());
+    setShowValidation(false);
 
-  var _useInputGroupContext = useInputGroupContext(),
-      isFilled = _useInputGroupContext.isFilled,
-      setFilled = _useInputGroupContext.setFilled;
+    if (event.key === 'Enter') {
+      validateInput();
+      focusAndSelectInputField();
+      forceUpdateInputFormat();
+    } else if (event.key === 'Tab' && calendarIsClosed) {
+      validateInput();
+      forceUpdateInputFormat();
+    }
 
-  React.useEffect(function () {
-    setFilled(!!selectedDate);
-    handleChange(selectedDate, undefined);
-  }, [selectedDate, setFilled, isFilled]);
+    onKeyDown(event);
+  };
 
-  var handleChange = function handleChange(date, event) {
-    // The return value from reactDatePicker can potentially be a range of dates, this however is not supported.
-    // To circumvent this we create simply pick the first selected value in that case.
-    var newDate = [date].flat()[0];
-    setFilled(!!newDate);
-    var dateString = newDate == null ? void 0 : newDate.toLocaleDateString('no-NO', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric'
+  var validateInput = function validateInput() {
+    var _inputRef$current;
+
+    setShowValidation(false);
+    var inputValue = (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value;
+    if (!inputValue) return;
+    var inputValueParsedWithAllDateFormats = dateFormats.map(function (format) {
+      return parse(inputValue, format, new Date(), {
+        locale: locale
+      });
+    });
+    var parsedDateFromInputIsTheSameAsSelectedDate = selectedDate && inputValueParsedWithAllDateFormats.some(function (dateFormat) {
+      return isSameDay(dateFormat, selectedDate);
     });
-    setCurrentValue(dateString != null ? dateString : '');
-    setLastValidValue(dateString != null ? dateString : '');
 
-    if (onChange) {
-      onChange(newDate, event);
+    if (parsedDateFromInputIsTheSameAsSelectedDate) {
+      // valid date inputted
+      setShowValidation(false);
+    } else {
+      // invalid date inputted
+      setShowValidation(true);
     }
   };
 
-  var handleChangeRaw = function handleChangeRaw(event) {
-    setShowValidationFeedback(false);
-    var inputValue = event.target.value;
-    setCurrentValue(inputValue);
-    if (onChangeInput) onChangeInput(inputValue);
+  var getFeedbackAndVariant = function getFeedbackAndVariant() {
+    if (feedback) return {
+      feedback: feedback,
+      variant: variant
+    };
+    if (!hideValidation && showValidation) return {
+      feedback: validationFeedback,
+      variant: validationVariant
+    };
+    return {
+      feedback: '',
+      variant: undefined
+    };
   };
 
-  var handleBlur = function handleBlur(event) {
-    validateInput(event.target.value);
-  };
+  var focusAndSelectInputField = function focusAndSelectInputField() {
+    return setTimeout(function () {
+      var _inputRef$current2;
 
-  var handleKeyDownInput = function handleKeyDownInput(event) {
-    if (event.key === 'Enter') {
-      validateInput(event.currentTarget.value);
-    }
+      (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.select();
+    }, 5);
   };
 
-  var validateInput = function validateInput(inputValue) {
-    setShowValidationFeedback(false);
-
-    if (!inputValue) {
-      return;
-    }
+  var forceUpdateInputFormat = function forceUpdateInputFormat() {
+    var _datepickerRef$curren2;
 
-    var parsedDate = parse(inputValue, 'dd.MM.yyyy', new Date(), {
-      locale: nb
+    return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setState({
+      inputValue: null
     });
-    var selectedDateIsTheSameAsParsedDateFromInput = selectedDate && isSameDay(parsedDate, selectedDate);
-
-    if (selectedDateIsTheSameAsParsedDateFromInput) {
-      setLastValidValue(currentValue);
-    } else {
-      setShowValidationFeedback(true);
-      setCurrentValue(lastValidValue);
-    }
   };
 
-  var displayedFeedback = function displayedFeedback() {
-    if (feedback) return feedback;
-    if (!hideValidationFeedback && showValidationFeedback) return validationFeedback;
-    return '';
-  };
+  var toggleCalendarGUI = function toggleCalendarGUI() {
+    var _datepickerRef$curren3, _datepickerRef$curren4;
 
-  var displayedVariant = function displayedVariant() {
-    if (feedback && variant) return variant;
-    if (!hideValidationFeedback && showValidationFeedback) return validationVariant;
-    return undefined;
+    return (_datepickerRef$curren3 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren3.setOpen(!((_datepickerRef$curren4 = datepickerRef.current) != null && _datepickerRef$curren4.isCalendarOpen()));
   };
 
-  return React.createElement(ReactDatepicker, _extends({
-    className: classNames(className),
-    calendarClassName: "eds-datepicker__calender",
+  return React.createElement(React.Fragment, null, React.createElement(ReactDatepicker, _extends({
     selected: selectedDate,
-    onChange: handleChange,
+    minDate: minDate,
+    maxDate: maxDate,
+    dateFormat: dateFormats,
     showWeekNumbers: true,
-    dateFormat: ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy'],
-    showPopperArrow: false,
-    placeholderText: placeholder,
-    readOnly: readOnly,
+    weekLabel: weekLabel,
+    onChange: onChange,
+    onClickOutside: validateInput,
     id: datepickerId,
     ariaLabelledBy: datepickerId,
-    disabled: disabled,
+    showPopperArrow: false,
     locale: locale,
-    popperModifiers: POPPER_MODIFIERS$1,
-    onBlur: handleBlur,
-    onChangeRaw: handleChangeRaw,
-    onCalendarOpen: function onCalendarOpen() {
-      return setShowValidationFeedback(false);
+    inline: inline,
+    disabled: disabled,
+    preventOpenOnFocus: true,
+    open: hideCalendar ? false : open,
+    ref: datepickerRef,
+    calendarClassName: "eds-datepicker__calender",
+    dayClassName: function dayClassName() {
+      return 'eds-datepicker__calender__day';
+    },
+    weekDayClassName: function weekDayClassName() {
+      return 'eds-datepicker__calender__day-name';
+    },
+    className: classNames(className, 'eds-datepicker__input'),
+    highlightDates: [{
+      'eds-datepicker__calender__day--today': [new Date()]
+    }, {
+      'eds-datepicker__calender__day--selected': selectedDate ? [selectedDate] : []
+    }],
+    renderCustomHeader: function renderCustomHeader(_ref2) {
+      var date = _ref2.date,
+          changeYear = _ref2.changeYear,
+          changeMonth = _ref2.changeMonth,
+          decreaseMonth = _ref2.decreaseMonth,
+          increaseMonth = _ref2.increaseMonth,
+          prevMonthButtonDisabled = _ref2.prevMonthButtonDisabled,
+          nextMonthButtonDisabled = _ref2.nextMonthButtonDisabled;
+      return React.createElement(DatePickerHeader, {
+        date: date,
+        changeYear: changeYear,
+        changeMonth: changeMonth,
+        increaseMonth: increaseMonth,
+        decreaseMonth: decreaseMonth,
+        prevMonthButtonDisabled: prevMonthButtonDisabled,
+        nextMonthButtonDisabled: nextMonthButtonDisabled
+      });
     },
-    value: currentValue,
-    open: hideCalendar === true ? false : rest.open
-  }, rest, {
     customInput: React.createElement(DatePickerInput, {
       style: style,
-      readOnly: readOnly,
-      variant: displayedVariant(),
-      feedback: displayedFeedback(),
       label: label,
-      disabled: disabled,
-      ref: ref,
-      "data-cy": rest['data-cy'],
-      disableLabelAnimation: disableLabelAnimation,
+      inputPlaceholder: placeholder,
+      calendarButtonTooltip: calendarButtonTooltip,
       prepend: prepend,
+      feedback: getFeedbackAndVariant().feedback,
+      variant: getFeedbackAndVariant().variant,
+      inputRef: inputRef,
+      forwardRef: ref,
+      onKeyDownInput: handleOnKeyDown,
+      onBlurInput: function onBlurInput() {
+        var _datepickerRef$curren5;
+
+        return !((_datepickerRef$curren5 = datepickerRef.current) != null && _datepickerRef$curren5.isCalendarOpen()) && validateInput();
+      },
+      onFocus: undefined,
+      toggleCalendarGUI: toggleCalendarGUI,
+      disableLabelAnimation: disableLabelAnimation,
       hideCalendarButton: hideCalendarButton,
-      inputId: id,
-      onKeyDownInput: handleKeyDownInput,
-      onBlurInput: handleBlur,
-      onChangeInput: onChangeInput
+      selectedDate: selectedDate
     })
-  }));
-}); // Props fra customInput i react-datepicker
-// value: inputValue,
-// onBlur: this.handleBlur,
-// onChange: this.handleChange,
-// onClick: this.onInputClick,
-// onFocus: this.handleFocus,
-// onKeyDown: this.onInputKeyDown,
-// id: this.props.id,
-// name: this.props.name,
-// autoFocus: this.props.autoFocus,
-// placeholder: this.props.placeholderText,
-// disabled: this.props.disabled,
-// autoComplete: this.props.autoComplete,
-// className: classnames(customInput.props.className, className),
-// title: this.props.title,
-// readOnly: this.props.readOnly,
-// required: this.props.required,
-// tabIndex: this.props.tabIndex,
-// "aria-describedby": this.props.ariaDescribedBy,
-// "aria-invalid": this.props.ariaInvalid,
-// "aria-labelledby": this.props.ariaLabelledBy,
-// "aria-required": this.props.ariaRequired,
-
-var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var value = _ref2.value,
-      onClick = _ref2.onClick,
-      onKeyDown = _ref2.onKeyDown,
-      variant = _ref2.variant,
-      feedback = _ref2.feedback,
-      style = _ref2.style,
-      disableLabelAnimation = _ref2.disableLabelAnimation,
-      disabled = _ref2.disabled,
-      label = _ref2.label,
-      readOnly = _ref2.readOnly,
-      id = _ref2.id,
-      prepend = _ref2.prepend,
-      className = _ref2.className,
-      hideCalendarButton = _ref2.hideCalendarButton,
-      inputId = _ref2.inputId,
-      onChangeInput = _ref2.onChangeInput,
-      onKeyDownInput = _ref2.onKeyDownInput,
-      onBlurInput = _ref2.onBlurInput,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
-
-  return React.createElement("span", {
-    className: className,
-    onBlur: onBlurInput
-  }, React.createElement(BaseFormControl, {
-    style: style,
-    className: "eds-datepicker__form-control",
-    readOnly: readOnly,
-    label: label,
-    labelId: id,
-    feedback: feedback,
-    variant: variant,
-    disabled: disabled,
-    disableLabelAnimation: disableLabelAnimation,
-    isFilled: !!value,
-    prepend: prepend
-  }, React.createElement("input", _extends({
-    value: value,
-    onClick: onClick,
-    readOnly: readOnly,
-    disabled: disabled,
-    ref: ref,
-    // aria-labelledby={id}
-    className: "eds-form-control",
-    id: inputId,
-    onKeyDown: onKeyDownInput,
-    onChange: onChangeInput
-  }, rest)), !hideCalendarButton && React.createElement(Tooltip, {
-    placement: "top",
-    content: "\xC5pne kalender",
-    disableHoverListener: disabled,
-    disableFocusListener: disabled
-  }, React.createElement("button", {
-    className: classNames('eds-datepicker__calendar-button', {
-      'eds-datepicker__calendar-button--open': true,
-      'eds-datepicker__calendar-button--disabled': disabled
-    }),
-    onKeyDown: onKeyDown,
-    onClick: onClick,
-    disabled: disabled,
-    type: "button"
-  }, React.createElement(CalendarIcon, null)))));
+  }, rest)));
 });
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],