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

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.3](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.2...@entur/datepicker@4.0.0-beta.3) (2022-11-08)
+
+### Bug Fixes
+
+- **datepicker:** change min- and maxValue to min- and maxDate ([f5bfb88](https://bitbucket.org/enturas/design-system/commits/f5bfb885bbbd253f150756f36550b07ed848fdc3))
+- **datepicker:** fix page jumping when opening datepicker popover ([4629f2c](https://bitbucket.org/enturas/design-system/commits/4629f2c6f134f622cab7546b3f6d3980c9ed913a))
+
+# [4.0.0-beta.2](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.1...@entur/datepicker@4.0.0-beta.2) (2022-10-31)
+
+### Features
+
+- **datepicker utils:** update utils to work with CalendarDate values ([d5993f2](https://bitbucket.org/enturas/design-system/commits/d5993f22c2abcc53e932cc58e960accb979182c3))
+
 # [4.0.0-beta.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@4.0.0-beta.0...@entur/datepicker@4.0.0-beta.1) (2022-10-28)
 
 ### Bug Fixes

package/dist/DatePicker/beta/DatePicker.d.ts

@@ -24,12 +24,12 @@ declare type DatePickerProps = {
     showTime?: boolean;
     /** Tidligste gyldige datovalg.
      * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone. */
-    minValue?: CalendarDate;
+    minDate?: CalendarDate;
     /** Seneste gyldige datovalg.
      * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone
      *
      * OBS: Hvis du bruker dato med tid vil det være til, men ikke med denne datoen */
-    maxValue?: CalendarDate;
+    maxDate?: CalendarDate;
     /** Funksjon som tar inn en dato og sier om den er utilgjengelig.
      * Eks. (date) => isWeekend(date, 'no-NO') == helgedager er ikke tilgjengelig */
     isDateUnavailable?: (date: DateValue) => boolean;
@@ -59,5 +59,5 @@ declare type DatePickerProps = {
     className?: string;
     style?: React.CSSProperties;
 } & Omit<SpectrumDatePickerProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const DatePickerBeta: ({ selectedDate: value, onChange, locale, disabled: isDisabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, ...rest }: DatePickerProps) => JSX.Element;
+export declare const DatePickerBeta: ({ selectedDate: value, onChange, locale, disabled: isDisabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate: minValue, maxDate: maxValue, ...rest }: DatePickerProps) => JSX.Element;
 export {};

package/dist/datepicker.cjs.development.js

@@ -524,19 +524,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$1, noDateOnlyTime, timeZone, offset) {
+var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date$1, noDateOnlyTime, noTimeOnlyDate, timeZone, offset) {
   if (noDateOnlyTime === void 0) {
     noDateOnlyTime = false;
   }
 
+  if (noTimeOnlyDate === void 0) {
+    noTimeOnlyDate = false;
+  }
+
   if (timeZone) {
     if (offset) {
       return new date.ZonedDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), timeZone, offset, date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
@@ -546,40 +551,54 @@ var nativeDateToTimeValue = function nativeDateToTimeValue(date$1, noDateOnlyTim
   }
 
   if (noDateOnlyTime) return new date.Time(date$1.getHours(), date$1.getMinutes(), date$1.getSeconds(), 0);
+  if (noTimeOnlyDate) return new date.CalendarDate(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate());
   return new date.CalendarDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), date$1.getHours(), date$1.getMinutes(), date$1.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);
-    return date;
+    var date$1 = new Date(); // @ts-expect-error hour does not exist on CalendarDate
+
+    date$1.setHours(value.hour); // @ts-expect-error minute does not exist on CalendarDate
+
+    date$1.setMinutes(value.minute); // @ts-expect-error second does not exist on CalendarDate
+
+    date$1.setSeconds(value.second);
+    return date$1;
+  } // @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 : date.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) {
@@ -835,7 +854,7 @@ var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_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,
@@ -853,6 +872,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;
@@ -864,12 +885,16 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
       width = _useWindowDimensions.width;
 
   var state = datepicker$1.useDatePickerState(_extends({}, rest, {
+    minValue: minValue,
+    maxValue: maxValue,
     value: value,
     onChange: _onChange
   }));
 
   var _useDatePicker = datepicker.useDatePicker(_extends({
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    minValue: minValue,
+    maxValue: maxValue
   }, rest), state, datePickerRef),
       groupProps = _useDatePicker.groupProps,
       labelProps = _useDatePicker.labelProps,
@@ -927,7 +952,7 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     if (selectedCell) selectedCell.focus();else if (todayCell) todayCell.focus();
   };
 
-  var popoverCalendar = React__default["default"].createElement(FocusLock__default["default"], {
+  var popoverCalendar = React__default["default"].createElement(React__default["default"].Fragment, null, state.isOpen && React__default["default"].createElement(FocusLock__default["default"], {
     disabled: !state.isOpen,
     returnFocus: true
   }, React__default["default"].createElement(Calendar, _extends({}, dialogProps, calendarProps, {
@@ -944,13 +969,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: tokens.zIndexes.popover
     }
-  })));
+  }))));
   var modalCalendar = React__default["default"].createElement(modal.Modal, {
     size: 'small',
     title: "",
@@ -1301,6 +1325,6 @@ exports.NativeTimePicker = NativeTimePicker;
 exports.TimePicker = TimePicker;
 exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
 exports.createCalendar = createCalendar;
-exports.nativeDateToTimeValue = nativeDateToTimeValue;
-exports.timeValueToNativeDate = timeValueToNativeDate;
+exports.nativeDateToTimeOrDateValue = nativeDateToTimeOrDateValue;
+exports.timeOrDateValueToNativeDate = timeOrDateValueToNativeDate;
 //# sourceMappingURL=datepicker.cjs.development.js.map