@mieweb/ui 0.6.0 → 0.6.1

package/dist/index.d.cts

@@ -2410,6 +2410,15 @@ interface DateRangePickerProps {
     placeholder?: string;
     /** Custom className */
     className?: string;
+    /**
+     * Horizontal alignment of the desktop popup relative to the trigger.
+     * - `'start'` (default historical behavior): popup left edge aligns with trigger left edge.
+     * - `'end'`: popup right edge aligns with trigger right edge.
+     * - `'auto'`: starts as `'start'`, then automatically flips to `'end'` if the popup
+     *   would overflow the right edge of the viewport. Recommended for triggers placed
+     *   in the right side of a layout (e.g. page header action slots).
+     */
+    align?: 'start' | 'end' | 'auto';
     /** Whether to show the preset sidebar in the calendar popup (default: true) */
     showPresets?: boolean;
     /** Display variant: desktop (default), mobile (bottom sheet), or responsive (auto-adapts at md breakpoint) */
@@ -2471,7 +2480,7 @@ declare function calculateDateRange(presetKey: string): DateRange$1;
  * />
  * ```
  */
-declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, align, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 interface DateRangeFilterProps {
     /** Current date range value */
     value?: DateRange$1;

package/dist/index.d.ts

@@ -2410,6 +2410,15 @@ interface DateRangePickerProps {
     placeholder?: string;
     /** Custom className */
     className?: string;
+    /**
+     * Horizontal alignment of the desktop popup relative to the trigger.
+     * - `'start'` (default historical behavior): popup left edge aligns with trigger left edge.
+     * - `'end'`: popup right edge aligns with trigger right edge.
+     * - `'auto'`: starts as `'start'`, then automatically flips to `'end'` if the popup
+     *   would overflow the right edge of the viewport. Recommended for triggers placed
+     *   in the right side of a layout (e.g. page header action slots).
+     */
+    align?: 'start' | 'end' | 'auto';
     /** Whether to show the preset sidebar in the calendar popup (default: true) */
     showPresets?: boolean;
     /** Display variant: desktop (default), mobile (bottom sheet), or responsive (auto-adapts at md breakpoint) */
@@ -2471,7 +2480,7 @@ declare function calculateDateRange(presetKey: string): DateRange$1;
  * />
  * ```
  */
-declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, align, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 interface DateRangeFilterProps {
     /** Current date range value */
     value?: DateRange$1;

package/dist/index.js

@@ -11619,6 +11619,7 @@ function DateRangePicker({
   activePreset,
   placeholder = "Pick a date range",
   className,
+  align = "auto",
   showPresets = true,
   variant = "desktop",
   labels = {}
@@ -11641,6 +11642,9 @@ function DateRangePicker({
   const [hoverDate, setHoverDate] = React48.useState(null);
   const calendarRef = React48.useRef(null);
   const triggerRef = React48.useRef(null);
+  const [resolvedAlign, setResolvedAlign] = React48.useState(
+    align === "end" ? "end" : "start"
+  );
   const isMobileVariant = variant === "mobile";
   const isResponsive = variant === "responsive";
   const focusTrapRef = useFocusTrap(
@@ -11679,6 +11683,22 @@ function DateRangePicker({
       };
     }
   }, [isMobileVariant, isCalendarOpen]);
+  React48.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);
@@ -12018,7 +12038,8 @@ function DateRangePicker({
           {
             ref: calendarRef,
             className: 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",