@trackunit/react-form-components 0.0.145 → 0.0.147

package/index.cjs.js

@@ -276,9 +276,7 @@ const BaseInput = React__namespace.forwardRef((_a, ref) => {
 const cvaLabel = cssClassVarianceUtilities.cvaMerge([
     "text-base",
     "text-slate-700",
-    "overflow-hidden",
-    "whitespace-nowrap",
-    "text-ellipsis",
+    "truncate",
     "hover:text-slate-800",
     "group-hover:text-slate-800",
     "active:text-slate-800",
@@ -457,7 +455,7 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { xmlns: "ht
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React__namespace.forwardRef((_a, ref) => {
-    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex"]);
+    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange"]);
     const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React__namespace.useRef(null);
     const isReadonly = disabled || readOnly;
@@ -471,16 +469,20 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
             (_b = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
         }
     };
+    const [labelRef, setLabelRef] = React__namespace.useState(null);
+    React__namespace.useEffect(() => {
+        onLabelRefChange && labelRef && onLabelRefChange(labelRef);
+    }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
     return (jsxRuntime.jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyPress: onKeyPress, children: [jsxRuntime.jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsxRuntime.jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), children: icon }), label && (jsxRuntime.jsx("span", { className: cvaLabel({
-                    invalid: isReadonly ? false : isInvalid,
-                    disabled: isReadonly,
-                    className: "cursor-pointer",
-                }), children: label })), suffix] }));
+                }), children: icon }), label && (jsxRuntime.jsx("span", { className: "flex", children: jsxRuntime.jsx("span", { id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), className: cvaLabel({
+                        invalid: isReadonly ? false : isInvalid,
+                        disabled: isReadonly,
+                        className: "cursor-pointer",
+                    }), children: label }) })), suffix] }));
 });
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore

package/index.esm.js

@@ -250,9 +250,7 @@ const BaseInput = React.forwardRef((_a, ref) => {
 const cvaLabel = cvaMerge([
     "text-base",
     "text-slate-700",
-    "overflow-hidden",
-    "whitespace-nowrap",
-    "text-ellipsis",
+    "truncate",
     "hover:text-slate-800",
     "group-hover:text-slate-800",
     "active:text-slate-800",
@@ -431,7 +429,7 @@ const IndeterminateIcon = ({ className }) => (jsx$1("svg", { xmlns: "http://www.
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React.forwardRef((_a, ref) => {
-    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex"]);
+    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange"]);
     const icon = indeterminate ? (jsx$1(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx$1(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React.useRef(null);
     const isReadonly = disabled || readOnly;
@@ -445,16 +443,20 @@ const Checkbox = React.forwardRef((_a, ref) => {
             (_b = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
         }
     };
+    const [labelRef, setLabelRef] = React.useState(null);
+    React.useEffect(() => {
+        onLabelRefChange && labelRef && onLabelRefChange(labelRef);
+    }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
     return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyPress: onKeyPress, children: [jsx$1("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsx$1("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), children: icon }), label && (jsx$1("span", { className: cvaLabel({
-                    invalid: isReadonly ? false : isInvalid,
-                    disabled: isReadonly,
-                    className: "cursor-pointer",
-                }), children: label })), suffix] }));
+                }), children: icon }), label && (jsx$1("span", { className: "flex", children: jsx$1("span", { id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), className: cvaLabel({
+                        invalid: isReadonly ? false : isInvalid,
+                        disabled: isReadonly,
+                        className: "cursor-pointer",
+                    }), children: label }) })), suffix] }));
 });
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.145",
+  "version": "0.0.147",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.14",
-    "@trackunit/i18n-library-translation": "0.0.78",
-    "@trackunit/react-components": "0.1.159",
-    "@trackunit/shared-utils": "0.0.7",
+    "@trackunit/i18n-library-translation": "0.0.79",
+    "@trackunit/react-components": "0.1.161",
+    "@trackunit/shared-utils": "0.0.8",
     "@trackunit/ui-icons": "0.0.76",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",

package/src/components/Checkbox/Checkbox.d.ts

@@ -30,6 +30,10 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
      * An boolean flag to set checkbox to intermediate state
      */
     indeterminate?: boolean;
+    /**
+     * A function returning the label ref
+     */
+    onLabelRefChange?: (label: HTMLElement) => void;
 }
 /**
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.