@entur/datepicker 8.0.10 → 8.1.0-beta.0

package/dist/TimePicker/SimpleTimePicker.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { TimeValue, AriaTimeFieldProps, MappedTimeValue } from '@react-types/datepicker';
+import { VariantType } from '@entur/form';
+import './SimpleTimePicker.scss';
+export type SimpleTimePickerProps<TimeType extends TimeValue> = {
+    /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
+    selectedTime: TimeType | null;
+    /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
+    onChange?: (value: MappedTimeValue<TimeType> | null) => void | React.Dispatch<React.SetStateAction<TimeValue | null>>;
+    /** Label til TimePicker */
+    label: string;
+    /** Viser den gjeldende tidssonen hvis en er valgt
+     * @default false
+     */
+    showTimeZone?: boolean;
+    /** Viser sekund i tillegg til time og minutt
+     * @default false
+     */
+    showSeconds?: boolean;
+    /** Viser et klokkeikonet for å klarere indikere at dette
+     * er en tidsvelger
+     * @default false
+     */
+    showClockIcon?: boolean;
+    /** Varselmelding, som vil komme under TimePicker */
+    feedback?: string;
+    /** Valideringsvariant */
+    variant?: VariantType;
+    labelTooltip?: React.ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    /** Ekstra klassenavn */
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue' | 'locale'>;
+export declare const SimpleTimePicker: <TimeType extends TimeValue>({ className, disabled, feedback, showClockIcon, inputRef, label, labelTooltip, onChange, readOnly, selectedTime, showSeconds, showTimeZone, style, variant, ...rest }: SimpleTimePickerProps<TimeType>) => JSX.Element;

package/dist/TimePicker/index.d.ts

@@ -1,3 +1,4 @@
 export * from './TimePicker';
 export * from './NativeTimePicker';
+export * from './SimpleTimePicker';
 export * from '../shared/utils';

package/dist/datepicker.cjs.development.js

@@ -183,7 +183,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__default["default"].forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
     label = _ref.label,
@@ -206,7 +206,7 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
     append = _ref.append,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
   var state = datepicker$1.useDateFieldState(_extends({}, rest, {
@@ -257,12 +257,12 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_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 = React.useRef(null);
   var _useButton = button.useButton(props, ref),
     buttonProps = _useButton.buttonProps;
@@ -273,7 +273,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,
@@ -282,7 +282,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 = React.useRef(null);
   var _useCalendarCell = calendar.useCalendarCell({
       date: date$1
@@ -317,7 +317,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,
@@ -325,7 +325,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 = utils.useRandomId('eds-calendar');
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
@@ -376,7 +376,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__default["default"].forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
     customLocale = _ref.locale,
@@ -386,7 +386,7 @@ var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
   var state = calendar$1.useCalendarState(_extends({}, rest, {
@@ -427,7 +427,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", "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,
@@ -449,7 +449,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 = React.useRef(null);
   var calendarRef = React.useRef(null);
@@ -575,8 +575,8 @@ var DatePicker = function DatePicker(_ref) {
   }), React__default["default"].createElement(icons.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__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -589,7 +589,7 @@ var NativeDatePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
     prepend = _ref$prepend === void 0 ? React__default["default"].createElement(icons.DateIcon, {
       inline: true
     }) : _ref$prepend,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var nativedatepickerId = utils.useRandomId('eds-nativetimepicker');
   return React__default["default"].createElement(form.BaseFormControl, {
     style: style,
@@ -612,7 +612,7 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
   var onChange = _ref2.onChange,
     variant = _ref2.variant,
     value = _ref2.value,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   var contextVariant = form.useVariant();
   var currentVariant = variant || contextVariant;
   var _useInputGroupContext = form.useInputGroupContext(),
@@ -665,7 +665,7 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   }, direction === 'left' ? React__default["default"].createElement(icons.LeftArrowIcon, null) : React__default["default"].createElement(icons.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,
@@ -685,12 +685,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 = i18n.useLocale(),
     locale = _useLocale.locale;
   if (customLocale) locale = customLocale;
   var state = datepicker$1.useTimeFieldState(_extends({
-    // @ts-expect-error Time should be assignable to MappedTime<TimeType>
     onChange: onChange,
     label: label,
     locale: locale,
@@ -772,8 +771,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__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -782,7 +781,7 @@ var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
     feedback = _ref.feedback,
     variant = _ref.variant,
     prepend = _ref.prepend,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var nativetimepickerId = utils.useRandomId('eds-native-timepicker');
   return React__default["default"].createElement(form.BaseFormControl, {
     style: style,
@@ -802,7 +801,7 @@ var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
 var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
     value = _ref2.value,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   var contextVariant = form.useVariant();
   var currentVariant = rest.variant || contextVariant;
   var _useInputGroupContext = form.useInputGroupContext(),
@@ -838,6 +837,187 @@ var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
   }, rest));
 });
 
+var _excluded = ["className", "disabled", "feedback", "showClockIcon", "inputRef", "label", "labelTooltip", "onChange", "readOnly", "selectedTime", "showSeconds", "showTimeZone", "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,
+    readOnly = _ref.readOnly,
+    selectedTime = _ref.selectedTime,
+    showSeconds = _ref.showSeconds,
+    showTimeZone = _ref.showTimeZone,
+    style = _ref.style,
+    variant = _ref.variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = React.useState(''),
+    inputText = _useState[0],
+    setInputText = _useState[1];
+  var timeFieldRef = React.useRef(null);
+  var _useState2 = React.useState(null),
+    lastValidSelectedTime = _useState2[0],
+    setLastValidSelectedTime = _useState2[1];
+  var _useLocale = i18n.useLocale(),
+    locale = _useLocale.locale;
+  var state = datepicker$1.useTimeFieldState(_extends({
+    onChange: onChange,
+    label: label,
+    locale: locale,
+    value: selectedTime === null ? undefined : selectedTime,
+    hideTimeZone: !showTimeZone,
+    isDisabled: disabled
+  }, rest));
+  var _useTimeField = datepicker.useTimeField(_extends({}, rest, {
+      label: label
+    }), state, timeFieldRef),
+    labelProps = _useTimeField.labelProps,
+    fieldProps = _useTimeField.fieldProps;
+  React.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 ? date.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 = date.parseTime(formatedTimeString);
+        return timeObject;
+      } catch (e) {
+        return inputResult.INVALID;
+      }
+    }
+    return inputResult.INVALID;
+  };
+  var getSelectedTimeWithTimeFromObject = function getSelectedTimeWithTimeFromObject(newTime) {
+    var selectedTimeWithUpdateTime = (lastValidSelectedTime != null ? lastValidSelectedTime : new date.Time()).set({
+      hour: newTime.hour,
+      minute: newTime.minute,
+      second: newTime.second
+    });
+    return selectedTimeWithUpdateTime;
+  };
+  var usedFieldProps = _objectWithoutPropertiesLoose(fieldProps, _excluded2);
+  return React__default["default"].createElement(i18n.I18nProvider, {
+    locale: locale
+  }, React__default["default"].createElement(form.TextField, _extends({
+    append: showClockIcon ? React__default["default"].createElement(icons.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__default["default"]('eds-simple-timepicker', {
+      '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: utils.mergeRefs(timeFieldRef, inputRef),
+    style: style,
+    value: inputText,
+    variant: variant
+  }, usedFieldProps)));
+};
+
 utils.warnAboutMissingStyles('datepicker', 'form', 'icons');
 
 exports.Calendar = Calendar;
@@ -845,6 +1025,7 @@ exports.DateField = DateField;
 exports.DatePicker = DatePicker;
 exports.NativeDatePicker = NativeDatePicker;
 exports.NativeTimePicker = NativeTimePicker;
+exports.SimpleTimePicker = SimpleTimePicker;
 exports.TimePicker = TimePicker;
 exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
 exports.createCalendar = createCalendar;