@entur/datepicker 9.0.4-beta.0 → 9.1.0-RC.1

package/dist/DatePicker/DatePicker.d.ts

@@ -64,8 +64,27 @@ export type DatePickerProps<DateType extends DateValue> = {
      * @default 'Bruk piltastene til å navigere mellom datoer'
      */
     navigationDescription?: string;
+    /** Tvinger typen på onChange til den gitte typen.
+     * Dette er nyttig når utgangsverdien din er 'null', men du ønsker at
+     * DatePicker f.eks alltid skal returnere en 'ZonedDateTime'.
+     *
+     * @default undefined (onChange returnerer DateValue bassert på value, og om tid vises eller ikke)
+     *
+     * Hvorfor er dette nødvendig?
+     * I utgangspunktet vil en DatePicker som initieres med 'null' som verdi og ikke viser tid returnere en CalendarDate.
+     * Dette er problematisk hvis du bruker datovelgeren sammen en TimePicker da
+     * denne ikke støtter dato uten tidspunkt (CalendarDate). Ved å da tvinge DatePicker til å returnere
+     * CalendarDateTime eller ZonedDateTime vil du kunne bruke den sammen med TimePicker.
+     *
+     * Hvorfor kan ikke dette gjøres automatisk?
+     * En DatePicker som initieres med 'null' som verdi gir ingen informasjon om hvilken type man ønsker å returnere.
+     * DatePicker støtter dog at du kan sende med en TypeScript-type, men TypeScript eksisterer ikke i runtime og
+     * kan derfor ikke brukes til å bestemme hvilken type som skal returneres. Det er derfor nødvendig å enten gi
+     * en initiell 'selectedDate' eller tvinge typen med denne prop-en.
+     */
+    forcedReturnType?: 'CalendarDate' | 'CalendarDateTime' | 'ZonedDateTime';
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
 } & Omit<AriaDatePickerProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
+export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;

package/dist/datepicker.cjs.development.js

@@ -155,6 +155,21 @@ var lastMillisecondOfDay = function lastMillisecondOfDay(dateValue) {
     milliseconds: -1
   });
 };
+var convertValueToType = function convertValueToType(_ref) {
+  var value = _ref.value,
+    type = _ref.type;
+  if (value === null) return null;
+  switch (type) {
+    case 'CalendarDate':
+      return date.toCalendarDate(value);
+    case 'CalendarDateTime':
+      return date.toCalendarDateTime(value);
+    case 'ZonedDateTime':
+      return date.toZoned(value, 'Europe/Oslo');
+    default:
+      return value;
+  }
+};
 
 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) {
@@ -370,15 +385,16 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
-  var state = calendar$1.useCalendarState(_extends({}, rest, {
+  var allProps = _extends({}, rest, {
     value: selectedDate,
     onChange: onChange,
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
     minValue: minDate,
     maxValue: maxDate
-  }));
-  var _useCalendar = calendar.useCalendar(rest, state),
+  });
+  var state = calendar$1.useCalendarState(allProps);
+  var _useCalendar = calendar.useCalendar(allProps, state),
     calendarProps = _useCalendar.calendarProps,
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
@@ -411,7 +427,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"];
+var _excluded$4 = ["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,
@@ -433,6 +449,7 @@ var DatePicker = function DatePicker(_ref) {
     maxDate = _ref.maxDate,
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
+    forcedReturnType = _ref.forcedReturnType,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = React.useRef(null);
@@ -440,12 +457,21 @@ var DatePicker = function DatePicker(_ref) {
   var dateFieldRef = React.useRef(null);
   var _useWindowDimensions = utils.useWindowDimensions(),
     width = _useWindowDimensions.width;
+  var handleOnChange = function handleOnChange(value) {
+    if (forcedReturnType !== undefined) {
+      return onChange(convertValueToType({
+        value: value,
+        type: forcedReturnType
+      }));
+    }
+    onChange(value);
+  };
   var state = datepicker$1.useDatePickerState(_extends({}, rest, {
     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,
+    onChange: handleOnChange,
     granularity: showTime ? 'minute' : rest.granularity,
     isDisabled: disabled
   }));
@@ -482,10 +508,9 @@ var DatePicker = function DatePicker(_ref) {
       return state.setOpen(false);
     },
     selectedDate: selectedDate,
-    onChange: onChange,
+    onChange: handleOnChange,
     minDate: minDate,
     maxDate: maxDate,
-    granularity: showTime ? 'minute' : rest.granularity,
     ref: calendarRef
   });
   var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
@@ -531,7 +556,7 @@ var DatePicker = function DatePicker(_ref) {
     className: "eds-datepicker__datefield__wrapper"
   }), React.createElement(DateField, _extends({}, fieldProps, {
     selectedDate: selectedDate,
-    onChange: onChange,
+    onChange: handleOnChange,
     label: rest.label,
     labelProps: labelProps,
     disabled: disabled,
@@ -1036,6 +1061,7 @@ exports.NativeTimePicker = NativeTimePicker;
 exports.SimpleTimePicker = SimpleTimePicker;
 exports.TimePicker = TimePicker;
 exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
+exports.convertValueToType = convertValueToType;
 exports.createCalendar = createCalendar;
 exports.lastMillisecondOfDay = lastMillisecondOfDay;
 exports.nativeDateToDateValue = nativeDateToDateValue;