@vygruppen/spor-react 3.0.3 → 3.0.4

package/dist/index.js

@@ -1094,26 +1094,30 @@ var init_card = __esm({
 });
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
   let [stateValue, setStateValue] = (React49.useState)(value || defaultValue);
-  let ref = (React49.useRef)(value !== void 0);
-  let wasControlled = ref.current;
+  let isControlledRef = (React49.useRef)(value !== void 0);
   let isControlled = value !== void 0;
-  let stateRef = (React49.useRef)(stateValue);
-  if (wasControlled !== isControlled)
-    console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
-  ref.current = isControlled;
+  (React49.useEffect)(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled)
+      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
+    isControlledRef.current = isControlled;
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue;
   let setValue = (React49.useCallback)((value2, ...args) => {
     let onChangeCaller = (value3, ...onChangeArgs) => {
       if (onChange) {
-        if (!Object.is(stateRef.current, value3))
+        if (!Object.is(currentValue, value3))
           onChange(value3, ...onChangeArgs);
       }
       if (!isControlled)
-        stateRef.current = value3;
+        currentValue = value3;
     };
     if (typeof value2 === "function") {
       console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
       let updateFunction = (oldValue, ...functionArgs) => {
-        let interceptedValue = value2(isControlled ? stateRef.current : oldValue, ...functionArgs);
+        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
         onChangeCaller(interceptedValue, ...args);
         if (!isControlled)
           return interceptedValue;
@@ -1127,14 +1131,11 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     }
   }, [
     isControlled,
+    currentValue,
     onChange
   ]);
-  if (isControlled)
-    stateRef.current = value;
-  else
-    value = stateValue;
   return [
-    value,
+    currentValue,
     setValue
   ];
 }
@@ -1142,22 +1143,30 @@ var init_import = __esm({
   "../../node_modules/@react-stately/utils/dist/import.mjs"() {
   }
 });
-
-// ../../node_modules/@react-stately/overlays/dist/import.mjs
 function $fc909762b330b746$export$61c6a8c84e605fb6(props) {
   let [isOpen, setOpen] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.isOpen, props.defaultOpen || false, props.onOpenChange);
+  const open = (React49.useCallback)(() => {
+    setOpen(true);
+  }, [
+    setOpen
+  ]);
+  const close = (React49.useCallback)(() => {
+    setOpen(false);
+  }, [
+    setOpen
+  ]);
+  const toggle = (React49.useCallback)(() => {
+    setOpen(!isOpen);
+  }, [
+    setOpen,
+    isOpen
+  ]);
   return {
     isOpen,
     setOpen,
-    open() {
-      setOpen(true);
-    },
-    close() {
-      setOpen(false);
-    },
-    toggle() {
-      setOpen(!isOpen);
-    }
+    open,
+    close,
+    toggle
   };
 }
 var init_import2 = __esm({
@@ -1213,8 +1222,9 @@ function $35a22f14a1f04b11$export$eac50920cf2fd59a(value, minValue, maxValue) {
   return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0);
 }
 function $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, options) {
+  let defaultFieldOptions = options.shouldForceLeadingZeros ? $35a22f14a1f04b11$var$TWO_DIGIT_FIELD_OPTIONS : $35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS;
   fieldOptions = {
-    ...$35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS,
+    ...defaultFieldOptions,
     ...fieldOptions
   };
   let granularity = options.granularity || "minute";
@@ -1270,17 +1280,25 @@ function $35a22f14a1f04b11$export$66aa2b09de4b1ea5(placeholderValue, granularity
   return date$1;
 }
 function $35a22f14a1f04b11$export$2440da353cedad43(v, granularity) {
-  let lastValue = (React49.useRef)(v);
-  if (v)
-    lastValue.current = v;
-  v = lastValue.current;
   let defaultTimeZone = v && "timeZone" in v ? v.timeZone : void 0;
-  granularity = granularity || (v && "minute" in v ? "minute" : "day");
-  if (v && !(granularity in v))
+  let defaultGranularity = v && "minute" in v ? "minute" : "day";
+  if (v && granularity && !(granularity in v))
     throw new Error("Invalid granularity " + granularity + " for value " + v.toString());
+  let [lastValue, setLastValue] = (React49.useState)([
+    defaultGranularity,
+    defaultTimeZone
+  ]);
+  if (v && (lastValue[0] !== defaultGranularity || lastValue[1] !== defaultTimeZone))
+    setLastValue([
+      defaultGranularity,
+      defaultTimeZone
+    ]);
+  if (!granularity)
+    granularity = v ? defaultGranularity : lastValue[0];
+  let timeZone = v ? defaultTimeZone : lastValue[1];
   return [
     granularity,
-    defaultTimeZone
+    timeZone
   ];
 }
 function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
@@ -1320,7 +1338,7 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
       overlayState.setOpen(false);
   };
   let selectTime = (newValue) => {
-    if (selectedDate)
+    if (selectedDate && newValue)
       commitValue(selectedDate, newValue);
     else
       setSelectedTime(newValue);
@@ -1393,11 +1411,13 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     timeZone: defaultTimeZone,
     hideTimeZone,
     hourCycle: props.hourCycle,
-    showEra
+    showEra,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros
   }), [
     props.maxGranularity,
     granularity,
     props.hourCycle,
+    props.shouldForceLeadingZeros,
     defaultTimeZone,
     hideTimeZone,
     showEra
@@ -1702,11 +1722,11 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
       }
       case "hour":
         if (options.hour12) {
-          let hours1 = value.hour;
-          let wasPM1 = hours1 >= 12;
-          if (!wasPM1 && segmentValue === 12)
+          let hours = value.hour;
+          let wasPM = hours >= 12;
+          if (!wasPM && segmentValue === 12)
             segmentValue = 0;
-          if (wasPM1 && segmentValue < 12)
+          if (wasPM && segmentValue < 12)
             segmentValue += 12;
         }
       case "minute":
@@ -1851,11 +1871,11 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
           }
           let start = "";
           let end = "";
-          for (let i1 = 0; i1 < parts14.length; i1++) {
-            if (i1 < separatorIndex)
-              start += parts14[i1].value;
-            else if (i1 > separatorIndex)
-              end += parts14[i1].value;
+          for (let i = 0; i < parts14.length; i++) {
+            if (i < separatorIndex)
+              start += parts14[i].value;
+            else if (i > separatorIndex)
+              end += parts14[i].value;
           }
           return {
             start,
@@ -1880,7 +1900,7 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
     }
   };
 }
-var $35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS, $3e3ed55ab2966714$var$placeholders, $3c0fc76039f1c516$var$EDITABLE_SEGMENTS, $3c0fc76039f1c516$var$PAGE_STEP, $3c0fc76039f1c516$var$TYPE_MAPPING;
+var $35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS, $35a22f14a1f04b11$var$TWO_DIGIT_FIELD_OPTIONS, $3e3ed55ab2966714$var$placeholders, $3c0fc76039f1c516$var$EDITABLE_SEGMENTS, $3c0fc76039f1c516$var$PAGE_STEP, $3c0fc76039f1c516$var$TYPE_MAPPING;
 var init_import4 = __esm({
   "../../node_modules/@react-stately/datepicker/dist/import.mjs"() {
     init_import2();
@@ -1894,6 +1914,14 @@ var init_import4 = __esm({
       minute: "2-digit",
       second: "2-digit"
     };
+    $35a22f14a1f04b11$var$TWO_DIGIT_FIELD_OPTIONS = {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    };
     $3e3ed55ab2966714$var$placeholders = new ($5b160d28a433310d$export$c17fa47878dc55b6)({
       ach: {
         year: "mwaka",
@@ -2365,7 +2393,7 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
   ]);
   let { locale, createCalendar: createCalendar4, visibleDuration = {
     months: 1
-  }, minValue, maxValue, selectionAlignment, isDateUnavailable } = props;
+  }, minValue, maxValue, selectionAlignment, isDateUnavailable, pageBehavior = "visible" } = props;
   let calendar = (React49.useMemo)(() => createCalendar4(resolvedOptions.calendar), [
     createCalendar4,
     resolvedOptions.calendar
@@ -2419,12 +2447,12 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
     startDate,
     visibleDuration
   ]);
-  let lastCalendarIdentifier = (React49.useRef)(calendar.identifier);
-  if (calendar.identifier !== lastCalendarIdentifier.current) {
+  let [lastCalendarIdentifier, setLastCalendarIdentifier] = (React49.useState)(calendar.identifier);
+  if (calendar.identifier !== lastCalendarIdentifier) {
     let newFocusedDate = (date.toCalendar)(focusedDate, calendar);
     setStartDate(($f62d864046160412$export$f4a51ff076cc9a09)(newFocusedDate, visibleDuration, locale, minValue, maxValue));
     setFocusedDate(newFocusedDate);
-    lastCalendarIdentifier.current = calendar.identifier;
+    setLastCalendarIdentifier(calendar.identifier);
   }
   if (($f62d864046160412$export$eac50920cf2fd59a)(focusedDate, minValue, maxValue))
     setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate, minValue, maxValue));
@@ -2462,6 +2490,14 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
     maxValue
   ]);
   let validationState = props.validationState || (isUnavailable ? "invalid" : null);
+  let pageDuration = (React49.useMemo)(() => {
+    if (pageBehavior === "visible")
+      return visibleDuration;
+    return $131cf43a05231e1e$var$unitDuration(visibleDuration);
+  }, [
+    pageBehavior,
+    visibleDuration
+  ]);
   return {
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
@@ -2507,14 +2543,14 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
         }));
     },
     focusNextPage() {
-      let start = startDate.add(visibleDuration);
-      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.add(visibleDuration), minValue, maxValue));
-      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, visibleDuration, locale, minValue, maxValue), visibleDuration, locale));
+      let start = startDate.add(pageDuration);
+      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.add(pageDuration), minValue, maxValue));
+      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, pageDuration, locale, minValue, maxValue), pageDuration, locale));
     },
     focusPreviousPage() {
-      let start = startDate.subtract(visibleDuration);
-      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.subtract(visibleDuration), minValue, maxValue));
-      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, visibleDuration, locale, minValue, maxValue), visibleDuration, locale));
+      let start = startDate.subtract(pageDuration);
+      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.subtract(pageDuration), minValue, maxValue));
+      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, pageDuration, locale, minValue, maxValue), pageDuration, locale));
     },
     focusSectionStart() {
       if (visibleDuration.days)
@@ -2682,10 +2718,10 @@ function $9a36b6ba2fb1a7c5$export$9a987164d97ecc90(props) {
       setAvailableRange(null);
     }
   };
-  let lastVisibleRange = (React49.useRef)(calendar.visibleRange);
-  if (!(date.isEqualDay)(calendar.visibleRange.start, lastVisibleRange.current.start) || !(date.isEqualDay)(calendar.visibleRange.end, lastVisibleRange.current.end)) {
+  let [lastVisibleRange, setLastVisibleRange] = (React49.useState)(calendar.visibleRange);
+  if (!(date.isEqualDay)(calendar.visibleRange.start, lastVisibleRange.start) || !(date.isEqualDay)(calendar.visibleRange.end, lastVisibleRange.end)) {
     updateAvailableRange(anchorDate);
-    lastVisibleRange.current = calendar.visibleRange;
+    setLastVisibleRange(calendar.visibleRange);
   }
   let setAnchorDate = (date) => {
     if (date) {
@@ -3188,37 +3224,44 @@ var init_CalendarTriggerButton = __esm({
 var DateTimeSegment, isPaddable;
 var init_DateTimeSegment = __esm({
   "src/datepicker/DateTimeSegment.tsx"() {
-    DateTimeSegment = ({ segment, state: state2 }) => {
-      const ref = React49.useRef(null);
-      const { segmentProps } = reactAria.useDateSegment(segment, state2, ref);
-      const styles2 = react.useMultiStyleConfig("Datepicker", {
-        isPlaceholder: segment.isPlaceholder,
-        isEditable: segment.isEditable
-      });
-      return /* @__PURE__ */ React49__namespace.default.createElement(
-        react.Box,
-        {
-          ...segmentProps,
-          ref,
-          style: {
-            ...segmentProps.style,
-            fontVariantNumeric: "tabular-nums",
-            boxSizing: "content-box"
+    DateTimeSegment = React49.forwardRef(
+      ({ segment, state: state2 }, externalRef) => {
+        const internalRef = React49.useRef(null);
+        const ref = externalRef ?? internalRef;
+        const { segmentProps } = reactAria.useDateSegment(
+          segment,
+          state2,
+          ref
+        );
+        const styles2 = react.useMultiStyleConfig("Datepicker", {
+          isPlaceholder: segment.isPlaceholder,
+          isEditable: segment.isEditable
+        });
+        return /* @__PURE__ */ React49__namespace.default.createElement(
+          react.Box,
+          {
+            ...segmentProps,
+            ref,
+            style: {
+              ...segmentProps.style,
+              fontVariantNumeric: "tabular-nums",
+              boxSizing: "content-box"
+            },
+            paddingX: "1px",
+            textAlign: "end",
+            outline: "none",
+            borderRadius: "xs",
+            fontSize: "mobile.md",
+            sx: styles2.dateTimeSegment,
+            _focus: {
+              backgroundColor: "darkTeal",
+              color: "white"
+            }
           },
-          paddingX: "1px",
-          textAlign: "end",
-          outline: "none",
-          borderRadius: "xs",
-          fontSize: "mobile.md",
-          sx: styles2.dateTimeSegment,
-          _focus: {
-            backgroundColor: "darkTeal",
-            color: "white"
-          }
-        },
-        isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
-      );
-    };
+          isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
+        );
+      }
+    );
     isPaddable = (segmentType) => segmentType === "month" || segmentType === "day" || segmentType === "hour" || segmentType === "minute" || segmentType === "second";
   }
 });
@@ -3230,24 +3273,55 @@ function createCalendar2(identifier) {
       throw new Error(`Unsupported calendar ${identifier}`);
   }
 }
-function DateField(props) {
-  var _a6;
-  const locale = useCurrentLocale();
-  const styles2 = react.useMultiStyleConfig("Datepicker", {});
-  const state2 = $3c0fc76039f1c516$export$60e84778edff6d26({
-    ...props,
-    locale,
-    createCalendar: createCalendar2
-  });
-  const ref = React49.useRef(null);
-  const { fieldProps, labelProps } = reactAria.useDateField(props, state2, ref);
-  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React49__namespace.default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
-}
+var DateField;
 var init_DateField = __esm({
   "src/datepicker/DateField.tsx"() {
     init_import4();
     init_DateTimeSegment();
     init_utils();
+    DateField = React49.forwardRef(
+      (props, externalRef) => {
+        var _a6;
+        const locale = useCurrentLocale();
+        const styles2 = react.useMultiStyleConfig("Datepicker", {});
+        const state2 = $3c0fc76039f1c516$export$60e84778edff6d26({
+          ...props,
+          locale,
+          createCalendar: createCalendar2
+        });
+        const internalRef = React49.useRef(null);
+        const ref = externalRef ?? internalRef;
+        const { fieldProps, labelProps } = reactAria.useDateField(
+          props,
+          state2,
+          ref
+        );
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React49__namespace.default.createElement(
+          react.FormLabel,
+          {
+            ...props.labelProps,
+            ...labelProps,
+            sx: styles2.inputLabel
+          },
+          props.label
+        ), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { ...fieldProps }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__namespace.default.createElement(
+          DateTimeSegment,
+          {
+            ref: i === 0 ? ref : void 0,
+            key: i,
+            segment,
+            state: state2
+          }
+        ))), /* @__PURE__ */ React49__namespace.default.createElement(
+          "input",
+          {
+            type: "hidden",
+            value: (_a6 = state2.value) == null ? void 0 : _a6.toString(),
+            name: props.name
+          }
+        ));
+      }
+    );
   }
 });
 var StyledField;
@@ -3273,106 +3347,7 @@ var init_StyledField = __esm({
     );
   }
 });
-function DatePicker({
-  variant,
-  errorMessage,
-  minHeight,
-  showYearNavigation,
-  width = "auto",
-  ...props
-}) {
-  const formControlProps = react.useFormControlContext();
-  const state2 = $ab5bf3f618090389$export$87194bb378cc3ac2({
-    ...props,
-    shouldCloseOnSelect: true,
-    errorMessage,
-    isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
-    validationState: (formControlProps == null ? void 0 : formControlProps.isInvalid) ? "invalid" : "valid"
-  });
-  const ref = React49.useRef(null);
-  const {
-    groupProps,
-    labelProps,
-    fieldProps,
-    buttonProps,
-    dialogProps,
-    calendarProps,
-    errorMessageProps
-  } = reactAria.useDatePicker(props, state2, ref);
-  const responsiveVariant = react.useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
-  const locale = useCurrentLocale();
-  const handleEnterClick = (e) => {
-    if (responsiveVariant === "simple" && e.key === "Enter" && !state2.isOpen) {
-      e.stopPropagation();
-      state2.setOpen(true);
-    }
-  };
-  const onFieldClick = () => {
-    if (!hasTrigger) {
-      state2.setOpen(true);
-    }
-  };
-  const hasTrigger = responsiveVariant === "with-trigger";
-  const styles2 = react.useMultiStyleConfig("Datepicker", {});
-  return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(
-    react.Box,
-    {
-      position: "relative",
-      display: "inline-flex",
-      flexDirection: "column",
-      width
-    },
-    /* @__PURE__ */ React49__namespace.default.createElement(
-      react.Popover,
-      {
-        ...dialogProps,
-        isOpen: state2.isOpen,
-        onClose: () => state2.setOpen(false),
-        onOpen: () => state2.setOpen(true),
-        closeOnBlur: true,
-        closeOnEsc: true,
-        returnFocusOnClose: true
-      },
-      /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { ...groupProps, ref, display: "inline-flex" }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
-        StyledField,
-        {
-          variant: responsiveVariant,
-          onClick: onFieldClick,
-          onKeyPress: handleEnterClick,
-          paddingX: 3,
-          minHeight
-        },
-        !hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { marginRight: 2, alignSelf: "center" }),
-        /* @__PURE__ */ React49__namespace.default.createElement(
-          DateField,
-          {
-            label: props.label,
-            labelProps,
-            name: props.name,
-            ...fieldProps
-          }
-        )
-      )), hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })),
-      /* @__PURE__ */ React49__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
-      state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
-        react.PopoverContent,
-        {
-          color: "darkGrey",
-          boxShadow: "md",
-          sx: styles2.calendar
-        },
-        /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
-        /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(
-          Calendar,
-          {
-            ...calendarProps,
-            showYearNavigation
-          }
-        ))
-      ))
-    )
-  ));
-}
+exports.DatePicker = void 0;
 var init_DatePicker = __esm({
   "src/datepicker/DatePicker.tsx"() {
     init_import4();
@@ -3382,6 +3357,114 @@ var init_DatePicker = __esm({
     init_DateField();
     init_StyledField();
     init_utils();
+    exports.DatePicker = React49.forwardRef(
+      ({
+        variant,
+        errorMessage,
+        minHeight,
+        showYearNavigation,
+        width = "auto",
+        ...props
+      }, externalRef) => {
+        const formControlProps = react.useFormControlContext();
+        const state2 = $ab5bf3f618090389$export$87194bb378cc3ac2({
+          ...props,
+          shouldCloseOnSelect: true,
+          errorMessage,
+          isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
+          validationState: (formControlProps == null ? void 0 : formControlProps.isInvalid) ? "invalid" : "valid"
+        });
+        const internalRef = React49.useRef(null);
+        const ref = externalRef ?? internalRef;
+        const {
+          groupProps,
+          labelProps,
+          fieldProps,
+          buttonProps,
+          dialogProps,
+          calendarProps,
+          errorMessageProps
+        } = reactAria.useDatePicker(
+          props,
+          state2,
+          ref
+        );
+        const responsiveVariant = react.useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
+        const locale = useCurrentLocale();
+        const handleEnterClick = (e) => {
+          if (responsiveVariant === "simple" && e.key === "Enter" && !state2.isOpen) {
+            e.stopPropagation();
+            state2.setOpen(true);
+          }
+        };
+        const onFieldClick = () => {
+          if (!hasTrigger) {
+            state2.setOpen(true);
+          }
+        };
+        const hasTrigger = responsiveVariant === "with-trigger";
+        const styles2 = react.useMultiStyleConfig("Datepicker", {});
+        return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(
+          react.Box,
+          {
+            position: "relative",
+            display: "inline-flex",
+            flexDirection: "column",
+            width
+          },
+          /* @__PURE__ */ React49__namespace.default.createElement(
+            react.Popover,
+            {
+              ...dialogProps,
+              isOpen: state2.isOpen,
+              onClose: state2.close,
+              onOpen: state2.open,
+              closeOnBlur: true,
+              closeOnEsc: true,
+              returnFocusOnClose: true
+            },
+            /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
+              StyledField,
+              {
+                variant: responsiveVariant,
+                onClick: onFieldClick,
+                onKeyPress: handleEnterClick,
+                paddingX: 3,
+                minHeight
+              },
+              !hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { marginRight: 2, alignSelf: "center" }),
+              /* @__PURE__ */ React49__namespace.default.createElement(
+                DateField,
+                {
+                  label: props.label,
+                  labelProps,
+                  name: props.name,
+                  ref,
+                  ...fieldProps
+                }
+              )
+            )), hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })),
+            /* @__PURE__ */ React49__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
+            state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
+              react.PopoverContent,
+              {
+                color: "darkGrey",
+                boxShadow: "md",
+                sx: styles2.calendar
+              },
+              /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
+              /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(
+                Calendar,
+                {
+                  ...calendarProps,
+                  showYearNavigation
+                }
+              ))
+            ))
+          )
+        ));
+      }
+    );
   }
 });
 function RangeCalendar(props) {
@@ -3773,7 +3856,8 @@ var init_Popover = __esm({
         crossOffset = 0,
         placement = "bottom",
         shouldFlip = false,
-        isNonModal = false
+        isNonModal = false,
+        hasBackdrop = true
       }, ref) => {
         var _a6;
         const internalRef = React49.useRef(null);
@@ -3790,7 +3874,7 @@ var init_Popover = __esm({
           },
           state2
         );
-        return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.Overlay, null, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.Overlay, null, hasBackdrop && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__namespace.default.createElement(
           react.Box,
           {
             ...popoverProps,
@@ -4804,7 +4888,8 @@ function Combobox({
       triggerRef: inputRef,
       ref: popoverRef,
       placement: "bottom start",
-      shouldFlip: false
+      shouldFlip: false,
+      hasBackdrop: false
     },
     /* @__PURE__ */ React49__namespace.default.createElement(
       ListBox,
@@ -23279,7 +23364,6 @@ Object.defineProperty(exports, 'Section', {
 });
 exports.tokens = tokens10__namespace;
 exports.Combobox = Combobox;
-exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DrawerHeader = exports.ModalHeader;
 exports.InfoSelect = InfoSelect;