@indico-data/design-system 3.0.8 → 3.0.10

package/lib/index.esm.js

@@ -5467,7 +5467,7 @@ const DisplayFormError = (_a) => {
 };
 
 const Input = React__default.forwardRef((_a, ref) => {
-    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, maxLength, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "maxLength", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
+    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, maxLength, iconName, tabIndex, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "maxLength", "iconName", "tabIndex", "onChange", "onBlur", "onKeyDown", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
@@ -5477,7 +5477,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, maxLength: maxLength, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { "data-testid": `${name}-error`, message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, tabIndex: tabIndex, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, maxLength: maxLength, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { "data-testid": `${name}-error`, message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);
 
@@ -5790,10 +5790,10 @@ const Toggle = React__default.forwardRef((_a, ref) => {
 });
 
 const Textarea = React__default.forwardRef((_a, ref) => {
-    var { label, name, placeholder, value, onChange, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue } = _a, rest = __rest(_a, ["label", "name", "placeholder", "value", "onChange", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue"]);
+    var { label, name, placeholder, value, onChange, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue, tabIndex } = _a, rest = __rest(_a, ["label", "name", "placeholder", "value", "onChange", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue", "tabIndex"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const textareaClasses = classNames('textarea', { error: hasErrors });
-    return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue, tabIndex: tabIndex }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledTextarea = withLabel(Textarea);
 
@@ -11836,116 +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 = ({ timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, }) => {
-    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, { "data-testid": `${name}-input`, label: label, hasHiddenLabel: hasHiddenLabel, value: inputValue, maxLength: 8, onChange: handleTimeChange, onBlur: handleBlur, name: name, errorMessage: 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 } = 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"]);
-    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, { timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
-};
-
 function getNodeName$1(node) {
   if (isNode$1(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -13619,7 +13509,7 @@ const defaultOptions$1 = {
     placement: 'bottom-start',
     middleware: [offset$2(5), flip$2(), shift$2()],
 };
-function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, }) {
+function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, }) {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     // Determine whether the component is controlled or uncontrolled
     const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
@@ -13641,13 +13531,129 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
     const click = useClick(context);
     const dismiss = useDismiss(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
-    const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: "floatui-container", children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
+    const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: `floatui-container ${className}`, children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
     return (jsxs(Fragment, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&
                 (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) {
@@ -13663,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))] }));
 };
 
 /**
@@ -19056,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 } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel"]);
+    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) : '');
@@ -19090,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', name: 'Date Picker' }), 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 } = 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"]);
+    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) : '');
@@ -19153,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 }) }), 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 }) })] }), 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 } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel"]);
+    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) : '');
@@ -19197,7 +19203,7 @@ function SingleInputDateTimePicker(props) {
     const handleTimeChange = (time) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
-    return (jsxs(Row, { children: [jsx(Col, { children: jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, hasHiddenLabel: hasHiddenLabel, label: 'Single Date Picker', name: `${id}-date-picker` }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }) }), jsx(Col, { xs: "content", children: jsx(TimePicker, { timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange }) })] }));
+    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) => {