@entur/datepicker 8.1.7 → 9.0.0

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, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, now, getWeeksInMonth, toTime, parseTime } from '@internationalized/date';
+import { CalendarDate, Time, getLocalTimeZone, GregorianCalendar, toCalendarDateTime, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, now, getWeeksInMonth, toTime, 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';
@@ -51,15 +51,6 @@ var FieldSegment = function FieldSegment(_ref) {
   var ref = useRef(null);
   var _useDateSegment = useDateSegment(segment, state, ref),
     segmentProps = _useDateSegment.segmentProps;
-  var is12HourFormatted = state.segments.some(function (segment) {
-    return segment.text === 'AM' || segment.text === 'PM';
-  });
-  var segmentDisplayText = function segmentDisplayText() {
-    if (is12HourFormatted) return segment.text;
-    // if number add '0' padding to start when one digit
-    if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
-    return segment.text;
-  };
   return React.createElement("div", _extends({}, segmentProps, {
     ref: ref,
     className: classNames('eds-date-and-time-field__segment', {
@@ -67,7 +58,7 @@ var FieldSegment = function FieldSegment(_ref) {
       'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
     }),
     tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
-  }), segmentDisplayText());
+  }), segment.text);
 };
 
 var nativeDateToDateTime = function nativeDateToDateTime(date, timeZone, offset) {
@@ -81,83 +72,64 @@ var nativeDateToDateTime = function nativeDateToDateTime(date, timeZone, offset)
 };
 /**
  * Tar inn et JS Date-objekt og returnerer et av DateValue-objektene fra @internationalized/date-pakken
- * @param {Date} date JS Date-objekt som ønskes konvertert til et DateValue-objekt
+ * @param {Date | null} date JS Date-objekt som ønskes konvertert til et DateValue-objekt
  * @param {boolean} noTimeOnlyDate Hvis tidspunktet er irrelevant kan denne settes til true, da får man et CalendarDate-objekt uten tidspunkt tilbake
  * @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
  * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
- * @returns {CalendarDateTime | ZonedDateTime | CalendarDate} et av DateValue-objektene med verdier fra date
+ * @returns {CalendarDateTime | ZonedDateTime | CalendarDate | null} et av DateValue-objektene med verdier fra date eller null
  */
-var nativeDateToDateValue = function nativeDateToDateValue(date, noTimeOnlyDate, timeZone, offset) {
+function nativeDateToDateValue(date, noTimeOnlyDate, timeZone, offset) {
   if (noTimeOnlyDate === void 0) {
     noTimeOnlyDate = false;
   }
+  if (date === null) return null;
   if (noTimeOnlyDate) return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
   return nativeDateToDateTime(date, timeZone, offset);
-};
+}
 /**
  * Tar inn et JS Date-objekt og returnerer et av TimeValue-objektene fra @internationalized/date-pakken
- * @param {Date} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
+ * @param {Date | null} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
  * @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato tilbake
  * @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
  * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
- * @returns {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
+ * @returns {Time | CalendarDateTime | ZonedDateTime | null} et av TimeValue-objektene med verdier fra date eller null
  */
-var nativeDateToTimeValue = function nativeDateToTimeValue(date, noDateOnlyTime, timeZone, offset) {
+function nativeDateToTimeValue(date, noDateOnlyTime, timeZone, offset) {
   if (noDateOnlyTime === void 0) {
     noDateOnlyTime = false;
   }
+  if (date === null) return null;
   if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
   return nativeDateToDateTime(date, timeZone, offset);
-};
+}
 /**
- * Tar inn et av Date- eller TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
- * @param {DateValue | TimeValue} value En dato eller et tidspunkt på Date- eller TimeValue-formatet som ønskes konvertert til et JS Date-objekt
+ * Tar inn et av Date- eller TimeValue-objektene fra \@internationalized/date-pakken og returnerer et JS Date-objekt
+ * @param {DateValue | TimeValue | null} value En dato eller et tidspunkt på Date- eller TimeValue-formatet som ønskes konvertert til et JS Date-objekt
  * @param {string} timeZoneForCalendarDateTime Tidssonen value er i. Fungerer kun med typen er CalendarDateTime
- * @returns {Date} et Date-objekt med verdier fra time
+ * @returns {Date | null} et Date-objekt med verdier fra time eller null
  */
-// This function uses a lot of @ts-expect-error to make it work with all Date- and TimeValue types. Sorry ...
-var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
-  // @ts-expect-error .day does not exist on Time-object
-  if (!value.day) {
-    // type is Time
+function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
+  if (value === null) return null;
+  // type is Time
+  if (!('day' in value)) {
     var date = new Date();
-    // @ts-expect-error hour does not exist on CalendarDate
     date.setHours(value.hour);
-    // @ts-expect-error minute does not exist on CalendarDate
     date.setMinutes(value.minute);
-    // @ts-expect-error second does not exist on CalendarDate
     date.setSeconds(value.second);
     return date;
   }
-  // @ts-expect-error .day does not exist on Time-object
-  if (!value.hour) {
-    // type is CalendarDate
-    // @ts-expect-error .toDate(timeZone) does not exist in type Time
+  // type is CalendarDate
+  if (!('hour' in value)) {
     return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : getLocalTimeZone());
   }
-  // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
-  if (!value.timeZone) {
-    // type is CalendarDateTime
-    if (timeZoneForCalendarDateTime)
-      // @ts-expect-error .toDate(timeZone) does not exist in type Time
-      return value.toDate(timeZoneForCalendarDateTime);
-    return new Date(
-    // @ts-expect-error not in type Time
-    value.year,
-    // @ts-expect-error not in type Time
-    value.month - 1,
-    // @ts-expect-error not in type Time
-    value.day,
-    // @ts-expect-error not in type CalendarDate
-    value.hour,
-    // @ts-expect-error not in type CalendarDate
-    value.minute,
-    // @ts-expect-error not in type CalendarDate
-    value.second);
+  // type is CalendarDateTime
+  if (!('timeZone' in value)) {
+    if (timeZoneForCalendarDateTime) return value.toDate(timeZoneForCalendarDateTime);
+    return new Date(value.year, value.month - 1, value.day, value.hour, value.minute, value.second);
   }
-  // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
+  // type is ZonedDateTime
   return value.toDate();
-};
+}
 var createCalendar = function createCalendar(identifier) {
   if (identifier === void 0) {
     identifier = 'gregory';
@@ -173,10 +145,18 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
   if (locale.toLowerCase() !== 'no-no') return propsCollection['aria-label'];
   return norwegianAriaLabel;
 };
+var lastMillisecondOfDay = function lastMillisecondOfDay(dateValue) {
+  return toCalendarDateTime(dateValue.add({
+    days: 1
+  })).add({
+    milliseconds: -1
+  });
+};
 
-var _excluded$9 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
+var _excluded$9 = ["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 value = _ref.selectedDate,
+  var selectedDate = _ref.selectedDate,
+    onChange = _ref.onChange,
     label = _ref.label,
     customLocale = _ref.locale,
     showTimeZone = _ref.showTimeZone,
@@ -184,6 +164,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$granularity = _ref.granularity,
     granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
     disabled = _ref.disabled,
+    isDisabled = _ref.isDisabled,
     variant = _ref.variant,
     feedback = _ref.feedback,
     _ref$validationVarian = _ref.validationVariant,
@@ -191,8 +172,8 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$validationFeedba = _ref.validationFeedback,
     validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
     labelTooltip = _ref.labelTooltip,
-    minValue = _ref.minDate,
-    maxValue = _ref.maxDate,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     style = _ref.style,
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
@@ -203,16 +184,19 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var state = useDateFieldState(_extends({}, rest, {
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
-    value: value === null ? undefined : value,
+    value: selectedDate,
+    onChange: onChange,
     hideTimeZone: !showTimeZone,
     granularity: showTime ? 'minute' : granularity,
-    minValue: minValue,
-    maxValue: maxValue
+    minValue: minDate,
+    // this weird logic makes sure the entire day is included if no time is provided in maxDate
+    maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
+    isDisabled: isDisabled || disabled,
+    shouldForceLeadingZeros: true
   }));
   var dateFieldRef = useRef(null);
   var _useDateField = useDateField(_extends({}, rest, {
-      label: label,
-      isDisabled: disabled || rest.isDisabled
+      label: label
     }), state, dateFieldRef),
     labelProps = _useDateField.labelProps,
     fieldProps = _useDateField.fieldProps;
@@ -229,7 +213,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: classNames('eds-datefield', className),
     labelId: id,
     ref: mergeRefs(dateFieldRef, ref),
-    disabled: state.isDisabled,
+    disabled: isDisabled || disabled,
     disableLabelAnimation: true,
     label: label,
     labelTooltip: labelTooltip,
@@ -367,10 +351,13 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
+var _excluded$5 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var onChange = _ref.onChange,
+  var selectedDate = _ref.selectedDate,
+    onChange = _ref.onChange,
     customLocale = _ref.locale,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     style = _ref.style,
     navigationDescription = _ref.navigationDescription,
     _ref$onSelectedCellCl = _ref.onSelectedCellClick,
@@ -381,9 +368,12 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var state = useCalendarState(_extends({}, rest, {
+    value: selectedDate,
     onChange: onChange,
     locale: customLocale != null ? customLocale : locale,
-    createCalendar: createCalendar
+    createCalendar: createCalendar,
+    minValue: minDate,
+    maxValue: maxDate
   }));
   var _useCalendar = useCalendar(rest, state),
     calendarProps = _useCalendar.calendarProps,
@@ -420,10 +410,10 @@ 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"];
 var DatePicker = function DatePicker(_ref) {
-  var value = _ref.selectedDate,
+  var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
     locale = _ref.locale,
-    isDisabled = _ref.disabled,
+    disabled = _ref.disabled,
     showTime = _ref.showTime,
     _ref$showTimeZone = _ref.showTimeZone,
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
@@ -436,8 +426,8 @@ var DatePicker = function DatePicker(_ref) {
     disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
     labelTooltip = _ref.labelTooltip,
     navigationDescription = _ref.navigationDescription,
-    minValue = _ref.minDate,
-    maxValue = _ref.maxDate,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
@@ -448,17 +438,15 @@ var DatePicker = function DatePicker(_ref) {
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var state = useDatePickerState(_extends({}, rest, {
-    minValue: minValue,
-    maxValue: maxValue,
-    value: value === null ? undefined : value,
+    minValue: minDate,
+    // this weird logic makes sure the entire day is included if no time is provided in maxDate
+    maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
+    value: selectedDate,
     onChange: onChange,
-    granularity: showTime ? 'minute' : rest.granularity
+    granularity: showTime ? 'minute' : rest.granularity,
+    isDisabled: disabled
   }));
-  var _useDatePicker = useDatePicker(_extends({
-      isDisabled: isDisabled,
-      minValue: minValue,
-      maxValue: maxValue
-    }, rest), state, datePickerRef),
+  var _useDatePicker = useDatePicker(_extends({}, rest), state, datePickerRef),
     groupProps = _useDatePicker.groupProps,
     labelProps = _useDatePicker.labelProps,
     fieldProps = _useDatePicker.fieldProps,
@@ -478,12 +466,6 @@ var DatePicker = function DatePicker(_ref) {
     reference = _useFloating.reference,
     floating = _useFloating.floating,
     strategy = _useFloating.strategy;
-  var onChangeCalendar = function onChangeCalendar(newSelectedDate) {
-    // Necessary to avoid state update on unmounted component
-    requestAnimationFrame(function () {
-      calendarProps.onChange && calendarProps.onChange(newSelectedDate);
-    });
-  };
   useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
   });
@@ -491,13 +473,17 @@ var DatePicker = function DatePicker(_ref) {
     state.setOpen(false);
   });
   var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
-    disabled: calendarProps.isDisabled,
+    disabled: disabled,
     navigationDescription: navigationDescription,
     onSelectedCellClick: function onSelectedCellClick() {
       return state.setOpen(false);
     },
-    onChange: onChangeCalendar,
-    granularity: showTime ? 'minute' : rest.granularity
+    selectedDate: selectedDate,
+    onChange: onChange,
+    minDate: minDate,
+    maxDate: maxDate,
+    granularity: showTime ? 'minute' : rest.granularity,
+    ref: calendarRef
   });
   var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
@@ -514,9 +500,7 @@ var DatePicker = function DatePicker(_ref) {
   }, React.createElement(FocusLock, {
     disabled: !state.isOpen || useModal,
     returnFocus: true
-  }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps, {
-    ref: calendarRef
-  }))));
+  }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps))));
   var modalCalendar = React.createElement(Modal, {
     size: "small",
     title: "",
@@ -524,7 +508,6 @@ var DatePicker = function DatePicker(_ref) {
     onDismiss: function onDismiss() {
       return state.setOpen(false);
     },
-    closeOnClickOutside: true,
     className: "eds-datepicker__calendar-modal"
   }, React.createElement(Calendar, _extends({}, calendarSharedProps)));
   return React.createElement(ConditionalWrapper, {
@@ -544,9 +527,13 @@ var DatePicker = function DatePicker(_ref) {
     id: undefined,
     className: "eds-datepicker__datefield__wrapper"
   }), React.createElement(DateField, _extends({}, fieldProps, {
-    selectedDate: state.value,
+    selectedDate: selectedDate,
+    onChange: onChange,
     label: rest.label,
     labelProps: labelProps,
+    disabled: disabled,
+    minDate: minDate,
+    maxDate: maxDate,
     showTime: showTime,
     showTimeZone: showTimeZone,
     ref: dateFieldRef,
@@ -556,9 +543,9 @@ var DatePicker = function DatePicker(_ref) {
     validationFeedback: validationFeedback,
     labelTooltip: labelTooltip,
     className: classNames('eds-datepicker__datefield', {
-      'eds-datepicker__datefield--disabled': fieldProps.isDisabled
+      'eds-datepicker__datefield--disabled': disabled
     })
-  })), !fieldProps.isDisabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
+  })), !disabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
     onPress: function onPress() {
       return state.setOpen(!state.isOpen);
     },
@@ -684,9 +671,10 @@ var TimePicker = function TimePicker(_ref) {
     onChange: onChange,
     label: label,
     locale: locale,
-    value: selectedTime === null ? undefined : selectedTime,
+    value: selectedTime,
     hideTimeZone: !showTimeZone,
-    isDisabled: disabled
+    isDisabled: disabled,
+    shouldForceLeadingZeros: true
   }, rest));
   var timeFieldRef = useRef(null);
   var _useTimeField = useTimeField(_extends({}, rest, {
@@ -717,8 +705,7 @@ var TimePicker = function TimePicker(_ref) {
     onChange(newTime);
   };
   var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
-    var _state$value;
-    state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
+    selectedTime !== null && onChange(selectedTime.add({
       minutes: minutes
     }));
   };
@@ -867,7 +854,7 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
     onChange: onChange,
     label: label,
     locale: locale,
-    value: selectedTime === null ? undefined : selectedTime,
+    value: selectedTime,
     hideTimeZone: true,
     isDisabled: disabled,
     isReadOnly: readOnly
@@ -1022,5 +1009,5 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
 
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
+export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, lastMillisecondOfDay, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map