@xsolla/xui-date-picker 0.220.0 → 0.221.0

package/native/index.mjs

@@ -267,11 +267,16 @@ var isWeb = false;
 var isNative = true;
 
 // src/DatePicker.tsx
+import { useOverlayLayer, LAYER_OFFSET } from "@xsolla/xui-core";
 import { Input } from "@xsolla/xui-input";
 import { parse, isValid } from "date-fns";
 import { Calendar, DualCalendar } from "@xsolla/xui-calendar";
 import { Calendar as CalendarIcon } from "@xsolla/xui-icons-base";
 
+// src/Portal.native.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var Portal = ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children });
+
 // src/utils.ts
 var SEGMENT_WIDTH = {
   day: 2,
@@ -521,11 +526,11 @@ function stepDateSegment(date, type, delta) {
 }
 
 // src/DatePicker.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var PLACEMENT_OFFSET = 4;
 var RANGE_SEPARATOR = /\s*[-–—]\s*/;
 var RANGE_DISPLAY_SEP = " - ";
-var CalendarFieldIcon = () => /* @__PURE__ */ jsx2(CalendarIcon, { size: "100%" });
+var CalendarFieldIcon = () => /* @__PURE__ */ jsx3(CalendarIcon, { size: "100%" });
 var FALLBACK_PANEL_SIZE = { width: 320, height: 360 };
 var resolveAutoPlacement = (container, panel, viewport, offset) => {
   const spaceBelow = viewport.height - container.bottom;
@@ -573,15 +578,15 @@ var resolveAlignForSide = (side, container, panel, viewport, preferred) => {
   const opposite = preferred === "start" ? "end" : "start";
   return fits(opposite) ? opposite : preferred;
 };
-var getPlacementStyle = (side, align, offset) => {
+var getFixedPlacementStyle = (side, align, container, panel, viewport, offset) => {
   if (side === "top" || side === "bottom") {
-    const vertical2 = side === "bottom" ? { top: "100%", bottom: "auto", marginTop: offset, marginBottom: 0 } : { top: "auto", bottom: "100%", marginTop: 0, marginBottom: offset };
-    const horizontal2 = align === "center" ? { left: "50%", right: "auto", transform: "translateX(-50%)" } : align === "end" ? { left: "auto", right: 0 } : { left: 0, right: "auto" };
-    return { marginLeft: 0, marginRight: 0, ...vertical2, ...horizontal2 };
+    const vertical2 = side === "bottom" ? { top: container.bottom + offset } : { bottom: viewport.height - container.top + offset };
+    const horizontal2 = align === "center" ? { left: (container.left + container.right) / 2 - panel.width / 2 } : align === "end" ? { right: viewport.width - container.right } : { left: container.left };
+    return { position: "fixed", ...vertical2, ...horizontal2 };
   }
-  const horizontal = side === "right" ? { left: "100%", right: "auto", marginLeft: offset, marginRight: 0 } : { left: "auto", right: "100%", marginLeft: 0, marginRight: offset };
-  const vertical = align === "center" ? { top: "50%", bottom: "auto", transform: "translateY(-50%)" } : align === "end" ? { top: "auto", bottom: 0 } : { top: 0, bottom: "auto" };
-  return { marginTop: 0, marginBottom: 0, ...horizontal, ...vertical };
+  const horizontal = side === "right" ? { left: container.right + offset } : { right: viewport.width - container.left + offset };
+  const vertical = align === "center" ? { top: (container.top + container.bottom) / 2 - panel.height / 2 } : align === "end" ? { bottom: viewport.height - container.bottom } : { top: container.top };
+  return { position: "fixed", ...horizontal, ...vertical };
 };
 var DatePicker = forwardRef(
   ({
@@ -612,7 +617,7 @@ var DatePicker = forwardRef(
     themeProductContext,
     overlayThemeMode,
     overlayThemeProductContext,
-    iconRight = /* @__PURE__ */ jsx2(CalendarFieldIcon, {}),
+    iconRight = /* @__PURE__ */ jsx3(CalendarFieldIcon, {}),
     iconLeft,
     label,
     clearable = false,
@@ -646,9 +651,10 @@ var DatePicker = forwardRef(
     const [activeSegment, setActiveSegment] = useState(null);
     const [internalChip, setInternalChip] = useState(null);
     const [parseError, setParseError] = useState(null);
-    const [layout, setLayout] = useState(
-      () => placement ? resolveForcedLayout(placement, dropdownPosition) : { side: "bottom", align: alignFromDropdownPosition(dropdownPosition) }
+    const [fixedPosition, setFixedPosition] = useState(
+      null
     );
+    const overlayLayer = useOverlayLayer();
     const containerRef = useRef(null);
     const calendarRef = useRef(null);
     const inputRef = useRef(null);
@@ -1058,8 +1064,12 @@ var DatePicker = forwardRef(
       const handleClickOutside = (event) => {
         const target = event.target;
         const container = containerRef.current;
+        const calendar = calendarRef.current;
         if (!target || !container) return;
         const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        if (calendar && (path.length ? path.includes(calendar) : calendar.contains(target))) {
+          return;
+        }
         const listbox = path.length ? path.find(
           (el) => el instanceof Element && el.getAttribute("role") === "listbox"
         ) ?? null : target instanceof Element ? target.closest('[role="listbox"]') : null;
@@ -1067,7 +1077,7 @@ var DatePicker = forwardRef(
           const owner = document.querySelector(
             `[aria-controls="${listbox.id}"]`
           );
-          if (owner && container.contains(owner)) return;
+          if (owner && calendar?.contains(owner)) return;
         }
         if (!container.contains(target)) {
           setOpen(false);
@@ -1090,15 +1100,11 @@ var DatePicker = forwardRef(
       document.addEventListener("keydown", handleEscape);
       return () => document.removeEventListener("keydown", handleEscape);
     }, [open]);
+    useEffect(() => {
+      if (!open) setFixedPosition(null);
+    }, [open]);
     useEffect(() => {
       if (!open || !isWeb) return;
-      if (placement) {
-        const next = resolveForcedLayout(placement, dropdownPosition);
-        setLayout(
-          (prev) => prev.side === next.side && prev.align === next.align ? prev : next
-        );
-        return;
-      }
       const compute = () => {
         const container = containerRef.current;
         if (!container) return;
@@ -1109,30 +1115,44 @@ var DatePicker = forwardRef(
           width: window.innerWidth,
           height: window.innerHeight
         };
-        const side = resolveAutoPlacement(
-          containerRect,
-          panel,
-          viewport,
-          PLACEMENT_OFFSET
-        );
-        const preferred = side === "top" || side === "bottom" ? alignFromDropdownPosition(dropdownPosition) : "start";
-        const align = resolveAlignForSide(
-          side,
-          containerRect,
-          panel,
-          viewport,
-          preferred
-        );
-        setLayout(
-          (prev) => prev.side === side && prev.align === align ? prev : { side, align }
+        let side;
+        let align;
+        if (placement) {
+          ({ side, align } = resolveForcedLayout(placement, dropdownPosition));
+        } else {
+          side = resolveAutoPlacement(
+            containerRect,
+            panel,
+            viewport,
+            PLACEMENT_OFFSET
+          );
+          const preferred = side === "top" || side === "bottom" ? alignFromDropdownPosition(dropdownPosition) : "start";
+          align = resolveAlignForSide(
+            side,
+            containerRect,
+            panel,
+            viewport,
+            preferred
+          );
+        }
+        setFixedPosition(
+          getFixedPlacementStyle(
+            side,
+            align,
+            containerRect,
+            panel,
+            viewport,
+            PLACEMENT_OFFSET
+          )
         );
       };
-      const rafId = window.requestAnimationFrame(compute);
-      const handleResize = () => compute();
-      window.addEventListener("resize", handleResize);
+      compute();
+      const handleReposition = () => compute();
+      window.addEventListener("resize", handleReposition);
+      window.addEventListener("scroll", handleReposition, true);
       return () => {
-        window.cancelAnimationFrame(rafId);
-        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("resize", handleReposition);
+        window.removeEventListener("scroll", handleReposition, true);
       };
     }, [open, placement, dropdownPosition]);
     const overlayThemeProps = {
@@ -1147,7 +1167,7 @@ var DatePicker = forwardRef(
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [viewAnchor?.getFullYear(), viewAnchor?.getMonth()]
     );
-    const renderCalendar = () => isDual ? /* @__PURE__ */ jsx2(
+    const renderCalendar = () => isDual ? /* @__PURE__ */ jsx3(
       DualCalendar,
       {
         locale,
@@ -1165,7 +1185,7 @@ var DatePicker = forwardRef(
         ...rest,
         ...overlayThemeProps
       }
-    ) : /* @__PURE__ */ jsx2(
+    ) : /* @__PURE__ */ jsx3(
       Calendar,
       {
         locale,
@@ -1198,7 +1218,7 @@ var DatePicker = forwardRef(
         width: "100%",
         ...isWeb ? { onClick: () => setOpen(true) } : {},
         children: [
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             Input,
             {
               ...rest,
@@ -1225,7 +1245,7 @@ var DatePicker = forwardRef(
               themeProductContext
             }
           ),
-          open && (isWeb ? /* @__PURE__ */ jsx2(
+          open && (isWeb ? /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(
             Box,
             {
               ref: calendarRef,
@@ -1233,16 +1253,15 @@ var DatePicker = forwardRef(
               "aria-modal": true,
               "aria-label": isRange ? "Choose a date range" : "Choose a date",
               onClick: (e) => e.stopPropagation(),
-              position: "absolute",
-              zIndex: 1e3,
-              style: getPlacementStyle(
-                layout.side,
-                layout.align,
-                PLACEMENT_OFFSET
-              ),
+              zIndex: overlayLayer + LAYER_OFFSET.popover,
+              style: {
+                position: "fixed",
+                visibility: fixedPosition ? "visible" : "hidden",
+                ...fixedPosition
+              },
               children: renderCalendar()
             }
-          ) : /* @__PURE__ */ jsx2(Box, { marginTop: 4, children: renderCalendar() }))
+          ) }) : /* @__PURE__ */ jsx3(Box, { marginTop: 4, children: renderCalendar() }))
         ]
       }
     );