@indico-data/design-system 3.0.9 → 3.0.10

package/lib/components/forms/date/datePicker/types.d.ts

@@ -53,3 +53,6 @@ export interface CommonProps {
     onPrevClick?: MonthChangeEventHandler;
     onDayClick?: DayEventHandler<React.MouseEvent>;
 }
+export interface PortalOptions {
+    rootId?: string;
+}

package/lib/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.d.ts

@@ -1,5 +1,7 @@
 import { DateRange, Mode } from 'react-day-picker';
 import { IconName, IconSizes } from '../../../icons/types';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 interface Props {
     mode?: Mode;
     ariaLabel: string;
@@ -17,6 +19,9 @@ interface Props {
     className?: string;
     initialMonth?: Date;
     'data-testid'?: string;
+    portalOptions?: PortalOptions;
+    isPortal?: boolean;
+    floatingOptions?: UseFloatingOptions;
 }
 export declare const IconTriggerDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/forms/date/inputDatePicker/SingleInputDatePicker.d.ts

@@ -1,4 +1,6 @@
 import type { IconName } from '../../../icons/types';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 export interface SingleInputDatePickerProps {
     ariaLabel: string;
     disableBeforeDate?: Date;
@@ -22,5 +24,8 @@ export interface SingleInputDatePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     isReadOnly?: boolean;
     tabIndex?: number;
+    portalOptions?: PortalOptions;
+    floatingOptions?: UseFloatingOptions;
+    isPortal?: boolean;
 }
 export declare function SingleInputDatePicker(props: SingleInputDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts

@@ -1,5 +1,7 @@
 import { IconName } from '../../../icons/types';
 import { DateRange } from 'react-day-picker';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 interface InputDateRangePickerProps {
     ariaLabel: string;
     disableBeforeDate?: Date;
@@ -29,6 +31,9 @@ interface InputDateRangePickerProps {
     isToReadOnly?: boolean;
     toTabIndex?: number;
     fromTabIndex?: number;
+    portalOptions?: PortalOptions;
+    floatingOptions?: UseFloatingOptions;
+    isPortal?: boolean;
 }
 export declare function InputDateRangePicker(props: InputDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.d.ts

@@ -1,4 +1,6 @@
 import type { IconName } from '../../../icons/types';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 export interface SingleInputDateTimePickerProps {
     ariaLabel: string;
     disableBeforeDate?: Date;
@@ -26,5 +28,8 @@ export interface SingleInputDateTimePickerProps {
     timePickerRef?: React.LegacyRef<HTMLInputElement>;
     dateTabIndex?: number;
     timeTabIndex?: number;
+    portalOptions?: PortalOptions;
+    floatingOptions?: UseFloatingOptions;
+    isPortal?: boolean;
 }
 export declare function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps): import("react/jsx-runtime").JSX.Element;

package/lib/index.css

@@ -2235,6 +2235,16 @@ body div[class*=select__single-value] {
   width: 348px;
 }
 
+.time-validation-error {
+  background-color: var(--pf-tooltip-background-color);
+  color: var(--pf-tooltip-font-color);
+  padding: var(--pf-padding-2);
+  border-radius: var(--pf-rounded);
+  width: 200px;
+  box-shadow: var(--pf-dropshadow);
+  font-size: var(--pf-font-size-overline);
+}
+
 :root [data-theme=light] {
   --pf-badge-background-color: var(--pf-page-background-color);
   --pf-badge-font-color: var(--pf-font-color);

package/lib/index.d.ts

@@ -406,6 +406,9 @@ interface DatePickerProps {
     timeTabIndex?: number;
     dateTabIndex?: number;
 }
+interface PortalOptions {
+    rootId?: string;
+}
 
 declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
@@ -441,6 +444,9 @@ interface Props$3 {
     className?: string;
     initialMonth?: Date;
     'data-testid'?: string;
+    portalOptions?: PortalOptions;
+    isPortal?: boolean;
+    floatingOptions?: UseFloatingOptions;
 }
 declare const IconTriggerDatePicker: (props: Props$3) => react_jsx_runtime.JSX.Element;
 
@@ -467,6 +473,9 @@ interface SingleInputDatePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     isReadOnly?: boolean;
     tabIndex?: number;
+    portalOptions?: PortalOptions;
+    floatingOptions?: UseFloatingOptions;
+    isPortal?: boolean;
 }
 declare function SingleInputDatePicker(props: SingleInputDatePickerProps): react_jsx_runtime.JSX.Element;
 
@@ -499,6 +508,9 @@ interface InputDateRangePickerProps {
     isToReadOnly?: boolean;
     toTabIndex?: number;
     fromTabIndex?: number;
+    portalOptions?: PortalOptions;
+    floatingOptions?: UseFloatingOptions;
+    isPortal?: boolean;
 }
 declare function InputDateRangePicker(props: InputDateRangePickerProps): react_jsx_runtime.JSX.Element;
 
@@ -529,6 +541,9 @@ interface SingleInputDateTimePickerProps {
     timePickerRef?: React.LegacyRef<HTMLInputElement>;
     dateTabIndex?: number;
     timeTabIndex?: number;
+    portalOptions?: PortalOptions;
+    floatingOptions?: UseFloatingOptions;
+    isPortal?: boolean;
 }
 declare function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps): react_jsx_runtime.JSX.Element;
 

package/lib/index.esm.css

@@ -2235,6 +2235,16 @@ body div[class*=select__single-value] {
   width: 348px;
 }
 
+.time-validation-error {
+  background-color: var(--pf-tooltip-background-color);
+  color: var(--pf-tooltip-font-color);
+  padding: var(--pf-padding-2);
+  border-radius: var(--pf-rounded);
+  width: 200px;
+  box-shadow: var(--pf-dropshadow);
+  font-size: var(--pf-font-size-overline);
+}
+
 :root [data-theme=light] {
   --pf-badge-background-color: var(--pf-page-background-color);
   --pf-badge-font-color: var(--pf-font-color);

package/lib/index.esm.js

@@ -11836,117 +11836,6 @@ const getCommonProps = (props) => {
     });
 };
 
-const formatTimeValue = (value) => {
-    if (!value || value.trim() === '') {
-        return '';
-    }
-    // Normalize the input
-    const normalizedValue = value.trim().toLowerCase();
-    // Extract time components using regex
-    const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
-    const matches = normalizedValue.match(timeRegex);
-    if (matches) {
-        const hours = parseInt(matches[1], 10);
-        const minutes = parseInt(matches[2], 10);
-        const period = matches[4].toUpperCase(); // Convert am/pm to AM/PM
-        // Format as hh:mm AM/PM
-        return `${hours}:${minutes < 10 ? '0' + minutes : minutes} ${period}`;
-    }
-    return value; // Return original if no match (shouldn't happen with valid inputs)
-};
-const validateInputValue = (value) => {
-    if (!value || value.trim() === '') {
-        return ''; // Empty input is allowed
-    }
-    // Normalize the input (remove extra spaces, convert to lowercase)
-    const normalizedValue = value.trim().toLowerCase();
-    // Regular expression for valid time formats: 1:10 pm, 01:10 pm, 1:10pm, 01:10pm
-    const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
-    if (!timeRegex.test(normalizedValue)) {
-        // Check if the issue might be a 24-hour format
-        const hour24Regex = /^([13-9]|1[3-9]|2[0-3]):/i;
-        if (hour24Regex.test(normalizedValue)) {
-            return 'Please enter time in 12-hour format (e.g., 1:10 pm)';
-        }
-        return 'Please enter a valid time format (e.g., 1:10 pm)';
-    }
-    // Extract hours and minutes for additional validation
-    const matches = normalizedValue.match(timeRegex);
-    if (matches) {
-        const hours = parseInt(matches[1], 10);
-        const minutes = parseInt(matches[2], 10);
-        if (hours < 1 || hours > 12) {
-            return 'Hours must be between 1 and 12';
-        }
-        if (minutes < 0 || minutes > 59) {
-            return 'Minutes must be between 0 and 59';
-        }
-    }
-    return ''; // Valid time format
-};
-
-const TimePicker = (_a) => {
-    var { ref, timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, className, isDisabled, isReadOnly, tabIndex } = _a, rest = __rest(_a, ["ref", "timeValue", "label", "name", "hasHiddenLabel", "onTimeChange", "className", "isDisabled", "isReadOnly", "tabIndex"]);
-    const [validationError, setValidationError] = useState('');
-    const [inputValue, setInputValue] = useState(timeValue);
-    const handleTimeChange = (e) => {
-        const newValue = e.target.value;
-        const error = validateInputValue(newValue);
-        setInputValue(newValue);
-        setValidationError(error);
-        // Only send valid values to parent component
-        if (!error || error === '') {
-            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(newValue);
-        }
-    };
-    const handleBlur = (e) => {
-        const currentValue = e.target.value;
-        // Only format if there's no validation error
-        if (validationError === '' && currentValue.trim() !== '') {
-            const formattedValue = formatTimeValue(currentValue);
-            setInputValue(formattedValue);
-            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(formattedValue);
-        }
-    };
-    return (jsx("div", { className: "time-input-wrapper", children: jsx(LabeledInput, Object.assign({ ref: ref, tabIndex: tabIndex, className: className, "data-testid": `${name}-input`, label: label, hasHiddenLabel: hasHiddenLabel, value: inputValue, maxLength: 8, onChange: handleTimeChange, onBlur: handleBlur, name: name, errorMessage: validationError, readonly: isReadOnly, isDisabled: isDisabled }, rest)) }));
-};
-
-const DatePicker = (props) => {
-    const { mode = 'single', className, captionLayout = 'dropdown', selected, hasTimePicker = false, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, timeValue, isRequired, min, max, onTimeChange, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick, isReadOnly, ref, timeTabIndex, dateTabIndex } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "hasTimePicker", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "timeValue", "isRequired", "min", "max", "onTimeChange", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick", "isReadOnly", "ref", "timeTabIndex", "dateTabIndex"]);
-    const futureDateByYear = (year) => new Date(new Date().getFullYear() + year, 11, 31);
-    const endMonthDefault = endMonth !== null && endMonth !== void 0 ? endMonth : futureDateByYear(5);
-    const modeMap = {
-        single: {
-            mode: 'single',
-            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
-            selected: selected,
-            onSelect: onSelect,
-            endMonth: endMonthDefault,
-        },
-        multiple: {
-            mode: 'multiple',
-            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
-            selected: selected,
-            onSelect: onSelect,
-            endMonth: endMonthDefault,
-        },
-        range: {
-            mode: 'range',
-            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 2,
-            selected: selected,
-            onSelect: onSelect,
-            endMonth: endMonthDefault,
-        },
-    };
-    const modeProps = modeMap[mode];
-    const commonProps = getCommonProps(props);
-    const handleTimeChange = (time) => {
-        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
-    };
-    const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
-    return (jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
-};
-
 function getNodeName$1(node) {
   if (isNode$1(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -13647,8 +13536,124 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
                 (isPortal ? (jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));
 }
 
+const formatTimeValue = (value) => {
+    if (!value || value.trim() === '') {
+        return '';
+    }
+    // Normalize the input
+    const normalizedValue = value.trim().toLowerCase();
+    // Extract time components using regex
+    const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
+    const matches = normalizedValue.match(timeRegex);
+    if (matches) {
+        const hours = parseInt(matches[1], 10);
+        const minutes = parseInt(matches[2], 10);
+        const period = matches[4].toUpperCase(); // Convert am/pm to AM/PM
+        // Format as hh:mm AM/PM
+        return `${hours}:${minutes < 10 ? '0' + minutes : minutes} ${period}`;
+    }
+    return value; // Return original if no match (shouldn't happen with valid inputs)
+};
+const validateInputValue = (value) => {
+    if (!value || value.trim() === '') {
+        return ''; // Empty input is allowed
+    }
+    // Normalize the input (remove extra spaces, convert to lowercase)
+    const normalizedValue = value.trim().toLowerCase();
+    // Regular expression for valid time formats: 1:10 pm, 01:10 pm, 1:10pm, 01:10pm
+    const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
+    if (!timeRegex.test(normalizedValue)) {
+        // Check if the issue might be a 24-hour format
+        const hour24Regex = /^([13-9]|1[3-9]|2[0-3]):/i;
+        if (hour24Regex.test(normalizedValue)) {
+            return 'Please enter time in 12-hour format (e.g., 1:10 pm)';
+        }
+        return 'Please enter a valid time format (e.g., 1:10 pm)';
+    }
+    // Extract hours and minutes for additional validation
+    const matches = normalizedValue.match(timeRegex);
+    if (matches) {
+        const hours = parseInt(matches[1], 10);
+        const minutes = parseInt(matches[2], 10);
+        if (hours < 1 || hours > 12) {
+            return 'Hours must be between 1 and 12';
+        }
+        if (minutes < 0 || minutes > 59) {
+            return 'Minutes must be between 0 and 59';
+        }
+    }
+    return ''; // Valid time format
+};
+
+const TimePicker = (_a) => {
+    var { ref, timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, className, isDisabled, isReadOnly, tabIndex } = _a, rest = __rest(_a, ["ref", "timeValue", "label", "name", "hasHiddenLabel", "onTimeChange", "className", "isDisabled", "isReadOnly", "tabIndex"]);
+    const [validationError, setValidationError] = useState('');
+    const [inputValue, setInputValue] = useState(timeValue);
+    const handleTimeChange = (e) => {
+        const newValue = e.target.value;
+        const error = validateInputValue(newValue);
+        setInputValue(newValue);
+        setValidationError(error);
+        // Only send valid values to parent component
+        if (!error || error === '') {
+            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(newValue);
+        }
+    };
+    const handleBlur = (e) => {
+        const currentValue = e.target.value;
+        // Only format if there's no validation error
+        if (validationError === '' && currentValue.trim() !== '') {
+            const formattedValue = formatTimeValue(currentValue);
+            setInputValue(formattedValue);
+            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(formattedValue);
+        }
+    };
+    return (jsxs("div", { className: "time-input-wrapper", children: [jsx(LabeledInput, Object.assign({ ref: ref, tabIndex: tabIndex, className: className, "data-testid": `${name}-input`, label: label, hasHiddenLabel: hasHiddenLabel, value: inputValue, maxLength: 8, onChange: handleTimeChange, onBlur: handleBlur, name: name, readonly: isReadOnly, isDisabled: isDisabled }, rest)), jsxs(FloatUI, { ariaLabel: "Time validation error", isOpen: !!validationError, setIsOpen: () => { }, isPortal: true, portalOptions: {
+                    rootId: 'theme-root' ,
+                }, floatingOptions: {
+                    placement: 'bottom-start',
+                    middleware: [offset$2(5), flip$2(), shift$2()],
+                }, children: [jsx("div", {}), jsx("div", { className: "time-validation-error", children: validationError && jsx("div", { className: "error-message", children: validationError }) })] })] }));
+};
+
+const DatePicker = (props) => {
+    const { mode = 'single', className, captionLayout = 'dropdown', selected, hasTimePicker = false, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, timeValue, isRequired, min, max, onTimeChange, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick, isReadOnly, ref, timeTabIndex, dateTabIndex } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "hasTimePicker", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "timeValue", "isRequired", "min", "max", "onTimeChange", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick", "isReadOnly", "ref", "timeTabIndex", "dateTabIndex"]);
+    const futureDateByYear = (year) => new Date(new Date().getFullYear() + year, 11, 31);
+    const endMonthDefault = endMonth !== null && endMonth !== void 0 ? endMonth : futureDateByYear(5);
+    const modeMap = {
+        single: {
+            mode: 'single',
+            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
+            selected: selected,
+            onSelect: onSelect,
+            endMonth: endMonthDefault,
+        },
+        multiple: {
+            mode: 'multiple',
+            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
+            selected: selected,
+            onSelect: onSelect,
+            endMonth: endMonthDefault,
+        },
+        range: {
+            mode: 'range',
+            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 2,
+            selected: selected,
+            onSelect: onSelect,
+            endMonth: endMonthDefault,
+        },
+    };
+    const modeProps = modeMap[mode];
+    const commonProps = getCommonProps(props);
+    const handleTimeChange = (time) => {
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
+    };
+    const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
+    return (jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
+};
+
 const IconTriggerDatePicker = (props) => {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, id, label, onSelect, selected, triggerIcon, triggerIconSize, mode, isOpen, clearOnClose, initialMonth } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "id", "label", "onSelect", "selected", "triggerIcon", "triggerIconSize", "mode", "isOpen", "clearOnClose", "initialMonth"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, id, label, onSelect, selected, triggerIcon, triggerIconSize, mode, isOpen, clearOnClose, initialMonth, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "id", "label", "onSelect", "selected", "triggerIcon", "triggerIconSize", "mode", "isOpen", "clearOnClose", "initialMonth", "portalOptions", "floatingOptions", "isPortal"]);
     const [localMonth, setLocalMonth] = useState(initialMonth !== null && initialMonth !== void 0 ? initialMonth : new Date());
     const handleSelect = (date) => {
         if (!date) {
@@ -13664,7 +13669,7 @@ const IconTriggerDatePicker = (props) => {
             onSelect && onSelect(undefined);
         }
     }, [isOpen, clearOnClose]);
-    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, selected: selected, onSelect: handleSelect, month: localMonth, startMonth: disableBeforeDate, endMonth: disableAfterDate, onMonthChange: setLocalMonth }, rest))] }));
+    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, selected: selected, onSelect: handleSelect, month: localMonth, startMonth: disableBeforeDate, endMonth: disableAfterDate, onMonthChange: setLocalMonth }, rest))] }));
 };
 
 /**
@@ -19057,7 +19062,7 @@ const formatDateAsString$1 = (date) => format(date, 'MM/dd/yyyy');
 
 function SingleInputDatePicker(props) {
     var _a;
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, hasHiddenLabel, ref, isReadOnly, tabIndex } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel", "ref", "isReadOnly", "tabIndex"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, hasHiddenLabel, ref, isReadOnly, tabIndex, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel", "ref", "isReadOnly", "tabIndex", "portalOptions", "floatingOptions", "isPortal"]);
     const inputId = useId$1();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = useState(selected ? formatDateAsString$1(selected) : '');
@@ -19091,11 +19096,11 @@ function SingleInputDatePicker(props) {
             setLocalTextValue('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, hasHiddenLabel: hasHiddenLabel, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', tabIndex: tabIndex, name: 'Date Picker', ref: ref, readonly: isReadOnly }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
+    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, hasHiddenLabel: hasHiddenLabel, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', tabIndex: tabIndex, name: 'Date Picker', ref: ref, readonly: isReadOnly }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
 }
 
 function InputDateRangePicker(props) {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose, hasHiddenLabel, ref, isFromReadOnly, isToReadOnly, toTabIndex, fromTabIndex } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "setIsOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel", "closeOnSelect", "clearOnClose", "hasHiddenLabel", "ref", "isFromReadOnly", "isToReadOnly", "toTabIndex", "fromTabIndex"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose, hasHiddenLabel, ref, isFromReadOnly, isToReadOnly, toTabIndex, fromTabIndex, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "setIsOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel", "closeOnSelect", "clearOnClose", "hasHiddenLabel", "ref", "isFromReadOnly", "isToReadOnly", "toTabIndex", "fromTabIndex", "portalOptions", "floatingOptions", "isPortal"]);
     const inputId = useId$1();
     // Hold the input values in state
     const [localTextValueFrom, setLocalTextValueFrom] = useState((selected === null || selected === void 0 ? void 0 : selected.from) ? formatDateAsString$1(selected.from) : '');
@@ -19154,14 +19159,14 @@ function InputDateRangePicker(props) {
             setLocalTextValueTo('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, children: [jsxs(Row, { gutterWidth: gutterWidth, children: [jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: 'From Date', "data-testid": "date-picker-from", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isFromReadOnly, tabIndex: fromTabIndex }) }), jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: 'To Date', "data-testid": "date-picker-to", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isToReadOnly, tabIndex: toTabIndex }) })] }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
+    return (jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsxs(Row, { gutterWidth: gutterWidth, children: [jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: 'From Date', "data-testid": "date-picker-from", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isFromReadOnly, tabIndex: fromTabIndex }) }), jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: 'To Date', "data-testid": "date-picker-to", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isToReadOnly, tabIndex: toTabIndex }) })] }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
 }
 
 const formatDateAsString = (date) => format(date, 'MM/dd/yyyy');
 
 function SingleInputDateTimePicker(props) {
     var _a;
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, timeValue, onTimeChange, hasHiddenLabel, isReadOnly, timePickerRef, dateTabIndex, timeTabIndex, ref } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel", "isReadOnly", "timePickerRef", "dateTabIndex", "timeTabIndex", "ref"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, timeValue, onTimeChange, hasHiddenLabel, isReadOnly, timePickerRef, dateTabIndex, timeTabIndex, ref, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel", "isReadOnly", "timePickerRef", "dateTabIndex", "timeTabIndex", "ref", "portalOptions", "floatingOptions", "isPortal"]);
     const inputId = useId$1();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = useState(selected ? formatDateAsString(selected) : '');
@@ -19198,7 +19203,7 @@ function SingleInputDateTimePicker(props) {
     const handleTimeChange = (time) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
-    return (jsxs(Row, { className: "date-time-picker-row", children: [jsx(Col, { className: "date-picker-col", children: jsxs(FloatUI, { className: "date-picker-float-ui", isOpen: isOpen, ariaLabel: ariaLabel, children: [jsx(LabeledInput, { ref: ref, className: `date-picker-input`, id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isReadOnly || isDisabled, readonly: isReadOnly, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, hasHiddenLabel: hasHiddenLabel, label: 'Single Date Picker', name: `${id}-date-picker`, tabIndex: dateTabIndex }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth, isReadOnly: isReadOnly }, rest))] }) }), jsx(Col, { xs: "content", className: "time-picker-col", children: jsx(TimePicker, { ref: timePickerRef, className: `time-picker-input`, timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange, isReadOnly: isReadOnly, isDisabled: isDisabled, tabIndex: timeTabIndex }) })] }));
+    return (jsxs(Row, { className: "date-time-picker-row", children: [jsx(Col, { className: "date-picker-col", children: jsxs(FloatUI, { className: "date-picker-float-ui", isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(LabeledInput, { ref: ref, className: `date-picker-input`, id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isReadOnly || isDisabled, readonly: isReadOnly, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, hasHiddenLabel: hasHiddenLabel, label: 'Single Date Picker', name: `${id}-date-picker`, tabIndex: dateTabIndex }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth, isReadOnly: isReadOnly }, rest))] }) }), jsx(Col, { xs: "content", className: "time-picker-col", children: jsx(TimePicker, { ref: timePickerRef, className: `time-picker-input`, timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange, isReadOnly: isReadOnly, isDisabled: isDisabled, tabIndex: timeTabIndex }) })] }));
 }
 
 const Form = (_a) => {