@indico-data/design-system 3.0.9 → 3.0.10

package/lib/index.js

@@ -11861,117 +11861,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] = React.useState('');
-    const [inputValue, setInputValue] = React.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 (jsxRuntime.jsx("div", { className: "time-input-wrapper", children: jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsxRuntime.jsx("div", { className: "time-picker-wrapper", children: jsxRuntime.jsxs(Row, { align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("p", { className: "ma-0", children: "Select Time" }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsxRuntime.jsx(DayPicker, Object.assign({}, finalProps))] }));
-};
-
 function getNodeName$1(node) {
   if (isNode$1(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -13672,8 +13561,124 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
                 (isPortal ? (jsxRuntime.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] = React.useState('');
+    const [inputValue, setInputValue] = React.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 (jsxRuntime.jsxs("div", { className: "time-input-wrapper", children: [jsxRuntime.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)), jsxRuntime.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: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", { className: "time-validation-error", children: validationError && jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsxRuntime.jsx("div", { className: "time-picker-wrapper", children: jsxRuntime.jsxs(Row, { align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("p", { className: "ma-0", children: "Select Time" }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsxRuntime.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] = React.useState(initialMonth !== null && initialMonth !== void 0 ? initialMonth : new Date());
     const handleSelect = (date) => {
         if (!date) {
@@ -13689,7 +13694,7 @@ const IconTriggerDatePicker = (props) => {
             onSelect && onSelect(undefined);
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsxRuntime.jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, selected: selected, onSelect: handleSelect, month: localMonth, startMonth: disableBeforeDate, endMonth: disableAfterDate, onMonthChange: setLocalMonth }, rest))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsxRuntime.jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsxRuntime.jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, selected: selected, onSelect: handleSelect, month: localMonth, startMonth: disableBeforeDate, endMonth: disableAfterDate, onMonthChange: setLocalMonth }, rest))] }));
 };
 
 /**
@@ -19082,7 +19087,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 = React.useId();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = React.useState(selected ? formatDateAsString$1(selected) : '');
@@ -19116,11 +19121,11 @@ function SingleInputDatePicker(props) {
             setLocalTextValue('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.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 }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsxRuntime.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 }), jsxRuntime.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 = React.useId();
     // Hold the input values in state
     const [localTextValueFrom, setLocalTextValueFrom] = React.useState((selected === null || selected === void 0 ? void 0 : selected.from) ? formatDateAsString$1(selected.from) : '');
@@ -19179,14 +19184,14 @@ function InputDateRangePicker(props) {
             setLocalTextValueTo('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsxs(Row, { gutterWidth: gutterWidth, children: [jsxRuntime.jsx(Col, { children: jsxRuntime.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 }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.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 }) })] }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsxRuntime.jsxs(Row, { gutterWidth: gutterWidth, children: [jsxRuntime.jsx(Col, { children: jsxRuntime.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 }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.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 }) })] }), jsxRuntime.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 = React.useId();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = React.useState(selected ? formatDateAsString(selected) : '');
@@ -19223,7 +19228,7 @@ function SingleInputDateTimePicker(props) {
     const handleTimeChange = (time) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
-    return (jsxRuntime.jsxs(Row, { className: "date-time-picker-row", children: [jsxRuntime.jsx(Col, { className: "date-picker-col", children: jsxRuntime.jsxs(FloatUI, { className: "date-picker-float-ui", isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.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 }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth, isReadOnly: isReadOnly }, rest))] }) }), jsxRuntime.jsx(Col, { xs: "content", className: "time-picker-col", children: jsxRuntime.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 (jsxRuntime.jsxs(Row, { className: "date-time-picker-row", children: [jsxRuntime.jsx(Col, { className: "date-picker-col", children: jsxRuntime.jsxs(FloatUI, { className: "date-picker-float-ui", isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsxRuntime.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 }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth, isReadOnly: isReadOnly }, rest))] }) }), jsxRuntime.jsx(Col, { xs: "content", className: "time-picker-col", children: jsxRuntime.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) => {