@trackunit/react-form-components 1.0.19 → 1.0.20

package/index.cjs.js

@@ -1934,7 +1934,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 +1945,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 +1994,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

@@ -1915,7 +1915,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 +1926,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 +1975,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.20",
   "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.1.1",
+    "@trackunit/react-components": "^1.1.2",
     "@trackunit/ui-icons": "^1.0.4",
     "@trackunit/shared-utils": "^1.0.3",
     "@trackunit/i18n-library-translation": "^1.0.8"

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;