@entur/datepicker 11.8.1 → 12.0.0-next.1

package/dist/datepicker.esm.js

@@ -1,6 +1,6 @@
-import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from "@entur/utils";
+import { ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from "@entur/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useId, useState } from "react";
 import { useDateFieldState, useDatePickerState, useTimeFieldState } from "@react-stately/datepicker";
 import { useDateSegment, useDateField, useDatePicker, useTimeField } from "@react-aria/datepicker";
 import { useLocale, I18nProvider } from "@react-aria/i18n";
@@ -258,7 +258,7 @@ const DateField = ({
   const dateFieldRef = useRef(null);
   const { labelProps, fieldProps } = useDateField(_props, state, dateFieldRef);
   useEffect(() => onValidate?.(!state.isInvalid), [state.isInvalid]);
-  const id = useRandomId("datefield");
+  const id = `datefield${useId()}`;
   return /* @__PURE__ */ jsx(
     ConditionalWrapper,
     {
@@ -311,7 +311,7 @@ const CalendarGrid = ({
   weekNumberHeader,
   renderCell
 }) => {
-  const calendarGridId = useRandomId("eds-calendar");
+  const calendarGridId = `eds-calendar${useId()}`;
   const { locale } = useLocale();
   const gridStartDate = startDate ?? state.visibleRange.start;
   const { gridProps, headerProps, weekDays } = useCalendarGrid(
@@ -957,7 +957,7 @@ const NativeDatePicker = React.forwardRef(
     prepend = /* @__PURE__ */ jsx(DateIcon, { inline: true }),
     ...rest
   }, ref) => {
-    const nativedatepickerId = useRandomId("eds-nativetimepicker");
+    const nativedatepickerId = `eds-nativetimepicker${useId()}`;
     return /* @__PURE__ */ jsx(
       BaseFormControl,
       {
@@ -1074,7 +1074,7 @@ const TimePicker = ({
 }) => {
   let { locale } = useLocale();
   if (customLocale) locale = customLocale;
-  const timePickerId = useRandomId("eds-timepicker");
+  const timePickerId = `eds-timepicker${useId()}`;
   const timeZone = forcedTimeZone ?? (selectedTime !== null && "timeZone" in selectedTime ? selectedTime.timeZone : "Europe/Oslo");
   const handleOnChange2 = (value) => {
     if (forcedReturnType !== void 0 || !selectedTime) {
@@ -1105,7 +1105,7 @@ const TimePicker = ({
     state,
     timeFieldRef
   );
-  const id = useRandomId("timepicker");
+  const id = `timepicker${useId()}`;
   const getCurrentTime = () => {
     const getCurrentTimeWithCorrectType = convertValueToType({
       value: now(timeZone),
@@ -1205,7 +1205,7 @@ const TimePicker = ({
 };
 const NativeTimePicker = React.forwardRef(
   ({ className, style, onChange, label, feedback, variant, prepend, ...rest }, ref) => {
-    const nativetimepickerId = useRandomId("eds-native-timepicker");
+    const nativetimepickerId = `eds-native-timepicker${useId()}`;
     return /* @__PURE__ */ jsx(
       BaseFormControl,
       {