@trackunit/react-form-components 1.0.20 → 1.0.25

package/index.cjs.js

@@ -581,8 +581,7 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { className:
 const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ...rest }, ref) => {
     const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React__namespace.useRef(null);
-    const labelRef = React__namespace.useRef(null);
-    const textIsCutOff = reactComponents.useIsTextCutOff(labelRef);
+    const { isTextTruncated: isLabelCutOff, ref: labelRef } = reactComponents.useIsTextTruncated();
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
         if ("Space" === e.code) {
@@ -598,7 +597,7 @@ const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbo
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !textIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !isLabelCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
                     }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix] }));
@@ -1485,20 +1484,18 @@ RadioGroup.displayName = "RadioGroup";
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = React.useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
-    const labelRef = React.useRef(null);
-    const descriptionRef = React.useRef(null);
-    const labelTextIsCutOff = reactComponents.useIsTextCutOff(labelRef);
-    const descriptionTextIsCutOff = reactComponents.useIsTextCutOff(descriptionRef);
+    const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
+    const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
     const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
     const inputId = `${groupCtx?.id}-${value}`;
     return (jsxRuntime.jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
                     disabled: groupCtx?.disabled,
                     invalid: groupCtx?.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
                         invalid: groupCtx?.isInvalid,
                         disabled: groupCtx?.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsxRuntime.jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsxRuntime.jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
 const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, useIsTextCutOff, Heading, Text, Spinner, MenuItem, Tag, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, useIsTextTruncated, Heading, Text, Spinner, MenuItem, Tag, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
@@ -562,8 +562,7 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className,
 const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ...rest }, ref) => {
     const icon = indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React.useRef(null);
-    const labelRef = React.useRef(null);
-    const textIsCutOff = useIsTextCutOff(labelRef);
+    const { isTextTruncated: isLabelCutOff, ref: labelRef } = useIsTextTruncated();
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
         if ("Space" === e.code) {
@@ -579,7 +578,7 @@ const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChang
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), jsx(Tooltip, { className: "w-full", disabled: !textIsCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), jsx(Tooltip, { className: "w-full", disabled: !isLabelCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
                     }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix] }));
@@ -1466,20 +1465,18 @@ RadioGroup.displayName = "RadioGroup";
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
-    const labelRef = useRef(null);
-    const descriptionRef = useRef(null);
-    const labelTextIsCutOff = useIsTextCutOff(labelRef);
-    const descriptionTextIsCutOff = useIsTextCutOff(descriptionRef);
+    const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
+    const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
     const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
     const inputId = `${groupCtx?.id}-${value}`;
     return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
                     disabled: groupCtx?.disabled,
                     invalid: groupCtx?.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsx(Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsx(Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         invalid: groupCtx?.isInvalid,
                         disabled: groupCtx?.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
 const cvaTimeRange = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.0.20",
+  "version": "1.0.25",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,11 +17,11 @@
     "zod": "3.22.4",
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "^1.0.1",
-    "@trackunit/react-components": "^1.1.2",
-    "@trackunit/ui-icons": "^1.0.4",
-    "@trackunit/shared-utils": "^1.0.3",
-    "@trackunit/i18n-library-translation": "^1.0.8"
+    "@trackunit/css-class-variance-utilities": "1.0.4",
+    "@trackunit/react-components": "1.1.7",
+    "@trackunit/ui-icons": "1.0.7",
+    "@trackunit/shared-utils": "1.2.1",
+    "@trackunit/i18n-library-translation": "1.0.13"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",