@trackunit/react-form-components 1.0.5 → 1.0.8

package/index.cjs.js

@@ -1369,6 +1369,7 @@ const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex
     },
 });
 const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
+    "self-center",
     "w-4",
     "h-4",
     "appearance-none",
@@ -1384,7 +1385,6 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     "hover:cursor-pointer",
     "hover:bg-slate-100",
     "focus-visible:outline-primary-700",
-    "mt-1",
 ], {
     variants: {
         checked: {
@@ -1432,22 +1432,14 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     ],
 });
 const cvaRadioItemWrapper = cssClassVarianceUtilities.cvaMerge([
-    "gap-2",
+    "grid-rows-subgrid", //* Children align to this parent grid
+    "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
+    "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
     "group",
     "grid",
-    "grid-cols-min-fr",
-    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
+    "gap-x-2",
 ]);
-const cvaRadioItemDescription = cssClassVarianceUtilities.cvaMerge([
-    "-mt-1",
-    "text-sm",
-    "font-normal",
-    "text-slate-500",
-    "text-left",
-    "whitespace-nowrap",
-    "text-ellipsis",
-    "overflow-hidden",
-], {
+const cvaRadioItemDescription = cssClassVarianceUtilities.cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
     variants: {
         disabled: {
             true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
@@ -1455,6 +1447,9 @@ const cvaRadioItemDescription = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
+const cvaLabelTooltip = cssClassVarianceUtilities.cvaMerge(["col-start-2", "w-full", "self-center"]);
+const cvaDescriptionTooltip = cssClassVarianceUtilities.cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
+const cvaSuffixContainer = cssClassVarianceUtilities.cvaMerge(["flex", "col-start-3", "items-center"]);
 
 const RadioGroupContext = React__namespace.createContext(null);
 
@@ -1489,20 +1484,22 @@ RadioGroup.displayName = "RadioGroup";
  * @returns {JSX.Element} RadioItem component
  */
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
-    const groupCtx = React__namespace.useContext(RadioGroupContext);
+    const groupCtx = React.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    const labelRef = React__namespace.useRef(null);
-    const descriptionRef = React__namespace.useRef(null);
+    const labelRef = React.useRef(null);
+    const descriptionRef = React.useRef(null);
     const labelTextIsCutOff = reactComponents.useIsTextCutOff(labelRef.current);
     const descriptionTextIsCutOff = reactComponents.useIsTextCutOff(descriptionRef.current);
-    return (jsxRuntime.jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsxRuntime.jsx("input", { checked: isChecked, className: cvaRadioItem({
+    const descriptionId = description ? `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}-description` : undefined;
+    const inputId = `${groupCtx === null || groupCtx === void 0 ? void 0 : 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 === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
                     invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                }), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("label", { className: cvaLabel({
-                                invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                                disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-                            }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsxRuntime.jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null, suffix] })] }));
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : 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({
+                        invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
+                        disabled: groupCtx === null || groupCtx === void 0 ? void 0 : 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 === null || groupCtx === void 0 ? void 0 : 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

@@ -4,7 +4,7 @@ import { IconButton, Icon, Tooltip, useIsTextCutOff, Heading, Text, Spinner, Men
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { isValidElement, forwardRef, useMemo, useState, useCallback, useRef, cloneElement, useEffect, useImperativeHandle } from 'react';
+import React__default, { isValidElement, forwardRef, useMemo, useState, useCallback, useRef, cloneElement, useEffect, useContext, useImperativeHandle } from 'react';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Temporal } from '@js-temporal/polyfill';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
@@ -1350,6 +1350,7 @@ const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     },
 });
 const cvaRadioItem = cvaMerge([
+    "self-center",
     "w-4",
     "h-4",
     "appearance-none",
@@ -1365,7 +1366,6 @@ const cvaRadioItem = cvaMerge([
     "hover:cursor-pointer",
     "hover:bg-slate-100",
     "focus-visible:outline-primary-700",
-    "mt-1",
 ], {
     variants: {
         checked: {
@@ -1413,22 +1413,14 @@ const cvaRadioItem = cvaMerge([
     ],
 });
 const cvaRadioItemWrapper = cvaMerge([
-    "gap-2",
+    "grid-rows-subgrid", //* Children align to this parent grid
+    "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
+    "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
     "group",
     "grid",
-    "grid-cols-min-fr",
-    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
+    "gap-x-2",
 ]);
-const cvaRadioItemDescription = cvaMerge([
-    "-mt-1",
-    "text-sm",
-    "font-normal",
-    "text-slate-500",
-    "text-left",
-    "whitespace-nowrap",
-    "text-ellipsis",
-    "overflow-hidden",
-], {
+const cvaRadioItemDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
     variants: {
         disabled: {
             true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
@@ -1436,6 +1428,9 @@ const cvaRadioItemDescription = cvaMerge([
         },
     },
 });
+const cvaLabelTooltip = cvaMerge(["col-start-2", "w-full", "self-center"]);
+const cvaDescriptionTooltip = cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
+const cvaSuffixContainer = cvaMerge(["flex", "col-start-3", "items-center"]);
 
 const RadioGroupContext = React.createContext(null);
 
@@ -1470,20 +1465,22 @@ RadioGroup.displayName = "RadioGroup";
  * @returns {JSX.Element} RadioItem component
  */
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
-    const groupCtx = React.useContext(RadioGroupContext);
+    const groupCtx = useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    const labelRef = React.useRef(null);
-    const descriptionRef = React.useRef(null);
+    const labelRef = useRef(null);
+    const descriptionRef = useRef(null);
     const labelTextIsCutOff = useIsTextCutOff(labelRef.current);
     const descriptionTextIsCutOff = useIsTextCutOff(descriptionRef.current);
-    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsx("input", { checked: isChecked, className: cvaRadioItem({
+    const descriptionId = description ? `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}-description` : undefined;
+    const inputId = `${groupCtx === null || groupCtx === void 0 ? void 0 : 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 === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
                     invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                }), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsxs("div", { className: "flex flex-col", children: [jsx(Tooltip, { className: "w-full", disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsx("label", { className: cvaLabel({
-                                invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                                disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-                            }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), description ? (jsx(Tooltip, { className: "w-full", disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null, suffix] })] }));
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : 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({
+                        invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
+                        disabled: groupCtx === null || groupCtx === void 0 ? void 0 : 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 === null || groupCtx === void 0 ? void 0 : 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.5",
+  "version": "1.0.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,7 +18,7 @@
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "^1.0.1",
-    "@trackunit/react-components": "^1.0.5",
+    "@trackunit/react-components": "^1.0.8",
     "@trackunit/ui-icons": "^1.0.1",
     "@trackunit/shared-utils": "^1.0.2",
     "@trackunit/i18n-library-translation": "^1.0.3"

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

@@ -10,3 +10,6 @@ export declare const cvaRadioItemWrapper: (props?: import("class-variance-author
 export declare const cvaRadioItemDescription: (props?: ({
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaLabelTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaDescriptionTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSuffixContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -1,11 +1,11 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import * as React from "react";
-export interface RadioItemProps<V extends string | number = string> extends CommonProps, MappedOmit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface RadioItemProps<V extends string | number = string> extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * The label of the radio item.
      */
-    label: React.ReactNode;
+    label: ReactNode;
     /**
      * The value of the radio item.
      */
@@ -17,7 +17,7 @@ export interface RadioItemProps<V extends string | number = string> extends Comm
     /**
      * An element to display after the label
      */
-    suffix?: React.ReactNode;
+    suffix?: ReactNode;
 }
 /**
  * The RadioItem component.