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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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/DatePicker.d.ts

@@ -24,10 +24,18 @@ declare type DatePickerProps = {
     /** Valideringsvariant */
     variant?: VariantType;
     disabled?: boolean;
+    /** Hvis true vil kalenderen alltid vises i en popover når den åpnes
+     *  @default false
+     */
+    disableModal?: boolean;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
+    /** 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;
     [key: string]: any;
 };
-export declare const DatePickerBeta: ({ selectedDate: value, onChange, disabled: isDisabled, className, style, variant, feedback, ...rest }: DatePickerProps) => JSX.Element;
+export declare const DatePickerBeta: ({ selectedDate: value, onChange, locale, disabled: isDisabled, className, style, variant, feedback, disableModal, 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", "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,
@@ -613,13 +616,13 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
       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 +638,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,
@@ -655,15 +665,15 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
       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 +687,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({
@@ -706,14 +719,17 @@ var CalendarCell = function CalendarCell(_ref) {
       'eds-datepicker__calendar__grid__cell--unavailable': isUnavailable,
       '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 +749,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 +769,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 +801,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 +825,32 @@ 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", "className", "style", "variant", "feedback", "disableModal", "navigationDescription"];
 var DatePickerBeta = function DatePickerBeta(_ref) {
   var value = _ref.selectedDate,
       _onChange = _ref.onChange,
+      locale = _ref.locale,
       isDisabled = _ref.disabled,
       className = _ref.className,
       variant = _ref.variant,
       feedback = _ref.feedback,
+      _ref$disableModal = _ref.disableModal,
+      disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
+      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 +865,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,35 +892,81 @@ 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;
 
+  utils.useOnClickOutside([calendarRef], function () {
+    state.setOpen(false);
+  });
 
-  React.useEffect(function () {
-    var _calendarRef$current, _calendarRef$current2;
+  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$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];
+    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();
-  }, [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 popoverCalendar = React__default["default"].createElement(FocusLock__default["default"], {
+    disabled: !state.isOpen,
+    returnFocus: true
+  }, React__default["default"].createElement(Calendar, _extends({}, dialogProps, calendarProps, {
+    onChange: function onChange(dateValue) {
+      _onChange(dateValue);
 
-    (_calendarRef$current3 = calendarRef.current) == null ? void 0 : _calendarRef$current3.addEventListener('keydown', keyDownHandler);
-    return function () {
-      var _calendarRef$current4;
+      state.setOpen(false);
+    },
+    disabled: calendarProps.isDisabled,
+    ref: function ref(node) {
+      calendarRef.current = node;
+      floating(node);
+    },
+    navigationDescription: navigationDescription,
+    // styling for floating-UI popover
+    style: {
+      display: state.isOpen ? 'block' : 'none',
+      position: strategy,
+      top: y != null ? y : 0,
+      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);
 
-      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", {
+      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) {
@@ -907,32 +986,10 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     feedback: feedback
   })), !fieldProps.isDisabled && React__default["default"].createElement(CalendarButton, _extends({}, buttonProps, {
     onPress: function onPress() {
-      return state.setOpen(!state.isOpen);
+      return handleCalendarButtonOnClick(state.isOpen);
     },
     className: "eds-datepicker__open-calendar-button"
-  }), React__default["default"].createElement(icons.CalendarIcon, null))), React__default["default"].createElement(FocusLock__default["default"], {
-    disabled: !state.isOpen,
-    returnFocus: true
-  }, React__default["default"].createElement(Calendar, _extends({}, dialogProps, calendarProps, {
-    onChange: function onChange(dateValue) {
-      _onChange(dateValue);
-
-      state.setOpen(false);
-    },
-    disabled: calendarProps.isDisabled,
-    ref: function ref(node) {
-      calendarRef.current = node;
-      floating(node);
-    },
-    // styling for floating-UI popover
-    style: {
-      display: state.isOpen ? 'block' : 'none',
-      position: strategy,
-      top: y != null ? y : 0,
-      left: x != null ? x : 0,
-      zIndex: 10
-    }
-  }))));
+  }), 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"],