infinity-ui-elements 1.8.30 → 1.8.33

package/dist/index.js

@@ -8,9 +8,9 @@ var reactSpinners = require('react-spinners');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var lucideReact = require('lucide-react');
+var reactDom = require('react-dom');
 var Calendar = require('react-calendar');
 require('react-calendar/dist/Calendar.css');
-var reactDom = require('react-dom');
 var reactTable = require('@tanstack/react-table');
 
 function _interopNamespaceDefault(e) {
@@ -2098,16 +2098,64 @@ const formatDateDefault = (date) => {
         day: "numeric",
     });
 };
-const DatePicker = React__namespace.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__namespace.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__namespace.useState(parseDate(defaultValue));
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const datePickerRef = React__namespace.useRef(null);
     const calendarRef = React__namespace.useRef(null);
     const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
+    const [isInsideModal, setIsInsideModal] = React__namespace.useState(false);
+    const [position, setPosition] = React__namespace.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        bottom: 0,
+    });
+    const [calendarHeight, setCalendarHeight] = React__namespace.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__namespace.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
@@ -2179,13 +2227,74 @@ const DatePicker = React__namespace.forwardRef(({ className, value: controlledVa
             setDropdownPlacement("top");
         }
     }, []);
+    // Check if date picker is inside a modal
+    React__namespace.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__namespace.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__namespace.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 () => {
@@ -2196,14 +2305,44 @@ const DatePicker = React__namespace.forwardRef(({ className, value: controlledVa
     }, [isOpen, updateDropdownPlacement]);
     React__namespace.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__namespace.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__namespace.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);
             }
         };
@@ -2251,9 +2390,23 @@ const DatePicker = React__namespace.forwardRef(({ className, value: controlledVa
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted") }), jsxRuntime.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 && (jsxRuntime.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: jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) })), isOpen && !isDisabled && (jsxRuntime.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: jsxRuntime.jsx("div", { className: "react-calendar-wrapper w-fit", children: jsxRuntime.jsx(Calendar, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
+                                    : "text-surface-ink-neutral-muted") }), jsxRuntime.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 && (jsxRuntime.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: jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) }))] }), jsxRuntime.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 = (jsxRuntime.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: jsxRuntime.jsx("div", { className: "react-calendar-wrapper w-fit", children: jsxRuntime.jsx(Calendar, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
                                     const weekdayNames = [
                                         "Su",
                                         "Mo",
@@ -2264,9 +2417,9 @@ const DatePicker = React__namespace.forwardRef(({ className, value: controlledVa
                                         "Sa",
                                     ];
                                     return weekdayNames[date.getDay()];
-                                } }) }) }))] }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
-                    ? "default"
-                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+                                } }) }) }));
+                    return reactDom.createPortal(calendarPopup, document.body);
+                })()] }));
 });
 DatePicker.displayName = "DatePicker";
 
@@ -3145,8 +3298,16 @@ const RadioGroup = React__namespace.forwardRef(({ value: controlledValue, defaul
         if (currentIndex === -1)
             return;
         const direction = orientation === "horizontal"
-            ? (e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0)
-            : (e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0);
+            ? e.key === "ArrowRight"
+                ? 1
+                : e.key === "ArrowLeft"
+                    ? -1
+                    : 0
+            : e.key === "ArrowDown"
+                ? 1
+                : e.key === "ArrowUp"
+                    ? -1
+                    : 0;
         if (direction === 0)
             return;
         e.preventDefault();
@@ -3214,20 +3375,14 @@ const RadioGroup = React__namespace.forwardRef(({ value: controlledValue, defaul
                 ...child.props,
                 ref: (el) => {
                     radioRefs.current[index] = el;
-                    // Preserve original ref if it exists
-                    const originalRef = child.ref;
-                    if (typeof originalRef === "function") {
-                        originalRef(el);
-                    }
-                    else if (originalRef && "current" in originalRef) {
-                        originalRef.current = el;
-                    }
                 },
                 name,
                 checked: isChecked,
                 onChange: (e) => {
                     if (e.target.checked) {
-                        handleChange(childValue || "");
+                        handleChange(typeof childValue === "string"
+                            ? childValue
+                            : String(childValue || ""));
                     }
                     // Call original onChange if it exists
                     if (child.props.onChange) {
@@ -3241,7 +3396,13 @@ const RadioGroup = React__namespace.forwardRef(({ value: controlledValue, defaul
             });
         });
     };
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), ...props, children: [label && (jsxRuntime.jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: id, className: "mb-2", labelClassName: labelClassName })), jsxRuntime.jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": label, "aria-required": isRequired, "aria-invalid": currentValidationState === "error", "aria-disabled": isDisabled, className: cn("flex", orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start", spacingConfig[spacing], groupClassName, className), onKeyDown: handleKeyDown, id: id, children: options ? renderOptions() : renderChildren() }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none" ? "default" : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), ...props, children: [label && (jsxRuntime.jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: id, className: "mb-2", labelClassName: labelClassName })), jsxRuntime.jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": label, "aria-required": isRequired, "aria-invalid": currentValidationState === "error", "aria-disabled": isDisabled, className: cn("flex", orientation === "horizontal"
+                    ? "flex-row items-center"
+                    : "flex-col items-start", spacingConfig[spacing], groupClassName, className), onKeyDown: handleKeyDown, id: id, children: options ? renderOptions() : renderChildren() }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState === "error"
+                        ? "negative"
+                        : "default", size: size, isDisabled: isDisabled, className: "mt-1" })] }));
 });
 RadioGroup.displayName = "RadioGroup";