infinity-ui-elements 1.8.32 → 1.8.33

package/dist/index.esm.js

@@ -6,9 +6,9 @@ import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { ExternalLink, Calendar, X, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { createPortal } from 'react-dom';
 import Calendar$1 from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
-import { createPortal } from 'react-dom';
 import { flexRender } from '@tanstack/react-table';
 
 /**
@@ -2077,16 +2077,64 @@ const formatDateDefault = (date) => {
         day: "numeric",
     });
 };
-const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = true, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+// Helper function to format date based on format string
+const formatDateByPattern = (date, format) => {
+    const day = date.getDate();
+    const month = date.getMonth() + 1; // getMonth() returns 0-11
+    const year = date.getFullYear();
+    const monthNames = [
+        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+    ];
+    const monthNamesFull = [
+        "January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+    ];
+    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const dayNamesFull = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    // Pad numbers with leading zeros
+    const pad = (n, length = 2) => {
+        return n.toString().padStart(length, "0");
+    };
+    let formatted = format;
+    // Replace format patterns
+    formatted = formatted.replace(/YYYY/g, year.toString());
+    formatted = formatted.replace(/YY/g, year.toString().slice(-2));
+    formatted = formatted.replace(/MMMM/g, monthNamesFull[month - 1]);
+    formatted = formatted.replace(/MMM/g, monthNames[month - 1]);
+    formatted = formatted.replace(/MM/g, pad(month));
+    formatted = formatted.replace(/M/g, month.toString());
+    formatted = formatted.replace(/DDDD/g, dayNamesFull[date.getDay()]);
+    formatted = formatted.replace(/DDD/g, dayNames[date.getDay()]);
+    formatted = formatted.replace(/DD/g, pad(day));
+    formatted = formatted.replace(/D/g, day.toString());
+    return formatted;
+};
+const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = true, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, format, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(parseDate(defaultValue));
     const [isOpen, setIsOpen] = React.useState(false);
     const datePickerRef = React.useRef(null);
     const calendarRef = React.useRef(null);
     const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
+    const [isInsideModal, setIsInsideModal] = React.useState(false);
+    const [position, setPosition] = React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        bottom: 0,
+    });
+    const [calendarHeight, setCalendarHeight] = React.useState(300); // Default height estimate
     const value = controlledValue !== undefined
         ? parseDate(controlledValue)
         : uncontrolledValue;
     const hasValue = value !== null;
+    // Create a formatter function that uses format prop if provided, otherwise formatDate
+    const formatDateValue = React.useCallback((date) => {
+        if (format) {
+            return formatDateByPattern(date, format);
+        }
+        return formatDate(date);
+    }, [format, formatDate]);
     // Determine which helper text to show
     const displayHelperText = errorText || successText || helperText;
     const currentValidationState = errorText
@@ -2158,13 +2206,74 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
             setDropdownPlacement("top");
         }
     }, []);
+    // Check if date picker is inside a modal
+    React.useEffect(() => {
+        if (isOpen && datePickerRef.current) {
+            let element = datePickerRef.current;
+            let foundModal = false;
+            while (element && !foundModal) {
+                const styles = window.getComputedStyle(element);
+                const zIndex = parseInt(styles.zIndex, 10);
+                // Check if element has modal z-index (10000) or is a modal container
+                if (zIndex === 10000 || element.getAttribute("role") === "dialog") {
+                    foundModal = true;
+                    setIsInsideModal(true);
+                    break;
+                }
+                element = element.parentElement;
+            }
+            if (!foundModal) {
+                setIsInsideModal(false);
+            }
+        }
+    }, [isOpen]);
+    // Update position when calendar opens or window resizes
+    React.useEffect(() => {
+        if (isOpen && datePickerRef.current) {
+            const updatePosition = () => {
+                const rect = datePickerRef.current?.getBoundingClientRect();
+                if (rect) {
+                    setPosition({
+                        top: rect.top,
+                        left: rect.left,
+                        width: rect.width,
+                        bottom: rect.bottom,
+                    });
+                    // Update dropdown placement based on available space
+                    updateDropdownPlacement();
+                }
+            };
+            updatePosition();
+            window.addEventListener("resize", updatePosition);
+            window.addEventListener("scroll", updatePosition, true);
+            return () => {
+                window.removeEventListener("resize", updatePosition);
+                window.removeEventListener("scroll", updatePosition, true);
+            };
+        }
+    }, [isOpen, updateDropdownPlacement]);
     React.useEffect(() => {
         if (!isOpen)
             return;
         if (typeof window === "undefined")
             return;
-        let rafId = requestAnimationFrame(updateDropdownPlacement);
-        const handleUpdate = () => updateDropdownPlacement();
+        // Use requestAnimationFrame to ensure calendar is rendered before calculating placement
+        let rafId = requestAnimationFrame(() => {
+            updateDropdownPlacement();
+        });
+        const handleUpdate = () => {
+            updateDropdownPlacement();
+            // Also update position when scrolling/resizing
+            if (datePickerRef.current) {
+                const rect = datePickerRef.current.getBoundingClientRect();
+                setPosition({
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    bottom: rect.bottom,
+                });
+            }
+        };
         window.addEventListener("resize", handleUpdate);
         window.addEventListener("scroll", handleUpdate, true);
         return () => {
@@ -2175,14 +2284,44 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
     }, [isOpen, updateDropdownPlacement]);
     React.useEffect(() => {
         if (isOpen) {
-            updateDropdownPlacement();
+            // Delay to ensure calendar is rendered
+            const timer = setTimeout(() => {
+                updateDropdownPlacement();
+            }, 0);
+            return () => clearTimeout(timer);
         }
     }, [isOpen, updateDropdownPlacement]);
+    // Measure calendar height and adjust position after render
+    React.useLayoutEffect(() => {
+        if (isOpen && calendarRef.current && datePickerRef.current) {
+            const measuredHeight = calendarRef.current.offsetHeight;
+            setCalendarHeight(measuredHeight);
+            const rect = datePickerRef.current.getBoundingClientRect();
+            // Recalculate placement if needed based on actual calendar height
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            if (measuredHeight > spaceBelow && spaceAbove > spaceBelow) {
+                setDropdownPlacement("top");
+            }
+            else {
+                setDropdownPlacement("bottom");
+            }
+            // Update position
+            setPosition({
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                bottom: rect.bottom,
+            });
+        }
+    }, [isOpen]);
     // Close calendar when clicking outside
     React.useEffect(() => {
         const handleClickOutside = (event) => {
             if (datePickerRef.current &&
-                !datePickerRef.current.contains(event.target)) {
+                !datePickerRef.current.contains(event.target) &&
+                calendarRef.current &&
+                !calendarRef.current.contains(event.target)) {
                 handleOpenChange(false);
             }
         };
@@ -2230,9 +2369,23 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDate(value) : placeholder }), showClearButton && hasValue && !isDisabled && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, "aria-label": "Clear date", children: jsx(X, { className: "w-4 h-4" }) })), isOpen && !isDisabled && (jsx("div", { ref: calendarRef, className: cn("absolute z-50 left-0 bg-surface-fill-neutral-intense rounded-large shadow-lg p-4", dropdownPlacement === "bottom"
-                            ? "top-full mt-1"
-                            : "bottom-full mb-1", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsx("div", { className: "react-calendar-wrapper w-fit", children: jsx(Calendar$1, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
+                                    : "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDateValue(value) : placeholder }), showClearButton && hasValue && !isDisabled && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, "aria-label": "Clear date", children: jsx(X, { className: "w-4 h-4" }) }))] }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" }), typeof document !== "undefined" &&
+                isOpen &&
+                !isDisabled &&
+                (() => {
+                    // Calculate calendar position using fixed positioning (viewport-relative)
+                    const gap = 4; // 4px gap between trigger and calendar
+                    const calendarTop = dropdownPlacement === "bottom"
+                        ? position.bottom + gap
+                        : position.top - calendarHeight - gap;
+                    const calendarPopup = (jsx("div", { ref: calendarRef, style: {
+                            position: "fixed",
+                            top: `${calendarTop}px`,
+                            left: `${position.left}px`,
+                            zIndex: isInsideModal ? 10001 : 9999,
+                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg p-4 w-fit", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsx("div", { className: "react-calendar-wrapper w-fit", children: jsx(Calendar$1, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
                                     const weekdayNames = [
                                         "Su",
                                         "Mo",
@@ -2243,9 +2396,9 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
                                         "Sa",
                                     ];
                                     return weekdayNames[date.getDay()];
-                                } }) }) }))] }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
-                    ? "default"
-                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+                                } }) }) }));
+                    return createPortal(calendarPopup, document.body);
+                })()] }));
 });
 DatePicker.displayName = "DatePicker";