@entur/datepicker 9.1.4 → 9.1.6

package/dist/datepicker.esm.js

@@ -5,7 +5,7 @@ import { useDateSegment, useDateField, useDatePicker, useTimeField } from '@reac
 import { useLocale, I18nProvider } from '@react-aria/i18n';
 import classNames from 'classnames';
 import { BaseFormControl, useVariant, useInputGroupContext, isFilled, TextField } from '@entur/form';
-import { CalendarDate, Time, getLocalTimeZone, GregorianCalendar, toCalendarDateTime, toZoned, toCalendarDate, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, now, getWeeksInMonth, toTime, parseTime } from '@internationalized/date';
+import { CalendarDate, Time, getLocalTimeZone, GregorianCalendar, toCalendarDateTime, toTime, now, toZoned, today, toCalendarDate, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, getWeeksInMonth, parseTime } from '@internationalized/date';
 export { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from '@internationalized/date';
 import { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
 import { useCalendarState } from '@react-stately/calendar';
@@ -45,9 +45,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$b = ["segment", "state"];
 var FieldSegment = function FieldSegment(_ref) {
   var segment = _ref.segment,
-    state = _ref.state;
+    state = _ref.state,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var ref = useRef(null);
   var _useDateSegment = useDateSegment(segment, state, ref),
     segmentProps = _useDateSegment.segmentProps;
@@ -58,7 +60,7 @@ var FieldSegment = function FieldSegment(_ref) {
       'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
     }),
     tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
-  }), segment.text);
+  }, rest), segment.text);
 };
 
 var nativeDateToDateTime = function nativeDateToDateTime(date, timeZone, offset) {
@@ -154,21 +156,46 @@ var lastMillisecondOfDay = function lastMillisecondOfDay(dateValue) {
 };
 var convertValueToType = function convertValueToType(_ref) {
   var value = _ref.value,
-    type = _ref.type;
+    type = _ref.type,
+    _ref$timezone = _ref.timezone,
+    timezone = _ref$timezone === void 0 ? 'Europe/Oslo' : _ref$timezone;
   if (value === null) return null;
   switch (type) {
     case 'CalendarDate':
+      if (!('day' in value)) return today(timezone);
       return toCalendarDate(value);
     case 'CalendarDateTime':
+      if (!('day' in value)) return toCalendarDateTime(today(timezone), value);
       return toCalendarDateTime(value);
     case 'ZonedDateTime':
-      return toZoned(value, 'Europe/Oslo');
+      if (!('day' in value)) return toZoned(toCalendarDateTime(today(timezone), value), timezone);
+      return toZoned(value, timezone);
+    case 'Time':
+      if (!('hour' in value)) return toTime(now(timezone));
+      if (!('day' in value)) return value;
+      return toTime(value);
     default:
       return value;
   }
 };
+var modulo = function modulo(a, b) {
+  return (a % b + b) % b;
+};
+var focusSegment = function focusSegment(ref, segment) {
+  if (ref.current) {
+    var segments = ref.current.querySelectorAll('.eds-date-and-time-field__segment');
+    var firstSegment = segments[0];
+    var lastSegment = segments[segments.length - 1];
+    switch (segment) {
+      case 'first':
+        return firstSegment.focus();
+      case 'last':
+        return lastSegment.focus();
+    }
+  }
+};
 
-var _excluded$9 = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
+var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -193,7 +220,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
     append = _ref.append,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var state = useDateFieldState(_extends({}, rest, {
@@ -234,8 +261,8 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     labelTooltip: labelTooltip,
     labelProps: parentLabelProps != null ? parentLabelProps : labelProps
   }, fieldProps, {
-    variant: (variant != null ? variant : state.validationState === 'invalid') ? validationVariant : undefined,
-    feedback: (feedback != null ? feedback : state.validationState === 'invalid') ? validationFeedback : undefined,
+    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) {
@@ -247,12 +274,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var _excluded$8 = ["children", "className", "style"];
+var _excluded$9 = ["children", "className", "style"];
 var CalendarButton = function CalendarButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var ref = useRef(null);
   var _useButton = useButton(props, ref),
     buttonProps = _useButton.buttonProps;
@@ -263,7 +290,7 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
-var _excluded$7 = ["state", "date", "onSelectedCellClick"];
+var _excluded$8 = ["state", "date", "onSelectedCellClick"];
 var CalendarCell = function CalendarCell(_ref) {
   var _state$timeZone;
   var state = _ref.state,
@@ -272,7 +299,7 @@ var CalendarCell = function CalendarCell(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var cellRef = useRef(null);
   var _useCalendarCell = useCalendarCell({
       date: date
@@ -307,7 +334,7 @@ var CalendarCell = function CalendarCell(_ref) {
   }), formattedDate));
 };
 
-var _excluded$6 = ["state", "navigationDescription", "onSelectedCellClick"];
+var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
     navigationDescription = _ref.navigationDescription,
@@ -315,7 +342,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var calendarGridId = useRandomId('eds-calendar');
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
@@ -366,7 +393,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick"];
+var _excluded$6 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -379,7 +406,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var allProps = _extends({}, rest, {
@@ -424,7 +451,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var _excluded$4 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType"];
+var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -447,7 +474,7 @@ var DatePicker = function DatePicker(_ref) {
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
     forcedReturnType = _ref.forcedReturnType,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = useRef(null);
   var calendarRef = useRef(null);
@@ -458,7 +485,8 @@ var DatePicker = function DatePicker(_ref) {
     if (forcedReturnType !== undefined) {
       return onChange(convertValueToType({
         value: value,
-        type: forcedReturnType
+        type: forcedReturnType,
+        timezone: value !== null && 'timezone' in value ? value.timezone : undefined
       }));
     }
     onChange(value);
@@ -578,7 +606,7 @@ var DatePicker = function DatePicker(_ref) {
   }), React.createElement(CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
 };
 
-var _excluded$3 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
+var _excluded$4 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
   _excluded2$2 = ["onChange", "variant", "value"];
 var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -592,7 +620,7 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
       inline: true
     }) : _ref$prepend,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var nativedatepickerId = useRandomId('eds-nativetimepicker');
   return React.createElement(BaseFormControl, {
     style: style,
@@ -651,12 +679,14 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, rest));
 });
 
+var _excluded$3 = ["direction", "onClick", "disabled", "aria-label"];
 var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   var direction = _ref.direction,
     onClick = _ref.onClick,
     disabled = _ref.disabled,
-    ariaLabel = _ref['aria-label'];
-  return React.createElement(IconButton, {
+    ariaLabel = _ref['aria-label'],
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return React.createElement(IconButton, _extends({
     className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
       'eds-timepicker__arrowbutton--disabled': disabled
     }),
@@ -665,10 +695,10 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
     onClick: onClick,
     "aria-label": ariaLabel,
     disabled: disabled
-  }, direction === 'left' ? React.createElement(LeftArrowIcon, null) : React.createElement(RightArrowIcon, null));
+  }, rest), direction === 'left' ? React.createElement(LeftArrowIcon, null) : React.createElement(RightArrowIcon, null));
 };
 
-var _excluded$2 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef"];
+var _excluded$2 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "granularity", "variant", "locale", "showTimeZone", "showSeconds", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef", "forcedReturnType", "forcedTimeZone"];
 var TimePicker = function TimePicker(_ref) {
   var selectedTime = _ref.selectedTime,
     onChange = _ref.onChange,
@@ -678,9 +708,12 @@ var TimePicker = function TimePicker(_ref) {
     label = _ref.label,
     labelTooltip = _ref.labelTooltip,
     feedback = _ref.feedback,
+    granularity = _ref.granularity,
     variant = _ref.variant,
     customLocale = _ref.locale,
     showTimeZone = _ref.showTimeZone,
+    _ref$showSeconds = _ref.showSeconds,
+    showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
     _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
     minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
     _ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
@@ -688,15 +721,30 @@ var TimePicker = function TimePicker(_ref) {
     _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
     rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
     inputRef = _ref.inputRef,
+    forcedReturnType = _ref.forcedReturnType,
+    forcedTimeZone = _ref.forcedTimeZone,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   if (customLocale) locale = customLocale;
+  var timePickerId = useRandomId('eds-timepicker');
+  var timeZone = forcedTimeZone != null ? forcedTimeZone : selectedTime !== null && 'timezone' in selectedTime ? selectedTime.timezone : 'Europe/Oslo';
+  var handleOnChange = function handleOnChange(value) {
+    if (forcedReturnType !== undefined) {
+      return onChange(convertValueToType({
+        value: value,
+        type: forcedReturnType,
+        timezone: timeZone
+      }));
+    }
+    onChange(value);
+  };
   var state = useTimeFieldState(_extends({
-    onChange: onChange,
+    onChange: handleOnChange,
     label: label,
     locale: locale,
     value: selectedTime,
+    granularity: (granularity != null ? granularity : showSeconds) ? 'second' : 'minute',
     hideTimeZone: !showTimeZone,
     isDisabled: disabled,
     shouldForceLeadingZeros: true
@@ -708,70 +756,81 @@ var TimePicker = function TimePicker(_ref) {
     labelProps = _useTimeField.labelProps,
     fieldProps = _useTimeField.fieldProps;
   var id = useRandomId('timepicker');
-  var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
-    if (someSegmentIsUndefined) {
-      setTimeToNearestMinuteIncrement();
-    } else {
-      addMinutesToSelectedTime(minutes);
-    }
-  };
-  var someSegmentIsUndefined = state.segments.some(function (segment) {
-    return segment.text === '––';
-  });
-  var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
-    var currentTime = now(getLocalTimeZone());
-    var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
-    var newTime = currentTime.set({
-      minute: roundedMinute
+  var getCurrentTime = function getCurrentTime() {
+    var getCurrentTimeWithCorrectType = convertValueToType({
+      value: now(timeZone),
+      type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime'
     });
-    // @ts-expect-error Since this function is used when selectedTime is null,
-    // we can't guarantee newTime matching the type of selectedTime in the future.
-    // This might lead to a type issue.
-    onChange(newTime);
+    return getCurrentTimeWithCorrectType;
   };
-  var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
-    selectedTime !== null && onChange(selectedTime.add({
-      minutes: minutes
-    }));
+  var handleOnClickArrowButton = function handleOnClickArrowButton(operation) {
+    if (selectedTime === null) return handleOnChange(getCurrentTime());
+    switch (operation) {
+      case 'add':
+        return handleOnChange(selectedTime.add({
+          minutes: minuteIncrementForArrowButtons - modulo(selectedTime.minute, minuteIncrementForArrowButtons)
+        }));
+      case 'subtract':
+        return handleOnChange(selectedTime.subtract({
+          minutes: modulo(selectedTime.minute - 1, minuteIncrementForArrowButtons) + 1
+        }));
+    }
   };
   return React.createElement(I18nProvider, {
     locale: locale
   }, React.createElement("div", {
     className: classNames(className, 'eds-timepicker__wrapper')
-  }, React.createElement(TimePickerArrowButton, {
-    direction: "left",
-    disabled: disabled,
-    "aria-label": leftArrowButtonAriaLabel,
-    onClick: function onClick() {
-      return handleOnClickArrowButton(minuteIncrementForArrowButtons * -1);
-    }
-  }), React.createElement(BaseFormControl, _extends({
+  }, React.createElement(BaseFormControl, _extends({
     style: style,
-    className: 'eds-timepicker',
+    className: classNames('eds-timepicker', {
+      'eds-timepicker--disabled': disabled
+    }),
     labelId: id,
     label: label,
-    labelProps: _extends({}, labelProps),
+    labelProps: _extends({}, labelProps, {
+      'aria-describedby': timePickerId + 'description'
+    }),
     ref: mergeRefs(timeFieldRef, inputRef),
     disabled: disabled,
     disableLabelAnimation: true,
     labelTooltip: labelTooltip
   }, fieldProps, {
     variant: variant,
-    feedback: feedback
+    feedback: feedback,
+    ariaAlertOnFeedback: true,
+    "aria-describedby": timePickerId + 'description',
+    prepend: React.createElement(TimePickerArrowButton, {
+      direction: "left",
+      disabled: disabled,
+      "aria-label": leftArrowButtonAriaLabel,
+      onClick: function onClick() {
+        return handleOnClickArrowButton('subtract');
+      },
+      onFocus: function onFocus() {
+        return focusSegment(timeFieldRef, 'first');
+      }
+    }),
+    append: React.createElement(TimePickerArrowButton, {
+      direction: "right",
+      disabled: disabled,
+      "aria-label": rightArrowButtonAriaLabel,
+      onClick: function onClick() {
+        return handleOnClickArrowButton('add');
+      },
+      onFocus: function onFocus() {
+        return focusSegment(timeFieldRef, 'last');
+      }
+    })
   }), state.segments.map(function (segment, i) {
     return React.createElement(FieldSegment, {
       segment: segment,
       state: state,
-      key: i
+      key: i,
+      "aria-describedby": timePickerId + 'description'
     });
-  })), React.createElement(TimePickerArrowButton, {
-    direction: "right",
-    disabled: disabled,
-    "aria-label": rightArrowButtonAriaLabel,
-    onClick: function onClick() {
-      return handleOnClickArrowButton(minuteIncrementForArrowButtons);
-    }
-  })));
+  })), React.createElement(VisuallyHidden, {
+    id: timePickerId + 'description'
+  }, selectedTime !== null ? 'valgt tid: ' + selectedTime.hour.toString().padStart(2, '0') + ':' + selectedTime.minute.toString().padStart(2, '0') + (showSeconds ? ':' + selectedTime.second.toString().padStart(2, '0') : '') : '')));
 };
 
 var _excluded$1 = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
@@ -1034,5 +1093,5 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
 
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, convertValueToType, createCalendar, lastMillisecondOfDay, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
+export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, convertValueToType, createCalendar, focusSegment, lastMillisecondOfDay, modulo, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map