@entur/datepicker 2.1.1 → 3.0.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-alpha.0](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.3...@entur/datepicker@3.0.0-alpha.0) (2022-09-02)
+
+### Features
+
+- **native time picker:** update native timepicker with small tweaks ([9d72bf7](https://bitbucket.org/enturas/design-system/commits/9d72bf79951aed9b236fb55a007fc96d019b9c46))
+- **timepicker:** add new timepicker component using react-aria ([cd90a09](https://bitbucket.org/enturas/design-system/commits/cd90a092de72ebf1cf1cef61147ada5f42fb67b4))
+- **timepicker utils:** add utility functions for converting between TimeValue and JS Date ([f5ee77e](https://bitbucket.org/enturas/design-system/commits/f5ee77e9b3666816bda82b7e0deceaf27672f536))
+
+### BREAKING CHANGES
+
+- **native time picker:** disableLabelAnimation prop has been removed (is always true now)
+- **timepicker:** This is a complete rewrite. Changes in the API will need to be accounted for when using this new
+  version
+
+## [2.1.3](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.2...@entur/datepicker@2.1.3) (2022-08-31)
+
+**Note:** Version bump only for package @entur/datepicker
+
+## [2.1.2](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.1...@entur/datepicker@2.1.2) (2022-08-24)
+
+**Note:** Version bump only for package @entur/datepicker
+
 ## [2.1.1](https://bitbucket.org/enturas/design-system/compare/@entur/datepicker@2.1.0...@entur/datepicker@2.1.1) (2022-08-12)
 
 **Note:** Version bump only for package @entur/datepicker

package/dist/{NativeTimePicker.d.ts → TimePicker/NativeTimePicker.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
 import { VariantType } from '@entur/form';
+import './NativeTimePicker.scss';
 export declare type NativeTimePickerProps = {
     /** Ekstra klassenavn */
     className?: string;
@@ -9,13 +10,7 @@ export declare type NativeTimePickerProps = {
     feedback?: string;
     /** Valideringsvariant */
     variant?: VariantType;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: boolean;
-    /** Tekst eller ikon som kommer før inputfelter
-     * @default <ClockIcon />
-     */
+    /** Tekst eller ikon som kommer før inputfelter */
     prepend?: React.ReactNode;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 export declare const NativeTimePicker: React.ForwardRefExoticComponent<{
@@ -27,12 +22,6 @@ export declare const NativeTimePicker: React.ForwardRefExoticComponent<{
     feedback?: string | undefined;
     /** Valideringsvariant */
     variant?: VariantType | undefined;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: boolean | undefined;
-    /** Tekst eller ikon som kommer før inputfelter
-     * @default <ClockIcon />
-     */
+    /** Tekst eller ikon som kommer før inputfelter */
     prepend?: React.ReactNode;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/TimePicker/TimePicker.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { TimePickerProps as ReactAriaTimePickerProps, TimeValue } from '@react-types/datepicker';
+import { VariantType } from '@entur/form';
+import './TimePicker.scss';
+export declare type TimePickerProps = {
+    /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
+    selectedTime?: TimeValue;
+    /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
+    onChange: (value: TimeValue) => void;
+    /** Label til TimePicker */
+    label: string;
+    /** Minutter som legges til eller trekkes fra ved klikk på pilene i TimePicker
+     * @default 30
+     */
+    minuteIncrementForArrowButtons?: number;
+    /** BCP47-språkkoden til locale-en du ønsker å bruke.
+     * @default Brukerenhetens selvvalgte locale
+     */
+    locale?: string;
+    /** Viser den gjeldende tidssonen hvis en er valgt
+     * @default false
+     */
+    showTimeZone?: boolean;
+    /** Varselmelding, som vil komme under TimePicker */
+    feedback?: string;
+    /** Valideringsvariant */
+    variant?: VariantType;
+    labelTooltip?: React.ReactNode;
+    disabled?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<ReactAriaTimePickerProps<TimeValue>, 'onChange' | 'label' | 'hideTimeZone' | 'placeholder'>;
+export declare const TimePicker: React.ForwardRefExoticComponent<{
+    /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
+    selectedTime?: TimeValue | undefined;
+    /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
+    onChange: (value: TimeValue) => void;
+    /** Label til TimePicker */
+    label: string;
+    /** Minutter som legges til eller trekkes fra ved klikk på pilene i TimePicker
+     * @default 30
+     */
+    minuteIncrementForArrowButtons?: number | undefined;
+    /** BCP47-språkkoden til locale-en du ønsker å bruke.
+     * @default Brukerenhetens selvvalgte locale
+     */
+    locale?: string | undefined;
+    /** Viser den gjeldende tidssonen hvis en er valgt
+     * @default false
+     */
+    showTimeZone?: boolean | undefined;
+    /** Varselmelding, som vil komme under TimePicker */
+    feedback?: string | undefined;
+    /** Valideringsvariant */
+    variant?: VariantType | undefined;
+    labelTooltip?: React.ReactNode;
+    disabled?: boolean | undefined;
+    /** Ekstra klassenavn */
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+} & Omit<ReactAriaTimePickerProps<TimeValue>, "onChange" | "label" | "hideTimeZone" | "placeholder"> & React.RefAttributes<HTMLDivElement>>;

package/dist/TimePicker/TimePickerArrowButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type TimePickerArrowButtonProps = {
+    direction: 'left' | 'right';
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export declare const TimePickerArrowButton: React.FC<TimePickerArrowButtonProps>;
+export {};

package/dist/TimePicker/TimeSegment.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DateSegment, DateFieldState } from '@react-stately/datepicker';
+declare type TimeSegmentProps = {
+    segment: DateSegment;
+    state: DateFieldState;
+    isAmPm: boolean;
+    index: number;
+};
+export declare const TimeSegment: ({ segment, state, isAmPm, index, }: TimeSegmentProps) => JSX.Element;
+export {};

package/dist/TimePicker/index.d.ts

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

package/dist/TimePicker/utils.d.ts

@@ -0,0 +1,18 @@
+import { ZonedDateTime, CalendarDateTime, Time } from '@internationalized/date';
+import { TimeValue } from '@react-types/datepicker';
+/**
+ * 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
+ * @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato 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
+ */
+export declare const nativeDateToTimeValue: (date: Date, noDateOnlyTime?: boolean, timeZone?: string | undefined, offset?: number | undefined) => Time | CalendarDateTime | ZonedDateTime;
+/**
+ * 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
+ * @returns {Date} et Date-objekt med verdier fra time
+ */
+export declare const timeValueToNativeDate: (time: TimeValue, timeZoneForCalendarDateTime?: string | undefined) => Date;

package/dist/datepicker.cjs.development.js

@@ -14,6 +14,10 @@ var button = require('@entur/button');
 var form = require('@entur/form');
 var tooltip = require('@entur/tooltip');
 require('react-datepicker/dist/react-datepicker.css');
+var datepicker = require('@react-aria/datepicker');
+var i18n = require('@react-aria/i18n');
+var datepicker$1 = require('@react-stately/datepicker');
+var date = require('@internationalized/date');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -54,44 +58,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 var DatePickerHeader = function DatePickerHeader(_ref) {
   var _date$getMonth;
 
@@ -217,7 +183,7 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
     feedback: feedback,
     variant: variant,
     disableLabelAnimation: disableLabelAnimation,
-    ref: mergeRefs(ref, inputRef, forwardRef),
+    ref: utils.mergeRefs(ref, inputRef, forwardRef),
     onClick: handleOnClickInputField,
     ariaAlertOnFeedback: true,
     append: !hideCalendarButton && React__default["default"].createElement(tooltip.Tooltip, {
@@ -235,22 +201,6 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
   }, rest));
 });
 
-var mergeRefs = function mergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return function (node) {
-    for (var _iterator = _createForOfIteratorHelperLoose(refs), _step; !(_step = _iterator()).done;) {
-      var ref = _step.value;
-
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) ref.current = node;
-    }
-  };
-};
-
 var _excluded$3 = ["style", "className", "selectedDate", "label", "placeholder", "onChange", "onKeyDown", "dateFormats", "minDate", "maxDate", "inline", "disabled", "prepend", "feedback", "variant", "validationFeedback", "validationVariant", "disableLabelAnimation", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "hideCalendar", "hideValidation", "weekLabel", "chooseDayAriaLabelPrefix", "previousMonthAriaLabel", "nextMonthAriaLabel", "locale", "open"];
 ReactDatepicker.registerLocale('nb', locale.nb);
 var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
@@ -536,7 +486,7 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
 });
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
-    _excluded2$2 = ["onChange", "variant", "value"];
+    _excluded2$1 = ["onChange", "variant", "value"];
 var NativeDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       style = _ref.style,
@@ -573,7 +523,7 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
   var onChange = _ref2.onChange,
       variant = _ref2.variant,
       value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
   var contextVariant = form.useVariant();
   var currentVariant = variant || contextVariant;
@@ -615,16 +565,47 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
   }, rest));
 });
 
-var _excluded$1 = ["selectedTime", "onChange", "placeholder", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "disableLabelAnimation", "locale", "onLeftArrowClick", "onRightArrowClick"],
-    _excluded2$1 = ["className", "onChange", "selectedTime", "placeholder", "timeFormat", "dateFormat"],
-    _excluded3 = ["direction"];
-ReactDatepicker.registerLocale('nb', locale.nb);
+var TimeSegment = function TimeSegment(_ref) {
+  var segment = _ref.segment,
+      state = _ref.state,
+      isAmPm = _ref.isAmPm,
+      index = _ref.index;
+  var ref = React.useRef(null);
+
+  var _useDateSegment = datepicker.useDateSegment(segment, state, ref),
+      segmentProps = _useDateSegment.segmentProps;
+
+  var segmentDisplayText = function segmentDisplayText() {
+    if (isAmPm) return segment.text;
+    if (index === 0 && segment.text.length === 1) return '0' + segment.text;
+    return segment.text;
+  };
+
+  return React__default["default"].createElement("div", _extends({}, segmentProps, {
+    ref: ref,
+    className: "eds-timepicker__segment " + (segment.isPlaceholder ? 'eds-timepicker__segment--placeholder' : '')
+  }), segmentDisplayText());
+};
+
+var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
+  var direction = _ref.direction,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      ariaLabel = _ref['aria-label'];
+  return React__default["default"].createElement(button.IconButton, {
+    className: classNames__default["default"]('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction),
+    type: "button",
+    tabIndex: -1,
+    onClick: onClick,
+    disabled: disabled,
+    "aria-label": ariaLabel
+  }, 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", "children"];
 var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _ref$selectedTime = _ref.selectedTime,
-      selectedTime = _ref$selectedTime === void 0 ? null : _ref$selectedTime,
+  var selectedTime = _ref.selectedTime,
       onChange = _ref.onChange,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Velg tid' : _ref$placeholder,
       disabled = _ref.disabled,
       className = _ref.className,
       style = _ref.style,
@@ -632,137 +613,83 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
       labelTooltip = _ref.labelTooltip,
       feedback = _ref.feedback,
       variant = _ref.variant,
-      disableLabelAnimation = _ref.disableLabelAnimation,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? 'nb' : _ref$locale,
-      _ref$onLeftArrowClick = _ref.onLeftArrowClick,
-      onLeftArrowClick = _ref$onLeftArrowClick === void 0 ? function (selectedTime, event) {
-    return selectedTime && onChange(dateFns.sub(selectedTime, {
-      minutes: 30
-    }), event);
-  } : _ref$onLeftArrowClick,
-      _ref$onRightArrowClic = _ref.onRightArrowClick,
-      onRightArrowClick = _ref$onRightArrowClic === void 0 ? function (selectedTime, event) {
-    return selectedTime && onChange(dateFns.add(selectedTime, {
-      minutes: 30
-    }), event);
-  } : _ref$onRightArrowClic,
+      customLocale = _ref.locale,
+      showTimeZone = _ref.showTimeZone,
+      _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
+      minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  var timepickerId = utils.useRandomId('eds-timepicker');
-  return React__default["default"].createElement(form.BaseFormControl, {
-    style: style,
-    ref: ref,
-    label: label,
-    labelId: timepickerId,
-    labelTooltip: labelTooltip,
-    variant: variant,
-    feedback: feedback,
-    disableLabelAnimation: disableLabelAnimation,
-    className: "eds-timepicker-form-control",
-    disabled: disabled,
-    prepend: React__default["default"].createElement(TimePickerArrowButton, {
-      direction: "left",
-      tabIndex: -1,
-      onClick: function onClick(e) {
-        return onLeftArrowClick(selectedTime, e);
-      },
-      disabled: disabled
-    })
-  }, React__default["default"].createElement(TimePickerBase, _extends({
-    selectedTime: selectedTime,
+  var _useLocale = i18n.useLocale(),
+      locale = _useLocale.locale;
+
+  if (customLocale) locale = customLocale;
+  var state = datepicker$1.useTimeFieldState(_extends({
     onChange: onChange,
-    placeholder: placeholder,
-    className: className,
+    label: label,
     locale: locale,
-    ariaLabelledBy: timepickerId,
-    disabled: disabled
-  }, rest)), React__default["default"].createElement(TimePickerArrowButton, {
-    direction: "right",
-    tabIndex: -1,
-    onClick: function onClick(e) {
-      return onRightArrowClick(selectedTime, e);
-    },
-    disabled: disabled
-  }));
-});
-var POPPER_MODIFIERS = [{
-  name: 'offset',
-  enabled: true,
-  options: {
-    offset: [0, 0]
-  }
-}];
-
-var TimePickerBase = function TimePickerBase(_ref2) {
-  var className = _ref2.className,
-      onChange = _ref2.onChange,
-      selectedTime = _ref2.selectedTime,
-      placeholder = _ref2.placeholder,
-      _ref2$timeFormat = _ref2.timeFormat,
-      timeFormat = _ref2$timeFormat === void 0 ? 'HH:mm' : _ref2$timeFormat,
-      _ref2$dateFormat = _ref2.dateFormat,
-      dateFormat = _ref2$dateFormat === void 0 ? ['HH:mm', 'HHmm'] : _ref2$dateFormat,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-
-  var _useInputGroupContext = form.useInputGroupContext(),
-      isTimepickerFilled = _useInputGroupContext.isFilled,
-      setFiller = _useInputGroupContext.setFilled;
+    value: selectedTime,
+    hideTimeZone: !showTimeZone
+  }, rest));
+  var timeFieldRef = React.useRef(null);
 
-  utils.useOnMount(function () {
-    if (selectedTime) {
-      setFiller && !isTimepickerFilled && setFiller(true);
-    }
-  });
-  React__default["default"].useEffect(function () {
-    if (selectedTime) {
-      setFiller && !isTimepickerFilled && setFiller(true);
-    } else {
-      setFiller && isTimepickerFilled && setFiller(false);
-    }
-  }, [selectedTime, setFiller, isTimepickerFilled]);
+  var _useTimeField = datepicker.useTimeField(rest, state, timeFieldRef),
+      labelProps = _useTimeField.labelProps,
+      fieldProps = _useTimeField.fieldProps;
 
-  var handleChange = function handleChange(date, event) {
-    if (date) {
-      setFiller && !isTimepickerFilled && setFiller(true);
-    } else {
-      setFiller && isTimepickerFilled && setFiller(false);
-    }
+  var id = utils.useRandomId('timepicker');
 
-    if (onChange) {
-      onChange(date, event);
-    }
+  var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
+    state.value && state.setValue(state.value && state.value.add({
+      minutes: minutes
+    }));
   };
 
-  return React__default["default"].createElement(ReactDatepicker__default["default"], _extends({
-    className: classNames__default["default"]('eds-form-control', 'eds-timepicker__input', className),
-    calendarClassName: "eds-timepicker",
-    selected: selectedTime,
-    onChange: handleChange,
-    dateFormat: dateFormat,
-    timeFormat: timeFormat,
-    showTimeSelect: true,
-    showTimeInput: true,
-    showTimeSelectOnly: true,
-    showPopperArrow: false,
-    placeholderText: placeholder,
-    popperClassName: "eds-datepicker__popper",
-    popperModifiers: POPPER_MODIFIERS,
-    open: false
-  }, rest));
-};
-
-var TimePickerArrowButton = function TimePickerArrowButton(_ref3) {
-  var direction = _ref3.direction,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-
-  return React__default["default"].createElement("button", _extends({
-    className: classNames__default["default"]('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction),
-    type: "button"
-  }, rest), direction === 'left' ? React__default["default"].createElement(icons.LeftArrowIcon, null) : React__default["default"].createElement(icons.RightArrowIcon, null));
-};
+  var isAmPm = state.segments.some(function (segment) {
+    return segment.text === 'AM' || segment.text === 'PM';
+  });
+  return React__default["default"].createElement(i18n.I18nProvider, {
+    locale: locale
+  }, React__default["default"].createElement("div", {
+    className: classNames__default["default"](className, 'eds-timepicker__wrapper'),
+    style: style
+  }, React__default["default"].createElement(TimePickerArrowButton, {
+    direction: "left",
+    disabled: disabled,
+    "aria-label": "Trekk fra " + minuteIncrementForArrowButtons + " minutter",
+    onClick: function onClick() {
+      return addMinutesToSelectedTime(minuteIncrementForArrowButtons * -1);
+    }
+  }), React__default["default"].createElement(form.BaseFormControl, _extends({
+    className: 'eds-timepicker',
+    labelId: id,
+    label: label,
+    labelProps: _extends({}, labelProps),
+    ref: utils.mergeRefs(timeFieldRef, ref),
+    disabled: disabled,
+    disableLabelAnimation: true,
+    labelTooltip: labelTooltip
+  }, fieldProps, {
+    variant: variant,
+    feedback: feedback
+  }), state.segments.map(function (segment, i) {
+    return React__default["default"].createElement(TimeSegment, {
+      segment: segment,
+      state: state,
+      isAmPm: isAmPm,
+      index: i,
+      key: i
+    });
+  })), React__default["default"].createElement(TimePickerArrowButton, {
+    direction: "right",
+    disabled: disabled,
+    "aria-label": "Legg til " + minuteIncrementForArrowButtons + " minutter",
+    onClick: function onClick() {
+      return addMinutesToSelectedTime(minuteIncrementForArrowButtons);
+    }
+  })));
+});
 
-var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "disableLabelAnimation", "prepend"],
+var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
     _excluded2 = ["onChange", "value"];
 var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -771,21 +698,19 @@ var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
       label = _ref.label,
       feedback = _ref.feedback,
       variant = _ref.variant,
-      disableLabelAnimation = _ref.disableLabelAnimation,
-      _ref$prepend = _ref.prepend,
-      prepend = _ref$prepend === void 0 ? React__default["default"].createElement(icons.ClockIcon, null) : _ref$prepend,
+      prepend = _ref.prepend,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var nativetimepickerId = utils.useRandomId('eds-nativetimepicker');
+  var nativetimepickerId = utils.useRandomId('eds-native-timepicker');
   return React__default["default"].createElement(form.BaseFormControl, {
     style: style,
-    className: className,
+    className: classNames__default["default"](className, 'eds-native-timepicker'),
     prepend: prepend,
     label: label,
     feedback: feedback,
     variant: variant,
     labelId: nativetimepickerId,
-    disableLabelAnimation: disableLabelAnimation
+    disableLabelAnimation: true
   }, React__default["default"].createElement(NativeTimePickerBase, _extends({
     onChange: onChange,
     "aria-labelledby": nativetimepickerId,
@@ -831,16 +756,77 @@ var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
     ref: ref,
     "aria-invalid": currentVariant === 'error',
     type: "time",
-    className: "eds-form-control eds-native-date-picker",
+    className: "eds-form-control",
     onChange: handleChange,
     value: value
   }, rest));
 });
 
+/**
+ * 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
+ * @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato 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
+ */
+
+var nativeDateToTimeValue = function nativeDateToTimeValue(date$1, noDateOnlyTime, timeZone, offset) {
+  if (noDateOnlyTime === void 0) {
+    noDateOnlyTime = 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());
+    }
+
+    return date.parseAbsolute(date$1.toISOString(), timeZone);
+  }
+
+  if (noDateOnlyTime) return new date.Time(date$1.getHours(), date$1.getMinutes(), date$1.getSeconds(), 0);
+  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
+ * @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) {
+  // @ts-expect-error .day does not exist on Time-object
+  if (!time.day) {
+    // type is Time
+    var date = new Date();
+    date.setHours(time.hour);
+    date.setMinutes(time.minute);
+    date.setSeconds(time.second);
+    return date;
+  } // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
+
+
+  if (!time.timeZone) {
+    // type is CalendarDateTime
+    if (timeZoneForCalendarDateTime) // @ts-expect-error .toDate(timeZone) does not exist in type Time
+      return time.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);
+  } // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
+
+
+  return time.toDate();
+};
+
 utils.warnAboutMissingStyles('datepicker', 'form', 'icons');
 
 exports.DatePicker = DatePicker;
 exports.NativeDatePicker = NativeDatePicker;
 exports.NativeTimePicker = NativeTimePicker;
 exports.TimePicker = TimePicker;
+exports.nativeDateToTimeValue = nativeDateToTimeValue;
+exports.timeValueToNativeDate = timeValueToNativeDate;
 //# sourceMappingURL=datepicker.cjs.development.js.map