@entur/datepicker 3.0.4 → 4.0.0-alpha.1

package/dist/datepicker.esm.js

@@ -1,5 +1,5 @@
-import { mergeRefs, useRandomId, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import React, { useRef, useState } from 'react';
+import { mergeRefs, useRandomId, ConditionalWrapper, useWindowDimensions, useOnClickOutside, useOnMount, warnAboutMissingStyles } from '@entur/utils';
+import React, { useRef, useState, useEffect } from 'react';
 import ReactDatepicker, { registerLocale } from 'react-datepicker';
 import { parse, isSameDay } from 'date-fns';
 import { nb } from 'date-fns/locale';
@@ -10,10 +10,18 @@ import { IconButton } from '@entur/button';
 import { TextField, BaseFormControl, useVariant, useInputGroupContext, isFilled } from '@entur/form';
 import { Tooltip } from '@entur/tooltip';
 import 'react-datepicker/dist/react-datepicker.css';
-import { useDateSegment, useTimeField } from '@react-aria/datepicker';
+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 { useTimeFieldState } from '@react-stately/datepicker';
-import { now, getLocalTimeZone, ZonedDateTime, parseAbsolute, Time, CalendarDateTime } from '@internationalized/date';
+import { ZonedDateTime, parseAbsolute, Time, CalendarDateTime, GregorianCalendar, isEqualDay, now, getLocalTimeZone, getWeeksInMonth } from '@internationalized/date';
+import { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
+import { useCalendarState } from '@react-stately/calendar';
+import { useButton } from '@react-aria/button';
+import { VisuallyHidden } from '@entur/a11y';
+import { useFloating, offset, flip, shift } from '@floating-ui/react-dom';
+import FocusLock from 'react-focus-lock';
+import { space } from '@entur/tokens';
+import { Modal } from '@entur/modal';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -89,7 +97,7 @@ function getMonthName(monthIndex, locale) {
   return formatter.format(new Date(year, monthIndex));
 }
 
-var _excluded$4 = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "disableLabelAnimation", "inputRef", "calendarButtonId", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "setFocusToCalendarGUI", "setShouldFocusOnCalendarButtonAfterSelect", "calendarGUIIsOpen", "placeholder", "onClick", "aria-labelledby"];
+var _excluded$a = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "disableLabelAnimation", "inputRef", "calendarButtonId", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "setFocusToCalendarGUI", "setShouldFocusOnCalendarButtonAfterSelect", "calendarGUIIsOpen", "placeholder", "onClick", "aria-labelledby"];
 var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var style = _ref.style,
       label = _ref.label,
@@ -113,7 +121,7 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
       calendarGUIIsOpen = _ref.calendarGUIIsOpen,
       onClick = _ref.onClick,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   React.useEffect(function () {
     var _inputRef$current, _inputRef$current2, _inputRef$current3;
@@ -191,7 +199,7 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest));
 });
 
-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"];
+var _excluded$9 = ["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"];
 registerLocale('nb', nb);
 var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var style = _ref.style,
@@ -243,7 +251,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$locale = _ref.locale,
       locale = _ref$locale === void 0 ? nb : _ref$locale,
       open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var datepickerId = useRandomId('eds-datepicker');
   var datepickerRef = useRef(null);
@@ -475,6 +483,504 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest)));
 });
 
+var FieldSegment = function FieldSegment(_ref) {
+  var segment = _ref.segment,
+      state = _ref.state;
+  var ref = useRef(null);
+
+  var _useDateSegment = useDateSegment(segment, state, ref),
+      segmentProps = _useDateSegment.segmentProps;
+
+  var is12HourFormatted = state.segments.some(function (segment) {
+    return segment.text === 'AM' || segment.text === 'PM';
+  });
+
+  var segmentDisplayText = function segmentDisplayText() {
+    if (is12HourFormatted) return segment.text; // if number add '0' padding to start when one digit
+
+    if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
+    return segment.text;
+  };
+
+  return React.createElement("div", _extends({}, segmentProps, {
+    ref: ref,
+    className: classNames('eds-date-and-time-field__segment', {
+      'eds-date-and-time-field__segment--placeholder': segment.isPlaceholder,
+      'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
+    }),
+    tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
+  }), segmentDisplayText());
+};
+
+/**
+ * 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, noDateOnlyTime, timeZone, offset) {
+  if (noDateOnlyTime === void 0) {
+    noDateOnlyTime = false;
+  }
+
+  if (timeZone) {
+    if (offset) {
+      return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
+    }
+
+    return parseAbsolute(date.toISOString(), timeZone);
+  }
+
+  if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
+  return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.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();
+};
+var createCalendar = function createCalendar(identifier) {
+  if (identifier === void 0) {
+    identifier = 'gregory';
+  }
+
+  switch (identifier) {
+    case 'gregory':
+      return new GregorianCalendar();
+
+    default:
+      throw new Error("Unsupported calendar " + identifier);
+  }
+};
+var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, locale, propsCollection) {
+  if (locale.toLowerCase() !== 'no-no') return propsCollection['aria-label'];
+  return norwegianAriaLabel;
+};
+
+var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "labelTooltip", "style", "className", "labelProps", "append"];
+var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var value = _ref.selectedDate,
+      label = _ref.label,
+      customLocale = _ref.locale,
+      showTimeZone = _ref.showTimeZone,
+      showTime = _ref.showTime,
+      _ref$granularity = _ref.granularity,
+      granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
+      disabled = _ref.disabled,
+      variant = _ref.variant,
+      feedback = _ref.feedback,
+      labelTooltip = _ref.labelTooltip,
+      style = _ref.style,
+      className = _ref.className,
+      parentLabelProps = _ref.labelProps,
+      append = _ref.append,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+
+  var _useLocale = useLocale(),
+      locale = _useLocale.locale;
+
+  var state = useDateFieldState(_extends({}, rest, {
+    locale: customLocale != null ? customLocale : locale,
+    createCalendar: createCalendar,
+    value: value === null ? undefined : value,
+    hideTimeZone: !showTimeZone,
+    granularity: showTime ? 'minute' : granularity
+  }));
+  var dateFieldRef = useRef(null);
+
+  var _useDateField = useDateField(_extends({}, rest, {
+    label: label,
+    isDisabled: disabled || rest.isDisabled
+  }), state, dateFieldRef),
+      labelProps = _useDateField.labelProps,
+      fieldProps = _useDateField.fieldProps;
+
+  var id = useRandomId('datefield');
+  return React.createElement(ConditionalWrapper, {
+    condition: customLocale !== undefined,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: customLocale
+      }, child);
+    }
+  }, React.createElement(BaseFormControl, _extends({
+    style: style,
+    className: classNames('eds-datefield', className),
+    labelId: id,
+    ref: mergeRefs(dateFieldRef, ref),
+    disabled: state.isDisabled,
+    disableLabelAnimation: true,
+    label: label,
+    labelTooltip: labelTooltip,
+    labelProps: parentLabelProps != null ? parentLabelProps : labelProps
+  }, fieldProps, {
+    variant: variant,
+    feedback: feedback,
+    append: append
+  }), state.segments.map(function (segment, i) {
+    return React.createElement(FieldSegment, {
+      segment: segment,
+      state: state,
+      key: i
+    });
+  })));
+});
+
+var _excluded$7 = ["children", "className", "style"];
+var CalendarButton = function CalendarButton(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      style = _ref.style,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  var ref = useRef(null);
+
+  var _useButton = useButton(props, ref),
+      buttonProps = _useButton.buttonProps;
+
+  return React.createElement(IconButton, _extends({}, buttonProps, {
+    ref: ref,
+    className: className,
+    style: style
+  }), children);
+};
+
+var _excluded$6 = ["state", "date"];
+var CalendarCell = function CalendarCell(_ref) {
+  var _state$timeZone;
+
+  var state = _ref.state,
+      date = _ref.date,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
+  var cellRef = useRef(null);
+
+  var _useCalendarCell = useCalendarCell({
+    date: date
+  }, state, cellRef),
+      cellProps = _useCalendarCell.cellProps,
+      buttonProps = _useCalendarCell.buttonProps,
+      isSelected = _useCalendarCell.isSelected,
+      isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
+      isDisabled = _useCalendarCell.isDisabled,
+      isUnavailable = _useCalendarCell.isUnavailable,
+      formattedDate = _useCalendarCell.formattedDate;
+
+  return React.createElement("td", _extends({}, cellProps, {
+    className: "eds-datepicker__calendar__grid__cell__td"
+  }), React.createElement("div", _extends({}, buttonProps, {
+    ref: cellRef,
+    hidden: isOutsideVisibleRange,
+    className: classNames('eds-datepicker__calendar__grid__cell', {
+      'eds-datepicker__calendar__grid__cell--selected': isSelected,
+      'eds-datepicker__calendar__grid__cell--disabled': isDisabled,
+      'eds-datepicker__calendar__grid__cell--unavailable': isUnavailable,
+      'eds-datepicker__calendar__grid__cell--today': isEqualDay(date, now((_state$timeZone = state.timeZone) != null ? _state$timeZone : getLocalTimeZone()))
+    })
+  }, rest), formattedDate));
+};
+
+var _excluded$5 = ["state", "navigationDescription"];
+var CalendarGrid = function CalendarGrid(_ref) {
+  var state = _ref.state,
+      navigationDescription = _ref.navigationDescription,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+
+  var calendarGridId = useRandomId('eds-calendar');
+
+  var _useLocale = useLocale(),
+      locale = _useLocale.locale;
+
+  var _useCalendarGrid = useCalendarGrid(rest, state),
+      gridProps = _useCalendarGrid.gridProps,
+      headerProps = _useCalendarGrid.headerProps,
+      weekDays = _useCalendarGrid.weekDays;
+
+  var weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+  var weeksArray = Array.from(Array(weeksInMonth).keys());
+
+  var weekDaysMapped = function weekDaysMapped() {
+    if (locale.toLowerCase() === 'no-no' || locale.toLowerCase() === 'no') return ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'];
+    if (weekDays.toString() === 'M,T,W,T,F,S,S') return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+    return weekDays.map(function (day) {
+      return day.toLowerCase();
+    });
+  };
+
+  var getNavigationDescription = function getNavigationDescription() {
+    if (navigationDescription) return navigationDescription;
+    if (locale.toLowerCase().includes('en')) return 'Use the arrow keys to navigate between dates';
+    return 'Bruk piltastene til å navigere mellom datoer';
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
+    cellSpacing: "0",
+    className: "eds-datepicker__calendar__grid"
+  }), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, weekDaysMapped().map(function (day, index) {
+    return React.createElement("th", {
+      key: index
+    }, day);
+  }))), React.createElement("tbody", null, weeksArray.map(function (weekIndex) {
+    return React.createElement("tr", {
+      key: weekIndex
+    }, state.getDatesInWeek(weekIndex).map(function (date, i) {
+      return date ? React.createElement(CalendarCell, {
+        key: i,
+        state: state,
+        date: date,
+        "aria-describedby": calendarGridId + 'description'
+      }) : React.createElement("td", {
+        key: i
+      });
+    }));
+  }))), React.createElement(VisuallyHidden, {
+    id: calendarGridId + 'description'
+  }, getNavigationDescription()));
+};
+
+var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription"];
+var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var onChange = _ref.onChange,
+      customLocale = _ref.locale,
+      style = _ref.style,
+      navigationDescription = _ref.navigationDescription,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
+  var _useLocale = useLocale(),
+      locale = _useLocale.locale;
+
+  var state = useCalendarState(_extends({}, rest, {
+    onChange: onChange,
+    locale: customLocale != null ? customLocale : locale,
+    createCalendar: createCalendar
+  }));
+
+  var _useCalendar = useCalendar(rest, state),
+      calendarProps = _useCalendar.calendarProps,
+      prevButtonProps = _useCalendar.prevButtonProps,
+      nextButtonProps = _useCalendar.nextButtonProps,
+      title = _useCalendar.title;
+
+  return React.createElement(ConditionalWrapper, {
+    condition: customLocale,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: customLocale
+      }, child);
+    }
+  }, React.createElement("div", _extends({}, calendarProps, {
+    ref: ref,
+    className: "eds-datepicker__calendar",
+    style: style
+  }), React.createElement("div", {
+    className: "eds-datepicker__calendar__header"
+  }, React.createElement(CalendarButton, _extends({}, prevButtonProps, {
+    "aria-label": ariaLabelIfNorwegian('Forrige måned', locale, prevButtonProps)
+  }), React.createElement(LeftArrowIcon, {
+    size: 20
+  })), React.createElement("h2", null, title), React.createElement(CalendarButton, _extends({}, nextButtonProps, {
+    "aria-label": ariaLabelIfNorwegian('Neste måned', locale, nextButtonProps)
+  }), React.createElement(RightArrowIcon, {
+    size: 20
+  }))), React.createElement(CalendarGrid, {
+    state: state,
+    navigationDescription: navigationDescription
+  })));
+});
+
+var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "className", "style", "variant", "feedback", "disableModal", "navigationDescription"];
+var DatePickerBeta = function DatePickerBeta(_ref) {
+  var value = _ref.selectedDate,
+      _onChange = _ref.onChange,
+      locale = _ref.locale,
+      isDisabled = _ref.disabled,
+      className = _ref.className,
+      variant = _ref.variant,
+      feedback = _ref.feedback,
+      _ref$disableModal = _ref.disableModal,
+      disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
+      navigationDescription = _ref.navigationDescription,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  var CALENDAR_MODAL_MAX_SCREEN_WIDTH = 1000;
+  var datePickerRef = useRef(null);
+  var calendarRef = useRef(null);
+  var dateFieldRef = useRef(null);
+
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width;
+
+  var state = useDatePickerState(_extends({}, rest, {
+    value: value,
+    onChange: _onChange
+  }));
+
+  var _useDatePicker = useDatePicker(_extends({
+    isDisabled: isDisabled
+  }, rest), state, datePickerRef),
+      groupProps = _useDatePicker.groupProps,
+      labelProps = _useDatePicker.labelProps,
+      fieldProps = _useDatePicker.fieldProps,
+      buttonProps = _useDatePicker.buttonProps,
+      dialogProps = _useDatePicker.dialogProps,
+      calendarProps = _useDatePicker.calendarProps;
+
+  useEffect(function () {
+    var _calendarRef$current;
+
+    var keyDownHandler = function keyDownHandler(event) {
+      if (event.key === 'Escape') state.setOpen(false);
+    };
+
+    (_calendarRef$current = calendarRef.current) == null ? void 0 : _calendarRef$current.addEventListener('keydown', keyDownHandler);
+    return function () {
+      var _calendarRef$current2;
+
+      return (_calendarRef$current2 = calendarRef.current) == null ? void 0 : _calendarRef$current2.removeEventListener('keydown', keyDownHandler);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // calculations for floating-UI popover position
+
+  var _useFloating = useFloating({
+    placement: 'bottom-start',
+    middleware: [offset(space.extraSmall), flip(), shift({
+      padding: space.extraSmall
+    })]
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      strategy = _useFloating.strategy;
+
+  useOnClickOutside([calendarRef], function () {
+    state.setOpen(false);
+  });
+
+  var handleCalendarButtonOnClick = function handleCalendarButtonOnClick(calendarIsOpen) {
+    if (!calendarIsOpen) {
+      state.setOpen(true);
+      setFocusToRelevantDate();
+    } else {
+      state.setOpen(false);
+    }
+  };
+
+  var setFocusToRelevantDate = function setFocusToRelevantDate() {
+    var _calendarRef$current3, _calendarRef$current4;
+
+    var gridCellPrefix = 'eds-datepicker__calendar__grid__cell';
+    var selectedCell = (_calendarRef$current3 = calendarRef.current) == null ? void 0 : _calendarRef$current3.getElementsByClassName(gridCellPrefix + '--selected')[0];
+    var todayCell = (_calendarRef$current4 = calendarRef.current) == null ? void 0 : _calendarRef$current4.getElementsByClassName(gridCellPrefix + '--today')[0];
+    if (selectedCell) selectedCell.focus();else if (todayCell) todayCell.focus();
+  };
+
+  var popoverCalendar = React.createElement(FocusLock, {
+    disabled: !state.isOpen,
+    returnFocus: true
+  }, React.createElement(Calendar, _extends({}, dialogProps, calendarProps, {
+    onChange: function onChange(dateValue) {
+      _onChange(dateValue);
+
+      state.setOpen(false);
+    },
+    disabled: calendarProps.isDisabled,
+    ref: function ref(node) {
+      calendarRef.current = node;
+      floating(node);
+    },
+    navigationDescription: navigationDescription,
+    // styling for floating-UI popover
+    style: {
+      display: state.isOpen ? 'block' : 'none',
+      position: strategy,
+      top: y != null ? y : 0,
+      left: x != null ? x : 0,
+      zIndex: 10
+    }
+  })));
+  var modalCalendar = React.createElement(Modal, {
+    size: 'small',
+    title: "",
+    open: state.isOpen,
+    onDismiss: function onDismiss() {
+      return state.setOpen(false);
+    },
+    closeOnClickOutside: true,
+    className: "eds-datepicker__calendar-modal"
+  }, React.createElement(Calendar, _extends({}, dialogProps, calendarProps, {
+    onChange: function onChange(dateValue) {
+      _onChange(dateValue);
+
+      state.setOpen(false);
+    },
+    disabled: calendarProps.isDisabled,
+    ref: calendarRef,
+    navigationDescription: navigationDescription
+  })));
+  return React.createElement(ConditionalWrapper, {
+    condition: locale !== undefined,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: locale
+      }, child);
+    }
+  }, React.createElement("div", {
+    className: classNames('eds-datepicker', className)
+  }, React.createElement("div", _extends({}, groupProps, {
+    ref: function ref(node) {
+      datePickerRef.current = node;
+      reference(node);
+    },
+    className: "eds-datepicker__datefield__wrapper"
+  }), React.createElement(DateField, _extends({}, fieldProps, {
+    selectedDate: state.value,
+    label: rest.label,
+    labelProps: labelProps,
+    ref: dateFieldRef,
+    className: classNames('eds-datepicker__datefield', {
+      'eds-datepicker__datefield--disabled': fieldProps.isDisabled
+    }),
+    variant: variant,
+    feedback: feedback
+  })), !fieldProps.isDisabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
+    onPress: function onPress() {
+      return handleCalendarButtonOnClick(state.isOpen);
+    },
+    className: "eds-datepicker__open-calendar-button"
+  }), React.createElement(CalendarIcon, null)), width > CALENDAR_MODAL_MAX_SCREEN_WIDTH || disableModal ? popoverCalendar : modalCalendar)));
+};
+
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
     _excluded2$1 = ["onChange", "variant", "value"];
 var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -555,33 +1061,6 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, rest));
 });
 
-var TimeSegment = function TimeSegment(_ref) {
-  var segment = _ref.segment,
-      state = _ref.state;
-  var ref = useRef(null);
-
-  var _useDateSegment = useDateSegment(segment, state, ref),
-      segmentProps = _useDateSegment.segmentProps;
-
-  var is12HourFormatted = state.segments.some(function (segment) {
-    return segment.text === 'AM' || segment.text === 'PM';
-  });
-
-  var segmentDisplayText = function segmentDisplayText() {
-    if (is12HourFormatted) return segment.text; // if number add '0' padding to start when one digit
-
-    if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
-    return segment.text;
-  };
-
-  return React.createElement("div", _extends({}, segmentProps, {
-    ref: ref,
-    className: classNames('eds-timepicker__segment', {
-      'eds-timepicker__segment--placeholder': segment.isPlaceholder
-    })
-  }), segmentDisplayText());
-};
-
 var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   var direction = _ref.direction,
       onClick = _ref.onClick,
@@ -696,7 +1175,7 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant: variant,
     feedback: feedback
   }), state.segments.map(function (segment, i) {
-    return React.createElement(TimeSegment, {
+    return React.createElement(FieldSegment, {
       segment: segment,
       state: state,
       key: i
@@ -784,66 +1263,7 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, 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, noDateOnlyTime, timeZone, offset) {
-  if (noDateOnlyTime === void 0) {
-    noDateOnlyTime = false;
-  }
-
-  if (timeZone) {
-    if (offset) {
-      return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
-    }
-
-    return parseAbsolute(date.toISOString(), timeZone);
-  }
-
-  if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
-  return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.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();
-};
-
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { DatePicker, NativeDatePicker, NativeTimePicker, TimePicker, nativeDateToTimeValue, timeValueToNativeDate };
+export { Calendar, DateField, DatePicker, DatePickerBeta, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToTimeValue, timeValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map