@entur/datepicker 8.0.11 → 8.1.0-beta.1

package/dist/datepicker.esm.js

@@ -1,14 +1,14 @@
 import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import React, { useRef } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 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 classNames from 'classnames';
-import { BaseFormControl, useVariant, useInputGroupContext, isFilled } from '@entur/form';
-import { CalendarDate, Time, getLocalTimeZone, GregorianCalendar, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, now, getWeeksInMonth } from '@internationalized/date';
+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 { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
 import { useCalendarState } from '@react-stately/calendar';
-import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon } from '@entur/icons';
+import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon, ClockIcon } from '@entur/icons';
 import { useButton } from '@react-aria/button';
 import { IconButton } from '@entur/button';
 import { VisuallyHidden } from '@entur/a11y';
@@ -173,7 +173,7 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
   return norwegianAriaLabel;
 };
 
-var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
+var _excluded$9 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
     label = _ref.label,
@@ -196,7 +196,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
     append = _ref.append,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var state = useDateFieldState(_extends({}, rest, {
@@ -247,12 +247,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var _excluded$7 = ["children", "className", "style"];
+var _excluded$8 = ["children", "className", "style"];
 var CalendarButton = function CalendarButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var ref = useRef(null);
   var _useButton = useButton(props, ref),
     buttonProps = _useButton.buttonProps;
@@ -263,7 +263,7 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
-var _excluded$6 = ["state", "date", "onSelectedCellClick"];
+var _excluded$7 = ["state", "date", "onSelectedCellClick"];
 var CalendarCell = function CalendarCell(_ref) {
   var _state$timeZone;
   var state = _ref.state,
@@ -272,7 +272,7 @@ var CalendarCell = function CalendarCell(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var cellRef = useRef(null);
   var _useCalendarCell = useCalendarCell({
       date: date
@@ -307,7 +307,7 @@ var CalendarCell = function CalendarCell(_ref) {
   }), formattedDate));
 };
 
-var _excluded$5 = ["state", "navigationDescription", "onSelectedCellClick"];
+var _excluded$6 = ["state", "navigationDescription", "onSelectedCellClick"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
     navigationDescription = _ref.navigationDescription,
@@ -315,7 +315,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var calendarGridId = useRandomId('eds-calendar');
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
@@ -366,7 +366,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
+var _excluded$5 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
     customLocale = _ref.locale,
@@ -376,7 +376,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var state = useCalendarState(_extends({}, rest, {
@@ -417,7 +417,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", "minDate", "maxDate", "modalTreshold"];
+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,
     onChange = _ref.onChange,
@@ -439,7 +439,7 @@ var DatePicker = function DatePicker(_ref) {
     maxValue = _ref.maxDate,
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = useRef(null);
   var calendarRef = useRef(null);
@@ -565,8 +565,8 @@ var DatePicker = function DatePicker(_ref) {
   }), React.createElement(CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
 };
 
-var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
-  _excluded2$1 = ["onChange", "variant", "value"];
+var _excluded$3 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
+  _excluded2$2 = ["onChange", "variant", "value"];
 var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -579,7 +579,7 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
       inline: true
     }) : _ref$prepend,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var nativedatepickerId = useRandomId('eds-nativetimepicker');
   return React.createElement(BaseFormControl, {
     style: style,
@@ -602,7 +602,7 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
     variant = _ref2.variant,
     value = _ref2.value,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
   var _useInputGroupContext = useInputGroupContext(),
@@ -655,7 +655,7 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   }, direction === 'left' ? React.createElement(LeftArrowIcon, null) : React.createElement(RightArrowIcon, null));
 };
 
-var _excluded$1 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef"];
+var _excluded$2 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef"];
 var TimePicker = function TimePicker(_ref) {
   var selectedTime = _ref.selectedTime,
     onChange = _ref.onChange,
@@ -675,12 +675,11 @@ var TimePicker = function TimePicker(_ref) {
     _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
     rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
     inputRef = _ref.inputRef,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   if (customLocale) locale = customLocale;
   var state = useTimeFieldState(_extends({
-    // @ts-expect-error Time should be assignable to MappedTime<TimeType>
     onChange: onChange,
     label: label,
     locale: locale,
@@ -762,8 +761,8 @@ var TimePicker = function TimePicker(_ref) {
   })));
 };
 
-var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
-  _excluded2 = ["onChange", "value"];
+var _excluded$1 = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
+  _excluded2$1 = ["onChange", "value"];
 var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -772,7 +771,7 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     feedback = _ref.feedback,
     variant = _ref.variant,
     prepend = _ref.prepend,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var nativetimepickerId = useRandomId('eds-native-timepicker');
   return React.createElement(BaseFormControl, {
     style: style,
@@ -792,7 +791,7 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
     value = _ref2.value,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   var contextVariant = useVariant();
   var currentVariant = rest.variant || contextVariant;
   var _useInputGroupContext = useInputGroupContext(),
@@ -828,7 +827,191 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, rest));
 });
 
+var _excluded = ["className", "disabled", "feedback", "showClockIcon", "inputRef", "label", "labelTooltip", "onChange", "padding", "readOnly", "selectedTime", "showSeconds", "style", "variant"],
+  _excluded2 = ["onBlur", "onClick", "onDragStart", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPointerUp"];
+var inputResult;
+(function (inputResult) {
+  inputResult[inputResult["RESET_TIME"] = 0] = "RESET_TIME";
+  inputResult[inputResult["INVALID"] = 1] = "INVALID";
+})(inputResult || (inputResult = {}));
+var SimpleTimePicker = function SimpleTimePicker(_ref) {
+  var disabled = _ref.disabled,
+    feedback = _ref.feedback,
+    _ref$showClockIcon = _ref.showClockIcon,
+    showClockIcon = _ref$showClockIcon === void 0 ? false : _ref$showClockIcon,
+    inputRef = _ref.inputRef,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    onChange = _ref.onChange,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'default' : _ref$padding,
+    readOnly = _ref.readOnly,
+    selectedTime = _ref.selectedTime,
+    showSeconds = _ref.showSeconds,
+    style = _ref.style,
+    variant = _ref.variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(''),
+    inputText = _useState[0],
+    setInputText = _useState[1];
+  var timeFieldRef = useRef(null);
+  var _useState2 = useState(null),
+    lastValidSelectedTime = _useState2[0],
+    setLastValidSelectedTime = _useState2[1];
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var state = useTimeFieldState(_extends({
+    onChange: onChange,
+    label: label,
+    locale: locale,
+    value: selectedTime === null ? undefined : selectedTime,
+    hideTimeZone: true,
+    isDisabled: disabled,
+    isReadOnly: readOnly
+  }, rest));
+  var _useTimeField = useTimeField(_extends({}, rest, {
+      label: label
+    }), state, timeFieldRef),
+    labelProps = _useTimeField.labelProps,
+    fieldProps = _useTimeField.fieldProps;
+  useEffect(function () {
+    updateInputWithSelectedTime();
+    // @ts-expect-error TimeType and MappedTimeValue<TimeType> is actually the same
+    if (selectedTime !== null) setLastValidSelectedTime(selectedTime);
+  }, [selectedTime == null ? void 0 : selectedTime.toString()]);
+  var updateInputWithSelectedTime = function updateInputWithSelectedTime() {
+    var selectedTimeString = getStringFromTimeValue(selectedTime);
+    setInputText(selectedTimeString);
+    var timeFieldIsFocused = document.activeElement === (timeFieldRef == null ? void 0 : timeFieldRef.current);
+    if (selectedTimeString === '' && !timeFieldIsFocused) addPlaceholderToInput();
+  };
+  var getStringFromTimeValue = function getStringFromTimeValue(timeValue) {
+    if (timeValue === null) return '';
+    var timeObject = 'day' in timeValue ? toTime(timeValue) : timeValue;
+    if (showSeconds) return timeObject.toString().slice(0, 8);
+    return timeObject.toString().slice(0, 5);
+  };
+  var addPlaceholderToInput = function addPlaceholderToInput() {
+    if (showSeconds) setInputText('–– : –– : ––');else setInputText('–– : ––');
+  };
+  var handleChangeTime = function handleChangeTime() {
+    var newTime = getValueForOnChangeFromInput();
+    if (newTime === inputResult.INVALID) {
+      return updateInputWithSelectedTime();
+    }
+    if ((newTime == null ? void 0 : newTime.toString()) !== (selectedTime == null ? void 0 : selectedTime.toString())) onChange == null ? void 0 : onChange(newTime);
+  };
+  var getValueForOnChangeFromInput = function getValueForOnChangeFromInput() {
+    var formatedTimeString = formatTimeString(inputText);
+    var newTimeObject = formatedTimeStringToTimeObject(formatedTimeString);
+    if (newTimeObject === inputResult.INVALID) {
+      return inputResult.INVALID;
+    }
+    if (newTimeObject === inputResult.RESET_TIME) {
+      return null;
+    }
+    var updatedSelectedTime = getSelectedTimeWithTimeFromObject(newTimeObject);
+    return updatedSelectedTime;
+  };
+  var formatTimeString = function formatTimeString(timeString) {
+    if (timeString.length === 0) return inputResult.RESET_TIME;
+    if (timeString.length < 3 || timeString.length > 8) return inputResult.INVALID;
+    var numberOfColons = (timeString.match(new RegExp(':', 'g')) || []).length;
+    var stringLength = timeString.length;
+    // targets 'd:dd:dd' and 'dd:dd:dd'
+    if (numberOfColons === 2 && stringLength >= 7) {
+      return timeString.padStart(8, '0');
+    }
+    // targets 'd:dd' and 'dd:dd'
+    if (numberOfColons === 1) {
+      return timeString.padStart(5, '0');
+    }
+    if (stringLength > 6) return inputResult.INVALID;
+    var stringLengthIsEven = stringLength % 2 == 0;
+    var hourString = stringLengthIsEven ? timeString.slice(0, 2) : timeString.slice(0, 1);
+    var minuteString = stringLengthIsEven ? timeString.slice(2, 4) : timeString.slice(1, 3);
+    var secondString = function () {
+      var stringSlice = stringLengthIsEven ? timeString.slice(4, 6) : timeString.slice(3, 5);
+      if (stringSlice === '') return '00';
+      return stringSlice;
+    }();
+    var timeStringWithColon = hourString.padStart(2, '0') + ':' + minuteString + (showSeconds ? ':' + secondString : '');
+    return timeStringWithColon;
+  };
+  var formatedTimeStringToTimeObject = function formatedTimeStringToTimeObject(formatedTimeString) {
+    if (formatedTimeString === inputResult.INVALID) return inputResult.INVALID;
+    if (formatedTimeString === inputResult.RESET_TIME) return inputResult.RESET_TIME;
+    var isNumberTest = /^\d+$/;
+    var hourString = formatedTimeString.slice(0, 2);
+    var minuteString = formatedTimeString.slice(3, 5);
+    var secondString = formatedTimeString.slice(6, 8);
+    if (hourString.match(isNumberTest) && minuteString.match(isNumberTest) && (secondString === '' || secondString.match(isNumberTest))) {
+      try {
+        var timeObject = parseTime(formatedTimeString);
+        return timeObject;
+      } catch (e) {
+        return inputResult.INVALID;
+      }
+    }
+    return inputResult.INVALID;
+  };
+  var getSelectedTimeWithTimeFromObject = function getSelectedTimeWithTimeFromObject(newTime) {
+    var selectedTimeWithUpdateTime = (lastValidSelectedTime != null ? lastValidSelectedTime : new Time()).set({
+      hour: newTime.hour,
+      minute: newTime.minute,
+      second: newTime.second
+    });
+    return selectedTimeWithUpdateTime;
+  };
+  var usedFieldProps = _objectWithoutPropertiesLoose(fieldProps, _excluded2);
+  return React.createElement(I18nProvider, {
+    locale: locale
+  }, React.createElement(TextField, _extends({
+    append: showClockIcon ? React.createElement(ClockIcon, {
+      inline: true,
+      onClick: function onClick() {
+        var _timeFieldRef$current;
+        return timeFieldRef == null ? void 0 : (_timeFieldRef$current = timeFieldRef.current) == null ? void 0 : _timeFieldRef$current.focus();
+      }
+    }) : undefined,
+    className: classNames('eds-simple-timepicker', {
+      'eds-simple-timepicker--padding-large': padding === 'large',
+      'eds-simple-timepicker--show-seconds': showSeconds
+    }),
+    disabled: disabled,
+    disableLabelAnimation: true,
+    feedback: feedback,
+    label: label,
+    labelProps: labelProps,
+    labelTooltip: labelTooltip,
+    onBlur: function onBlur() {
+      handleChangeTime();
+      if (selectedTime === null) {
+        addPlaceholderToInput();
+      }
+    },
+    onChange: function onChange(e) {
+      return setInputText(e.target.value);
+    },
+    onFocus: function onFocus() {
+      if (selectedTime === null) {
+        setInputText('');
+      }
+    },
+    onKeyDown: function onKeyDown(_ref2) {
+      var key = _ref2.key;
+      if (key === 'Enter') handleChangeTime();
+    },
+    placeholder: showSeconds ? '–– : –– : ––' : '–– : ––',
+    readOnly: readOnly,
+    ref: mergeRefs(timeFieldRef, inputRef),
+    style: style,
+    value: inputText,
+    variant: variant
+  }, usedFieldProps)));
+};
+
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
+export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map