@entur/datepicker 9.1.5 → 9.2.0-beta.0

package/dist/DatePicker/Calendar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DateValue } from '@internationalized/date';
+import { CalendarDate, DateValue } from '@internationalized/date';
 import './Calendar.scss';
-type CalendarProps = {
+export type CalendarProps = {
     selectedDate: DateValue | null;
     onChange: (SelectedDate: DateValue | null) => void;
     navigationDescription?: string;
@@ -21,7 +21,21 @@ type CalendarProps = {
      * Gyldig til og med den tiden som legges inn som maxDate.
      * Dato uten tid vil være gyldig hele maxDate-dagen */
     maxDate?: DateValue;
+    /** Brukes for å legge til klassenavn på spesifikke datoer i kalenderen.
+     *  Tar inn en dato og skal returnere klassenavnet som skal legges til den datoen.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'weekend' : ''
+     *
+     *  OBS: hvis stylingen er meningsbærende bør du bruke ariaLabelForDate i tillegg for å beskrive
+     *  meningen til skjermlesere o.l.
+     */
+    classNameForDate?: (date: CalendarDate) => string;
+    /** Legger til teksten som returneres på datoen i kalenderen sin aria-label.
+     *  Bør brukes sammen med classNameForDate hvis styling-endringene gjort der er meningsbærende.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
+     */
+    ariaLabelForDate?: (date: CalendarDate) => string;
     [key: string]: any;
 };
 export declare const Calendar: React.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/DatePicker/CalendarCell.d.ts

@@ -5,6 +5,8 @@ type CalendarCellProps = {
     state: CalendarState;
     date: CalendarDate;
     onSelectedCellClick?: () => void;
+    classNameForDate?: (date: CalendarDate) => string;
+    ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarCell: ({ state, date, onSelectedCellClick, ...rest }: CalendarCellProps) => React.JSX.Element;
+export declare const CalendarCell: ({ state, date, onSelectedCellClick, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/CalendarGrid.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { CalendarState } from '@react-stately/calendar';
+import { CalendarDate } from '@internationalized/date';
 type CalendarGridProps = {
     state: CalendarState;
     navigationDescription?: string;
     onSelectedCellClick?: () => void;
+    classNameForDate?: (date: CalendarDate) => string;
+    ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, ...rest }: CalendarGridProps) => React.JSX.Element;
+export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, classNameForDate, ariaLabelForDate, ...rest }: CalendarGridProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { DateValue, AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import type { AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
 import type { VariantType } from '@entur/form';
 import './DatePicker.scss';
 export type DatePickerProps<DateType extends DateValue> = {
@@ -66,25 +67,31 @@ export type DatePickerProps<DateType extends DateValue> = {
     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.
+     * DatePicker alltid skal returnere f.eks ZonedDateTime.
      *
-     * @default undefined (onChange returnerer DateValue bassert på value, og om tid vises eller ikke)
+     * Som standard returnerer onChange DateValue basert på selectedDate,
+     * eller CalendarDate hvis selectedDate er 'null'.
      *
-     * 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.
+     * @default undefined
      */
     forcedReturnType?: 'CalendarDate' | 'CalendarDateTime' | 'ZonedDateTime';
+    /** Brukes for å legge til klassenavn på spesifikke datoer i kalenderen.
+     *  Tar inn en dato og skal returnere klassenavnet som skal legges til den datoen.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'weekend' : ''
+     *
+     *  OBS: hvis stylingen er meningsbærende bør du bruke ariaLabelForDate i tillegg for å beskrive
+     *  meningen til skjermlesere o.l.
+     */
+    classNameForDate?: (date: CalendarDate) => string;
+    /** Legger til teksten som returneres på datoen i kalenderen sin aria-label.
+     *  Bør brukes sammen med classNameForDate hvis styling-endringene gjort der er meningsbærende.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
+     */
+    ariaLabelForDate?: (date: CalendarDate) => string;
     /** 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, forcedReturnType, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
+export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, classNameForDate, className, style, variant, feedback, validationVariant, validationFeedback, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;

package/dist/TimePicker/TimePicker.d.ts

@@ -9,8 +9,11 @@ export type TimePickerProps<TimeType extends TimeValue> = {
     onChange: (value: MappedTimeValue<TimeType> | null) => void;
     /** Label til TimePicker */
     label: string;
-    /** Minutter som legges til eller trekkes fra ved klikk på pilene i TimePicker
-     * @default 30
+    /** Minutter som legges til eller trekkes fra ved klikk på pilene i TimePicker.
+     *  Rundes av til nærmeste hele 'minuteIncrement' som går opp i 60.
+     *
+     *  OBS: Støtter kun verdier <= 60 og multiplum av 60.
+     *  @default 30
      */
     minuteIncrementForArrowButtons?: number;
     /** BCP47-språkkoden til locale-en du ønsker å bruke.
@@ -21,6 +24,10 @@ export type TimePickerProps<TimeType extends TimeValue> = {
      * @default false
      */
     showTimeZone?: boolean;
+    /** Viser sekunder i tillegg til minutter og timer
+     * @default false
+     */
+    showSeconds?: boolean;
     /** Aria-label for venstrepil-knappen som trekker fra tid
      * @default `Trekk fra ${minuteIncrementForArrowButtons} minutter`
      */
@@ -36,8 +43,19 @@ export type TimePickerProps<TimeType extends TimeValue> = {
     labelTooltip?: React.ReactNode;
     disabled?: boolean;
     inputRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Tvinger typen på onChange til den gitte typen.
+     * Dette er nyttig når utgangsverdien din er 'null', men du ønsker at
+     * TimePicker alltid skal returnere f.eks Time.
+     *
+     * Som standard returnerer onChange TimeValue basert på selectedTime,
+     * eller ZonedDateTime hvis selectedTime er 'null'.
+     *
+     * @default undefined
+     */
+    forcedReturnType?: 'Time' | 'CalendarDateTime' | 'ZonedDateTime';
+    forcedTimeZone?: string;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
 } & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const TimePicker: <TimeType extends TimeValue>({ selectedTime, onChange, disabled, className, style, label, labelTooltip, feedback, variant, locale: customLocale, showTimeZone, minuteIncrementForArrowButtons, leftArrowButtonAriaLabel, rightArrowButtonAriaLabel, inputRef, ...rest }: TimePickerProps<TimeType>) => React.JSX.Element;
+export declare const TimePicker: <TimeType extends TimeValue>({ selectedTime, onChange, disabled, className, style, label, labelTooltip, feedback, granularity, variant, locale: customLocale, showTimeZone, showSeconds, minuteIncrementForArrowButtons, leftArrowButtonAriaLabel, rightArrowButtonAriaLabel, inputRef, forcedReturnType, forcedTimeZone, ...rest }: TimePickerProps<TimeType>) => React.JSX.Element;

package/dist/TimePicker/TimePickerArrowButton.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 type TimePickerArrowButtonProps = {
     direction: 'left' | 'right';
-} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-export declare const TimePickerArrowButton: React.FC<TimePickerArrowButtonProps>;
+    disabled?: boolean;
+    'aria-label': string;
+    onClick?: () => void;
+    onFocus?: () => void;
+};
+export declare const TimePickerArrowButton: ({ direction, onClick, disabled, "aria-label": ariaLabel, ...rest }: TimePickerArrowButtonProps) => React.JSX.Element;
 export {};

package/dist/datepicker.cjs.development.js

@@ -48,9 +48,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$b = ["segment", "state"];
 var FieldSegment = function FieldSegment(_ref) {
   var segment = _ref.segment,
-    state = _ref.state;
+    state = _ref.state,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var ref = React.useRef(null);
   var _useDateSegment = datepicker.useDateSegment(segment, state, ref),
     segmentProps = _useDateSegment.segmentProps;
@@ -61,7 +63,7 @@ var FieldSegment = function FieldSegment(_ref) {
       'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
     }),
     tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
-  }), segment.text);
+  }, rest), segment.text);
 };
 
 var nativeDateToDateTime = function nativeDateToDateTime(date$1, timeZone, offset) {
@@ -157,21 +159,46 @@ var lastMillisecondOfDay = function lastMillisecondOfDay(dateValue) {
 };
 var convertValueToType = function convertValueToType(_ref) {
   var value = _ref.value,
-    type = _ref.type;
+    type = _ref.type,
+    _ref$timezone = _ref.timezone,
+    timezone = _ref$timezone === void 0 ? 'Europe/Oslo' : _ref$timezone;
   if (value === null) return null;
   switch (type) {
     case 'CalendarDate':
+      if (!('day' in value)) return date.today(timezone);
       return date.toCalendarDate(value);
     case 'CalendarDateTime':
+      if (!('day' in value)) return date.toCalendarDateTime(date.today(timezone), value);
       return date.toCalendarDateTime(value);
     case 'ZonedDateTime':
-      return date.toZoned(value, 'Europe/Oslo');
+      if (!('day' in value)) return date.toZoned(date.toCalendarDateTime(date.today(timezone), value), timezone);
+      return date.toZoned(value, timezone);
+    case 'Time':
+      if (!('hour' in value)) return date.toTime(date.now(timezone));
+      if (!('day' in value)) return value;
+      return date.toTime(value);
     default:
       return value;
   }
 };
+var modulo = function modulo(a, b) {
+  return (a % b + b) % b;
+};
+var focusSegment = function focusSegment(ref, segment) {
+  if (ref.current) {
+    var segments = ref.current.querySelectorAll('.eds-date-and-time-field__segment');
+    var firstSegment = segments[0];
+    var lastSegment = segments[segments.length - 1];
+    switch (segment) {
+      case 'first':
+        return firstSegment.focus();
+      case 'last':
+        return lastSegment.focus();
+    }
+  }
+};
 
-var _excluded$9 = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
+var _excluded$a = ["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) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -196,7 +223,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
     append = _ref.append,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
   var state = datepicker$1.useDateFieldState(_extends({}, rest, {
@@ -237,8 +264,8 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     labelTooltip: labelTooltip,
     labelProps: parentLabelProps != null ? parentLabelProps : labelProps
   }, fieldProps, {
-    variant: (variant != null ? variant : state.validationState === 'invalid') ? validationVariant : undefined,
-    feedback: (feedback != null ? feedback : state.validationState === 'invalid') ? validationFeedback : undefined,
+    variant: variant != null ? variant : state.validationState === 'invalid' ? validationVariant : undefined,
+    feedback: feedback != null ? feedback : state.validationState === 'invalid' ? validationFeedback : undefined,
     append: append,
     ariaAlertOnFeedback: true
   }), state.segments.map(function (segment, i) {
@@ -250,12 +277,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var _excluded$8 = ["children", "className", "style"];
+var _excluded$9 = ["children", "className", "style"];
 var CalendarButton = function CalendarButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var ref = React.useRef(null);
   var _useButton = button.useButton(props, ref),
     buttonProps = _useButton.buttonProps;
@@ -266,16 +293,18 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
-var _excluded$7 = ["state", "date", "onSelectedCellClick"];
+var _excluded$8 = ["state", "date", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
 var CalendarCell = function CalendarCell(_ref) {
-  var _state$timeZone;
+  var _ariaLabelForDate, _classNameForDate, _state$timeZone;
   var state = _ref.state,
     date$1 = _ref.date,
     _ref$onSelectedCellCl = _ref.onSelectedCellClick,
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var cellRef = React.useRef(null);
   var _useCalendarCell = calendar.useCalendarCell({
       date: date$1
@@ -287,12 +316,14 @@ var CalendarCell = function CalendarCell(_ref) {
     isDisabled = _useCalendarCell.isDisabled,
     isUnavailable = _useCalendarCell.isUnavailable,
     formattedDate = _useCalendarCell.formattedDate;
+  var ariaLabel = buttonProps['aria-label'] + " " + ((_ariaLabelForDate = ariaLabelForDate == null ? void 0 : ariaLabelForDate(date$1)) != null ? _ariaLabelForDate : '');
   return React.createElement("td", _extends({}, cellProps, {
     className: "eds-datepicker__calendar__grid__cell__td"
   }), React.createElement("div", _extends({}, buttonProps, {
+    "aria-label": ariaLabel,
     ref: cellRef,
     hidden: isOutsideVisibleRange,
-    className: classNames('eds-datepicker__calendar__grid__cell', {
+    className: classNames('eds-datepicker__calendar__grid__cell', [(_classNameForDate = classNameForDate == null ? void 0 : classNameForDate(date$1)) != null ? _classNameForDate : ''], {
       'eds-datepicker__calendar__grid__cell--selected': isSelected,
       'eds-datepicker__calendar__grid__cell--disabled': isDisabled || isUnavailable,
       'eds-datepicker__calendar__grid__cell--outside-month': isOutsideVisibleRange,
@@ -310,7 +341,7 @@ var CalendarCell = function CalendarCell(_ref) {
   }), formattedDate));
 };
 
-var _excluded$6 = ["state", "navigationDescription", "onSelectedCellClick"];
+var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
     navigationDescription = _ref.navigationDescription,
@@ -318,7 +349,9 @@ var CalendarGrid = function CalendarGrid(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var calendarGridId = utils.useRandomId('eds-calendar');
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
@@ -359,7 +392,9 @@ var CalendarGrid = function CalendarGrid(_ref) {
         state: state,
         date: date,
         "aria-describedby": calendarGridId + 'description',
-        onSelectedCellClick: onSelectedCellClick
+        onSelectedCellClick: onSelectedCellClick,
+        classNameForDate: classNameForDate,
+        ariaLabelForDate: ariaLabelForDate
       }) : React.createElement("td", {
         key: i
       });
@@ -369,7 +404,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
   }, getNavigationDescription()));
 };
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick"];
+var _excluded$6 = ["selectedDate", "onChange", "locale", "minDate", "maxDate", "style", "children", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -382,7 +417,9 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
   var allProps = _extends({}, rest, {
@@ -423,11 +460,13 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }))), React.createElement(CalendarGrid, {
     state: state,
     navigationDescription: navigationDescription,
-    onSelectedCellClick: onSelectedCellClick
+    onSelectedCellClick: onSelectedCellClick,
+    classNameForDate: classNameForDate,
+    ariaLabelForDate: ariaLabelForDate
   })));
 });
 
-var _excluded$4 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType"];
+var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -436,6 +475,7 @@ var DatePicker = function DatePicker(_ref) {
     showTime = _ref.showTime,
     _ref$showTimeZone = _ref.showTimeZone,
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
+    classNameForDate = _ref.classNameForDate,
     className = _ref.className,
     variant = _ref.variant,
     feedback = _ref.feedback,
@@ -450,7 +490,8 @@ var DatePicker = function DatePicker(_ref) {
     _ref$modalTreshold = _ref.modalTreshold,
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
     forcedReturnType = _ref.forcedReturnType,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    ariaLabelForDate = _ref.ariaLabelForDate,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = React.useRef(null);
   var calendarRef = React.useRef(null);
@@ -461,7 +502,8 @@ var DatePicker = function DatePicker(_ref) {
     if (forcedReturnType !== undefined) {
       return onChange(convertValueToType({
         value: value,
-        type: forcedReturnType
+        type: forcedReturnType,
+        timezone: value !== null && 'timezone' in value ? value.timezone : undefined
       }));
     }
     onChange(value);
@@ -511,7 +553,9 @@ var DatePicker = function DatePicker(_ref) {
     onChange: handleOnChange,
     minDate: minDate,
     maxDate: maxDate,
-    ref: calendarRef
+    ref: calendarRef,
+    classNameForDate: classNameForDate,
+    ariaLabelForDate: ariaLabelForDate
   });
   var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
@@ -581,7 +625,7 @@ var DatePicker = function DatePicker(_ref) {
   }), React.createElement(icons.CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
 };
 
-var _excluded$3 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
+var _excluded$4 = ["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,
@@ -595,7 +639,7 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     prepend = _ref$prepend === void 0 ? React.createElement(icons.DateIcon, {
       inline: true
     }) : _ref$prepend,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var nativedatepickerId = utils.useRandomId('eds-nativetimepicker');
   return React.createElement(form.BaseFormControl, {
     style: style,
@@ -654,12 +698,14 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, rest));
 });
 
+var _excluded$3 = ["direction", "onClick", "disabled", "aria-label"];
 var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   var direction = _ref.direction,
     onClick = _ref.onClick,
     disabled = _ref.disabled,
-    ariaLabel = _ref['aria-label'];
-  return React.createElement(button$1.IconButton, {
+    ariaLabel = _ref['aria-label'],
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return React.createElement(button$1.IconButton, _extends({
     className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
       'eds-timepicker__arrowbutton--disabled': disabled
     }),
@@ -668,10 +714,10 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
     onClick: onClick,
     "aria-label": ariaLabel,
     disabled: disabled
-  }, direction === 'left' ? React.createElement(icons.LeftArrowIcon, null) : React.createElement(icons.RightArrowIcon, null));
+  }, rest), direction === 'left' ? React.createElement(icons.LeftArrowIcon, null) : React.createElement(icons.RightArrowIcon, null));
 };
 
-var _excluded$2 = ["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", "granularity", "variant", "locale", "showTimeZone", "showSeconds", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef", "forcedReturnType", "forcedTimeZone"];
 var TimePicker = function TimePicker(_ref) {
   var selectedTime = _ref.selectedTime,
     onChange = _ref.onChange,
@@ -681,9 +727,12 @@ var TimePicker = function TimePicker(_ref) {
     label = _ref.label,
     labelTooltip = _ref.labelTooltip,
     feedback = _ref.feedback,
+    granularity = _ref.granularity,
     variant = _ref.variant,
     customLocale = _ref.locale,
     showTimeZone = _ref.showTimeZone,
+    _ref$showSeconds = _ref.showSeconds,
+    showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
     _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
     minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
     _ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
@@ -691,15 +740,30 @@ var TimePicker = function TimePicker(_ref) {
     _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
     rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
     inputRef = _ref.inputRef,
+    forcedReturnType = _ref.forcedReturnType,
+    forcedTimeZone = _ref.forcedTimeZone,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
   if (customLocale) locale = customLocale;
+  var timePickerId = utils.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) {
+      return onChange(convertValueToType({
+        value: value,
+        type: forcedReturnType,
+        timezone: timeZone
+      }));
+    }
+    onChange(value);
+  };
   var state = datepicker$1.useTimeFieldState(_extends({
-    onChange: onChange,
+    onChange: handleOnChange,
     label: label,
     locale: locale,
     value: selectedTime,
+    granularity: (granularity != null ? granularity : showSeconds) ? 'second' : 'minute',
     hideTimeZone: !showTimeZone,
     isDisabled: disabled,
     shouldForceLeadingZeros: true
@@ -711,70 +775,81 @@ var TimePicker = function TimePicker(_ref) {
     labelProps = _useTimeField.labelProps,
     fieldProps = _useTimeField.fieldProps;
   var id = utils.useRandomId('timepicker');
-  var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
-    if (someSegmentIsUndefined) {
-      setTimeToNearestMinuteIncrement();
-    } else {
-      addMinutesToSelectedTime(minutes);
-    }
-  };
-  var someSegmentIsUndefined = state.segments.some(function (segment) {
-    return segment.text === '––';
-  });
-  var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
-    var currentTime = date.now(date.getLocalTimeZone());
-    var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
-    var newTime = currentTime.set({
-      minute: roundedMinute
+  var getCurrentTime = function getCurrentTime() {
+    var getCurrentTimeWithCorrectType = convertValueToType({
+      value: date.now(timeZone),
+      type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime'
     });
-    // @ts-expect-error Since this function is used when selectedTime is null,
-    // we can't guarantee newTime matching the type of selectedTime in the future.
-    // This might lead to a type issue.
-    onChange(newTime);
+    return getCurrentTimeWithCorrectType;
   };
-  var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
-    selectedTime !== null && onChange(selectedTime.add({
-      minutes: minutes
-    }));
+  var handleOnClickArrowButton = function handleOnClickArrowButton(operation) {
+    if (selectedTime === null) return handleOnChange(getCurrentTime());
+    switch (operation) {
+      case 'add':
+        return handleOnChange(selectedTime.add({
+          minutes: minuteIncrementForArrowButtons - modulo(selectedTime.minute, minuteIncrementForArrowButtons)
+        }));
+      case 'subtract':
+        return handleOnChange(selectedTime.subtract({
+          minutes: modulo(selectedTime.minute - 1, minuteIncrementForArrowButtons) + 1
+        }));
+    }
   };
   return React.createElement(i18n.I18nProvider, {
     locale: locale
   }, React.createElement("div", {
     className: classNames(className, 'eds-timepicker__wrapper')
-  }, React.createElement(TimePickerArrowButton, {
-    direction: "left",
-    disabled: disabled,
-    "aria-label": leftArrowButtonAriaLabel,
-    onClick: function onClick() {
-      return handleOnClickArrowButton(minuteIncrementForArrowButtons * -1);
-    }
-  }), React.createElement(form.BaseFormControl, _extends({
+  }, React.createElement(form.BaseFormControl, _extends({
     style: style,
-    className: 'eds-timepicker',
+    className: classNames('eds-timepicker', {
+      'eds-timepicker--disabled': disabled
+    }),
     labelId: id,
     label: label,
-    labelProps: _extends({}, labelProps),
+    labelProps: _extends({}, labelProps, {
+      'aria-describedby': timePickerId + 'description'
+    }),
     ref: utils.mergeRefs(timeFieldRef, inputRef),
     disabled: disabled,
     disableLabelAnimation: true,
     labelTooltip: labelTooltip
   }, fieldProps, {
     variant: variant,
-    feedback: feedback
+    feedback: feedback,
+    ariaAlertOnFeedback: true,
+    "aria-describedby": timePickerId + 'description',
+    prepend: React.createElement(TimePickerArrowButton, {
+      direction: "left",
+      disabled: disabled,
+      "aria-label": leftArrowButtonAriaLabel,
+      onClick: function onClick() {
+        return handleOnClickArrowButton('subtract');
+      },
+      onFocus: function onFocus() {
+        return focusSegment(timeFieldRef, 'first');
+      }
+    }),
+    append: React.createElement(TimePickerArrowButton, {
+      direction: "right",
+      disabled: disabled,
+      "aria-label": rightArrowButtonAriaLabel,
+      onClick: function onClick() {
+        return handleOnClickArrowButton('add');
+      },
+      onFocus: function onFocus() {
+        return focusSegment(timeFieldRef, 'last');
+      }
+    })
   }), state.segments.map(function (segment, i) {
     return React.createElement(FieldSegment, {
       segment: segment,
       state: state,
-      key: i
+      key: i,
+      "aria-describedby": timePickerId + 'description'
     });
-  })), React.createElement(TimePickerArrowButton, {
-    direction: "right",
-    disabled: disabled,
-    "aria-label": rightArrowButtonAriaLabel,
-    onClick: function onClick() {
-      return handleOnClickArrowButton(minuteIncrementForArrowButtons);
-    }
-  })));
+  })), React.createElement(a11y.VisuallyHidden, {
+    id: timePickerId + 'description'
+  }, selectedTime !== null ? 'valgt tid: ' + selectedTime.hour.toString().padStart(2, '0') + ':' + selectedTime.minute.toString().padStart(2, '0') + (showSeconds ? ':' + selectedTime.second.toString().padStart(2, '0') : '') : '')));
 };
 
 var _excluded$1 = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
@@ -1063,7 +1138,9 @@ exports.TimePicker = TimePicker;
 exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
 exports.convertValueToType = convertValueToType;
 exports.createCalendar = createCalendar;
+exports.focusSegment = focusSegment;
 exports.lastMillisecondOfDay = lastMillisecondOfDay;
+exports.modulo = modulo;
 exports.nativeDateToDateValue = nativeDateToDateValue;
 exports.nativeDateToTimeValue = nativeDateToTimeValue;
 exports.timeOrDateValueToNativeDate = timeOrDateValueToNativeDate;