@xsolla/xui-date-picker 0.220.0 → 0.221.1

package/native/index.js

@@ -294,11 +294,16 @@ var isWeb = false;
 var isNative = true;
 
 // src/DatePicker.tsx
+var import_xui_core = require("@xsolla/xui-core");
 var import_xui_input = require("@xsolla/xui-input");
 var import_date_fns = require("date-fns");
 var import_xui_calendar = require("@xsolla/xui-calendar");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
 
+// src/Portal.native.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Portal = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+
 // src/utils.ts
 var SEGMENT_WIDTH = {
   day: 2,
@@ -548,11 +553,11 @@ function stepDateSegment(date, type, delta) {
 }
 
 // src/DatePicker.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var PLACEMENT_OFFSET = 4;
 var RANGE_SEPARATOR = /\s*[-–—]\s*/;
 var RANGE_DISPLAY_SEP = " - ";
-var CalendarFieldIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Calendar, { size: "100%" });
+var CalendarFieldIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base.Calendar, { size: "100%" });
 var FALLBACK_PANEL_SIZE = { width: 320, height: 360 };
 var resolveAutoPlacement = (container, panel, viewport, offset) => {
   const spaceBelow = viewport.height - container.bottom;
@@ -600,15 +605,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 = (0, import_react.forwardRef)(
   ({
@@ -639,7 +644,7 @@ var DatePicker = (0, import_react.forwardRef)(
     themeProductContext,
     overlayThemeMode,
     overlayThemeProductContext,
-    iconRight = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CalendarFieldIcon, {}),
+    iconRight = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CalendarFieldIcon, {}),
     iconLeft,
     label,
     clearable = false,
@@ -673,9 +678,10 @@ var DatePicker = (0, import_react.forwardRef)(
     const [activeSegment, setActiveSegment] = (0, import_react.useState)(null);
     const [internalChip, setInternalChip] = (0, import_react.useState)(null);
     const [parseError, setParseError] = (0, import_react.useState)(null);
-    const [layout, setLayout] = (0, import_react.useState)(
-      () => placement ? resolveForcedLayout(placement, dropdownPosition) : { side: "bottom", align: alignFromDropdownPosition(dropdownPosition) }
+    const [fixedPosition, setFixedPosition] = (0, import_react.useState)(
+      null
     );
+    const overlayLayer = (0, import_xui_core.useOverlayLayer)();
     const containerRef = (0, import_react.useRef)(null);
     const calendarRef = (0, import_react.useRef)(null);
     const inputRef = (0, import_react.useRef)(null);
@@ -1085,8 +1091,12 @@ var DatePicker = (0, import_react.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;
@@ -1094,7 +1104,7 @@ var DatePicker = (0, import_react.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);
@@ -1117,15 +1127,11 @@ var DatePicker = (0, import_react.forwardRef)(
       document.addEventListener("keydown", handleEscape);
       return () => document.removeEventListener("keydown", handleEscape);
     }, [open]);
+    (0, import_react.useEffect)(() => {
+      if (!open) setFixedPosition(null);
+    }, [open]);
     (0, import_react.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;
@@ -1136,30 +1142,44 @@ var DatePicker = (0, import_react.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 = {
@@ -1174,7 +1194,7 @@ var DatePicker = (0, import_react.forwardRef)(
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [viewAnchor?.getFullYear(), viewAnchor?.getMonth()]
     );
-    const renderCalendar = () => isDual ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    const renderCalendar = () => isDual ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_xui_calendar.DualCalendar,
       {
         locale,
@@ -1192,7 +1212,7 @@ var DatePicker = (0, import_react.forwardRef)(
         ...rest,
         ...overlayThemeProps
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_xui_calendar.Calendar,
       {
         locale,
@@ -1213,7 +1233,7 @@ var DatePicker = (0, import_react.forwardRef)(
         ...overlayThemeProps
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       Box,
       {
         ref: (node) => {
@@ -1225,7 +1245,7 @@ var DatePicker = (0, import_react.forwardRef)(
         width: "100%",
         ...isWeb ? { onClick: () => setOpen(true) } : {},
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_xui_input.Input,
             {
               ...rest,
@@ -1252,7 +1272,7 @@ var DatePicker = (0, import_react.forwardRef)(
               themeProductContext
             }
           ),
-          open && (isWeb ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          open && (isWeb ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Box,
             {
               ref: calendarRef,
@@ -1260,16 +1280,15 @@ var DatePicker = (0, import_react.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 + import_xui_core.LAYER_OFFSET.popover,
+              style: {
+                position: "fixed",
+                visibility: fixedPosition ? "visible" : "hidden",
+                ...fixedPosition
+              },
               children: renderCalendar()
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { marginTop: 4, children: renderCalendar() }))
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { marginTop: 4, children: renderCalendar() }))
         ]
       }
     );