@trackunit/react-form-components 1.14.19 → 1.14.22

package/index.cjs.js

@@ -2019,8 +2019,8 @@ const CreatableSelect = (props) => {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, }) => {
-    return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
+const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, ref, }) => {
+    return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, children: children }));
 };
 
 const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap", "group", "form-group"]);
@@ -2053,13 +2053,13 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, }) => {
+const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, ref, }) => {
     const [t] = useTranslation();
     const validationStateIcon = react.useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] }), tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "ml-1", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "ml-1", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -2409,7 +2409,7 @@ const DropZoneDefaultLabel = () => (jsxRuntime.jsx(Trans, { components: {
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {ReactElement} DropZone component
  */
-const DropZone = ({ className, "data-testid": dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ...rest }) => {
+const DropZone = ({ className, "data-testid": dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ref, ...rest }) => {
     const [dragActive, setDragActive] = react.useState(false);
     const [fileDropped, setFileDropped] = react.useState(false);
     const [t] = useTranslation();
@@ -2457,7 +2457,7 @@ const DropZone = ({ className, "data-testid": dataTestId, filesSelected, label =
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ref: ref, ...rest, children: jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
 };
 
 // Doing the same check as we do on the backend
@@ -3316,8 +3316,8 @@ const RadioGroupContext = react.createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {ReactElement} RadioGroup component
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, }) => {
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, role: "radiogroup", children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, ref, }) => {
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -3334,7 +3334,7 @@ RadioGroup.displayName = "RadioGroup";
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {ReactElement} RadioItem component
  */
-const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ...rest }) => {
+const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ref, ...rest }) => {
     const groupCtx = react.useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
     // Empty string is treated as "no selection" to allow tabbing into the group when no radio is checked
@@ -3355,7 +3355,7 @@ const RadioItem = ({ label, value, "data-testid": dataTestId, className, descrip
     }, [isChecked]);
     return (jsxRuntime.jsxs("label", { className: hasLabel
             ? cvaBinaryControlWrapper({ className })
-            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
+            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, ref: ref, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
                     disabled: groupCtx?.disabled,
                     invalid: groupCtx?.isInvalid,
@@ -3381,7 +3381,7 @@ const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
  * @param {TimeRangeProps} props - The props for the TimeRange component
  * @returns {ReactElement} TimeRange component
  */
-const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, }) => {
+const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, ref, }) => {
     const [timeRange, setTimeRange] = react.useState(range ?? {
         timeFrom: DEFAULT_TIME,
         timeTo: DEFAULT_TIME,
@@ -3393,7 +3393,7 @@ const TimeRange = ({ id, className, "data-testid": dataTestId, children, range,
         setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, ref: ref, children: [jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
 };
 const DEFAULT_TIME = "12:00";
 
@@ -3412,7 +3412,7 @@ const cvaScheduleItemText = cssClassVarianceUtilities.cvaMerge(["flex", "font-bo
  * @param {ScheduleProps} props - The props for the Schedule component
  * @returns {ReactElement} Schedule component
  */
-const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], }) => {
+const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], ref, }) => {
     const [t] = useTranslation();
     const onRangeChange = (range, index) => {
         const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
@@ -3444,7 +3444,7 @@ const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, in
             : day);
         onChange(newSchedule);
     };
-    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
+    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, ref: ref, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
             return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px_200px_60px_250px_250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
         }) }));
 };
@@ -3928,10 +3928,10 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
+const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
 const cvaToggleSwitchWrapper = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);
@@ -4167,10 +4167,10 @@ ToggleSwitch.displayName = "ToggleSwitch";
  * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
  * @returns {ReactElement} ToggleSwitchOption component
  */
-const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ...rest }) => {
+const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, ...rest }) => {
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
-    return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, tabIndex: -1, children: [jsxRuntime.jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: cvaBinaryControlLabelTooltip(), "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+    return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, ref: ref, tabIndex: -1, children: [jsxRuntime.jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: cvaBinaryControlLabelTooltip(), "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
                         disabled: rest.disabled || rest.readOnly,
                         className: "select-none",
                     }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }, `${id}-label-tooltip`), suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: cvaBinaryControlDescriptionTooltip(), "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }, `${id}-description-tooltip`)) : null] }));

package/index.esm.js

@@ -2018,8 +2018,8 @@ const CreatableSelect = (props) => {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, }) => {
-    return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
+const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, ref, }) => {
+    return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, children: children }));
 };
 
 const cvaFormGroup = cvaMerge(["component-formGroup-gap", "group", "form-group"]);
@@ -2052,13 +2052,13 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, }) => {
+const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, ref, }) => {
     const [t] = useTranslation();
     const validationStateIcon = useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { asChild: false, "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] }), tip ? (jsx(Tooltip, { asChild: false, className: "ml-1", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { asChild: false, "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip ? (jsx(Tooltip, { asChild: false, className: "ml-1", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -2408,7 +2408,7 @@ const DropZoneDefaultLabel = () => (jsx(Trans, { components: {
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {ReactElement} DropZone component
  */
-const DropZone = ({ className, "data-testid": dataTestId, filesSelected, label = jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ...rest }) => {
+const DropZone = ({ className, "data-testid": dataTestId, filesSelected, label = jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ref, ...rest }) => {
     const [dragActive, setDragActive] = useState(false);
     const [fileDropped, setFileDropped] = useState(false);
     const [t] = useTranslation();
@@ -2456,7 +2456,7 @@ const DropZone = ({ className, "data-testid": dataTestId, filesSelected, label =
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ref: ref, ...rest, children: jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
 };
 
 // Doing the same check as we do on the backend
@@ -3315,8 +3315,8 @@ const RadioGroupContext = createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {ReactElement} RadioGroup component
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, }) => {
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, role: "radiogroup", children: jsx(RadioGroupContext.Provider, { value: {
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, ref, }) => {
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", children: jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -3333,7 +3333,7 @@ RadioGroup.displayName = "RadioGroup";
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {ReactElement} RadioItem component
  */
-const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ...rest }) => {
+const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ref, ...rest }) => {
     const groupCtx = useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
     // Empty string is treated as "no selection" to allow tabbing into the group when no radio is checked
@@ -3354,7 +3354,7 @@ const RadioItem = ({ label, value, "data-testid": dataTestId, className, descrip
     }, [isChecked]);
     return (jsxs("label", { className: hasLabel
             ? cvaBinaryControlWrapper({ className })
-            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
+            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, ref: ref, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
                     disabled: groupCtx?.disabled,
                     invalid: groupCtx?.isInvalid,
@@ -3380,7 +3380,7 @@ const cvaTimeRange = cvaMerge([
  * @param {TimeRangeProps} props - The props for the TimeRange component
  * @returns {ReactElement} TimeRange component
  */
-const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, }) => {
+const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, ref, }) => {
     const [timeRange, setTimeRange] = useState(range ?? {
         timeFrom: DEFAULT_TIME,
         timeTo: DEFAULT_TIME,
@@ -3392,7 +3392,7 @@ const TimeRange = ({ id, className, "data-testid": dataTestId, children, range,
         setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
+    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, ref: ref, children: [jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
 };
 const DEFAULT_TIME = "12:00";
 
@@ -3411,7 +3411,7 @@ const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
  * @param {ScheduleProps} props - The props for the Schedule component
  * @returns {ReactElement} Schedule component
  */
-const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], }) => {
+const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], ref, }) => {
     const [t] = useTranslation();
     const onRangeChange = (range, index) => {
         const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
@@ -3443,7 +3443,7 @@ const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, in
             : day);
         onChange(newSchedule);
     };
-    return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
+    return (jsx("div", { className: className, "data-testid": dataTestId, ref: ref, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
             return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px_200px_60px_250px_250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
         }) }));
 };
@@ -3927,10 +3927,10 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
+const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + uuidv4();
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, tip: tip, children: jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
 const cvaToggleSwitchWrapper = cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);
@@ -4166,10 +4166,10 @@ ToggleSwitch.displayName = "ToggleSwitch";
  * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
  * @returns {ReactElement} ToggleSwitchOption component
  */
-const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ...rest }) => {
+const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, ...rest }) => {
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
-    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, tabIndex: -1, children: [jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsx(Tooltip, { asChild: false, className: cvaBinaryControlLabelTooltip(), "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, ref: ref, tabIndex: -1, children: [jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsx(Tooltip, { asChild: false, className: cvaBinaryControlLabelTooltip(), "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         disabled: rest.disabled || rest.readOnly,
                         className: "select-none",
                     }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }, `${id}-label-tooltip`), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description ? (jsx(Tooltip, { asChild: false, className: cvaBinaryControlDescriptionTooltip(), "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }, `${id}-description-tooltip`)) : null] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.14.19",
+  "version": "1.14.22",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.42",
-    "@trackunit/react-components": "1.17.17",
-    "@trackunit/ui-icons": "1.11.41",
-    "@trackunit/shared-utils": "1.13.42",
-    "@trackunit/ui-design-tokens": "1.11.42",
-    "@trackunit/i18n-library-translation": "1.12.26",
+    "@trackunit/css-class-variance-utilities": "1.11.43",
+    "@trackunit/react-components": "1.17.20",
+    "@trackunit/ui-icons": "1.11.42",
+    "@trackunit/shared-utils": "1.13.43",
+    "@trackunit/ui-design-tokens": "1.11.43",
+    "@trackunit/i18n-library-translation": "1.12.27",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
     "es-toolkit": "^1.39.10"

package/src/components/DropZone/DropZone.d.ts

@@ -1,8 +1,8 @@
-import { CommonProps, Size } from "@trackunit/react-components";
+import { CommonProps, Refable, Size } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
 import { BaseInputProps } from "../BaseInput/BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size">;
-export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
+export interface DropZoneProps extends Omit<BaseInputExposedProps, "ref">, CommonProps, Refable<HTMLDivElement> {
     /**
      * A JSX element or a string to set a focusable label in Drop Zone. If not provided, the default label will be used.
      */
@@ -85,5 +85,5 @@ export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {ReactElement} DropZone component
  */
-export declare const DropZone: ({ className, "data-testid": dataTestId, filesSelected, label, size, isInvalid, disabled, accept, multiple, ...rest }: DropZoneProps) => ReactElement;
+export declare const DropZone: ({ className, "data-testid": dataTestId, filesSelected, label, size, isInvalid, disabled, accept, multiple, ref, ...rest }: DropZoneProps) => ReactElement;
 export {};

package/src/components/FormGroup/FormGroup.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface FormGroupProps extends CommonProps {
+export interface FormGroupProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The label for the form group.
      */
@@ -42,4 +42,4 @@ export interface FormGroupProps extends CommonProps {
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required, }: FormGroupProps) => ReactElement;
+export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required, ref, }: FormGroupProps) => ReactElement;

package/src/components/Label/Label.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface LabelProps extends CommonProps {
+export interface LabelProps extends CommonProps, Refable<HTMLLabelElement> {
     /**
      * ID of the label.
      */
@@ -30,4 +30,4 @@ export interface LabelProps extends CommonProps {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-export declare const Label: ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, }: LabelProps) => ReactElement;
+export declare const Label: ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, ref, }: LabelProps) => ReactElement;

package/src/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ChangeEvent, InputHTMLAttributes, ReactElement, ReactNode } from "react";
-export interface RadioGroupProps<TValue extends string | number> extends CommonProps, InputHTMLAttributes<HTMLInputElement> {
+export interface RadioGroupProps<TValue extends string | number> extends CommonProps, Refable<HTMLDivElement>, InputHTMLAttributes<HTMLInputElement> {
     /**
      */
     children: ReactNode;
@@ -98,6 +98,6 @@ export interface RadioGroupProps<TValue extends string | number> extends CommonP
  * @returns {ReactElement} RadioGroup component
  */
 export declare const RadioGroup: {
-    <TValue extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, }: RadioGroupProps<TValue>): ReactElement;
+    <TValue extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, ref, }: RadioGroupProps<TValue>): ReactElement;
     displayName: string;
 };

package/src/components/RadioGroup/RadioItem.d.ts

@@ -1,7 +1,7 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { InputHTMLAttributes, ReactElement, ReactNode } from "react";
-export interface RadioItemProps<TValue extends string | number = string> extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+export interface RadioItemProps<TValue extends string | number = string> extends CommonProps, Refable<HTMLLabelElement>, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * The label of the radio item.
      */
@@ -25,4 +25,4 @@ export interface RadioItemProps<TValue extends string | number = string> extends
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {ReactElement} RadioItem component
  */
-export declare const RadioItem: <TValue extends string | number>({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ...rest }: RadioItemProps<TValue>) => ReactElement;
+export declare const RadioItem: <TValue extends string | number>({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ref, ...rest }: RadioItemProps<TValue>) => ReactElement;

package/src/components/Schedule/Schedule.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { TimeRangeInput } from "../TimeRange/TimeRange";
 export interface ScheduleItem {
     /**
@@ -26,7 +26,7 @@ export interface ScheduleItem {
      */
     checkboxLabel?: string;
 }
-export interface ScheduleProps extends CommonProps {
+export interface ScheduleProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * List of schedule rows.
      */
@@ -49,4 +49,4 @@ export interface ScheduleProps extends CommonProps {
  * @param {ScheduleProps} props - The props for the Schedule component
  * @returns {ReactElement} Schedule component
  */
-export declare const Schedule: ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys, }: ScheduleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Schedule: ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys, ref, }: ScheduleProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/TimeRange/TimeRange.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactNode } from "react";
 export interface TimeRangeInput {
     /**
@@ -10,7 +10,7 @@ export interface TimeRangeInput {
      */
     timeTo: string;
 }
-export interface TimeRangeProps extends CommonProps {
+export interface TimeRangeProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Unique element identifier.
      */
@@ -49,5 +49,5 @@ export interface TimeRangeProps extends CommonProps {
  * @param {TimeRangeProps} props - The props for the TimeRange component
  * @returns {ReactElement} TimeRange component
  */
-export declare const TimeRange: ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, }: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimeRange: ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, ref, }: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DEFAULT_TIME = "12:00";

package/src/components/TimeRangeField/TimeRangeField.d.ts

@@ -1,7 +1,8 @@
+import { Refable } from "@trackunit/react-components";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { TimeRangeProps } from "../TimeRange/TimeRange";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedProps {
+export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedProps, Refable<HTMLDivElement> {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */
@@ -13,5 +14,5 @@ export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedPro
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-export declare const TimeRangeField: ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }: TimeRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimeRangeField: ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ref, ...rest }: TimeRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/ToggleSwitchOption/ToggleSwitchOption.d.ts

@@ -1,6 +1,7 @@
+import { Refable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { ToggleSwitchProps } from "../ToggleSwitch/ToggleSwitch";
-export interface ToggleSwitchOptionProps extends ToggleSwitchProps {
+export interface ToggleSwitchOptionProps extends ToggleSwitchProps, Refable<HTMLLabelElement> {
     /**
      * The label of the toggle.
      */
@@ -78,6 +79,6 @@ export interface ToggleSwitchOptionProps extends ToggleSwitchProps {
  * @returns {ReactElement} ToggleSwitchOption component
  */
 export declare const ToggleSwitchOption: {
-    ({ label, className, description, suffix, id, "data-testid": dataTestId, ...rest }: ToggleSwitchOptionProps): ReactElement;
+    ({ label, className, description, suffix, id, "data-testid": dataTestId, ref, ...rest }: ToggleSwitchOptionProps): ReactElement;
     displayName: string;
 };