@trackunit/react-form-components 1.0.19 → 1.0.23

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([
@@ -1934,7 +1931,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
  * @param {boolean} menuIsOpen menu is open state
- * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
  * @param {JSX.Element} dropdownIcon an custom dropdown icon
@@ -1945,7 +1942,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
 const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, getOptionLabelDescription, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
-    const customComponents = React__namespace.useMemo(() => {
+    const customComponents = React.useMemo(() => {
         return {
             ValueContainer: props => {
                 if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
@@ -1994,7 +1991,12 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
+                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...props, innerProps: {
+                        ...props.innerProps,
+                        onMouseDown: e => {
+                            e.preventDefault();
+                        },
+                    }, children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
             },
             Control: props => {
                 return (jsxRuntime.jsx(ReactSelect.components.Control, { ...props, className: cvaSelectControl({

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([
@@ -1915,7 +1912,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
  * @param {boolean} menuIsOpen menu is open state
- * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
  * @param {JSX.Element} dropdownIcon an custom dropdown icon
@@ -1926,7 +1923,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
 const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, getOptionLabelDescription, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
-    const customComponents = React.useMemo(() => {
+    const customComponents = useMemo(() => {
         return {
             ValueContainer: props => {
                 if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
@@ -1975,7 +1972,12 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsx(components.ClearIndicator, { ...props, children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsx(Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
+                return (jsx(components.ClearIndicator, { ...props, innerProps: {
+                        ...props.innerProps,
+                        onMouseDown: e => {
+                            e.preventDefault();
+                        },
+                    }, children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsx(Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
             },
             Control: props => {
                 return (jsx(components.Control, { ...props, className: cvaSelectControl({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.0.19",
+  "version": "1.0.23",
   "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.1",
-    "@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.2",
+    "@trackunit/react-components": "^1.1.5",
+    "@trackunit/ui-icons": "^1.0.5",
+    "@trackunit/shared-utils": "^1.1.1",
+    "@trackunit/i18n-library-translation": "^1.0.11"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { MutableRefObject } from "react";
 import { GroupBase } from "react-select";
 import { SelectComponents } from "react-select/dist/declarations/src/components";
 /**
@@ -10,7 +10,7 @@ import { SelectComponents } from "react-select/dist/declarations/src/components"
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
  * @param {boolean} menuIsOpen menu is open state
- * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
  * @param {JSX.Element} dropdownIcon an custom dropdown icon
@@ -22,7 +22,7 @@ export declare const useCustomComponents: <Option, IsMulti extends boolean = fal
     componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
     disabled: boolean;
     readOnly: boolean;
-    refMenuIsEnabled: React.MutableRefObject<boolean>;
+    refMenuIsEnabled: MutableRefObject<boolean>;
     dataTestId: string;
     maxSelectedDisplayCount: number | undefined;
     dropdownIcon?: JSX.Element;

package/src/components/SelectField/CreatableSelectField.d.ts

@@ -12,9 +12,9 @@ import { BaseOptionType } from "./FormFieldSelectAdapter";
  */
 export declare const CreatableSelectField: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
     label: string | React.ReactNode;
-    tip?: string | React.ReactNode;
-    helpText?: (string | null) | undefined;
-    helpAddon?: string | React.ReactNode;
+    tip?: import("react").ReactNode;
+    helpText?: string | null | undefined;
+    helpAddon?: import("react").ReactNode;
     isInvalid?: boolean | undefined;
 } & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;

package/src/components/SelectField/SelectField.d.ts

@@ -11,9 +11,9 @@ import { BaseOptionType } from "./FormFieldSelectAdapter";
  */
 export declare const SelectField: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
     label: string | React.ReactNode;
-    tip?: string | React.ReactNode;
-    helpText?: (string | null) | undefined;
-    helpAddon?: string | React.ReactNode;
+    tip?: import("react").ReactNode;
+    helpText?: string | null | undefined;
+    helpAddon?: import("react").ReactNode;
     isInvalid?: boolean | undefined;
 } & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;