infinity-ui-elements 1.8.32 → 1.8.40

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,95 @@ 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) => {
+        const str = n.toString();
+        if (str.length >= length)
+            return str;
+        return "0".repeat(length - str.length) + str;
+    };
+    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 +2237,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 +2315,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 +2400,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 +2427,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";
 
@@ -3697,7 +3881,7 @@ const selectTriggerVariants = cva("flex items-center gap-1 transition-all font-f
         isDisabled: false,
     },
 });
-const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
+const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, position = "suffix", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
     const [uncontrolledTextValue, setUncontrolledTextValue] = React.useState(defaultTextValue || "");
     const [uncontrolledSelectValue, setUncontrolledSelectValue] = React.useState(defaultSelectValue);
     const [isSelectOpen, setIsSelectOpen] = React.useState(false);
@@ -3852,12 +4036,14 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
             gap: "gap-3",
         },
     };
-    // Create the select suffix component
-    const selectSuffix = (jsxs("div", { className: "relative flex items-center h-full", children: [jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
+    // Create the select component (prefix or suffix)
+    const selectComponent = (jsxs("div", { className: cn("relative flex items-stretch h-full"), children: [jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), "border-l border-action-outline-neutral-faded pl-2 ml-2 h-full flex items-center", selectTriggerClassName), onClick: !isDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": isDisabled, children: [jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: selectedOption?.label || selectPlaceholder }), jsx(ChevronDown, { className: cn("shrink-0 transition-transform", size === "small"
+                }), "h-full flex items-center self-stretch", position === "prefix"
+                    ? "border-r border-action-outline-neutral-faded"
+                    : "border-l border-action-outline-neutral-faded", selectTriggerClassName, position === "prefix" ? "pr-4" : "pl-4"), onClick: !isDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": isDisabled, children: [jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: selectedOption?.label || selectPlaceholder }), jsx(ChevronDown, { className: cn("shrink-0 transition-transform", size === "small"
                             ? "w-3 h-3"
                             : size === "medium"
                                 ? "w-3.5 h-3.5"
@@ -3867,10 +4053,12 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 right-0", dropdownPlacement === "bottom"
-                    ? "top-full mt-1"
+                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
+                    ? "top-[30px] mt-1"
                     : "bottom-full mb-1"), children: jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: widthStyle }) }))] }));
-    return (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, suffix: selectSuffix, size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+    return (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, ...(position === "prefix"
+                    ? { prefix: selectComponent }
+                    : { suffix: selectComponent }), size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
                     ? "default"
                     : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
 });