@mieweb/ui 0.6.0 → 0.6.1

package/dist/index.cjs

@@ -11612,6 +11612,7 @@ function DateRangePicker({
   activePreset,
   placeholder = "Pick a date range",
   className,
+  align = "auto",
   showPresets = true,
   variant = "desktop",
   labels = {}
@@ -11634,6 +11635,9 @@ function DateRangePicker({
   const [hoverDate, setHoverDate] = React48__namespace.useState(null);
   const calendarRef = React48__namespace.useRef(null);
   const triggerRef = React48__namespace.useRef(null);
+  const [resolvedAlign, setResolvedAlign] = React48__namespace.useState(
+    align === "end" ? "end" : "start"
+  );
   const isMobileVariant = variant === "mobile";
   const isResponsive = variant === "responsive";
   const focusTrapRef = chunkNNEFAUHV_cjs.useFocusTrap(
@@ -11672,6 +11676,22 @@ function DateRangePicker({
       };
     }
   }, [isMobileVariant, isCalendarOpen]);
+  React48__namespace.useLayoutEffect(() => {
+    if (isMobileVariant || !isCalendarOpen) return;
+    if (align === "start" || align === "end") {
+      setResolvedAlign(align);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const estimatedPopupWidth = showPresets ? 840 : 640;
+    const margin = 8;
+    const overflowsRight = rect.left + estimatedPopupWidth > window.innerWidth - margin;
+    const fitsLeftAligned = rect.right - estimatedPopupWidth >= margin;
+    setResolvedAlign(overflowsRight && fitsLeftAligned ? "end" : "start");
+  }, [align, isCalendarOpen, isMobileVariant, showPresets]);
   const handlePresetSelect = (presetKey) => {
     const range = calculateDateRange(presetKey);
     setRangeStart(range.start);
@@ -12011,7 +12031,8 @@ function DateRangePicker({
           {
             ref: calendarRef,
             className: chunkOR5DRJCW_cjs.cn(
-              "absolute top-full left-0 z-50 mt-1",
+              "absolute top-full z-50 mt-1",
+              resolvedAlign === "end" ? "right-0" : "left-0",
               "bg-background border-border rounded-lg border shadow-lg"
             ),
             role: "dialog",