@entur/datepicker 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/datepicker.esm.js

@@ -13,14 +13,14 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { useDateFieldState, useDatePickerState, useTimeFieldState } from '@react-stately/datepicker';
 import { useDateSegment, useDateField, useDatePicker, useTimeField } from '@react-aria/datepicker';
 import { useLocale, I18nProvider } from '@react-aria/i18n';
-import { ZonedDateTime, parseAbsolute, Time, CalendarDateTime, GregorianCalendar, isEqualDay, now, getLocalTimeZone, getWeeksInMonth } from '@internationalized/date';
+import { ZonedDateTime, parseAbsolute, Time, CalendarDate, CalendarDateTime, getLocalTimeZone, GregorianCalendar, isEqualDay, now, getWeeksInMonth } from '@internationalized/date';
 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 { space, zIndexes } from '@entur/tokens';
 import { Modal } from '@entur/modal';
 
 function _extends() {
@@ -513,19 +513,24 @@ var FieldSegment = function FieldSegment(_ref) {
 };
 
 /**
- * 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
+ * Tar inn et JS Date-objekt og returnerer et av Date- eller TimeValue-objektene fra @internationalized/date-pakken
+ * @param {Date} date JS Date-objekt som ønskes konvertert til et Date- eller 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 {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 {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
+ * @returns {Time | CalendarDateTime | ZonedDateTime | CalendarDate} et av TimeValue-objektene med verdier fra date
  */
 
-var nativeDateToTimeValue = function nativeDateToTimeValue(date, noDateOnlyTime, timeZone, offset) {
+var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date, noDateOnlyTime, noTimeOnlyDate, timeZone, offset) {
   if (noDateOnlyTime === void 0) {
     noDateOnlyTime = false;
   }
 
+  if (noTimeOnlyDate === void 0) {
+    noTimeOnlyDate = false;
+  }
+
   if (timeZone) {
     if (offset) {
       return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
@@ -535,40 +540,54 @@ var nativeDateToTimeValue = function nativeDateToTimeValue(date, noDateOnlyTime,
   }
 
   if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
+  if (noTimeOnlyDate) return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
   return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
 };
 /**
- * Tar inn et av TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
- * @param {TimeValue} time Et tidspunkt på TimeValue-formatet som ønsket konvertert til et JS Date-objekt
- * @param {string} timeZoneForCalendarDateTime Tidssonen time er i. Fungerer kun med typen er CalendarDateTime
+ * 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
+ * @param {string} timeZoneForCalendarDateTime Tidssonen value er i. Fungerer kun med typen er CalendarDateTime
  * @returns {Date} et Date-objekt med verdier fra time
  */
 // This function uses a lot of @ts-expect-error to make it work with all TimeValue types. Sorry ...
 
-var timeValueToNativeDate = function timeValueToNativeDate(time, timeZoneForCalendarDateTime) {
+var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
   // @ts-expect-error .day does not exist on Time-object
-  if (!time.day) {
+  if (!value.day) {
     // type is Time
-    var date = new Date();
-    date.setHours(time.hour);
-    date.setMinutes(time.minute);
-    date.setSeconds(time.second);
+    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
+    return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : getLocalTimeZone());
   } // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
 
 
-  if (!time.timeZone) {
+  if (!value.timeZone) {
     // type is CalendarDateTime
     if (timeZoneForCalendarDateTime) // @ts-expect-error .toDate(timeZone) does not exist in type Time
-      return time.toDate(timeZoneForCalendarDateTime);
+      return value.toDate(timeZoneForCalendarDateTime);
     return new Date( // @ts-expect-error not in type Time
-    time.year, // @ts-expect-error not in type Time
-    time.month - 1, // @ts-expect-error not in type Time
-    time.day, time.hour, time.minute, time.second);
+    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);
   } // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
 
 
-  return time.toDate();
+  return value.toDate();
 };
 var createCalendar = function createCalendar(identifier) {
   if (identifier === void 0) {
@@ -824,7 +843,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription"];
+var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate"];
 var DatePickerBeta = function DatePickerBeta(_ref) {
   var value = _ref.selectedDate,
       _onChange = _ref.onChange,
@@ -842,6 +861,8 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
       labelTooltip = _ref.labelTooltip,
       navigationDescription = _ref.navigationDescription,
+      minValue = _ref.minDate,
+      maxValue = _ref.maxDate,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = 1000;
@@ -853,12 +874,16 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       width = _useWindowDimensions.width;
 
   var state = useDatePickerState(_extends({}, rest, {
+    minValue: minValue,
+    maxValue: maxValue,
     value: value,
     onChange: _onChange
   }));
 
   var _useDatePicker = useDatePicker(_extends({
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    minValue: minValue,
+    maxValue: maxValue
   }, rest), state, datePickerRef),
       groupProps = _useDatePicker.groupProps,
       labelProps = _useDatePicker.labelProps,
@@ -916,7 +941,7 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     if (selectedCell) selectedCell.focus();else if (todayCell) todayCell.focus();
   };
 
-  var popoverCalendar = React.createElement(FocusLock, {
+  var popoverCalendar = React.createElement(React.Fragment, null, state.isOpen && React.createElement(FocusLock, {
     disabled: !state.isOpen,
     returnFocus: true
   }, React.createElement(Calendar, _extends({}, dialogProps, calendarProps, {
@@ -933,13 +958,12 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     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
+      zIndex: zIndexes.popover
     }
-  })));
+  }))));
   var modalCalendar = React.createElement(Modal, {
     size: 'small',
     title: "",
@@ -1281,5 +1305,5 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { Calendar, DateField, DatePicker, DatePickerBeta, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToTimeValue, timeValueToNativeDate };
+export { Calendar, DateField, DatePicker, DatePickerBeta, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToTimeOrDateValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map