@entur/datepicker 10.1.3 → 11.0.1-beta.0

package/dist/datepicker.esm.js

@@ -1,4 +1,4 @@
-import { useRandomId, ConditionalWrapper, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, mergeRefs, warnAboutMissingStyles } from '@entur/utils';
+import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from '@entur/utils';
 import React, { useRef, useState, useEffect } from 'react';
 import { useDateFieldState, useDatePickerState, useTimeFieldState } from '@react-stately/datepicker';
 import { useDateSegment, useDateField, useDatePicker, useTimeField } from '@react-aria/datepicker';
@@ -49,7 +49,7 @@ var FieldSegment = function FieldSegment(_ref) {
     ref: ref,
     className: classNames('eds-date-and-time-field__segment', {
       'eds-date-and-time-field__segment--placeholder': segment.isPlaceholder,
-      'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
+      'eds-date-and-time-field__segment--dot-separator': segment.text === '.' || segment.text === ':'
     }),
     tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
   }, rest), segment.text);
@@ -202,17 +202,31 @@ function getWeekNumberForDate(date) {
   var weekNumber = Math.ceil((thursdayOfWeek.compare(firstDayOfYearForThursday) + 1) / 7);
   return weekNumber;
 }
+function handleOnChange(_ref2) {
+  var value = _ref2.value,
+    selectedDate = _ref2.selectedDate,
+    forcedReturnType = _ref2.forcedReturnType,
+    onChange = _ref2.onChange;
+  if (forcedReturnType !== undefined || !selectedDate) {
+    return onChange == null ? void 0 : onChange(convertValueToType({
+      value: value,
+      type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime',
+      timezone: value !== null && 'timezone' in value ? value.timezone : undefined
+    }));
+  }
+  onChange == null || onChange(value);
+}
 
-var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "fieldProps", "groupProps", "append", "prepend", "dateFieldRef"];
+var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "forcedReturnType", "style", "className", "labelProps", "append", "prepend", "dateFieldRef"];
 var DateField = function DateField(_ref) {
   var selectedDate = _ref.selectedDate,
-    onChange = _ref.onChange,
+    _onChange = _ref.onChange,
     label = _ref.label,
     customLocale = _ref.locale,
     showTimeZone = _ref.showTimeZone,
     showTime = _ref.showTime,
     _ref$granularity = _ref.granularity,
-    granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
+    granularity = _ref$granularity === void 0 ? showTime ? 'minute' : 'day' : _ref$granularity,
     disabled = _ref.disabled,
     isDisabled = _ref.isDisabled,
     variant = _ref.variant,
@@ -224,34 +238,40 @@ var DateField = function DateField(_ref) {
     labelTooltip = _ref.labelTooltip,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
+    forcedReturnType = _ref.forcedReturnType,
     style = _ref.style,
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
-    parentFieldProps = _ref.fieldProps,
-    parentGroupProps = _ref.groupProps,
     append = _ref.append,
     prepend = _ref.prepend,
     ref = _ref.dateFieldRef,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
-  var state = useDateFieldState(_extends({}, rest, {
+  var _props = _extends({}, rest, {
+    label: label,
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
     value: selectedDate,
-    onChange: onChange,
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: forcedReturnType,
+        onChange: _onChange
+      });
+    },
     hideTimeZone: !showTimeZone,
-    granularity: showTime ? 'minute' : granularity,
+    granularity: granularity,
     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 state = useDateFieldState(_props);
   var dateFieldRef = useRef(null);
-  var _useDateField = useDateField(_extends({}, parentFieldProps, rest, {
-      label: label
-    }), state, dateFieldRef),
+  var _useDateField = useDateField(_props, state, dateFieldRef),
     labelProps = _useDateField.labelProps,
     fieldProps = _useDateField.fieldProps;
   var id = useRandomId('datefield');
@@ -276,22 +296,16 @@ var DateField = function DateField(_ref) {
     labelProps: parentLabelProps != null ? parentLabelProps : labelProps,
     labelTooltip: labelTooltip,
     prepend: prepend,
-    ref: ref,
+    ref: mergeRefs(ref, dateFieldRef),
     style: style,
-    variant: variant != null ? variant : state.validationState === 'invalid' ? validationVariant : undefined
-  }, parentGroupProps), React.createElement("span", _extends({
-    ref: dateFieldRef
-  }, fieldProps, {
-    style: {
-      display: 'contents'
-    }
-  }), state.segments.map(function (segment, i) {
+    variant: variant != null ? variant : state.isInvalid ? validationVariant : undefined
+  }, fieldProps), state.segments.map(function (segment, i) {
     return React.createElement(FieldSegment, {
       segment: segment,
       state: state,
       key: i
     });
-  }))));
+  })));
 };
 
 var _excluded$9 = ["children", "className", "style"];
@@ -397,9 +411,9 @@ var CalendarGrid = function CalendarGrid(_ref) {
     className: "eds-datepicker__calendar__grid"
   }), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, showWeekNumbers && React.createElement("th", {
     className: "eds-datepicker__calendar__grid__weeknumber-header"
-  }, weekNumberHeader), weekDaysMapped().map(function (day, index) {
+  }, weekNumberHeader), weekDaysMapped().map(function (day) {
     return React.createElement("th", {
-      key: index
+      key: day
     }, day);
   }))), React.createElement("tbody", null, weeksArray.map(function (weekIndex) {
     var weekNumber = getWeekNumberForDate(state.getDatesInWeek(weekIndex)[0]);
@@ -410,7 +424,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
       className: "eds-datepicker__calendar__grid__weeknumber"
     }, weekNumber), state.getDatesInWeek(weekIndex).map(function (date, i) {
       return date ? React.createElement(CalendarCell, {
-        key: i,
+        key: date.month + "." + date.day,
         state: state,
         date: date,
         "aria-describedby": calendarGridId + 'description',
@@ -428,7 +442,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
 };
 
 var _excluded$6 = ["locale"],
-  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "style", "className", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
+  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "forcedReturnType", "style", "className", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
 var Calendar = function Calendar(_ref) {
   var localOverride = _ref.locale,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
@@ -440,13 +454,14 @@ var Calendar = function Calendar(_ref) {
 };
 var CalendarBase = function CalendarBase(_ref2) {
   var selectedDate = _ref2.selectedDate,
-    onChange = _ref2.onChange,
+    _onChange = _ref2.onChange,
     minDate = _ref2.minDate,
     maxDate = _ref2.maxDate,
     _ref2$showWeekNumbers = _ref2.showWeekNumbers,
     showWeekNumbers = _ref2$showWeekNumbers === void 0 ? false : _ref2$showWeekNumbers,
     _ref2$weekNumberHeade = _ref2.weekNumberHeader,
     weekNumberHeader = _ref2$weekNumberHeade === void 0 ? 'uke' : _ref2$weekNumberHeade,
+    forcedReturnType = _ref2.forcedReturnType,
     style = _ref2.style,
     className = _ref2.className,
     navigationDescription = _ref2.navigationDescription,
@@ -460,16 +475,23 @@ var CalendarBase = function CalendarBase(_ref2) {
     rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   var _useLocale2 = useLocale(),
     locale = _useLocale2.locale;
-  var allProps = _extends({}, rest, {
+  var _props = _extends({}, rest, {
     value: selectedDate,
-    onChange: onChange,
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: forcedReturnType,
+        onChange: _onChange
+      });
+    },
     locale: locale,
     createCalendar: createCalendar,
     minValue: minDate,
     maxValue: maxDate
   });
-  var state = useCalendarState(allProps);
-  var _useCalendar = useCalendar(allProps, state),
+  var state = useCalendarState(_props);
+  var _useCalendar = useCalendar(_props, state),
     calendarProps = _useCalendar.calendarProps,
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
@@ -488,7 +510,7 @@ var CalendarBase = function CalendarBase(_ref2) {
     "aria-label": ariaLabelIfNorwegian('Neste måned', locale, nextButtonProps)
   }), React.createElement(RightArrowIcon, {
     size: 20
-  }))), React.createElement(CalendarGrid, {
+  }))), React.createElement(CalendarGrid, _extends({}, rest, {
     state: state,
     navigationDescription: navigationDescription,
     onSelectedCellClick: onSelectedCellClick,
@@ -496,13 +518,12 @@ var CalendarBase = function CalendarBase(_ref2) {
     ariaLabelForDate: ariaLabelForDate,
     showWeekNumbers: showWeekNumbers,
     weekNumberHeader: weekNumberHeader
-  }));
+  })));
 };
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend"];
+var _excluded$5 = ["selectedDate", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend", "granularity"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
-    onChange = _ref.onChange,
     locale = _ref.locale,
     disabled = _ref.disabled,
     showTime = _ref.showTime,
@@ -510,7 +531,6 @@ var DatePicker = function DatePicker(_ref) {
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
     classNameForDate = _ref.classNameForDate,
     className = _ref.className,
-    style = _ref.style,
     variant = _ref.variant,
     feedback = _ref.feedback,
     validationVariant = _ref.validationVariant,
@@ -525,36 +545,27 @@ var DatePicker = function DatePicker(_ref) {
     maxDate = _ref.maxDate,
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
-    forcedReturnType = _ref.forcedReturnType,
     ariaLabelForDate = _ref.ariaLabelForDate,
     append = _ref.append,
     prepend = _ref.prepend,
+    _ref$granularity = _ref.granularity,
+    granularity = _ref$granularity === void 0 ? showTime ? 'minute' : 'day' : _ref$granularity,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = useRef(null);
   var calendarRef = useRef(null);
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
-  var handleOnChange = function handleOnChange(value) {
-    if (forcedReturnType !== undefined) {
-      return onChange(convertValueToType({
-        value: value,
-        type: forcedReturnType,
-        timezone: value !== null && 'timezone' in value ? value.timezone : undefined
-      }));
-    }
-    onChange(value);
-  };
-  var state = useDatePickerState(_extends({}, rest, {
+  var _props = _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: handleOnChange,
-    granularity: showTime ? 'minute' : rest.granularity,
+    granularity: granularity,
     isDisabled: disabled
-  }));
-  var _useDatePicker = useDatePicker(_extends({}, rest), state, datePickerRef),
+  });
+  var state = useDatePickerState(_props);
+  var _useDatePicker = useDatePicker(_props, state, datePickerRef),
     groupProps = _useDatePicker.groupProps,
     labelProps = _useDatePicker.labelProps,
     fieldProps = _useDatePicker.fieldProps,
@@ -583,13 +594,13 @@ var DatePicker = function DatePicker(_ref) {
     state.setOpen(false);
   });
   var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
+    onChange: rest.onChange,
     disabled: disabled,
     navigationDescription: navigationDescription,
     onSelectedCellClick: function onSelectedCellClick() {
       return state.setOpen(false);
     },
     selectedDate: selectedDate,
-    onChange: handleOnChange,
     minDate: minDate,
     maxDate: maxDate,
     calendarRef: calendarRef,
@@ -598,14 +609,14 @@ var DatePicker = function DatePicker(_ref) {
     showWeekNumbers: showWeekNumbers,
     weekNumberHeader: weekNumberHeader
   });
-  var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
+  var isModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
     style: _extends({}, floatingStyles, {
       zIndex: zIndexes.popover
     }),
     ref: refs.setFloating
   }, React.createElement(FocusLock, {
-    disabled: !state.isOpen || useModal,
+    disabled: !state.isOpen || isModal,
     returnFocus: true
   }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps))));
   var modalCalendar = React.createElement(Modal, {
@@ -624,7 +635,7 @@ var DatePicker = function DatePicker(_ref) {
         locale: locale
       }, child);
     }
-  }, React.createElement(DateField, {
+  }, React.createElement(DateField, _extends({}, groupProps, fieldProps, rest, {
     append: !disabled && React.createElement("div", {
       style: {
         display: 'flex',
@@ -643,14 +654,10 @@ var DatePicker = function DatePicker(_ref) {
     }),
     disabled: disabled,
     feedback: feedback,
-    fieldProps: fieldProps,
-    groupProps: groupProps,
-    label: rest.label,
     labelProps: labelProps,
     labelTooltip: labelTooltip,
     maxDate: maxDate,
     minDate: minDate,
-    onChange: handleOnChange,
     dateFieldRef: function dateFieldRef(node) {
       refs.setReference(node);
       datePickerRef.current = node;
@@ -658,11 +665,10 @@ var DatePicker = function DatePicker(_ref) {
     selectedDate: selectedDate,
     showTime: showTime,
     showTimeZone: showTimeZone,
-    style: style,
     validationFeedback: validationFeedback,
     validationVariant: validationVariant,
     variant: variant
-  }), useModal ? modalCalendar : popoverCalendar);
+  })), isModal ? modalCalendar : popoverCalendar);
 };
 
 var _excluded$4 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
@@ -791,10 +797,10 @@ var TimePicker = function TimePicker(_ref) {
   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) {
+    if (forcedReturnType !== undefined || !selectedTime) {
       return onChange(convertValueToType({
         value: value,
-        type: forcedReturnType,
+        type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime',
         timezone: timeZone
       }));
     }
@@ -1170,5 +1176,5 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
 
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, convertValueToType, createCalendar, focusSegment, getWeekNumberForDate, lastMillisecondOfDay, modulo, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
+export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, convertValueToType, createCalendar, focusSegment, getWeekNumberForDate, handleOnChange, lastMillisecondOfDay, modulo, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map