@entur/datepicker 4.0.0-alpha.0 → 4.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-alpha.1...@entur/datepicker@4.0.0-beta.0) (2022-10-27)
+
+### Bug Fixes
+
+- **datepicker:** final touches to datepicker and supcomponents ([8c21915](https://bitbucket.org/enturas/design-system/commits/8c21915cea21346444bfdf2b66bfe10de1c9fcba))
+
+# [4.0.0-alpha.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-alpha.0...@entur/datepicker@4.0.0-alpha.1) (2022-10-26)
+
+### Bug Fixes
+
+- **datepicker:** fix locale issues ([8c325b8](https://bitbucket.org/enturas/design-system/commits/8c325b86088feb9f8a7d4ad538a18ec6d78e202d))
+
+### Features
+
+- **datepicker:** add i18y-wrapper to components for locale ([aed14fb](https://bitbucket.org/enturas/design-system/commits/aed14fb32e789159b4021c8b740a8101b83228fa))
+- **datepicker:** add modal view for calendar when using small screen widths ([05d9325](https://bitbucket.org/enturas/design-system/commits/05d9325a83dbc8d7d2e62050e7d6bbecbe2f665e))
+
 # [4.0.0-alpha.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@3.0.2...@entur/datepicker@4.0.0-alpha.0) (2022-10-20)
 
 ### Bug Fixes

package/dist/DatePicker/beta/Calendar.d.ts

@@ -3,6 +3,8 @@ import { DateValue } from '@internationalized/date';
 import './Calendar.scss';
 declare type CalendarProps = {
     selectedDate: DateValue;
+    onChange: (SelectedDate: DateValue) => void;
+    navigationDescription?: string;
     style?: React.CSSProperties;
     [key: string]: any;
 };

package/dist/DatePicker/beta/CalendarCell.d.ts

@@ -5,5 +5,5 @@ declare type CalendarCellProps = {
     state: CalendarState;
     date: CalendarDate;
 };
-export declare const CalendarCell: ({ state, date }: CalendarCellProps) => JSX.Element;
+export declare const CalendarCell: ({ state, date, ...rest }: CalendarCellProps) => JSX.Element;
 export {};

package/dist/DatePicker/beta/CalendarGrid.d.ts

@@ -2,6 +2,7 @@
 import { CalendarState } from '@react-stately/calendar';
 declare type CalendarGridProps = {
     state: CalendarState;
+    navigationDescription?: string;
 };
-export declare const CalendarGrid: ({ state, ...rest }: CalendarGridProps) => JSX.Element;
+export declare const CalendarGrid: ({ state, navigationDescription, ...rest }: CalendarGridProps) => JSX.Element;
 export {};

package/dist/DatePicker/beta/DateField.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SpectrumDateFieldProps, DateValue } from '@react-types/datepicker';
+import type { CalendarDate } from '@internationalized/date';
 import { VariantType } from '@entur/form';
 import './DateField.scss';
 export declare type DateFieldProps = {
@@ -18,15 +19,28 @@ export declare type DateFieldProps = {
      */
     showTimeZone?: boolean;
     showTime?: boolean;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone */
+    minValue?: CalendarDate;
+    /** Seneste gyldige datovalg. (se minValue) */
+    maxValue?: CalendarDate;
     /** Varselmelding, som vil komme under TimePicker */
     feedback?: string;
     /** Valideringsvariant */
     variant?: VariantType;
+    /** Varselmelding som forteller om ugyldig dato
+     * @default "Ugyldig dato"
+     */
+    validationFeedback?: string;
+    /** Valideringsvariant for melding om ugyldig dato
+     * @default "error"
+     */
+    validationVariant?: VariantType;
     labelTooltip?: React.ReactNode;
     disabled?: boolean;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
     [key: string]: any;
-} & Omit<SpectrumDateFieldProps<DateValue>, 'onChange' | 'label' | 'hideTimeZone' | 'placeholder'>;
+} & Omit<SpectrumDateFieldProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
 export declare const DateField: React.ForwardRefExoticComponent<Pick<DateFieldProps, string | number> & React.RefAttributes<HTMLDivElement>>;

package/dist/DatePicker/beta/DatePicker.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { DateValue } from '@react-types/datepicker';
-import { VariantType } from '@entur/form';
+import type { CalendarDate } from '@internationalized/date';
+import type { DateValue, SpectrumDatePickerProps } from '@react-types/datepicker';
+import type { VariantType } from '@entur/form';
 import './DatePicker.scss';
 declare type DatePickerProps = {
     /** Den valgte datoen. Dato i '@internationalized/date'-pakkens format */
@@ -17,17 +18,46 @@ declare type DatePickerProps = {
      * @default false
      */
     showTimeZone?: boolean;
-    /** Viser tidspunkt i tillegg til dato hvis det er tilgjengelig */
+    /** Viser tidspunkt i tillegg til dato.
+     * OBS: selectedDate må være av typen CalendarDateTime eller ZonedDateTime
+     */
     showTime?: boolean;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone. */
+    minValue?: CalendarDate;
+    /** Seneste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone
+     *
+     * OBS: Hvis du bruker dato med tid vil det være til, men ikke med denne datoen */
+    maxValue?: CalendarDate;
+    /** Funksjon som tar inn en dato og sier om den er utilgjengelig.
+     * Eks. (date) => isWeekend(date, 'no-NO') == helgedager er ikke tilgjengelig */
+    isDateUnavailable?: (date: DateValue) => boolean;
     /** Varselmelding, som vil komme under DatePicker sitt inputfelt */
     feedback?: string;
     /** Valideringsvariant */
     variant?: VariantType;
+    /** Varselmelding som forteller om ugyldig dato
+     * @default "Ugyldig dato"
+     */
+    validationFeedback?: string;
+    /** Valideringsvariant for melding om ugyldig dato
+     * @default "error"
+     */
+    validationVariant?: VariantType;
     disabled?: boolean;
+    /** Hvis true vil kalenderen alltid vises i en popover når den åpnes
+     *  @default false
+     */
+    disableModal?: boolean;
+    labelTooltip?: React.ReactNode;
+    /** Skjermlesertest som forklarer navigasjon i kalenderen. Oversettes automatisk for engelsk locale, men ikke andre språk.
+     * @default 'Bruk piltastene til å navigere mellom datoer'
+     */
+    navigationDescription?: string;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-    [key: string]: any;
-};
-export declare const DatePickerBeta: ({ selectedDate: value, onChange, disabled: isDisabled, className, style, variant, feedback, ...rest }: DatePickerProps) => JSX.Element;
+} & Omit<SpectrumDatePickerProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
+export declare const DatePickerBeta: ({ selectedDate: value, onChange, locale, disabled: isDisabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, ...rest }: DatePickerProps) => JSX.Element;
 export {};

package/dist/datepicker.cjs.development.js

@@ -21,9 +21,11 @@ var date = require('@internationalized/date');
 var calendar = require('@react-aria/calendar');
 var calendar$1 = require('@react-stately/calendar');
 var button$1 = require('@react-aria/button');
+var a11y = require('@entur/a11y');
 var reactDom = require('@floating-ui/react-dom');
 var FocusLock = require('react-focus-lock');
 var tokens = require('@entur/tokens');
+var modal = require('@entur/modal');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -106,7 +108,7 @@ function getMonthName(monthIndex, locale) {
   return formatter.format(new Date(year, monthIndex));
 }
 
-var _excluded$9 = ["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 _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__default["default"].forwardRef(function (_ref, ref) {
   var style = _ref.style,
       label = _ref.label,
@@ -130,7 +132,7 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
       setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
       calendarGUIIsOpen = _ref.calendarGUIIsOpen,
       onClick = _ref.onClick,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   React__default["default"].useEffect(function () {
     var _inputRef$current, _inputRef$current2, _inputRef$current3;
@@ -208,7 +210,7 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
   }, rest));
 });
 
-var _excluded$8 = ["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"];
+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"];
 ReactDatepicker.registerLocale('nb', locale.nb);
 var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var style = _ref.style,
@@ -260,7 +262,7 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
       _ref$locale = _ref.locale,
       locale$1 = _ref$locale === void 0 ? locale.nb : _ref$locale,
       open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var datepickerId = utils.useRandomId('eds-datepicker');
   var datepickerRef = React.useRef(null);
@@ -593,14 +595,15 @@ var createCalendar = function createCalendar(identifier) {
   }
 };
 var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, locale, propsCollection) {
-  if (locale !== 'no-NO') return propsCollection['aria-label'];
+  if (locale.toLowerCase() !== 'no-no') return propsCollection['aria-label'];
   return norwegianAriaLabel;
 };
 
-var _excluded$7 = ["selectedDate", "label", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "labelTooltip", "style", "className", "labelProps", "append"];
+var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
       label = _ref.label,
+      customLocale = _ref.locale,
       showTimeZone = _ref.showTimeZone,
       showTime = _ref.showTime,
       _ref$granularity = _ref.granularity,
@@ -608,18 +611,22 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
       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$7);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   var _useLocale = i18n.useLocale(),
       locale = _useLocale.locale;
 
   var state = datepicker$1.useDateFieldState(_extends({}, rest, {
-    locale: locale,
+    locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
     value: value === null ? undefined : value,
     hideTimeZone: !showTimeZone,
@@ -635,7 +642,14 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
       fieldProps = _useDateField.fieldProps;
 
   var id = utils.useRandomId('datefield');
-  return React__default["default"].createElement(form.BaseFormControl, _extends({
+  return React__default["default"].createElement(utils.ConditionalWrapper, {
+    condition: customLocale !== undefined,
+    wrapper: function wrapper(child) {
+      return React__default["default"].createElement(i18n.I18nProvider, {
+        locale: customLocale
+      }, child);
+    }
+  }, React__default["default"].createElement(form.BaseFormControl, _extends({
     style: style,
     className: classNames__default["default"]('eds-datefield', className),
     labelId: id,
@@ -646,24 +660,25 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
     labelTooltip: labelTooltip,
     labelProps: parentLabelProps != null ? parentLabelProps : labelProps
   }, fieldProps, {
-    variant: variant,
-    feedback: feedback,
-    append: append
+    variant: (variant != null ? variant : state.validationState === 'invalid') ? validationVariant : undefined,
+    feedback: (feedback != null ? feedback : state.validationState === 'invalid') ? validationFeedback : undefined,
+    append: append,
+    ariaAlertOnFeedback: true
   }), state.segments.map(function (segment, i) {
     return React__default["default"].createElement(FieldSegment, {
       segment: segment,
       state: state,
       key: i
     });
-  }));
+  })));
 });
 
-var _excluded$6 = ["children", "className", "style"];
+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$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var ref = React.useRef(null);
 
@@ -677,11 +692,14 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
+var _excluded$6 = ["state", "date"];
 var CalendarCell = function CalendarCell(_ref) {
   var _state$timeZone;
 
   var state = _ref.state,
-      date$1 = _ref.date;
+      date$1 = _ref.date,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
   var cellRef = React.useRef(null);
 
   var _useCalendarCell = calendar.useCalendarCell({
@@ -702,18 +720,21 @@ var CalendarCell = function CalendarCell(_ref) {
     hidden: isOutsideVisibleRange,
     className: classNames__default["default"]('eds-datepicker__calendar__grid__cell', {
       'eds-datepicker__calendar__grid__cell--selected': isSelected,
-      'eds-datepicker__calendar__grid__cell--disabled': isDisabled,
-      'eds-datepicker__calendar__grid__cell--unavailable': isUnavailable,
+      'eds-datepicker__calendar__grid__cell--disabled': isDisabled || isUnavailable,
+      'eds-datepicker__calendar__grid__cell--outside-month': isOutsideVisibleRange,
       'eds-datepicker__calendar__grid__cell--today': date.isEqualDay(date$1, date.now((_state$timeZone = state.timeZone) != null ? _state$timeZone : date.getLocalTimeZone()))
     })
-  }), formattedDate));
+  }, rest), formattedDate));
 };
 
-var _excluded$5 = ["state"];
+var _excluded$5 = ["state", "navigationDescription"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
+      navigationDescription = _ref.navigationDescription,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
+  var calendarGridId = utils.useRandomId('eds-calendar');
+
   var _useLocale = i18n.useLocale(),
       locale = _useLocale.locale;
 
@@ -733,7 +754,13 @@ var CalendarGrid = function CalendarGrid(_ref) {
     });
   };
 
-  return React__default["default"].createElement("table", _extends({}, gridProps, {
+  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__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("table", _extends({}, gridProps, {
     cellSpacing: "0",
     className: "eds-datepicker__calendar__grid"
   }), React__default["default"].createElement("thead", _extends({}, headerProps), React__default["default"].createElement("tr", null, weekDaysMapped().map(function (day, index) {
@@ -747,24 +774,31 @@ var CalendarGrid = function CalendarGrid(_ref) {
       return date ? React__default["default"].createElement(CalendarCell, {
         key: i,
         state: state,
-        date: date
+        date: date,
+        "aria-describedby": calendarGridId + 'description'
       }) : React__default["default"].createElement("td", {
         key: i
       });
     }));
-  })));
+  }))), React__default["default"].createElement(a11y.VisuallyHidden, {
+    id: calendarGridId + 'description'
+  }, getNavigationDescription()));
 };
 
-var _excluded$4 = ["selectedDate", "style", "children"];
+var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription"];
 var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var style = _ref.style,
+  var onChange = _ref.onChange,
+      customLocale = _ref.locale,
+      style = _ref.style,
+      navigationDescription = _ref.navigationDescription,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   var _useLocale = i18n.useLocale(),
       locale = _useLocale.locale;
 
   var state = calendar$1.useCalendarState(_extends({}, rest, {
-    locale: locale,
+    onChange: onChange,
+    locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar
   }));
 
@@ -772,10 +806,16 @@ var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       calendarProps = _useCalendar.calendarProps,
       prevButtonProps = _useCalendar.prevButtonProps,
       nextButtonProps = _useCalendar.nextButtonProps,
-      title = _useCalendar.title; // const monthAndYear = title.split(' ');
-
-
-  return React__default["default"].createElement("div", _extends({}, calendarProps, {
+      title = _useCalendar.title;
+
+  return React__default["default"].createElement(utils.ConditionalWrapper, {
+    condition: customLocale,
+    wrapper: function wrapper(child) {
+      return React__default["default"].createElement(i18n.I18nProvider, {
+        locale: customLocale
+      }, child);
+    }
+  }, React__default["default"].createElement("div", _extends({}, calendarProps, {
     ref: ref,
     className: "eds-datepicker__calendar",
     style: style
@@ -790,48 +830,38 @@ var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }), React__default["default"].createElement(icons.RightArrowIcon, {
     size: 20
   }))), React__default["default"].createElement(CalendarGrid, {
-    state: state
-  }));
-}); // const getTitle = (monthYearList: string[], locale: string) => {
-//   const month = monthYearList[0];
-//   const year = monthYearList[1];
-//   if (locale.toLowerCase() !== 'no-no' && locale.toLowerCase() !== 'no')
-//     return month + ' ' + year;
-//   switch (month.toLowerCase()) {
-//     case 'january':
-//       return 'januar ' + year;
-//     case 'february':
-//       return 'februar ' + year;
-//     case 'march':
-//       return 'mars ' + year;
-//     case 'may':
-//       return 'mai ' + year;
-//     case 'june':
-//       return 'juni ' + year;
-//     case 'july':
-//       return 'juli ' + year;
-//     case 'october':
-//       return 'oktober ' + year;
-//     case 'december':
-//       return 'desember ' + year;
-//     default:
-//       return month.toLowerCase() + ' ' + year.toLowerCase();
-//   }
-// };
-
-var _excluded$3 = ["selectedDate", "onChange", "disabled", "className", "style", "variant", "feedback"];
+    state: state,
+    navigationDescription: navigationDescription
+  })));
+});
+
+var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription"];
 var DatePickerBeta = function DatePickerBeta(_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,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
+  var CALENDAR_MODAL_MAX_SCREEN_WIDTH = 1000;
   var datePickerRef = React.useRef(null);
   var calendarRef = React.useRef(null);
-  var dateFieldRef = React.useRef(null); // TODO SE PÅ OM VERDIER I USE...STATE BURDE VÆRE I USE... I STEDET
+  var dateFieldRef = React.useRef(null);
+
+  var _useWindowDimensions = utils.useWindowDimensions(),
+      width = _useWindowDimensions.width;
 
   var state = datepicker$1.useDatePickerState(_extends({}, rest, {
     value: value,
@@ -846,8 +876,22 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       fieldProps = _useDatePicker.fieldProps,
       buttonProps = _useDatePicker.buttonProps,
       dialogProps = _useDatePicker.dialogProps,
-      calendarProps = _useDatePicker.calendarProps; // calculations for floating-UI popover position
+      calendarProps = _useDatePicker.calendarProps;
+
+  React.useEffect(function () {
+    var _calendarRef$current;
 
+    var keyDownHandler = function keyDownHandler(event) {
+      if (event.key === 'Escape') state.setOpen(false);
+    };
+
+    (_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 = reactDom.useFloating({
     placement: 'bottom-start',
@@ -859,58 +903,31 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       y = _useFloating.y,
       reference = _useFloating.reference,
       floating = _useFloating.floating,
-      strategy = _useFloating.strategy; // set focus to selected date or today if available on open calendar
+      strategy = _useFloating.strategy;
 
-
-  React.useEffect(function () {
-    var _calendarRef$current, _calendarRef$current2;
-
-    var gridCellPrefix = 'eds-datepicker__calendar__grid__cell';
-    var selectedCell = (_calendarRef$current = calendarRef.current) == null ? void 0 : _calendarRef$current.getElementsByClassName(gridCellPrefix + '--selected')[0];
-    var todayCell = (_calendarRef$current2 = calendarRef.current) == null ? void 0 : _calendarRef$current2.getElementsByClassName(gridCellPrefix + '--today')[0];
-    if (selectedCell) selectedCell.focus();else if (todayCell) todayCell.focus();
-  }, [state.isOpen]);
   utils.useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
   });
-  React.useEffect(function () {
-    var _calendarRef$current3;
 
-    var keyDownHandler = function keyDownHandler(event) {
-      if (event.key === 'Escape') state.setOpen(false);
-    };
+  var handleCalendarButtonOnClick = function handleCalendarButtonOnClick(calendarIsOpen) {
+    if (!calendarIsOpen) {
+      state.setOpen(true);
+      setFocusToRelevantDate();
+    } else {
+      state.setOpen(false);
+    }
+  };
 
-    (_calendarRef$current3 = calendarRef.current) == null ? void 0 : _calendarRef$current3.addEventListener('keydown', keyDownHandler);
-    return function () {
-      var _calendarRef$current4;
+  var setFocusToRelevantDate = function setFocusToRelevantDate() {
+    var _calendarRef$current3, _calendarRef$current4;
 
-      return (_calendarRef$current4 = calendarRef.current) == null ? void 0 : _calendarRef$current4.removeEventListener('keydown', keyDownHandler);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return React__default["default"].createElement("div", {
-    className: classNames__default["default"]('eds-datepicker', className)
-  }, React__default["default"].createElement("div", _extends({}, groupProps, {
-    ref: function ref(node) {
-      datePickerRef.current = node;
-      reference(node);
-    },
-    className: "eds-datepicker__datefield__wrapper"
-  }), React__default["default"].createElement(DateField, _extends({}, fieldProps, {
-    selectedDate: state.value,
-    label: rest.label,
-    labelProps: labelProps,
-    ref: dateFieldRef,
-    className: classNames__default["default"]('eds-datepicker__datefield', {
-      'eds-datepicker__datefield--disabled': fieldProps.isDisabled
-    }),
-    variant: variant,
-    feedback: feedback
-  })), !fieldProps.isDisabled && React__default["default"].createElement(CalendarButton, _extends({}, buttonProps, {
-    onPress: function onPress() {
-      return state.setOpen(!state.isOpen);
-    },
-    className: "eds-datepicker__open-calendar-button"
-  }), React__default["default"].createElement(icons.CalendarIcon, null))), React__default["default"].createElement(FocusLock__default["default"], {
+    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__default["default"].createElement(FocusLock__default["default"], {
     disabled: !state.isOpen,
     returnFocus: true
   }, React__default["default"].createElement(Calendar, _extends({}, dialogProps, calendarProps, {
@@ -924,6 +941,7 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       calendarRef.current = node;
       floating(node);
     },
+    navigationDescription: navigationDescription,
     // styling for floating-UI popover
     style: {
       display: state.isOpen ? 'block' : 'none',
@@ -932,7 +950,62 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       left: x != null ? x : 0,
       zIndex: 10
     }
-  }))));
+  })));
+  var modalCalendar = React__default["default"].createElement(modal.Modal, {
+    size: 'small',
+    title: "",
+    open: state.isOpen,
+    onDismiss: function onDismiss() {
+      return state.setOpen(false);
+    },
+    closeOnClickOutside: true,
+    className: "eds-datepicker__calendar-modal"
+  }, React__default["default"].createElement(Calendar, _extends({}, dialogProps, calendarProps, {
+    onChange: function onChange(dateValue) {
+      _onChange(dateValue);
+
+      state.setOpen(false);
+    },
+    disabled: calendarProps.isDisabled,
+    ref: calendarRef,
+    navigationDescription: navigationDescription
+  })));
+  return React__default["default"].createElement(utils.ConditionalWrapper, {
+    condition: locale !== undefined,
+    wrapper: function wrapper(child) {
+      return React__default["default"].createElement(i18n.I18nProvider, {
+        locale: locale
+      }, child);
+    }
+  }, React__default["default"].createElement("div", {
+    className: classNames__default["default"]('eds-datepicker', className)
+  }, React__default["default"].createElement("div", _extends({}, groupProps, {
+    ref: function ref(node) {
+      datePickerRef.current = node;
+      reference(node);
+    },
+    className: "eds-datepicker__datefield__wrapper"
+  }), React__default["default"].createElement(DateField, _extends({}, fieldProps, {
+    selectedDate: state.value,
+    label: rest.label,
+    labelProps: labelProps,
+    showTime: showTime,
+    showTimeZone: showTimeZone,
+    ref: dateFieldRef,
+    variant: variant,
+    feedback: feedback,
+    validationVariant: validationVariant,
+    validationFeedback: validationFeedback,
+    labelTooltip: labelTooltip,
+    className: classNames__default["default"]('eds-datepicker__datefield', {
+      'eds-datepicker__datefield--disabled': fieldProps.isDisabled
+    })
+  })), !fieldProps.isDisabled && React__default["default"].createElement(CalendarButton, _extends({}, buttonProps, {
+    onPress: function onPress() {
+      return handleCalendarButtonOnClick(state.isOpen);
+    },
+    className: "eds-datepicker__open-calendar-button"
+  }), React__default["default"].createElement(icons.CalendarIcon, null)), width > CALENDAR_MODAL_MAX_SCREEN_WIDTH || disableModal ? popoverCalendar : modalCalendar)));
 };
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],