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

package/dist/datepicker.esm.js

@@ -1,4 +1,4 @@
-import { mergeRefs, useRandomId, useOnClickOutside, useOnMount, warnAboutMissingStyles } from '@entur/utils';
+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';
@@ -17,9 +17,11 @@ import { ZonedDateTime, parseAbsolute, Time, CalendarDateTime, GregorianCalendar
 import { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
 import { useCalendarState } from '@react-stately/calendar';
 import { useButton } from '@react-aria/button';
+import { VisuallyHidden } from '@entur/a11y';
 import { useFloating, offset, flip, shift } from '@floating-ui/react-dom';
 import FocusLock from 'react-focus-lock';
 import { space } from '@entur/tokens';
+import { Modal } from '@entur/modal';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -95,7 +97,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.forwardRef(function (_ref, ref) {
   var style = _ref.style,
       label = _ref.label,
@@ -119,7 +121,7 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
       calendarGUIIsOpen = _ref.calendarGUIIsOpen,
       onClick = _ref.onClick,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   React.useEffect(function () {
     var _inputRef$current, _inputRef$current2, _inputRef$current3;
@@ -197,7 +199,7 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, 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"];
 registerLocale('nb', nb);
 var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var style = _ref.style,
@@ -249,7 +251,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$locale = _ref.locale,
       locale = _ref$locale === void 0 ? nb : _ref$locale,
       open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var datepickerId = useRandomId('eds-datepicker');
   var datepickerRef = useRef(null);
@@ -582,14 +584,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.forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
       label = _ref.label,
+      customLocale = _ref.locale,
       showTimeZone = _ref.showTimeZone,
       showTime = _ref.showTime,
       _ref$granularity = _ref.granularity,
@@ -602,13 +605,13 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className = _ref.className,
       parentLabelProps = _ref.labelProps,
       append = _ref.append,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   var _useLocale = useLocale(),
       locale = _useLocale.locale;
 
   var state = useDateFieldState(_extends({}, rest, {
-    locale: locale,
+    locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
     value: value === null ? undefined : value,
     hideTimeZone: !showTimeZone,
@@ -624,7 +627,14 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       fieldProps = _useDateField.fieldProps;
 
   var id = useRandomId('datefield');
-  return React.createElement(BaseFormControl, _extends({
+  return React.createElement(ConditionalWrapper, {
+    condition: customLocale !== undefined,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: customLocale
+      }, child);
+    }
+  }, React.createElement(BaseFormControl, _extends({
     style: style,
     className: classNames('eds-datefield', className),
     labelId: id,
@@ -644,15 +654,15 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, 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 = useRef(null);
 
@@ -666,11 +676,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 = _ref.date;
+      date = _ref.date,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
   var cellRef = useRef(null);
 
   var _useCalendarCell = useCalendarCell({
@@ -695,14 +708,17 @@ var CalendarCell = function CalendarCell(_ref) {
       'eds-datepicker__calendar__grid__cell--unavailable': isUnavailable,
       'eds-datepicker__calendar__grid__cell--today': isEqualDay(date, now((_state$timeZone = state.timeZone) != null ? _state$timeZone : 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 = useRandomId('eds-calendar');
+
   var _useLocale = useLocale(),
       locale = _useLocale.locale;
 
@@ -722,7 +738,13 @@ var CalendarGrid = function CalendarGrid(_ref) {
     });
   };
 
-  return React.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.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
     cellSpacing: "0",
     className: "eds-datepicker__calendar__grid"
   }), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, weekDaysMapped().map(function (day, index) {
@@ -736,24 +758,31 @@ var CalendarGrid = function CalendarGrid(_ref) {
       return date ? React.createElement(CalendarCell, {
         key: i,
         state: state,
-        date: date
+        date: date,
+        "aria-describedby": calendarGridId + 'description'
       }) : React.createElement("td", {
         key: i
       });
     }));
-  })));
+  }))), React.createElement(VisuallyHidden, {
+    id: calendarGridId + 'description'
+  }, getNavigationDescription()));
 };
 
-var _excluded$4 = ["selectedDate", "style", "children"];
+var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription"];
 var Calendar = /*#__PURE__*/React.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 = useLocale(),
       locale = _useLocale.locale;
 
   var state = useCalendarState(_extends({}, rest, {
-    locale: locale,
+    onChange: onChange,
+    locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar
   }));
 
@@ -761,10 +790,16 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       calendarProps = _useCalendar.calendarProps,
       prevButtonProps = _useCalendar.prevButtonProps,
       nextButtonProps = _useCalendar.nextButtonProps,
-      title = _useCalendar.title; // const monthAndYear = title.split(' ');
-
-
-  return React.createElement("div", _extends({}, calendarProps, {
+      title = _useCalendar.title;
+
+  return React.createElement(ConditionalWrapper, {
+    condition: customLocale,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: customLocale
+      }, child);
+    }
+  }, React.createElement("div", _extends({}, calendarProps, {
     ref: ref,
     className: "eds-datepicker__calendar",
     style: style
@@ -779,48 +814,32 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), React.createElement(RightArrowIcon, {
     size: 20
   }))), React.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 = useRef(null);
   var calendarRef = useRef(null);
-  var dateFieldRef = useRef(null); // TODO SE PÅ OM VERDIER I USE...STATE BURDE VÆRE I USE... I STEDET
+  var dateFieldRef = useRef(null);
+
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width;
 
   var state = useDatePickerState(_extends({}, rest, {
     value: value,
@@ -835,8 +854,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;
+
+  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 = useFloating({
     placement: 'bottom-start',
@@ -848,35 +881,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;
 
+  useOnClickOutside([calendarRef], function () {
+    state.setOpen(false);
+  });
 
-  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]);
-  useOnClickOutside([calendarRef], function () {
-    state.setOpen(false);
-  });
-  useEffect(function () {
-    var _calendarRef$current3;
+  };
 
-    var keyDownHandler = function keyDownHandler(event) {
-      if (event.key === 'Escape') state.setOpen(false);
-    };
+  var popoverCalendar = React.createElement(FocusLock, {
+    disabled: !state.isOpen,
+    returnFocus: true
+  }, React.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.createElement(Modal, {
+    size: 'small',
+    title: "",
+    open: state.isOpen,
+    onDismiss: function onDismiss() {
+      return state.setOpen(false);
+    },
+    closeOnClickOutside: true,
+    className: "eds-datepicker__calendar-modal"
+  }, React.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.createElement("div", {
+      state.setOpen(false);
+    },
+    disabled: calendarProps.isDisabled,
+    ref: calendarRef,
+    navigationDescription: navigationDescription
+  })));
+  return React.createElement(ConditionalWrapper, {
+    condition: locale !== undefined,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: locale
+      }, child);
+    }
+  }, React.createElement("div", {
     className: classNames('eds-datepicker', className)
   }, React.createElement("div", _extends({}, groupProps, {
     ref: function ref(node) {
@@ -896,32 +975,10 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     feedback: feedback
   })), !fieldProps.isDisabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
     onPress: function onPress() {
-      return state.setOpen(!state.isOpen);
+      return handleCalendarButtonOnClick(state.isOpen);
     },
     className: "eds-datepicker__open-calendar-button"
-  }), React.createElement(CalendarIcon, null))), React.createElement(FocusLock, {
-    disabled: !state.isOpen,
-    returnFocus: true
-  }, React.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.createElement(CalendarIcon, null)), width > CALENDAR_MODAL_MAX_SCREEN_WIDTH || disableModal ? popoverCalendar : modalCalendar)));
 };
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],