@entur/datepicker 4.0.0-beta.5 → 4.0.1

package/dist/datepicker.esm.js

@@ -1,24 +1,18 @@
-import { mergeRefs, useRandomId, ConditionalWrapper, useWindowDimensions, useOnClickOutside, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import React, { useRef, useState, useEffect } from 'react';
-import ReactDatepicker, { registerLocale } from 'react-datepicker';
-import { parse, isSameDay } from 'date-fns';
-import { nb } from 'date-fns/locale';
-import classNames from 'classnames';
-import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon } 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';
+import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from '@entur/utils';
+import React, { useRef } from 'react';
 import { useDateFieldState, useDatePickerState, useTimeFieldState } from '@react-stately/datepicker';
 import { useDateSegment, useDateField, useDatePicker, useTimeField } from '@react-aria/datepicker';
 import { useLocale, I18nProvider } from '@react-aria/i18n';
+import classNames from 'classnames';
+import { BaseFormControl, useVariant, useInputGroupContext, isFilled } from '@entur/form';
 import { ZonedDateTime, parseAbsolute, Time, CalendarDate, CalendarDateTime, getLocalTimeZone, GregorianCalendar, isEqualDay, now, getWeeksInMonth } from '@internationalized/date';
 import { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
 import { useCalendarState } from '@react-stately/calendar';
+import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon } from '@entur/icons';
 import { useButton } from '@react-aria/button';
+import { IconButton } from '@entur/button';
 import { VisuallyHidden } from '@entur/a11y';
-import { useFloating, offset, flip, shift } from '@floating-ui/react-dom';
+import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react-dom';
 import FocusLock from 'react-focus-lock';
 import { space, zIndexes } from '@entur/tokens';
 import { Modal } from '@entur/modal';
@@ -56,433 +50,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var DatePickerHeader = function DatePickerHeader(_ref) {
-  var _date$getMonth;
-
-  var date = _ref.date,
-      decreaseMonth = _ref.decreaseMonth,
-      increaseMonth = _ref.increaseMonth,
-      prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
-      nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
-      nextMonthAriaLabel = _ref.nextMonthAriaLabel,
-      previousMonthAriaLabel = _ref.previousMonthAriaLabel,
-      locale = _ref.locale;
-  var currentMonthIndex = (_date$getMonth = date == null ? void 0 : date.getMonth()) != null ? _date$getMonth : 0;
-  return React.createElement("div", {
-    className: "eds-datepicker__calender__header"
-  }, React.createElement(IconButton, {
-    type: "button",
-    className: "eds-datepicker__calender__header__month-button--left",
-    onClick: decreaseMonth,
-    disabled: prevMonthButtonDisabled,
-    "aria-label": previousMonthAriaLabel + " (" + getMonthName(currentMonthIndex - 1, locale) + ")"
-  }, React.createElement(LeftArrowIcon, null)), React.createElement(Heading3, {
-    className: "eds-datepicker__calender__header__month-text"
-  }, getMonthName(currentMonthIndex, locale)), React.createElement(Heading3, {
-    className: "eds-datepicker__calender__header__month-text"
-  }, date == null ? void 0 : date.getFullYear()), React.createElement(IconButton, {
-    type: "button",
-    className: "eds-datepicker__calender__header__month-button--right",
-    onClick: increaseMonth,
-    disabled: nextMonthButtonDisabled,
-    "aria-label": nextMonthAriaLabel + " (" + getMonthName(currentMonthIndex + 1, locale) + ")"
-  }, React.createElement(RightArrowIcon, null)));
-};
-
-function getMonthName(monthIndex, locale) {
-  var year = new Date().getFullYear();
-  var formatter = new Intl.DateTimeFormat(locale.code, {
-    month: 'long'
-  });
-  return formatter.format(new Date(year, monthIndex));
-}
-
-var _excluded$a = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "disableLabelAnimation", "inputRef", "calendarButtonId", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "setFocusToCalendarGUI", "setShouldFocusOnCalendarButtonAfterSelect", "calendarGUIIsOpen", "placeholder", "onClick", "aria-labelledby"];
-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,
-      calendarButtonTooltipOpen = _ref.calendarButtonTooltipOpen,
-      calendarButtonTooltipClose = _ref.calendarButtonTooltipClose,
-      hideCalendarButton = _ref.hideCalendarButton,
-      disableLabelAnimation = _ref.disableLabelAnimation,
-      inputRef = _ref.inputRef,
-      calendarButtonId = _ref.calendarButtonId,
-      forwardRef = _ref.forwardRef,
-      toggleCalendarGUI = _ref.toggleCalendarGUI,
-      onKeyDownInput = _ref.onKeyDownInput,
-      onBlurInput = _ref.onBlurInput,
-      selectedDate = _ref.selectedDate,
-      setFocusToCalendarGUI = _ref.setFocusToCalendarGUI,
-      setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
-      calendarGUIIsOpen = _ref.calendarGUIIsOpen,
-      onClick = _ref.onClick,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-
-  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);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputRef, selectedDate]);
-
-  function handleOnKeyDown(event) {
-    onKeyDownInput(event);
-  }
-
-  function handleOnBlur(event) {
-    onBlurInput(event);
-  }
-
-  var handleOnFocus = function handleOnFocus() {
-    return requestAnimationFrame(function () {
-      var _inputRef$current7;
-
-      return (_inputRef$current7 = inputRef.current) == null ? void 0 : _inputRef$current7.select();
-    });
-  };
-
-  var handleOnClickInputField = function handleOnClickInputField(event) {
-    setShouldFocusOnCalendarButtonAfterSelect(false);
-    onClick && onClick(event);
-  };
-
-  var handleOnClickCalendarButton = function handleOnClickCalendarButton() {
-    toggleCalendarGUI();
-    setFocusToCalendarGUI();
-    setShouldFocusOnCalendarButtonAfterSelect(true);
-  };
-
-  var calendarButtonAriaLabel = function calendarButtonAriaLabel() {
-    var _inputRef$current8;
-
-    var buttonStateText = calendarGUIIsOpen() ? calendarButtonTooltipClose : calendarButtonTooltipOpen;
-    var currentSelectionText = selectedDate ? ((_inputRef$current8 = inputRef.current) == null ? void 0 : _inputRef$current8.value) + " valgt" : 'Ingen dato valgt';
-    return buttonStateText + ", " + currentSelectionText;
-  };
-
-  return React.createElement(TextField, _extends({
-    style: style,
-    label: label,
-    placeholder: inputPlaceholder,
-    prepend: prepend,
-    feedback: feedback,
-    variant: variant,
-    disableLabelAnimation: disableLabelAnimation,
-    ref: mergeRefs(ref, inputRef, forwardRef),
-    onClick: handleOnClickInputField,
-    ariaAlertOnFeedback: true,
-    append: !hideCalendarButton && React.createElement(Tooltip, {
-      placement: "top",
-      content: calendarGUIIsOpen() ? calendarButtonTooltipClose : calendarButtonTooltipOpen,
-      disableHoverListener: disabled,
-      disableFocusListener: disabled
-    }, React.createElement(IconButton, {
-      id: calendarButtonId,
-      type: "button",
-      onClick: handleOnClickCalendarButton,
-      tabIndex: calendarGUIIsOpen() ? -1 : 0,
-      "aria-label": calendarButtonAriaLabel()
-    }, React.createElement(CalendarIcon, null)))
-  }, rest));
-});
-
-var _excluded$9 = ["style", "className", "selectedDate", "label", "placeholder", "onChange", "onKeyDown", "dateFormats", "minDate", "maxDate", "inline", "disabled", "prepend", "feedback", "variant", "validationFeedback", "validationVariant", "disableLabelAnimation", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "hideCalendar", "hideValidation", "weekLabel", "chooseDayAriaLabelPrefix", "previousMonthAriaLabel", "nextMonthAriaLabel", "locale", "open"];
-registerLocale('nb', nb);
-var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  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,
-      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$validationFeedba = _ref.validationFeedback,
-      validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
-      _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.calendarButtonTooltipOpen,
-      calendarButtonTooltipOpen = _ref$calendarButtonTo === void 0 ? 'Åpne\xa0kalender' : _ref$calendarButtonTo,
-      _ref$calendarButtonTo2 = _ref.calendarButtonTooltipClose,
-      calendarButtonTooltipClose = _ref$calendarButtonTo2 === void 0 ? 'Lukk\xa0kalender' : _ref$calendarButtonTo2,
-      _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$hideValidation = _ref.hideValidation,
-      hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation,
-      _ref$weekLabel = _ref.weekLabel,
-      weekLabel = _ref$weekLabel === void 0 ? 'uke' : _ref$weekLabel,
-      _ref$chooseDayAriaLab = _ref.chooseDayAriaLabelPrefix,
-      chooseDayAriaLabelPrefix = _ref$chooseDayAriaLab === void 0 ? 'Velg' : _ref$chooseDayAriaLab,
-      _ref$previousMonthAri = _ref.previousMonthAriaLabel,
-      previousMonthAriaLabel = _ref$previousMonthAri === void 0 ? 'Forrige måned' : _ref$previousMonthAri,
-      _ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
-      nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? 'Neste måned' : _ref$nextMonthAriaLab,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? nb : _ref$locale,
-      open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
-  var datepickerId = useRandomId('eds-datepicker');
-  var datepickerRef = useRef(null);
-  var inputRef = React.useRef(null);
-  var calendarButton = document.getElementById(datepickerId + '-button');
-
-  var _useState = useState(false),
-      showValidation = _useState[0],
-      setShowValidation = _useState[1];
-
-  var _useState2 = useState(false),
-      shouldFocusOnCalendarButtonAfterSelect = _useState2[0],
-      setShouldFocusOnCalendarButtonAfterSelect = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
-
-
-  React.useEffect(function () {
-    return validateInput();
-  }, [selectedDate]);
-
-  var handleOnChange = function handleOnChange(date, event) {
-    var _inputRef$current;
-
-    if (shouldFocusOnCalendarButtonAfterSelect && !hideCalendarButton) {
-      calendarButton == null ? void 0 : calendarButton.focus();
-      setShouldFocusOnCalendarButtonAfterSelect(false);
-    } else (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-
-    onChange(date, event);
-  };
-
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    setShowValidation(false);
-
-    if (event.key === 'Enter') {
-      if (!datePickerGUIIsOpen()) {
-        // onBlurInput will validate if calendar is open
-        validateInput();
-        forceUpdateInputFormat();
-      }
-
-      focusAndSelectInputField();
-    } else if (event.key === 'Tab' && datePickerGUIIsOpen()) {
-      forceUpdateInputFormat();
-    } else if (event.key === 'Escape') {
-      forceUpdateInputFormat();
-      focusAndSelectInputField();
-      if (datePickerGUIIsOpen()) toggleCalendarGUI();
-    }
-
-    onKeyDown(event);
-  };
-
-  var handleOnClickOutside = function handleOnClickOutside() {
-    return setShouldFocusOnCalendarButtonAfterSelect(false);
-  };
-
-  var handleOnBlurInput = function handleOnBlurInput() {
-    if (datePickerGUIIsOpen()) return;
-    validateInput();
-    forceUpdateInputFormat();
-  };
-
-  var validateInput = function validateInput() {
-    var _inputRef$current2;
-
-    setShowValidation(false);
-    var inputValue = (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.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);
-    });
-
-    if (parsedDateFromInputIsTheSameAsSelectedDate) {
-      // valid date inputted
-      setShowValidation(false);
-    } else {
-      // invalid date inputted
-      setShowValidation(true);
-    }
-  };
-
-  var getFeedbackAndVariant = function getFeedbackAndVariant() {
-    if (feedback) return {
-      feedback: feedback,
-      variant: variant
-    };
-    if (!hideValidation && showValidation) return {
-      feedback: validationFeedback,
-      variant: validationVariant
-    };
-    return {
-      feedback: '',
-      variant: undefined
-    };
-  };
-
-  var focusAndSelectInputField = function focusAndSelectInputField() {
-    return requestAnimationFrame(function () {
-      var _inputRef$current3;
-
-      return (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.select();
-    });
-  };
-
-  var forceUpdateInputFormat = function forceUpdateInputFormat() {
-    var _datepickerRef$curren;
-
-    return (_datepickerRef$curren = datepickerRef.current) == null ? void 0 : _datepickerRef$curren.setState({
-      inputValue: null
-    });
-  };
-
-  var toggleCalendarGUI = function toggleCalendarGUI() {
-    var _datepickerRef$curren2;
-
-    return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setOpen(!datePickerGUIIsOpen());
-  };
-
-  var setFocusToCalendarGUI = function setFocusToCalendarGUI() {
-    if (inline || hideCalendar || datePickerGUIIsOpen()) return; // 1 frame delay to allow calendar to spawn
-
-    requestAnimationFrame(function () {
-      var _datepickerRef$curren3;
-
-      var datepickerGUIWrapper = // @ts-expect-error .calendar does actually exist in ReactDatePicker ref
-      (_datepickerRef$curren3 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren3.calendar.componentNode;
-      var dateToSetFocusTo = selectedDate ? datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[tabindex="0"]') : datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[aria-current="date"]');
-
-      if (dateToSetFocusTo !== null) {
-        var _datepickerRef$curren4;
-
-        (_datepickerRef$curren4 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren4.setBlur();
-        dateToSetFocusTo.focus({
-          preventScroll: true
-        });
-      }
-    });
-    setShouldFocusOnCalendarButtonAfterSelect(true);
-    setShowValidation(false);
-  };
-
-  var datePickerGUIIsOpen = function datePickerGUIIsOpen() {
-    var _datepickerRef$curren5;
-
-    return (_datepickerRef$curren5 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren5.isCalendarOpen();
-  };
-
-  return React.createElement(React.Fragment, null, React.createElement(ReactDatepicker, _extends({
-    selected: selectedDate,
-    minDate: minDate,
-    maxDate: maxDate,
-    dateFormat: dateFormats,
-    showWeekNumbers: true,
-    weekLabel: weekLabel,
-    onChange: handleOnChange,
-    onClickOutside: handleOnClickOutside,
-    id: datepickerId,
-    ariaLabelledBy: datepickerId,
-    showPopperArrow: false,
-    locale: locale,
-    inline: inline,
-    disabled: disabled,
-    preventOpenOnFocus: true,
-    chooseDayAriaLabelPrefix: chooseDayAriaLabelPrefix,
-    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,
-        previousMonthAriaLabel: previousMonthAriaLabel,
-        nextMonthAriaLabel: nextMonthAriaLabel,
-        locale: locale
-      });
-    },
-    customInput: React.createElement(DatePickerInput, {
-      style: style,
-      label: label,
-      inputPlaceholder: placeholder,
-      calendarButtonTooltipOpen: calendarButtonTooltipOpen,
-      calendarButtonTooltipClose: calendarButtonTooltipClose,
-      prepend: prepend,
-      feedback: getFeedbackAndVariant().feedback,
-      variant: getFeedbackAndVariant().variant,
-      inputRef: inputRef,
-      calendarButtonId: datepickerId + '-button',
-      forwardRef: ref,
-      onKeyDownInput: handleOnKeyDown,
-      onBlurInput: handleOnBlurInput,
-      onFocus: undefined,
-      toggleCalendarGUI: toggleCalendarGUI,
-      setFocusToCalendarGUI: setFocusToCalendarGUI,
-      setShouldFocusOnCalendarButtonAfterSelect: setShouldFocusOnCalendarButtonAfterSelect,
-      calendarGUIIsOpen: datePickerGUIIsOpen,
-      disableLabelAnimation: disableLabelAnimation,
-      hideCalendarButton: hideCalendarButton,
-      selectedDate: selectedDate
-    })
-  }, rest)));
-});
-
 var FieldSegment = function FieldSegment(_ref) {
   var segment = _ref.segment,
       state = _ref.state;
@@ -607,7 +174,7 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
   return norwegianAriaLabel;
 };
 
-var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "style", "className", "labelProps", "append"];
+var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
       label = _ref.label,
@@ -624,6 +191,8 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$validationFeedba = _ref.validationFeedback,
       validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
       labelTooltip = _ref.labelTooltip,
+      minValue = _ref.minDate,
+      maxValue = _ref.maxDate,
       style = _ref.style,
       className = _ref.className,
       parentLabelProps = _ref.labelProps,
@@ -638,7 +207,9 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     createCalendar: createCalendar,
     value: value === null ? undefined : value,
     hideTimeZone: !showTimeZone,
-    granularity: showTime ? 'minute' : granularity
+    granularity: showTime ? 'minute' : granularity,
+    minValue: minValue,
+    maxValue: maxValue
   }));
   var dateFieldRef = useRef(null);
 
@@ -700,12 +271,16 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
-var _excluded$6 = ["state", "date"];
+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);
 
   var cellRef = useRef(null);
@@ -732,13 +307,26 @@ var CalendarCell = function CalendarCell(_ref) {
       'eds-datepicker__calendar__grid__cell--outside-month': isOutsideVisibleRange,
       'eds-datepicker__calendar__grid__cell--today': isEqualDay(date, now((_state$timeZone = state.timeZone) != null ? _state$timeZone : getLocalTimeZone()))
     })
-  }, rest), formattedDate));
+  }, rest, {
+    onClick: function onClick(e) {
+      buttonProps.onClick && buttonProps.onClick(e);
+      isSelected && onSelectedCellClick();
+    },
+    onKeyDown: function onKeyDown(e) {
+      buttonProps.onKeyDown && buttonProps.onKeyDown(e);
+      if (e.key === 'Enter' || e.key === ' ') isSelected && onSelectedCellClick();
+    }
+  }), formattedDate));
 };
 
-var _excluded$5 = ["state", "navigationDescription"];
+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);
 
   var calendarGridId = useRandomId('eds-calendar');
@@ -755,8 +343,13 @@ var CalendarGrid = function CalendarGrid(_ref) {
   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'];
+    if (locale.toLowerCase().includes('no')) return ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'];
+
+    if (locale.toLowerCase().includes('en')) {
+      if (weekDays[0] === 'M') return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+      if (weekDays[0] === 'S') return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    }
+
     return weekDays.map(function (day) {
       return day.toLowerCase();
     });
@@ -783,7 +376,8 @@ var CalendarGrid = function CalendarGrid(_ref) {
         key: i,
         state: state,
         date: date,
-        "aria-describedby": calendarGridId + 'description'
+        "aria-describedby": calendarGridId + 'description',
+        onSelectedCellClick: onSelectedCellClick
       }) : React.createElement("td", {
         key: i
       });
@@ -793,12 +387,16 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription"];
+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);
 
   var _useLocale = useLocale(),
@@ -839,14 +437,15 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: 20
   }))), React.createElement(CalendarGrid, {
     state: state,
-    navigationDescription: navigationDescription
+    navigationDescription: navigationDescription,
+    onSelectedCellClick: onSelectedCellClick
   })));
 });
 
-var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate"];
-var DatePickerBeta = function DatePickerBeta(_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,
+      onChange = _ref.onChange,
       locale = _ref.locale,
       isDisabled = _ref.disabled,
       showTime = _ref.showTime,
@@ -863,9 +462,11 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       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 = 1000;
+  var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = useRef(null);
   var calendarRef = useRef(null);
   var dateFieldRef = useRef(null);
@@ -877,7 +478,7 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     minValue: minValue,
     maxValue: maxValue,
     value: value,
-    onChange: _onChange
+    onChange: onChange
   }));
 
   var _useDatePicker = useDatePicker(_extends({
@@ -890,24 +491,11 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       fieldProps = _useDatePicker.fieldProps,
       buttonProps = _useDatePicker.buttonProps,
       dialogProps = _useDatePicker.dialogProps,
-      calendarProps = _useDatePicker.calendarProps;
-
-  useEffect(function () {
-    var _calendarRef$current;
-
-    var keyDownHandler = function keyDownHandler(event) {
-      if (event.key === 'Escape') state.setOpen(false);
-    };
+      calendarProps = _useDatePicker.calendarProps; // calculations for floating-UI popover position
 
-    (_calendarRef$current = calendarRef.current) == null ? void 0 : _calendarRef$current.addEventListener('keydown', keyDownHandler);
-    return function () {
-      var _calendarRef$current2;
-
-      return (_calendarRef$current2 = calendarRef.current) == null ? void 0 : _calendarRef$current2.removeEventListener('keydown', keyDownHandler);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // calculations for floating-UI popover position
 
   var _useFloating = useFloating({
+    whileElementsMounted: autoUpdate,
     placement: 'bottom-start',
     middleware: [offset(space.extraSmall), flip(), shift({
       padding: space.extraSmall
@@ -919,53 +507,49 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       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 handleCalendarButtonOnClick = function handleCalendarButtonOnClick(calendarIsOpen) {
-    if (!calendarIsOpen) {
-      state.setOpen(true);
-      setFocusToRelevantDate();
-    } else {
-      state.setOpen(false);
-    }
-  };
-
-  var setFocusToRelevantDate = function setFocusToRelevantDate() {
-    var _calendarRef$current3, _calendarRef$current4;
-
-    var gridCellPrefix = 'eds-datepicker__calendar__grid__cell';
-    var selectedCell = (_calendarRef$current3 = calendarRef.current) == null ? void 0 : _calendarRef$current3.getElementsByClassName(gridCellPrefix + '--selected')[0];
-    var todayCell = (_calendarRef$current4 = calendarRef.current) == null ? void 0 : _calendarRef$current4.getElementsByClassName(gridCellPrefix + '--today')[0];
-    if (selectedCell) selectedCell.focus();else if (todayCell) todayCell.focus();
-  };
-
-  var popoverCalendar = React.createElement(React.Fragment, null, state.isOpen && React.createElement(FocusLock, {
-    disabled: !state.isOpen,
-    returnFocus: true
-  }, React.createElement(Calendar, _extends({}, dialogProps, calendarProps, {
-    onChange: function onChange(dateValue) {
-      _onChange(dateValue);
-
-      state.setOpen(false);
-    },
+  var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
     disabled: calendarProps.isDisabled,
-    ref: function ref(node) {
-      calendarRef.current = node;
-      floating(node);
-    },
     navigationDescription: navigationDescription,
+    onSelectedCellClick: function onSelectedCellClick() {
+      return state.setOpen(false);
+    },
+    onChange: onChangeCalendar
+  });
+
+  var useModal = width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
+  var popoverCalendar = React.createElement("div", {
     // styling for floating-UI popover
     style: {
       position: strategy,
       top: y != null ? y : 0,
       left: x != null ? x : 0,
       zIndex: zIndexes.popover
+    },
+    ref: function ref(node) {
+      floating(node);
     }
+  }, React.createElement(FocusLock, {
+    disabled: !state.isOpen || useModal,
+    returnFocus: true
+  }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps, {
+    ref: calendarRef
   }))));
   var modalCalendar = React.createElement(Modal, {
-    size: 'small',
+    size: "small",
     title: "",
     open: state.isOpen,
     onDismiss: function onDismiss() {
@@ -973,16 +557,7 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     },
     closeOnClickOutside: true,
     className: "eds-datepicker__calendar-modal"
-  }, React.createElement(Calendar, _extends({}, dialogProps, calendarProps, {
-    onChange: function onChange(dateValue) {
-      _onChange(dateValue);
-
-      state.setOpen(false);
-    },
-    disabled: calendarProps.isDisabled,
-    ref: calendarRef,
-    navigationDescription: navigationDescription
-  })));
+  }, React.createElement(Calendar, _extends({}, calendarSharedProps)));
   return React.createElement(ConditionalWrapper, {
     condition: locale !== undefined,
     wrapper: function wrapper(child) {
@@ -997,6 +572,7 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       datePickerRef.current = node;
       reference(node);
     },
+    id: undefined,
     className: "eds-datepicker__datefield__wrapper"
   }), React.createElement(DateField, _extends({}, fieldProps, {
     selectedDate: state.value,
@@ -1015,10 +591,10 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     })
   })), !fieldProps.isDisabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
     onPress: function onPress() {
-      return handleCalendarButtonOnClick(state.isOpen);
+      return state.setOpen(!state.isOpen);
     },
     className: "eds-datepicker__open-calendar-button"
-  }), React.createElement(CalendarIcon, null)), width > CALENDAR_MODAL_MAX_SCREEN_WIDTH || disableModal ? popoverCalendar : modalCalendar)));
+  }), React.createElement(CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
 };
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
@@ -1305,5 +881,5 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { Calendar, DateField, DatePicker, DatePickerBeta, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToTimeOrDateValue, timeOrDateValueToNativeDate };
+export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToTimeOrDateValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map