@trackunit/react-form-components 0.0.271 → 0.0.273

package/index.cjs.js

@@ -553,13 +553,13 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
 
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
  *
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsxRuntime.jsx(reactComponents.Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: tipIconProps, children: tip }))] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" }))] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
 
 /**
@@ -1072,7 +1072,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
             return (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: "inline-flex shrink-0", onClose: e => {
                     e.stopPropagation();
                     item.onClick();
-                }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text, disabled: disabled, children: item.text }, item.text + index));
+                }, color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, children: item.text }, item.text + index));
         }
         const fromTheItems = item.text !== "";
         if (fromTheItems) {
@@ -1133,8 +1133,8 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
                                                 ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
-                                            }, color: disabled ? "unknown" : "primary", dataTestId: (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString(), children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
-                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
+                                            }, color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
                 }
                 return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
 import React__default, { useMemo, forwardRef, useCallback, cloneElement, useState, useEffect, useRef } from 'react';
@@ -523,13 +523,13 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
 
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
  *
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, }) => {
-    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: tipIconProps, children: tip }))] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
+    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsx(Tooltip, { dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" }))] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
 
 /**
@@ -1042,7 +1042,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
             return (jsx(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: "inline-flex shrink-0", onClose: e => {
                     e.stopPropagation();
                     item.onClick();
-                }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text, disabled: disabled, children: item.text }, item.text + index));
+                }, color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, children: item.text }, item.text + index));
         }
         const fromTheItems = item.text !== "";
         if (fromTheItems) {
@@ -1103,8 +1103,8 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
                                                 ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
-                                            }, color: disabled ? "unknown" : "primary", dataTestId: (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString(), children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
-                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
+                                            }, color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
                 }
                 return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {

package/package.json

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

package/src/components/FormGroup/FormGroup.d.ts

@@ -35,7 +35,7 @@ export interface FormGroupProps extends CommonProps {
 }
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
  *
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./useSelect";
-export interface SelectOption<T extends string> {
+export interface SelectOption<T extends string | number> {
     label: string;
     value: T;
     disabled?: boolean;