@entur/datepicker 11.2.1-beta.9 → 11.2.1

package/dist/datepicker.cjs.js

@@ -0,0 +1,1243 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@entur/utils");
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const datepicker$1 = require("@react-stately/datepicker");
+const datepicker = require("@react-aria/datepicker");
+const i18n = require("@react-aria/i18n");
+const classNames = require("classnames");
+const form = require("@entur/form");
+const date = require("@internationalized/date");
+const calendar = require("@react-aria/calendar");
+const calendar$1 = require("@react-stately/calendar");
+const icons = require("@entur/icons");
+const button = require("@react-aria/button");
+const button$1 = require("@entur/button");
+const a11y = require("@entur/a11y");
+const reactDom = require("@floating-ui/react-dom");
+const FocusLock = require("react-focus-lock");
+const tokens = require("@entur/tokens");
+const modal = require("@entur/modal");
+const FieldSegment = ({ segment, state, ...rest }) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...segmentProps,
+      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 === "." || segment.text === ":"
+      }),
+      tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex,
+      ...rest,
+      children: segment.text
+    }
+  );
+};
+const nativeDateToDateTime = (date$1, timeZone, offset) => {
+  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(),
+        date$1.getMilliseconds()
+      );
+    }
+    return date.parseAbsolute(date$1.toISOString(), timeZone);
+  }
+  return new date.CalendarDateTime(
+    date$1.getFullYear(),
+    date$1.getMonth() + 1,
+    date$1.getDate(),
+    date$1.getHours(),
+    date$1.getMinutes(),
+    date$1.getSeconds(),
+    date$1.getMilliseconds()
+  );
+};
+function nativeDateToDateValue(date$1, noTimeOnlyDate = false, timeZone, offset) {
+  if (date$1 === null) return null;
+  if (noTimeOnlyDate)
+    return new date.CalendarDate(
+      date$1.getFullYear(),
+      date$1.getMonth() + 1,
+      date$1.getDate()
+    );
+  return nativeDateToDateTime(date$1, timeZone, offset);
+}
+function nativeDateToTimeValue(date$1, noDateOnlyTime = false, timeZone, offset) {
+  if (date$1 === null) return null;
+  if (noDateOnlyTime)
+    return new date.Time(
+      date$1.getHours(),
+      date$1.getMinutes(),
+      date$1.getSeconds(),
+      date$1.getMilliseconds()
+    );
+  return nativeDateToDateTime(date$1, timeZone, offset);
+}
+function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
+  if (value === null) return null;
+  if (!("day" in value)) {
+    const date2 = /* @__PURE__ */ new Date();
+    date2.setHours(value.hour);
+    date2.setMinutes(value.minute);
+    date2.setSeconds(value.second);
+    date2.setMilliseconds(value.millisecond);
+    return date2;
+  }
+  if (!("hour" in value)) {
+    return value.toDate(timeZoneForCalendarDateTime ?? date.getLocalTimeZone());
+  }
+  if (!("timeZone" in value)) {
+    if (timeZoneForCalendarDateTime)
+      return value.toDate(timeZoneForCalendarDateTime);
+    return value.toDate(date.getLocalTimeZone());
+  }
+  return value.toDate();
+}
+const createCalendar = (identifier = "gregory") => {
+  switch (identifier) {
+    case "gregory":
+      return new date.GregorianCalendar();
+    default:
+      throw new Error(`Unsupported calendar ${identifier}`);
+  }
+};
+const ariaLabelIfNorwegian = (norwegianAriaLabel, locale, propsCollection) => {
+  if (locale.toLowerCase() !== "no-no") return propsCollection["aria-label"];
+  return norwegianAriaLabel;
+};
+const lastMillisecondOfDay = (dateValue) => date.toCalendarDateTime(dateValue.add({ days: 1 })).add({
+  milliseconds: -1
+});
+const convertValueToType = ({
+  value,
+  type,
+  timezone = "Europe/Oslo"
+}) => {
+  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":
+      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;
+  }
+};
+const modulo = (a, b) => (a % b + b) % b;
+const focusSegment = (ref, segment) => {
+  if (ref.current) {
+    const segments = ref.current.querySelectorAll(
+      ".eds-date-and-time-field__segment"
+    );
+    const firstSegment = segments[0];
+    const lastSegment = segments[segments.length - 1];
+    switch (segment) {
+      case "first":
+        return firstSegment.focus();
+      case "last":
+        return lastSegment.focus();
+    }
+  }
+};
+function getWeekNumberForDate(date$1) {
+  if (date$1 === null) return -1;
+  const calendarDate = convertValueToType({
+    value: date$1,
+    type: "CalendarDate"
+  });
+  const firstDayOfWeek = date.startOfWeek(calendarDate, "no-NO");
+  const thursdayOfWeek = firstDayOfWeek.add({ days: 3 });
+  const firstDayOfYearForThursday = date.startOfYear(thursdayOfWeek);
+  const weekNumber = Math.ceil(
+    (thursdayOfWeek.compare(firstDayOfYearForThursday) + 1) / 7
+  );
+  return weekNumber;
+}
+function handleOnChange({
+  value,
+  selectedDate,
+  forcedReturnType,
+  onChange
+}) {
+  if (forcedReturnType !== void 0 || !selectedDate) {
+    return onChange?.(
+      convertValueToType({
+        value,
+        type: forcedReturnType ?? "ZonedDateTime",
+        timezone: value !== null && "timezone" in value ? value.timezone : void 0
+      })
+    );
+  }
+  onChange?.(value);
+}
+const DateField = ({
+  selectedDate,
+  onChange,
+  label,
+  locale: customLocale,
+  showTimeZone,
+  showTime,
+  granularity = showTime ? "minute" : "day",
+  disabled,
+  readOnly,
+  isDisabled,
+  variant,
+  feedback,
+  validationVariant = "negative",
+  validationFeedback = "Ugyldig dato",
+  labelTooltip,
+  minDate,
+  maxDate,
+  forcedReturnType,
+  style,
+  className,
+  labelProps: parentLabelProps,
+  append,
+  prepend,
+  onValidate,
+  dateFieldRef: ref,
+  ...rest
+}) => {
+  const { locale } = i18n.useLocale();
+  const _props = {
+    ...rest,
+    label,
+    locale: customLocale ?? locale,
+    createCalendar,
+    value: selectedDate,
+    onChange: (value) => handleOnChange({
+      value,
+      selectedDate,
+      forcedReturnType,
+      onChange
+    }),
+    hideTimeZone: !showTimeZone,
+    granularity,
+    minValue: minDate,
+    // this weird logic makes sure the entire day is included if no time is provided in maxDate
+    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
+    isDisabled: isDisabled || disabled || readOnly,
+    shouldForceLeadingZeros: true
+  };
+  const state = datepicker$1.useDateFieldState(_props);
+  const dateFieldRef = React.useRef(null);
+  const { labelProps, fieldProps } = datepicker.useDateField(_props, state, dateFieldRef);
+  React.useEffect(() => onValidate?.(!state.isInvalid), [state.isInvalid]);
+  const id = utils.useRandomId("datefield");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    utils.ConditionalWrapper,
+    {
+      condition: customLocale !== void 0,
+      wrapper: (child) => /* @__PURE__ */ jsxRuntime.jsx(i18n.I18nProvider, { locale: customLocale, children: child }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        form.BaseFormControl,
+        {
+          append,
+          ariaAlertOnFeedback: true,
+          className: classNames("eds-datefield", className, {
+            "eds-datefield--has-tooltip": labelTooltip !== void 0
+          }),
+          disabled: isDisabled || disabled,
+          readOnly,
+          disableLabelAnimation: true,
+          feedback: feedback ?? (state.validationState === "invalid" ? validationFeedback : void 0),
+          label,
+          labelId: id,
+          labelProps: parentLabelProps ?? labelProps,
+          labelTooltip,
+          prepend,
+          ref: utils.mergeRefs(ref, dateFieldRef),
+          style,
+          variant: variant ?? (state.isInvalid ? validationVariant : void 0),
+          ...fieldProps,
+          children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(FieldSegment, { segment, state }, i))
+        }
+      )
+    }
+  );
+};
+const CalendarButton = ({
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const ref = React.useRef(null);
+  const { buttonProps } = button.useButton(props, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(button$1.IconButton, { ...buttonProps, ref, className, style, children });
+};
+const CalendarCell = ({
+  state,
+  date: date$1,
+  onSelectedCellClick = () => {
+    return;
+  },
+  onCellClick = () => {
+    return;
+  },
+  weekNumberString,
+  classNameForDate,
+  ariaLabelForDate,
+  ...rest
+}) => {
+  const cellRef = React.useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate
+  } = calendar.useCalendarCell({ date: date$1 }, state, cellRef);
+  const ariaLabel = `${buttonProps["aria-label"]}${weekNumberString} ${ariaLabelForDate?.(date$1) ?? ""}`;
+  const cellCanBeSelected = !(isOutsideVisibleRange || isDisabled || isUnavailable);
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, className: "eds-datepicker__calendar__grid__cell__td", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...buttonProps,
+      "aria-label": ariaLabel,
+      "aria-hidden": isOutsideVisibleRange,
+      ref: cellRef,
+      hidden: isOutsideVisibleRange,
+      className: classNames("eds-datepicker__calendar__grid__cell", {
+        [classNameForDate?.(date$1) ?? ""]: !isOutsideVisibleRange,
+        "eds-datepicker__calendar__grid__cell--selected": isSelected,
+        "eds-datepicker__calendar__grid__cell--disabled": isDisabled || isUnavailable,
+        "eds-datepicker__calendar__grid__cell--outside-month": isOutsideVisibleRange,
+        "eds-datepicker__calendar__grid__cell--today": date.isEqualDay(
+          date$1,
+          date.now(state.timeZone ?? date.getLocalTimeZone())
+        )
+      }),
+      ...rest,
+      onClick: (e) => {
+        buttonProps.onClick && buttonProps.onClick(e);
+        isSelected && onSelectedCellClick();
+        cellCanBeSelected && onCellClick();
+      },
+      onKeyUp: (e) => {
+        buttonProps.onKeyUp && buttonProps.onKeyUp(e);
+        if (e.key === "Enter") {
+          isSelected && onSelectedCellClick();
+          cellCanBeSelected && onCellClick();
+        }
+      },
+      children: formattedDate
+    }
+  ) });
+};
+const CalendarGrid = ({
+  state,
+  navigationDescription,
+  onSelectedCellClick = () => {
+    return;
+  },
+  onCellClick = () => {
+    return;
+  },
+  showWeekNumbers,
+  weekNumberHeader,
+  classNameForDate,
+  ariaLabelForDate,
+  ...rest
+}) => {
+  const calendarGridId = utils.useRandomId("eds-calendar");
+  const { locale } = i18n.useLocale();
+  const { gridProps, headerProps, weekDays } = calendar.useCalendarGrid(rest, state);
+  const weeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
+  const weeksArray = Array.from(Array(weeksInMonth).keys());
+  const weekDaysMapped = () => {
+    if (locale.toLowerCase().includes("no"))
+      return ["ma", "ti", "on", "to", "fr", "lø", "sø"];
+    if (locale.toLowerCase().includes("en")) {
+      if (weekDays[0] === "M")
+        return ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+      if (weekDays[0] === "S")
+        return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+    }
+    return weekDays.map((day) => day.toLowerCase());
+  };
+  const 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 /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        ...gridProps,
+        cellSpacing: "0",
+        className: "eds-datepicker__calendar__grid",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "eds-datepicker__calendar__grid__weeknumber-header", children: weekNumberHeader }),
+            weekDaysMapped().map((day) => /* @__PURE__ */ jsxRuntime.jsx("th", { children: day }, day))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeksArray.map((weekIndex) => {
+            const weekNumber = getWeekNumberForDate(
+              state.getDatesInWeek(weekIndex)[0]
+            );
+            return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx(
+                "th",
+                {
+                  "aria-hidden": true,
+                  className: "eds-datepicker__calendar__grid__weeknumber",
+                  children: weekNumber
+                }
+              ),
+              state.getDatesInWeek(weekIndex).map(
+                (date2, i) => date2 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  CalendarCell,
+                  {
+                    state,
+                    date: date2,
+                    "aria-describedby": calendarGridId + "description",
+                    weekNumberString: showWeekNumbers ? `, ${weekNumberHeader} ${weekNumber},` : "",
+                    onSelectedCellClick,
+                    onCellClick,
+                    classNameForDate,
+                    ariaLabelForDate
+                  },
+                  `${date2.month}.${date2.day}`
+                ) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
+              )
+            ] }, weekIndex);
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(a11y.VisuallyHidden, { id: calendarGridId + "description", children: getNavigationDescription() })
+  ] });
+};
+const Calendar = ({
+  locale: localOverride,
+  ...rest
+}) => {
+  const props = { isDisabled: rest.disabled, ...rest };
+  const { locale } = i18n.useLocale();
+  return /* @__PURE__ */ jsxRuntime.jsx(i18n.I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarBase, { ...props }) });
+};
+const CalendarBase = ({
+  selectedDate,
+  onChange,
+  minDate,
+  maxDate,
+  showWeekNumbers = false,
+  weekNumberHeader = "uke",
+  forcedReturnType,
+  style,
+  className,
+  navigationDescription,
+  onSelectedCellClick = () => {
+    return;
+  },
+  onCellClick = () => {
+    return;
+  },
+  classNameForDate,
+  ariaLabelForDate,
+  calendarRef,
+  ...rest
+}) => {
+  const { locale } = i18n.useLocale();
+  const _props = {
+    ...rest,
+    value: selectedDate,
+    onChange: (value) => handleOnChange({
+      value,
+      selectedDate,
+      forcedReturnType,
+      onChange
+    }),
+    locale,
+    createCalendar,
+    minValue: minDate,
+    maxValue: maxDate
+  };
+  const state = calendar$1.useCalendarState(_props);
+  const { calendarProps, prevButtonProps, nextButtonProps, title } = calendar.useCalendar(_props, state);
+  React.useEffect(
+    () => rest.onValidate?.(!state.isValueInvalid),
+    [state.isValueInvalid]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...calendarProps,
+      ref: calendarRef,
+      className: classNames("eds-datepicker__calendar", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-datepicker__calendar__header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarButton,
+            {
+              ...prevButtonProps,
+              "aria-label": ariaLabelIfNorwegian(
+                "Forrige måned",
+                locale,
+                prevButtonProps
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.LeftArrowIcon, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarButton,
+            {
+              ...nextButtonProps,
+              "aria-label": ariaLabelIfNorwegian(
+                "Neste måned",
+                locale,
+                nextButtonProps
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.RightArrowIcon, { size: 20 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarGrid,
+          {
+            ...rest,
+            state,
+            navigationDescription,
+            onSelectedCellClick,
+            onCellClick,
+            classNameForDate,
+            ariaLabelForDate,
+            showWeekNumbers,
+            weekNumberHeader
+          }
+        )
+      ]
+    }
+  );
+};
+const DatePicker = ({
+  selectedDate,
+  locale,
+  disabled,
+  readOnly,
+  showTime,
+  showTimeZone = false,
+  classNameForDate,
+  className,
+  variant,
+  feedback,
+  validationVariant,
+  validationFeedback,
+  showWeekNumbers,
+  weekNumberHeader,
+  disableModal = false,
+  labelTooltip,
+  navigationDescription,
+  minDate,
+  maxDate,
+  modalTreshold = 1e3,
+  ariaLabelForDate,
+  append,
+  prepend,
+  granularity = showTime ? "minute" : "day",
+  ...rest
+}) => {
+  const CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
+  const datePickerRef = React.useRef(null);
+  const calendarRef = React.useRef(null);
+  const { width } = utils.useWindowDimensions();
+  const _props = {
+    ...rest,
+    onChange: (value) => handleOnChange({
+      value,
+      selectedDate,
+      forcedReturnType: rest.forcedReturnType,
+      onChange: rest.onChange
+    }),
+    minValue: minDate,
+    // this weird logic makes sure the entire day is included if no time is provided in maxDate
+    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
+    value: selectedDate,
+    granularity,
+    isDisabled: disabled || readOnly
+  };
+  const state = datepicker$1.useDatePickerState(_props);
+  const {
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps
+  } = datepicker.useDatePicker(_props, state, datePickerRef);
+  const { refs, floatingStyles, update } = reactDom.useFloating({
+    whileElementsMounted: (ref, float, update2) => reactDom.autoUpdate(ref, float, update2, { elementResize: false }),
+    placement: "bottom-start",
+    middleware: [
+      reactDom.offset(tokens.space.extraSmall2),
+      reactDom.flip(),
+      reactDom.shift({ padding: tokens.space.extraSmall })
+    ]
+  });
+  utils.useOnClickOutside([calendarRef], () => state.setOpen(false));
+  utils.useOnEscape(calendarRef, () => state.setOpen(false));
+  const calendarSharedProps = {
+    ...dialogProps,
+    ...calendarProps,
+    // We don't use handleOnChange here since it's handled internally by Calendar
+    onChange: rest.onChange,
+    forcedReturnType: rest.forcedReturnType,
+    disabled,
+    navigationDescription,
+    onSelectedCellClick: () => state.setOpen(false),
+    // onCellClick is a temporary fix solving an issue where the
+    // calendar sometimes doesn't close on date selection
+    onCellClick: () => state.setOpen(false),
+    selectedDate,
+    minDate,
+    maxDate,
+    calendarRef,
+    classNameForDate,
+    ariaLabelForDate,
+    showWeekNumbers,
+    weekNumberHeader
+  };
+  const isModal = typeof width !== "undefined" && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
+  const popoverCalendar = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: { ...floatingStyles, zIndex: tokens.zIndexes.popover },
+      ref: refs.setFloating,
+      children: /* @__PURE__ */ jsxRuntime.jsx(FocusLock, { disabled: !state.isOpen || isModal, returnFocus: true, children: state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ...calendarSharedProps }) })
+    }
+  );
+  const modalCalendar = /* @__PURE__ */ jsxRuntime.jsx(
+    modal.Modal,
+    {
+      size: "small",
+      title: "",
+      open: state.isOpen,
+      onDismiss: () => state.setOpen(false),
+      className: "eds-datepicker__calendar-modal",
+      children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ...calendarSharedProps })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    utils.ConditionalWrapper,
+    {
+      condition: locale !== void 0,
+      wrapper: (child) => /* @__PURE__ */ jsxRuntime.jsx(i18n.I18nProvider, { locale, children: child }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DateField,
+          {
+            ...groupProps,
+            ...fieldProps,
+            ...rest,
+            append: !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+              append,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CalendarButton,
+                {
+                  ...buttonProps,
+                  onPress: () => {
+                    state.setOpen(!state.isOpen);
+                    update();
+                  },
+                  className: "eds-datepicker__open-calendar-button",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.CalendarIcon, {})
+                }
+              )
+            ] }),
+            prepend,
+            className: classNames("eds-datepicker", className, {
+              "eds-datepicker--disabled": disabled
+            }),
+            disabled,
+            readOnly,
+            feedback,
+            labelProps,
+            labelTooltip,
+            maxDate,
+            minDate,
+            dateFieldRef: (node) => {
+              refs.setReference(node);
+              datePickerRef.current = node;
+            },
+            selectedDate,
+            showTime,
+            showTimeZone,
+            validationFeedback,
+            validationVariant,
+            variant
+          }
+        ),
+        isModal ? modalCalendar : popoverCalendar
+      ]
+    }
+  );
+};
+const NativeDatePicker = React.forwardRef(
+  ({
+    className,
+    style,
+    label,
+    onChange,
+    feedback,
+    variant,
+    disableLabelAnimation,
+    prepend = /* @__PURE__ */ jsxRuntime.jsx(icons.DateIcon, { inline: true }),
+    ...rest
+  }, ref) => {
+    const nativedatepickerId = utils.useRandomId("eds-nativetimepicker");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      form.BaseFormControl,
+      {
+        style,
+        className,
+        prepend,
+        label,
+        feedback,
+        variant,
+        labelId: nativedatepickerId,
+        disableLabelAnimation,
+        isFilled: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          NativeDatePickerBase,
+          {
+            onChange,
+            "aria-labelledby": nativedatepickerId,
+            ref,
+            variant,
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+const NativeDatePickerBase = React.forwardRef(({ onChange, variant, value, ...rest }, ref) => {
+  const contextVariant = form.useVariant();
+  const currentVariant = variant || contextVariant;
+  const { isFilled: isDatepickerFilled, setFilled: setFiller } = form.useInputGroupContext();
+  utils.useOnMount(() => {
+    setFiller && !isDatepickerFilled && setFiller(true);
+  });
+  React.useEffect(() => {
+    if (value) {
+      setFiller && !isDatepickerFilled && setFiller(true);
+    } else {
+      setFiller && isDatepickerFilled && setFiller(false);
+    }
+  }, [value, setFiller, isDatepickerFilled]);
+  const handleChange = (event) => {
+    if (form.isFilled(event.target)) {
+      setFiller && !isDatepickerFilled && setFiller(true);
+    } else {
+      setFiller && isDatepickerFilled && setFiller(false);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      "aria-invalid": currentVariant === "error",
+      type: "date",
+      className: "eds-form-control eds-native-date-picker",
+      onChange: handleChange,
+      value,
+      ...rest
+    }
+  );
+});
+const TimePickerArrowButton = ({
+  direction,
+  onClick,
+  disabled,
+  readonly,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button$1.IconButton,
+    {
+      className: classNames(
+        "eds-timepicker__arrowbutton",
+        `eds-timepicker__arrowbutton--${direction}`,
+        { "eds-timepicker__arrowbutton--disabled": disabled }
+      ),
+      type: "button",
+      tabIndex: -1,
+      onClick,
+      "aria-label": ariaLabel,
+      disabled,
+      ...rest,
+      children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(icons.LeftArrowIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.RightArrowIcon, {})
+    }
+  );
+};
+const TimePicker = ({
+  selectedTime,
+  onChange,
+  disabled,
+  readOnly,
+  className,
+  style,
+  label,
+  labelTooltip,
+  feedback,
+  granularity,
+  variant,
+  locale: customLocale,
+  showTimeZone,
+  showSeconds = false,
+  minuteIncrementForArrowButtons = 30,
+  leftArrowButtonAriaLabel = `Trekk fra ${minuteIncrementForArrowButtons} minutter`,
+  rightArrowButtonAriaLabel = `Legg til ${minuteIncrementForArrowButtons} minutter`,
+  inputRef,
+  forcedReturnType,
+  forcedTimeZone,
+  append,
+  prepend,
+  ...rest
+}) => {
+  let { locale } = i18n.useLocale();
+  if (customLocale) locale = customLocale;
+  const timePickerId = utils.useRandomId("eds-timepicker");
+  const timeZone = forcedTimeZone ?? (selectedTime !== null && "timezone" in selectedTime ? selectedTime.timezone : "Europe/Oslo");
+  const handleOnChange2 = (value) => {
+    if (forcedReturnType !== void 0 || !selectedTime) {
+      return onChange(
+        convertValueToType({
+          value,
+          type: forcedReturnType ?? "ZonedDateTime",
+          timezone: timeZone
+        })
+      );
+    }
+    onChange(value);
+  };
+  const state = datepicker$1.useTimeFieldState({
+    onChange: handleOnChange2,
+    label,
+    locale,
+    value: selectedTime,
+    granularity: granularity ?? showSeconds ? "second" : "minute",
+    hideTimeZone: !showTimeZone,
+    isDisabled: disabled || readOnly,
+    shouldForceLeadingZeros: true,
+    ...rest
+  });
+  const timeFieldRef = React.useRef(null);
+  const { labelProps, fieldProps } = datepicker.useTimeField(
+    { ...rest, label },
+    state,
+    timeFieldRef
+  );
+  const id = utils.useRandomId("timepicker");
+  const getCurrentTime = () => {
+    const getCurrentTimeWithCorrectType = convertValueToType({
+      value: date.now(timeZone),
+      type: forcedReturnType ?? "ZonedDateTime"
+    });
+    return getCurrentTimeWithCorrectType;
+  };
+  const handleOnClickArrowButton = (operation) => {
+    if (selectedTime === null) return handleOnChange2(getCurrentTime());
+    switch (operation) {
+      case "add":
+        return handleOnChange2(
+          selectedTime.add({
+            minutes: minuteIncrementForArrowButtons - modulo(selectedTime.minute, minuteIncrementForArrowButtons)
+          })
+        );
+      case "subtract":
+        return handleOnChange2(
+          selectedTime.subtract({
+            minutes: modulo(selectedTime.minute - 1, minuteIncrementForArrowButtons) + 1
+          })
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(i18n.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    form.BaseFormControl,
+    {
+      append: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        append,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TimePickerArrowButton,
+          {
+            direction: "right",
+            disabled: disabled || readOnly,
+            "aria-label": rightArrowButtonAriaLabel,
+            onClick: () => handleOnClickArrowButton("add"),
+            onFocus: () => focusSegment(timeFieldRef, "last")
+          }
+        )
+      ] }),
+      ariaAlertOnFeedback: true,
+      "aria-describedby": timePickerId + "description",
+      className: classNames("eds-timepicker", className, {
+        "eds-timepicker--disabled": disabled,
+        "eds-timepicker--has-tooltip": labelTooltip !== void 0,
+        "eds-timepicker--readonly": readOnly
+      }),
+      disabled,
+      readOnly,
+      disableLabelAnimation: true,
+      feedback,
+      label,
+      labelId: id,
+      labelProps: {
+        ...labelProps,
+        "aria-describedby": timePickerId + "description"
+      },
+      labelTooltip,
+      prepend: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TimePickerArrowButton,
+          {
+            direction: "left",
+            disabled: disabled || readOnly,
+            "aria-label": leftArrowButtonAriaLabel,
+            onClick: () => handleOnClickArrowButton("subtract"),
+            onFocus: () => focusSegment(timeFieldRef, "first")
+          }
+        ),
+        prepend
+      ] }),
+      ref: inputRef,
+      style,
+      variant,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ref: timeFieldRef,
+            ...fieldProps,
+            style: { display: "contents" },
+            children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              FieldSegment,
+              {
+                segment,
+                state,
+                "aria-describedby": timePickerId + "description"
+              },
+              i
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(a11y.VisuallyHidden, { id: timePickerId + "description", children: selectedTime !== null ? "valgt tid: " + selectedTime.hour.toString().padStart(2, "0") + ":" + selectedTime.minute.toString().padStart(2, "0") + (showSeconds ? ":" + selectedTime.second.toString().padStart(2, "0") : "") : "" })
+      ]
+    }
+  ) });
+};
+const NativeTimePicker = React.forwardRef(
+  ({ className, style, onChange, label, feedback, variant, prepend, ...rest }, ref) => {
+    const nativetimepickerId = utils.useRandomId("eds-native-timepicker");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      form.BaseFormControl,
+      {
+        style,
+        className: classNames(className, "eds-native-timepicker"),
+        prepend,
+        label,
+        feedback,
+        variant,
+        labelId: nativetimepickerId,
+        disableLabelAnimation: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          NativeTimePickerBase,
+          {
+            onChange,
+            "aria-labelledby": nativetimepickerId,
+            ref,
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+const NativeTimePickerBase = React.forwardRef(({ onChange, value, ...rest }, ref) => {
+  const contextVariant = form.useVariant();
+  const currentVariant = rest.variant || contextVariant;
+  const { isFilled: isTimepickerFilled, setFilled: setFiller } = form.useInputGroupContext();
+  utils.useOnMount(() => {
+    setFiller && !isTimepickerFilled && setFiller(true);
+  });
+  React.useEffect(() => {
+    if (value) {
+      setFiller && !isTimepickerFilled && setFiller(true);
+    } else {
+      setFiller && isTimepickerFilled && setFiller(false);
+    }
+  }, [value, setFiller, isTimepickerFilled]);
+  const handleChange = (event) => {
+    if (form.isFilled(event.target)) {
+      setFiller && !isTimepickerFilled && setFiller(true);
+    } else {
+      setFiller && isTimepickerFilled && setFiller(false);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      "aria-invalid": currentVariant === "error",
+      type: "time",
+      className: "eds-form-control",
+      onChange: handleChange,
+      value,
+      ...rest
+    }
+  );
+});
+const SimpleTimePicker = ({
+  append,
+  className,
+  disabled,
+  feedback,
+  showClockIcon = "right",
+  inputRef,
+  label,
+  labelTooltip,
+  onChange,
+  padding = "default",
+  prepend,
+  readOnly,
+  selectedTime,
+  showSeconds,
+  style,
+  variant,
+  ...rest
+}) => {
+  const [inputText, setInputText] = React.useState("");
+  const timeFieldRef = React.useRef(null);
+  const [lastValidSelectedTime, setLastValidSelectedTime] = React.useState(null);
+  const { locale } = i18n.useLocale();
+  const state = datepicker$1.useTimeFieldState({
+    onChange,
+    label,
+    locale,
+    value: selectedTime,
+    hideTimeZone: true,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    ...rest
+  });
+  const { labelProps, fieldProps } = datepicker.useTimeField(
+    { ...rest, label },
+    state,
+    timeFieldRef
+  );
+  React.useEffect(() => {
+    updateInputWithSelectedTime();
+    if (selectedTime !== null) setLastValidSelectedTime(selectedTime);
+  }, [selectedTime?.toString()]);
+  const updateInputWithSelectedTime = () => {
+    const selectedTimeString = getStringFromTimeValue(selectedTime);
+    setInputText(selectedTimeString);
+    const timeFieldIsFocused = document.activeElement === timeFieldRef?.current;
+    if (selectedTimeString === "" && !timeFieldIsFocused)
+      addPlaceholderToInput();
+  };
+  const getStringFromTimeValue = (timeValue) => {
+    if (timeValue === null) return "";
+    const timeObject = "day" in timeValue ? date.toTime(timeValue) : timeValue;
+    if (showSeconds) return timeObject.toString().slice(0, 8);
+    return timeObject.toString().slice(0, 5);
+  };
+  const addPlaceholderToInput = () => {
+    if (showSeconds) setInputText("–– : –– : ––");
+    else setInputText("–– : ––");
+  };
+  const handleChangeTime = () => {
+    const newTime = getValueForOnChangeFromInput();
+    if (newTime === 1) {
+      return updateInputWithSelectedTime();
+    }
+    if (newTime?.toString() !== selectedTime?.toString()) onChange?.(newTime);
+  };
+  const getValueForOnChangeFromInput = () => {
+    const formatedTimeString = formatTimeString(inputText);
+    const newTimeObject = formatedTimeStringToTimeObject(formatedTimeString);
+    if (newTimeObject === 1) {
+      return 1;
+    }
+    if (newTimeObject === 0) {
+      return null;
+    }
+    const updatedSelectedTime = getSelectedTimeWithTimeFromObject(newTimeObject);
+    return updatedSelectedTime;
+  };
+  const formatTimeString = (timeString) => {
+    if (timeString.length === 0) return 0;
+    if (timeString.length < 3 || timeString.length > 8)
+      return 1;
+    const numberOfColons = (timeString.match(new RegExp(":", "g")) || []).length;
+    const stringLength = timeString.length;
+    if (numberOfColons === 2 && stringLength >= 7) {
+      return timeString.padStart(8, "0");
+    }
+    if (numberOfColons === 1) {
+      return timeString.padStart(5, "0");
+    }
+    if (stringLength > 6) return 1;
+    const stringLengthIsEven = stringLength % 2 == 0;
+    const hourString = stringLengthIsEven ? timeString.slice(0, 2) : timeString.slice(0, 1);
+    const minuteString = stringLengthIsEven ? timeString.slice(2, 4) : timeString.slice(1, 3);
+    const secondString = (() => {
+      const stringSlice = stringLengthIsEven ? timeString.slice(4, 6) : timeString.slice(3, 5);
+      if (stringSlice === "") return "00";
+      return stringSlice;
+    })();
+    const timeStringWithColon = hourString.padStart(2, "0") + ":" + minuteString + (showSeconds ? ":" + secondString : "");
+    return timeStringWithColon;
+  };
+  const formatedTimeStringToTimeObject = (formatedTimeString) => {
+    if (formatedTimeString === 1) return 1;
+    if (formatedTimeString === 0)
+      return 0;
+    const isNumberTest = /^\d+$/;
+    const hourString = formatedTimeString.slice(0, 2);
+    const minuteString = formatedTimeString.slice(3, 5);
+    const secondString = formatedTimeString.slice(6, 8);
+    if (hourString.match(isNumberTest) && minuteString.match(isNumberTest) && (secondString === "" || secondString.match(isNumberTest))) {
+      try {
+        const timeObject = date.parseTime(formatedTimeString);
+        return timeObject;
+      } catch (e) {
+        return 1;
+      }
+    }
+    return 1;
+  };
+  const getSelectedTimeWithTimeFromObject = (newTime) => {
+    const selectedTimeWithUpdateTime = (lastValidSelectedTime ?? new date.Time()).set({
+      hour: newTime.hour,
+      minute: newTime.minute,
+      second: newTime.second
+    });
+    return selectedTimeWithUpdateTime;
+  };
+  const {
+    onBlur,
+    onClick,
+    onDragStart,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onPointerDown,
+    onPointerUp,
+    ...usedFieldProps
+  } = fieldProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(i18n.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(
+    form.TextField,
+    {
+      append: append || (showClockIcon === true || showClockIcon === "right" ? /* @__PURE__ */ jsxRuntime.jsx(icons.ClockIcon, { onClick: () => timeFieldRef?.current?.focus(), inline: true }) : void 0),
+      className: classNames("eds-simple-timepicker", {
+        "eds-simple-timepicker--padding-large": padding === "large",
+        "eds-simple-timepicker--show-seconds": showSeconds,
+        "eds-simple-timepicker--hide-clock": !showClockIcon,
+        "eds-simple-timepicker--has-tooltip": labelTooltip !== void 0
+      }),
+      disabled,
+      disableLabelAnimation: true,
+      feedback,
+      label,
+      labelProps,
+      labelTooltip,
+      onBlur: () => {
+        handleChangeTime();
+        if (selectedTime === null) {
+          addPlaceholderToInput();
+        }
+      },
+      onChange: (e) => setInputText(e.target.value),
+      onFocus: () => {
+        if (selectedTime === null) {
+          setInputText("");
+        }
+      },
+      onKeyDown: ({ key }) => {
+        if (key === "Enter") handleChangeTime();
+      },
+      placeholder: showSeconds ? "–– : –– : ––" : "–– : ––",
+      prepend: prepend || (showClockIcon === "left" ? /* @__PURE__ */ jsxRuntime.jsx(icons.ClockIcon, { onClick: () => timeFieldRef?.current?.focus() }) : void 0),
+      readOnly,
+      ref: utils.mergeRefs(timeFieldRef, inputRef),
+      style,
+      value: inputText,
+      variant,
+      ...usedFieldProps
+    }
+  ) });
+};
+utils.warnAboutMissingStyles("datepicker", "form", "icons");
+Object.defineProperty(exports, "CalendarDate", {
+  enumerable: true,
+  get: () => date.CalendarDate
+});
+Object.defineProperty(exports, "CalendarDateTime", {
+  enumerable: true,
+  get: () => date.CalendarDateTime
+});
+Object.defineProperty(exports, "Time", {
+  enumerable: true,
+  get: () => date.Time
+});
+Object.defineProperty(exports, "ZonedDateTime", {
+  enumerable: true,
+  get: () => date.ZonedDateTime
+});
+exports.Calendar = Calendar;
+exports.DateField = DateField;
+exports.DatePicker = DatePicker;
+exports.NativeDatePicker = NativeDatePicker;
+exports.NativeTimePicker = NativeTimePicker;
+exports.SimpleTimePicker = SimpleTimePicker;
+exports.TimePicker = TimePicker;
+exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
+exports.convertValueToType = convertValueToType;
+exports.createCalendar = createCalendar;
+exports.focusSegment = focusSegment;
+exports.getWeekNumberForDate = getWeekNumberForDate;
+exports.handleOnChange = handleOnChange;
+exports.lastMillisecondOfDay = lastMillisecondOfDay;
+exports.modulo = modulo;
+exports.nativeDateToDateValue = nativeDateToDateValue;
+exports.nativeDateToTimeValue = nativeDateToTimeValue;
+exports.timeOrDateValueToNativeDate = timeOrDateValueToNativeDate;
+//# sourceMappingURL=datepicker.cjs.js.map