@trackunit/react-form-components 1.14.27 → 1.14.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs.js
CHANGED
|
@@ -366,7 +366,7 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
|
|
|
366
366
|
if (!genericAction) {
|
|
367
367
|
return null;
|
|
368
368
|
}
|
|
369
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
369
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsxRuntime.jsx(ActionButton, { "data-testid": "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
|
|
370
370
|
};
|
|
371
371
|
|
|
372
372
|
/**
|
|
@@ -382,9 +382,9 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
|
|
|
382
382
|
const InputLockReasonTooltip = ({ reasons, kind }) => {
|
|
383
383
|
const [t] = useTranslation();
|
|
384
384
|
if (reasons === undefined || reasons.length === 0) {
|
|
385
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
385
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("field.notEditable.tooltip"), children: jsxRuntime.jsx(reactComponents.Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) }));
|
|
386
386
|
}
|
|
387
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
387
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: jsxRuntime.jsx("ul", { className: typeof reasons === "string" ? "list-none !pl-0" : "list-disc", children: typeof reasons === "string" ? jsxRuntime.jsx("li", { children: reasons }) : reasons.map(reason => jsxRuntime.jsx("li", { children: reason }, reason)) }), placement: "top", children: jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) }));
|
|
388
388
|
};
|
|
389
389
|
|
|
390
390
|
// Renders a tooltip for lock reasons if the prop is an object
|
|
@@ -1098,10 +1098,10 @@ const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange,
|
|
|
1098
1098
|
disabled: isReadonly,
|
|
1099
1099
|
invalid: isReadonly ? false : isInvalid,
|
|
1100
1100
|
state,
|
|
1101
|
-
}), "data-testid": dataTestId, disabled: disabled, onChange: onChange, readOnly: readOnly, ref: ref, tabIndex: isReadonly ? -1 : tabIndex, type: "checkbox", ...rest }), checked || indeterminate ? (jsxRuntime.jsx("div", { className: cvaCheckboxIconOverlay(), children: indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() })) })) : null] }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1101
|
+
}), "data-testid": dataTestId, disabled: disabled, onChange: onChange, readOnly: readOnly, ref: ref, tabIndex: isReadonly ? -1 : tabIndex, type: "checkbox", ...rest }), checked || indeterminate ? (jsxRuntime.jsx("div", { className: cvaCheckboxIconOverlay(), children: indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() })) })) : null] }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isLabelCutOff, label: label, placement: "top", children: jsxRuntime.jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsxRuntime.jsx("span", { className: cvaLabel({
|
|
1102
|
+
invalid: isReadonly ? false : isInvalid,
|
|
1103
|
+
disabled: isReadonly,
|
|
1104
|
+
}), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
|
|
1105
1105
|
};
|
|
1106
1106
|
Checkbox.displayName = "Checkbox";
|
|
1107
1107
|
|
|
@@ -2085,7 +2085,7 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
|
|
|
2085
2085
|
const color = isInvalid ? "danger" : isWarning ? "warning" : null;
|
|
2086
2086
|
return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
|
|
2087
2087
|
}, [isInvalid, isWarning]);
|
|
2088
|
-
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, {
|
|
2088
|
+
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, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip ? (jsxRuntime.jsx("span", { className: "ml-1", children: jsxRuntime.jsx(reactComponents.Tooltip, { "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] }));
|
|
2089
2089
|
};
|
|
2090
2090
|
|
|
2091
2091
|
/**
|
|
@@ -3017,7 +3017,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([], {
|
|
|
3017
3017
|
const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, "data-testid": dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
|
|
3018
3018
|
const htmlForId = id ?? "option-card-" + sharedUtils.uuidv4();
|
|
3019
3019
|
const subContent = react.useMemo(() => (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
|
|
3020
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
3020
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: layout !== "compact" || (!subheading && !description), label: subContent, mode: "light", placement: "top", children: jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: cvaInput(), "data-testid": dataTestId ? `${dataTestId}-option-card` : undefined, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": dataTestId ? `${dataTestId}-option-card-label` : undefined, htmlFor: htmlForId, children: [disabled && icon && !customImage
|
|
3021
3021
|
? react.cloneElement(icon, { className: cvaCustomImage({ disabled, className: icon.props.className }) })
|
|
3022
3022
|
: null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsxRuntime.jsx(reactComponents.Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null, tagProps ? jsxRuntime.jsx(reactComponents.Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
|
|
3023
3023
|
};
|
|
@@ -3435,10 +3435,10 @@ const RadioItem = ({ label, value, "data-testid": dataTestId, className, descrip
|
|
|
3435
3435
|
checked: isChecked,
|
|
3436
3436
|
disabled: groupCtx?.disabled,
|
|
3437
3437
|
invalid: groupCtx?.isInvalid,
|
|
3438
|
-
}), "data-testid": dataTestId, id: inputId, name: groupCtx?.name, onChange: groupCtx?.onChange, ref: inputRef, tabIndex: tabIndex ?? (groupCtx?.disabled ? -1 : isChecked ? 0 : hasGroupValue ? -1 : 0), type: "radio", value: value, ...rest }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3438
|
+
}), "data-testid": dataTestId, id: inputId, name: groupCtx?.name, onChange: groupCtx?.onChange, ref: inputRef, tabIndex: tabIndex ?? (groupCtx?.disabled ? -1 : isChecked ? 0 : hasGroupValue ? -1 : 0), type: "radio", value: value, ...rest }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlLabelTooltip(), children: jsxRuntime.jsx("span", { className: cvaLabel({
|
|
3439
|
+
invalid: groupCtx?.isInvalid,
|
|
3440
|
+
disabled: groupCtx?.disabled,
|
|
3441
|
+
}), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescriptionTooltip(), children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }) }, "description-tooltip-" + rest.name)) : null] }));
|
|
3442
3442
|
};
|
|
3443
3443
|
|
|
3444
3444
|
const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -4355,10 +4355,10 @@ ToggleSwitch.displayName = "ToggleSwitch";
|
|
|
4355
4355
|
const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, ...rest }) => {
|
|
4356
4356
|
const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
|
|
4357
4357
|
const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
|
|
4358
|
-
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, {
|
|
4359
|
-
|
|
4360
|
-
|
|
4361
|
-
|
|
4358
|
+
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, { "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsxRuntime.jsx("span", { className: cvaLabel({
|
|
4359
|
+
disabled: rest.disabled || rest.readOnly,
|
|
4360
|
+
className: "select-none",
|
|
4361
|
+
}), "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, { "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("div", { className: cvaBinaryControlDescriptionTooltip(), 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] }));
|
|
4362
4362
|
};
|
|
4363
4363
|
ToggleSwitchOption.displayName = "ToggleSwitchOption";
|
|
4364
4364
|
|
package/index.esm.js
CHANGED
|
@@ -365,7 +365,7 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
|
|
|
365
365
|
if (!genericAction) {
|
|
366
366
|
return null;
|
|
367
367
|
}
|
|
368
|
-
return (jsx(Tooltip, {
|
|
368
|
+
return (jsx(Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsx(ActionButton, { "data-testid": "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
|
|
369
369
|
};
|
|
370
370
|
|
|
371
371
|
/**
|
|
@@ -381,9 +381,9 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
|
|
|
381
381
|
const InputLockReasonTooltip = ({ reasons, kind }) => {
|
|
382
382
|
const [t] = useTranslation();
|
|
383
383
|
if (reasons === undefined || reasons.length === 0) {
|
|
384
|
-
return (jsx(Tooltip, {
|
|
384
|
+
return (jsx(Tooltip, { label: t("field.notEditable.tooltip"), children: jsx(Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) }));
|
|
385
385
|
}
|
|
386
|
-
return (jsx(Tooltip, {
|
|
386
|
+
return (jsx(Tooltip, { label: jsx("ul", { className: typeof reasons === "string" ? "list-none !pl-0" : "list-disc", children: typeof reasons === "string" ? jsx("li", { children: reasons }) : reasons.map(reason => jsx("li", { children: reason }, reason)) }), placement: "top", children: jsx(Icon, { name: "LockClosed", size: "small" }) }));
|
|
387
387
|
};
|
|
388
388
|
|
|
389
389
|
// Renders a tooltip for lock reasons if the prop is an object
|
|
@@ -1097,10 +1097,10 @@ const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange,
|
|
|
1097
1097
|
disabled: isReadonly,
|
|
1098
1098
|
invalid: isReadonly ? false : isInvalid,
|
|
1099
1099
|
state,
|
|
1100
|
-
}), "data-testid": dataTestId, disabled: disabled, onChange: onChange, readOnly: readOnly, ref: ref, tabIndex: isReadonly ? -1 : tabIndex, type: "checkbox", ...rest }), checked || indeterminate ? (jsx("div", { className: cvaCheckboxIconOverlay(), children: indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (jsx(CheckIcon, { className: cvaCheckboxIcon() })) })) : null] }), hasLabel ? (jsx(Tooltip, {
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1100
|
+
}), "data-testid": dataTestId, disabled: disabled, onChange: onChange, readOnly: readOnly, ref: ref, tabIndex: isReadonly ? -1 : tabIndex, type: "checkbox", ...rest }), checked || indeterminate ? (jsx("div", { className: cvaCheckboxIconOverlay(), children: indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (jsx(CheckIcon, { className: cvaCheckboxIcon() })) })) : null] }), hasLabel ? (jsx(Tooltip, { disabled: !isLabelCutOff, label: label, placement: "top", children: jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsx("span", { className: cvaLabel({
|
|
1101
|
+
invalid: isReadonly ? false : isInvalid,
|
|
1102
|
+
disabled: isReadonly,
|
|
1103
|
+
}), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
|
|
1104
1104
|
};
|
|
1105
1105
|
Checkbox.displayName = "Checkbox";
|
|
1106
1106
|
|
|
@@ -2084,7 +2084,7 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
|
|
|
2084
2084
|
const color = isInvalid ? "danger" : isWarning ? "warning" : null;
|
|
2085
2085
|
return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
|
|
2086
2086
|
}, [isInvalid, isWarning]);
|
|
2087
|
-
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, {
|
|
2087
|
+
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, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip ? (jsx("span", { className: "ml-1", children: jsx(Tooltip, { "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] }));
|
|
2088
2088
|
};
|
|
2089
2089
|
|
|
2090
2090
|
/**
|
|
@@ -3016,7 +3016,7 @@ const cvaTag = cvaMerge([], {
|
|
|
3016
3016
|
const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, "data-testid": dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
|
|
3017
3017
|
const htmlForId = id ?? "option-card-" + uuidv4();
|
|
3018
3018
|
const subContent = useMemo(() => (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
|
|
3019
|
-
return (jsx(Tooltip, {
|
|
3019
|
+
return (jsx(Tooltip, { disabled: layout !== "compact" || (!subheading && !description), label: subContent, mode: "light", placement: "top", children: jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: cvaInput(), "data-testid": dataTestId ? `${dataTestId}-option-card` : undefined, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": dataTestId ? `${dataTestId}-option-card-label` : undefined, htmlFor: htmlForId, children: [disabled && icon && !customImage
|
|
3020
3020
|
? cloneElement(icon, { className: cvaCustomImage({ disabled, className: icon.props.className }) })
|
|
3021
3021
|
: null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsx(Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsx(Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null, tagProps ? jsx(Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
|
|
3022
3022
|
};
|
|
@@ -3434,10 +3434,10 @@ const RadioItem = ({ label, value, "data-testid": dataTestId, className, descrip
|
|
|
3434
3434
|
checked: isChecked,
|
|
3435
3435
|
disabled: groupCtx?.disabled,
|
|
3436
3436
|
invalid: groupCtx?.isInvalid,
|
|
3437
|
-
}), "data-testid": dataTestId, id: inputId, name: groupCtx?.name, onChange: groupCtx?.onChange, ref: inputRef, tabIndex: tabIndex ?? (groupCtx?.disabled ? -1 : isChecked ? 0 : hasGroupValue ? -1 : 0), type: "radio", value: value, ...rest }), hasLabel ? (jsx(Tooltip, {
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3437
|
+
}), "data-testid": dataTestId, id: inputId, name: groupCtx?.name, onChange: groupCtx?.onChange, ref: inputRef, tabIndex: tabIndex ?? (groupCtx?.disabled ? -1 : isChecked ? 0 : hasGroupValue ? -1 : 0), type: "radio", value: value, ...rest }), hasLabel ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaBinaryControlLabelTooltip(), children: jsx("span", { className: cvaLabel({
|
|
3438
|
+
invalid: groupCtx?.isInvalid,
|
|
3439
|
+
disabled: groupCtx?.disabled,
|
|
3440
|
+
}), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescriptionTooltip(), children: jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }) }, "description-tooltip-" + rest.name)) : null] }));
|
|
3441
3441
|
};
|
|
3442
3442
|
|
|
3443
3443
|
const cvaTimeRange = cvaMerge([
|
|
@@ -4354,10 +4354,10 @@ ToggleSwitch.displayName = "ToggleSwitch";
|
|
|
4354
4354
|
const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, ...rest }) => {
|
|
4355
4355
|
const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
|
|
4356
4356
|
const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
|
|
4357
|
-
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, {
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4357
|
+
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, { "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsx("span", { className: cvaLabel({
|
|
4358
|
+
disabled: rest.disabled || rest.readOnly,
|
|
4359
|
+
className: "select-none",
|
|
4360
|
+
}), "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, { "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("div", { className: cvaBinaryControlDescriptionTooltip(), 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] }));
|
|
4361
4361
|
};
|
|
4362
4362
|
ToggleSwitchOption.displayName = "ToggleSwitchOption";
|
|
4363
4363
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-form-components",
|
|
3
|
-
"version": "1.14.
|
|
3
|
+
"version": "1.14.29",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"zod": "^3.23.8",
|
|
15
15
|
"react-hook-form": "7.62.0",
|
|
16
16
|
"tailwind-merge": "^2.0.0",
|
|
17
|
-
"@trackunit/css-class-variance-utilities": "1.11.
|
|
18
|
-
"@trackunit/react-components": "1.17.
|
|
19
|
-
"@trackunit/ui-icons": "1.11.
|
|
20
|
-
"@trackunit/shared-utils": "1.13.
|
|
21
|
-
"@trackunit/ui-design-tokens": "1.11.
|
|
22
|
-
"@trackunit/i18n-library-translation": "1.12.
|
|
17
|
+
"@trackunit/css-class-variance-utilities": "1.11.44",
|
|
18
|
+
"@trackunit/react-components": "1.17.26",
|
|
19
|
+
"@trackunit/ui-icons": "1.11.43",
|
|
20
|
+
"@trackunit/shared-utils": "1.13.44",
|
|
21
|
+
"@trackunit/ui-design-tokens": "1.11.44",
|
|
22
|
+
"@trackunit/i18n-library-translation": "1.12.29",
|
|
23
23
|
"string-ts": "^2.0.0",
|
|
24
24
|
"@js-temporal/polyfill": "^0.5.1",
|
|
25
25
|
"es-toolkit": "^1.39.10"
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { CommonProps } from "@trackunit/react-components";
|
|
2
|
-
import { FocusEventHandler } from "react";
|
|
3
|
-
import { SingleValue } from "react-select";
|
|
4
|
-
import { CountryCode } from "./CountryCodes";
|
|
5
|
-
interface CountryCodeSelectProps extends CommonProps {
|
|
6
|
-
excludedCountries?: CountryCode;
|
|
7
|
-
countryCode?: string;
|
|
8
|
-
isInvalid?: boolean;
|
|
9
|
-
onChange?: (option: SingleValue<{
|
|
10
|
-
label: string;
|
|
11
|
-
value: string;
|
|
12
|
-
}>) => void;
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
readOnly?: boolean;
|
|
15
|
-
placeholder?: string;
|
|
16
|
-
onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
|
|
17
|
-
isClearable?: boolean;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* The CountryCodeSelect component is used to select a country code for a phone number.
|
|
21
|
-
*
|
|
22
|
-
* @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
|
|
23
|
-
* @returns {ReactElement} CountryCodeSelect component
|
|
24
|
-
*/
|
|
25
|
-
export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, "data-testid": dataTestId, placeholder, onBlur, isClearable, }: CountryCodeSelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
export {};
|