@trackunit/react-form-components 0.1.22 → 0.1.23

package/index.cjs.js

@@ -534,13 +534,12 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
     },
 });
 const cvaCheckboxContainer = cssClassVarianceUtilities.cvaMerge([
-    "grid",
-    "outline-none",
-    "grid-cols-min-fr",
     "items-center",
     "gap-2",
-    "cursor-pointer",
     "group",
+    "grid",
+    "grid-cols-min-fr",
+    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
 ]);
 const cvaCheckboxInput = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
 const cvaCheckboxIcon = cssClassVarianceUtilities.cvaMerge(["w-2.5", "h-2.5", "text-white"]);
@@ -567,9 +566,11 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { className:
  * @param {CheckboxProps} props - The props for the Checkbox component
  * @returns {JSX.Element} Checkbox component
  */
-const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation, ...rest }, ref) => {
+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.current);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
         var _a, _b;
@@ -581,20 +582,15 @@ const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbo
             (_b = 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", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsxRuntime.jsx("span", { className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label ? (jsxRuntime.jsx("span", { className: "flex", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !textIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
-                        className: "cursor-pointer",
-                    }), id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), children: label }) })) : null, suffix] }));
+                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix] }));
 });
 Checkbox.displayName = "Checkbox";
 
@@ -1420,9 +1416,25 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
         },
     ],
 });
-const cvaRadioItemWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
-const cvaRadioItemLabelContainer = cssClassVarianceUtilities.cvaMerge(["gap-y-1", "grid"]);
-const cvaRadioItemDescription = cssClassVarianceUtilities.cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
+const cvaRadioItemWrapper = cssClassVarianceUtilities.cvaMerge([
+    "items-center",
+    "gap-2",
+    "group",
+    "grid",
+    "grid-cols-min-fr",
+    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
+]);
+const cvaRadioItemLabelContainer = cssClassVarianceUtilities.cvaMerge(["grid", "flex-grow"]);
+const cvaRadioItemDescription = cssClassVarianceUtilities.cvaMerge([
+    "-mt-1",
+    "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"],
@@ -1463,14 +1475,21 @@ RadioGroup.displayName = "RadioGroup";
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {JSX.Element} RadioItem component
  */
-const RadioItem = ({ label, value, dataTestId, className, description, }) => {
+const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = React__namespace.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 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({
                     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 }), jsxRuntime.jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsxRuntime.jsx(Label, { dataTestId: dataTestId ? `${dataTestId}-Label` : undefined, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description ? (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}`, children: description })) : null] })] }));
+                }), "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: cvaRadioItemLabelContainer(), 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] }));
 };
 
 const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
@@ -1846,8 +1865,8 @@ const getOrderedOptions = (options, value) => {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focusRing, disabled, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1855,8 +1874,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focu
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focusRing, disabled, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {

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, Heading, Text, MenuItem, Tag, Spinner, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, useIsTextCutOff, Heading, Text, MenuItem, Tag, Spinner, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
@@ -515,13 +515,12 @@ const cvaCheckbox = cvaMerge([
     },
 });
 const cvaCheckboxContainer = cvaMerge([
-    "grid",
-    "outline-none",
-    "grid-cols-min-fr",
     "items-center",
     "gap-2",
-    "cursor-pointer",
     "group",
+    "grid",
+    "grid-cols-min-fr",
+    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
 ]);
 const cvaCheckboxInput = cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
 const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
@@ -548,9 +547,11 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className,
  * @param {CheckboxProps} props - The props for the Checkbox component
  * @returns {JSX.Element} Checkbox component
  */
-const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation, ...rest }, ref) => {
+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.current);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
         var _a, _b;
@@ -562,20 +563,15 @@ const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChang
             (_b = 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", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsx("span", { className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label ? (jsx("span", { className: "flex", children: jsx("span", { className: cvaLabel({
+                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label ? (jsx(Tooltip, { className: "w-full", disabled: !textIsCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
-                        className: "cursor-pointer",
-                    }), id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), children: label }) })) : null, suffix] }));
+                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix] }));
 });
 Checkbox.displayName = "Checkbox";
 
@@ -1401,9 +1397,25 @@ const cvaRadioItem = cvaMerge([
         },
     ],
 });
-const cvaRadioItemWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
-const cvaRadioItemLabelContainer = cvaMerge(["gap-y-1", "grid"]);
-const cvaRadioItemDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
+const cvaRadioItemWrapper = cvaMerge([
+    "items-center",
+    "gap-2",
+    "group",
+    "grid",
+    "grid-cols-min-fr",
+    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
+]);
+const cvaRadioItemLabelContainer = cvaMerge(["grid", "flex-grow"]);
+const cvaRadioItemDescription = cvaMerge([
+    "-mt-1",
+    "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"],
@@ -1444,14 +1456,21 @@ RadioGroup.displayName = "RadioGroup";
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {JSX.Element} RadioItem component
  */
-const RadioItem = ({ label, value, dataTestId, className, description, }) => {
+const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = React.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 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({
                     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 }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx(Label, { dataTestId: dataTestId ? `${dataTestId}-Label` : undefined, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description ? (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}`, children: description })) : null] })] }));
+                }), "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: cvaRadioItemLabelContainer(), 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] }));
 };
 
 const cvaTimeRange = cvaMerge([
@@ -1827,8 +1846,8 @@ const getOrderedOptions = (options, value) => {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focusRing, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1836,8 +1855,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focu
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focusRing, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -1,6 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
 import * as React from "react";
-export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxProps extends CommonProps, MappedOmit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * A string element to be displayed as a label
      */
@@ -30,10 +31,6 @@ 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;
     /**
      * An boolean flag to stop propagation of the click event
      */

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

@@ -1,6 +1,7 @@
 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 {
+export interface RadioItemProps<V extends string | number = string> extends CommonProps, MappedOmit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * The label of the radio item.
      */
@@ -13,6 +14,10 @@ export interface RadioItemProps<V extends string | number = string> extends Comm
      * The description of the radio item.
      */
     description?: string;
+    /**
+     * An element to display after the label
+     */
+    suffix?: React.ReactNode;
 }
 /**
  * The RadioItem component.
@@ -20,4 +25,4 @@ export interface RadioItemProps<V extends string | number = string> extends Comm
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {JSX.Element} RadioItem component
  */
-export declare const RadioItem: <V extends string | number>({ label, value, dataTestId, className, description, }: RadioItemProps<V>) => JSX.Element;
+export declare const RadioItem: <V extends string | number>({ label, value, dataTestId, className, description, suffix, ...rest }: RadioItemProps<V>) => JSX.Element;

package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -14,11 +14,6 @@ interface SelectMenuItemProps extends CommonProps {
      * A boolean prop to set menu item to selected state
      */
     selected?: boolean;
-    /**
-     * A boolean prop to allow menu item to have focus ring
-     * used for keyboard navigation
-     */
-    focusRing?: boolean;
     /**
      * A boolean prop to set menu item to disabled state
      * used in disabled select options
@@ -38,12 +33,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focusRing, disabled, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, disabled, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, focusRing, disabled, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, disabled }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};