@indico-data/design-system 3.0.8 → 3.0.9

package/lib/components/floatUI/FloatUI.d.ts

@@ -1,2 +1,2 @@
 import { FloatUIProps } from './types';
-export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/floatUI/types.d.ts

@@ -5,6 +5,7 @@ export type FloatUIProps = {
     ariaLabel: string;
     floatingOptions?: UseFloatingOptions;
     isOpen?: boolean;
+    className?: string;
     isPortal?: boolean;
     portalOptions?: {
         rootId?: string;

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

@@ -1,5 +1,6 @@
 import { CustomComponents, DateRange, DayEventHandler, Formatters, Matcher, Mode, MonthChangeEventHandler, OnSelectHandler } from 'react-day-picker';
 export interface DatePickerProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
     selected?: Date | DateRange | undefined;
     onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
     mode?: Mode;
@@ -27,6 +28,9 @@ export interface DatePickerProps {
     onNextClick?: MonthChangeEventHandler;
     onPrevClick?: MonthChangeEventHandler;
     onDayClick?: DayEventHandler<React.MouseEvent>;
+    isReadOnly?: boolean;
+    timeTabIndex?: number;
+    dateTabIndex?: number;
 }
 export interface CommonProps {
     className?: string;

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

@@ -19,5 +19,8 @@ export interface SingleInputDatePickerProps {
     errorMessage?: string | undefined;
     hasHiddenLabel?: boolean;
     'data-testid'?: string;
+    ref?: React.LegacyRef<HTMLInputElement>;
+    isReadOnly?: boolean;
+    tabIndex?: number;
 }
 export declare function SingleInputDatePicker(props: SingleInputDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -24,6 +24,11 @@ interface InputDateRangePickerProps {
     closeOnSelect?: boolean;
     clearOnClose?: boolean;
     hasHiddenLabel?: boolean;
+    ref?: React.LegacyRef<HTMLInputElement>;
+    isFromReadOnly?: boolean;
+    isToReadOnly?: boolean;
+    toTabIndex?: number;
+    fromTabIndex?: number;
 }
 export declare function InputDateRangePicker(props: InputDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,5 +21,10 @@ export interface SingleInputDateTimePickerProps {
     hasHiddenLabel?: boolean;
     timeValue?: string;
     onTimeChange?: (time: string) => void;
+    isReadOnly?: boolean;
+    ref?: React.LegacyRef<HTMLInputElement>;
+    timePickerRef?: React.LegacyRef<HTMLInputElement>;
+    dateTabIndex?: number;
+    timeTabIndex?: number;
 }
 export declare function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/input/Input.d.ts

@@ -17,6 +17,7 @@ export interface BaseInputProps {
     isClearable?: boolean;
     className?: string;
     defaultValue?: string;
+    tabIndex?: number;
 }
 export interface InputProps extends BaseInputProps, LabelProps {
 }

package/lib/components/forms/textarea/Textarea.d.ts

@@ -17,6 +17,7 @@ export interface TextareaProps extends LabelProps {
     maxLength?: number;
     autofocus?: boolean;
     defaultValue?: string;
+    tabIndex?: number;
 }
 declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledTextarea as Textarea };

package/lib/components/forms/timePicker/TimePicker.d.ts

@@ -1,9 +1,15 @@
 interface TimePickerProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
     timeValue?: string;
     label?: string;
     name?: string;
     hasHiddenLabel?: boolean;
     onTimeChange?: (time: string) => void;
+    className?: string;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    tabIndex?: number;
+    [key: string]: unknown;
 }
-export declare const TimePicker: ({ timeValue, label, name, hasHiddenLabel, onTimeChange, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePicker: ({ ref, timeValue, label, name, hasHiddenLabel, onTimeChange, className, isDisabled, isReadOnly, tabIndex, ...rest }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/index.d.ts

@@ -284,6 +284,7 @@ interface BaseInputProps {
     isClearable?: boolean;
     className?: string;
     defaultValue?: string;
+    tabIndex?: number;
 }
 interface InputProps extends BaseInputProps, LabelProps {
 }
@@ -345,6 +346,7 @@ interface TextareaProps extends LabelProps {
     maxLength?: number;
     autofocus?: boolean;
     defaultValue?: string;
+    tabIndex?: number;
 }
 declare const LabeledTextarea: React$1.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
@@ -372,6 +374,7 @@ interface SelectProps<OptionType extends SelectOption> extends Props$4<OptionTyp
 declare const LabeledSelect: React$1.ForwardRefExoticComponent<SelectProps<SelectOption> & LabelProps & React$1.RefAttributes<any>>;
 
 interface DatePickerProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
     selected?: Date | DateRange | undefined;
     onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
     mode?: Mode;
@@ -399,18 +402,27 @@ interface DatePickerProps {
     onNextClick?: MonthChangeEventHandler;
     onPrevClick?: MonthChangeEventHandler;
     onDayClick?: DayEventHandler<React.MouseEvent>;
+    isReadOnly?: boolean;
+    timeTabIndex?: number;
+    dateTabIndex?: number;
 }
 
 declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface TimePickerProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
     timeValue?: string;
     label?: string;
     name?: string;
     hasHiddenLabel?: boolean;
     onTimeChange?: (time: string) => void;
+    className?: string;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    tabIndex?: number;
+    [key: string]: unknown;
 }
-declare const TimePicker: ({ timeValue, label, name, hasHiddenLabel, onTimeChange, }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+declare const TimePicker: ({ ref, timeValue, label, name, hasHiddenLabel, onTimeChange, className, isDisabled, isReadOnly, tabIndex, ...rest }: TimePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface Props$3 {
     mode?: Mode;
@@ -452,6 +464,9 @@ interface SingleInputDatePickerProps {
     errorMessage?: string | undefined;
     hasHiddenLabel?: boolean;
     'data-testid'?: string;
+    ref?: React.LegacyRef<HTMLInputElement>;
+    isReadOnly?: boolean;
+    tabIndex?: number;
 }
 declare function SingleInputDatePicker(props: SingleInputDatePickerProps): react_jsx_runtime.JSX.Element;
 
@@ -479,6 +494,11 @@ interface InputDateRangePickerProps {
     closeOnSelect?: boolean;
     clearOnClose?: boolean;
     hasHiddenLabel?: boolean;
+    ref?: React.LegacyRef<HTMLInputElement>;
+    isFromReadOnly?: boolean;
+    isToReadOnly?: boolean;
+    toTabIndex?: number;
+    fromTabIndex?: number;
 }
 declare function InputDateRangePicker(props: InputDateRangePickerProps): react_jsx_runtime.JSX.Element;
 
@@ -504,6 +524,11 @@ interface SingleInputDateTimePickerProps {
     hasHiddenLabel?: boolean;
     timeValue?: string;
     onTimeChange?: (time: string) => void;
+    isReadOnly?: boolean;
+    ref?: React.LegacyRef<HTMLInputElement>;
+    timePickerRef?: React.LegacyRef<HTMLInputElement>;
+    dateTabIndex?: number;
+    timeTabIndex?: number;
 }
 declare function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps): react_jsx_runtime.JSX.Element;
 
@@ -544,6 +569,7 @@ type FloatUIProps = {
     ariaLabel: string;
     floatingOptions?: UseFloatingOptions;
     isOpen?: boolean;
+    className?: string;
     isPortal?: boolean;
     portalOptions?: {
         rootId?: string;
@@ -551,7 +577,7 @@ type FloatUIProps = {
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, }: FloatUIProps): react_jsx_runtime.JSX.Element;
+declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, }: FloatUIProps): react_jsx_runtime.JSX.Element;
 
 type MenuProps = {
     children: React$1.ReactNode;

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);
 
@@ -11885,7 +11885,8 @@ const validateInputValue = (value) => {
     return ''; // Valid time format
 };
 
-const TimePicker = ({ timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, }) => {
+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) => {
@@ -11907,11 +11908,11 @@ const TimePicker = ({ timeValue = '', label = 'Time Picker', name = 'time-picker
             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 }) }));
+    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 } = 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 { 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 = {
@@ -11943,7 +11944,7 @@ const DatePicker = (props) => {
         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))] }));
+    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) {
@@ -13619,7 +13620,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,7 +13642,7 @@ 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))] }));
 }
@@ -19056,7 +19057,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 } = 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 inputId = useId$1();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = useState(selected ? formatDateAsString$1(selected) : '');
@@ -19090,11 +19091,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, 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 } = 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 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 +19154,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, 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 } = 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 inputId = useId$1();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = useState(selected ? formatDateAsString(selected) : '');
@@ -19197,7 +19198,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, 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) => {