@trackunit/react-form-components 0.0.453 → 0.0.455

package/index.esm.js

@@ -4,7 +4,7 @@ import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner, useIs
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useCallback, useRef, cloneElement, useEffect, useMemo, useImperativeHandle } from 'react';
+import React__default, { isValidElement, forwardRef, useState, useCallback, useRef, cloneElement, useEffect, useMemo, useImperativeHandle } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
 import { isValidDate } from 'rxjs/internal/util/isDate';
@@ -180,21 +180,56 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+/**
+ * Used to compare two React nodes for deep equality.
+ */
+const compareReactNodes = (node1, node2) => {
+    // Base case: If both objects are identical, return true.
+    if (node1 === node2) {
+        return true;
+    }
+    // Check if both objects are valid React elements.
+    if (isValidElement(node1) && isValidElement(node2)) {
+        const { type: type1, props: props1, key: key1 } = node1;
+        const { type: type2, props: props2, key: key2 } = node2;
+        if (type1 !== type2 || key1 !== key2) {
+            return false;
+        }
+        return compareReactNodes(props1, props2);
+    }
+    // Check if both objects are objects and not null.
+    if (typeof node1 !== "object" || typeof node2 !== "object" || node1 === null || node2 === null) {
+        return false;
+    }
+    // Get the keys of both objects.
+    const keys1 = Object.keys(node1);
+    const keys2 = Object.keys(node2);
+    // Check if the number of keys is the same.
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    // Iterate through the keys and compare their values recursively.
+    for (const key of keys1) {
+        if (!keys2.includes(key) ||
+            !compareReactNodes(node1[key], node2[key])) {
+            return false;
+        }
+    }
+    // If all checks pass, the objects are deep equal.
+    return true;
+};
+
 const cvaInputBase = cvaMerge([
     "component-baseInput-shadow",
     "component-baseInput-border",
     "component-baseInput-background",
     "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-inset",
-    "focus-within:ring-primary-500",
-    "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
     "transition",
 ]);
 const cvaInputBaseDisabled = cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
-const cvaInputBaseInvalid = cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
+const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
 const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
@@ -203,24 +238,15 @@ const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
         },
         disabled: {
             true: cvaInputBaseDisabled(),
-            false: "",
+            false: [""],
         },
         invalid: {
             true: cvaInputBaseInvalid(),
-            false: "",
+            false: [""],
         },
     },
 });
-const cvaInputField = cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-base",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "focus-visible:outline-none",
-], {
+const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
     variants: {
         size: {
             small: ["py-1"],
@@ -228,9 +254,28 @@ const cvaInputField = cvaMerge([
         },
         disabled: {
             true: ["text-slate-700"],
-            false: "",
+            false: [""],
+        },
+        autoFocus: {
+            true: [""],
+            false: ["focus-visible:outline-none"],
+        },
+        addonBefore: {
+            true: [""],
+            false: [""],
+        },
+        prefix: {
+            true: ["ps-10"],
+            false: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonBefore: true,
+            prefix: true,
+            className: ["ps-4"],
+        },
+    ],
 });
 const cvaInputAddon = cvaMerge([
     "flex",
@@ -242,7 +287,6 @@ const cvaInputAddon = cvaMerge([
     "bg-slate-50",
 ]);
 const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
-const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
 const cvaInputPrefix = cvaMerge([
     "flex",
     "justify-center",
@@ -252,21 +296,62 @@ const cvaInputPrefix = cvaMerge([
     "component-baseInput-prefix",
     "component-search-borderless",
     "pl-3",
+    "absolute",
+    "inset-y-0",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            false: [""],
+        },
+        addonBefore: {
+            true: ["relative"],
+            false: [""],
         },
     },
 });
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            false: [""],
+        },
+        addonAfter: {
+            true: ["relative"],
+            false: [""],
+        },
+        actions: {
+            true: ["right-10"],
+            false: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonAfter: true,
+            actions: true,
+            className: ["right-0"],
+        },
+    ],
+});
+const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"]);
+const cvaInputAction = cvaMerge(["absolute", "end-0.5"], {
+    variants: {
+        addonAfter: {
+            true: ["relative"],
+            false: [""],
+        },
+        suffix: {
+            true: ["absolute"],
+            false: [""],
+        },
+    },
+    compoundVariants: [
+        {
+            addonAfter: true,
+            suffix: true,
+            className: ["relative"],
+        },
+    ],
 });
 
 /**
@@ -289,14 +374,27 @@ const BaseInput = React.forwardRef((_a, ref) => {
             invalid: isInvalid,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [addonBefore ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx("div", { className: cvaInputPrefix({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [addonBefore ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
-                }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsx("input", Object.assign({ "aria-required": rest.required, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
+                    addonBefore: addonBefore !== undefined,
+                }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsx("input", Object.assign({ "aria-required": rest.required, className: cvaInputField({
+                    autoFocus: rest.autoFocus,
+                    size: fieldSize,
                     disabled: renderAsDisabled,
+                    className: inputClassName,
+                    addonBefore: addonBefore !== undefined,
+                    prefix: !compareReactNodes(addonBefore, prefix),
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { disabled: renderAsDisabled, readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
+                    disabled: renderAsDisabled,
+                    addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
+                    actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
                 }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null, rest.readOnly === true &&
                 showDefaultActions &&
                 ((_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
-                innerRef.current.value.length > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter })) : null] }));
+                innerRef.current.value.length > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && !compareReactNodes(addonBefore, actions) ? (jsx("div", { className: cvaInputAction({
+                    addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
+                    suffix: !compareReactNodes(addonBefore, suffix),
+                }), children: actions })) : null, addonAfter && !compareReactNodes(addonBefore, addonAfter) && !compareReactNodes(addonAfter, suffix) ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter })) : null] }));
 });
 BaseInput.displayName = "BaseInput";
 
@@ -351,15 +449,11 @@ const cvaCheckbox = cvaMerge([
     "justify-center",
     "box-border",
     "transition",
-    "focus:bg-slate-200",
     "outline-0",
     "active:bg-slate-200",
     "active:ring-2",
     "active:ring-inset",
     "active:ring-primary-700",
-    "focus:ring-2",
-    "focus:ring-inset",
-    "focus:ring-primary-700",
     "cursor-pointer",
     "group-active:ring-2",
     "group-active:ring-inset",
@@ -367,13 +461,7 @@ const cvaCheckbox = cvaMerge([
 ], {
     variants: {
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700", "group-focus:ring-2", "group-focus:ring-inset"],
             false: "",
         },
         state: {
@@ -383,11 +471,8 @@ const cvaCheckbox = cvaMerge([
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
                 "active:bg-primary-700",
-                "focus:bg-primary-700",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
-                "group-focus:bg-primary-700",
-                "group-focus:border-primary-700",
             ],
             deselected: ["group-hover:bg-slate-100"],
             indeterminate: [
@@ -395,14 +480,10 @@ const cvaCheckbox = cvaMerge([
                 "border-primary-600",
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
-                "focus:bg-primary-800",
-                "focus:border-primary-800",
                 "active:bg-primary-800",
                 "active:border-primary-800",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
-                "group-focus:bg-primary-800",
-                "group-focus:border-primary-800",
             ],
         },
         disabled: {
@@ -410,13 +491,8 @@ const cvaCheckbox = cvaMerge([
                 "bg-slate-300",
                 "border-slate-300",
                 "cursor-not-allowed",
-                "group-hover:bg-slate-300",
-                "group-focus:bg-slate-300",
                 "hover:bg-slate-300",
-                "focus:bg-slate-300",
                 "active:bg-slate-300",
-                "focus:ring-0",
-                "focus:ring-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -777,7 +853,7 @@ const validateEmailAddress = (email) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange", "disableAction"]);
     const [email, setEmail] = React.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -788,7 +864,7 @@ const EmailInput = React.forwardRef((_a, ref) => {
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsx(BaseInput, Object.assign({ actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disabled, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
+    return (jsx(BaseInput, Object.assign({ actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
 });
 EmailInput.displayName = "EmailInput";
 
@@ -1015,7 +1091,7 @@ const PhoneInput = forwardRef((_a, ref) => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, Object.assign({ actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
+    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, Object.assign({ actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
 });
 PhoneInput.displayName = "PhoneInput";
 
@@ -1116,9 +1192,6 @@ const cvaRadioItem = cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
-    "focus:ring-2",
-    "focus:ring-inset",
-    "focus:ring-primary-700",
 ], {
     variants: {
         checked: {
@@ -1134,10 +1207,6 @@ const cvaRadioItem = cvaMerge([
                 "active:ring-2",
                 "active:ring-inset",
                 "active:ring-primary-700",
-                "focus:bg-slate-200",
-                "focus:ring-2",
-                "focus:ring-inset",
-                "focus:ring-primary-700",
                 "group-active:ring-2",
                 "group-active:ring-inset",
                 "group-active:ring-primary-700",
@@ -1145,13 +1214,7 @@ const cvaRadioItem = cvaMerge([
             false: "",
         },
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700"],
             false: "",
         },
         disabled: {
@@ -1159,13 +1222,8 @@ const cvaRadioItem = cvaMerge([
                 "bg-slate-400",
                 "border-slate-300",
                 "cursor-not-allowed",
-                "group-hover:bg-slate-400",
-                "group-focus:bg-slate-400",
                 "hover:bg-slate-400",
-                "focus:bg-slate-400",
                 "active:bg-slate-400",
-                "focus:ring-0",
-                "focus:ring-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -1415,21 +1473,13 @@ const cvaSearch = cvaMerge([
     "component-search-background",
     "hover:component-search-background",
     "hover:component-search-focus-hover",
-    "focus:component-search-focus-hover",
-    "focus-within:component-search-focus-within",
     "transition-all",
     "duration-300",
 ], {
     variants: {
         border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
-            true: [
-                "component-search-width",
-                "component-search-widen",
-                "hover:component-search-widen",
-                "focus-within:component-search-widen-focus",
-                "focus-within:w-full",
-            ],
+            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
             false: "w-full",
         },
     },
@@ -1454,25 +1504,19 @@ const cvaSelect = cvaMerge([
     "flex",
     "shadow-sm",
     "rounded-lg",
-    "border",
     "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-inset",
-    "focus-within:ring-primary-600",
-    "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
     "bg-white",
     "transition",
-    "overflow-hidden",
 ], {
     variants: {
         invalid: {
-            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            true: "border border-red-600 text-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100",
+            true: "!bg-slate-100 hover:border-slate-300",
             false: "",
         },
     },
@@ -1481,10 +1525,56 @@ const cvaSelect = cvaMerge([
         disabled: false,
     },
 });
-const cvaSelectIcon = cvaMerge(["mr-2", "flex", "cursor-pointer", "items-center", "justify-center", "text-slate-400", "hover:text-slate-500"]);
-const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
-const cvaSelectXIcon = cvaMerge(["mr-2", "flex", "cursor-pointer", "items-center", "justify-center", "text-slate-400", "hover:text-slate-500", "ml-1"]);
-const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+const cvaSelectControl = cvaMerge([], {
+    variants: {
+        isDisabled: {
+            true: "!bg-slate-100",
+            false: "",
+        },
+        prefix: {
+            true: ["ps-7"],
+            false: "",
+        },
+        invalid: {
+            true: "!border-0",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        isDisabled: false,
+        prefix: false,
+        invalid: false,
+    },
+});
+const cvaSelectIcon = cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-slate-400",
+    "hover:text-slate-500",
+]);
+const cvaSelectPrefix = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "text-slate-400",
+    "pl-2",
+    "absolute",
+    "inset-y-0",
+]);
+const cvaSelectXIcon = cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-slate-400",
+    "hover:text-slate-500",
+    "ml-1",
+]);
+const cvaSelectMenuList = cvaMerge([], {
     variants: {
         menuIsOpen: {
             true: "animate-fade-in-fast",
@@ -1667,7 +1757,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  *  @param {JSX.Element} dropdownIcon an custom dropdown icon
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
@@ -1718,7 +1808,11 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 }
                 return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsx(Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
             }, Control: props => {
-                return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
+                return (jsx(components.Control, Object.assign({}, props, { className: cvaSelectControl({
+                        isDisabled: props.isDisabled,
+                        prefix: prefix ? true : false,
+                        invalid: hasError,
+                    }) })));
             }, SingleValue: props => {
                 return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
             }, Menu: props => {
@@ -1758,18 +1852,16 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
 const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
     const customStyles = React.useMemo(() => {
         return Object.assign({ control: base => {
-                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
-                        border: "0",
-                    }, backgroundColor: "" });
+                return Object.assign(Object.assign({}, base), { borderRadius: "var(--border-radius-lg)", backgroundColor: "" });
             }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign(Object.assign({}, base), (disabled && { display: "none" }))), indicatorSeparator: () => ({
                 width: "0px",
             }), menu: base => {
                 return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
-            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width, transform: refPrefix.current ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
+            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width, transform: "translate(0px, 0px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
                 return Object.assign(Object.assign({}, base), { position: "relative", padding: "var(--spacing-1)", display: "grid", gap: "var(--spacing-1)", width: "100%", borderRadius: "0px", boxShadow: "none", paddingTop: "0px" });
             }, valueContainer: base => {
                 return Object.assign(Object.assign({}, base), { flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap", gap: "0.25rem" });
-            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
+            }, container: base => (Object.assign(Object.assign({}, base), { width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
                 return Object.assign(Object.assign({}, base), { padding: "0px" });
             } }, styles);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1791,7 +1883,7 @@ const useSelect = (_a) => {
     const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
     const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
     const refMenuIsEnabled = React__default.useRef(true);
-    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError);
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
         onMenuOpen && onMenuOpen();
@@ -1864,6 +1956,8 @@ const CreatableSelect = (props) => {
         onInputChange,
         allowCreateWhileLoading,
         onCreateOption,
+        isDisabled: disabled || props.isDisabled,
+        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
     return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactCreatableSelect, Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
@@ -1907,6 +2001,8 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
         hideSelectedOptions,
+        isDisabled: disabled || props.isDisabled,
+        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
     return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, rest, selectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactSelect, Object.assign({}, rest, selectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
@@ -2007,7 +2103,6 @@ const cvaTextArea = cvaMerge([
     "text-base",
     "text-slate-900",
     "placeholder-slate-400",
-    "focus-visible:outline-none",
     "w-full",
     "h-20",
     "transition",
@@ -2086,7 +2181,7 @@ const TextField = React.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
-            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(TextInput, Object.assign({ "aria-labelledby": htmlFor + "-label", disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(TextInput, Object.assign({ "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
 });
 TextField.displayName = "TextField";
 
@@ -2105,16 +2200,7 @@ const TimeRangeField = (_a) => {
 
 const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
 cvaMerge(["relative"]);
-const cvaToggleTrack = cvaMerge([
-    "shrink-0",
-    "p-1",
-    "cursor-pointer",
-    "rounded-full",
-    "bg-slate-300",
-    "focus:bg-slate-400",
-    "hover:bg-slate-400",
-    "active:bg-slate-500",
-], {
+const cvaToggleTrack = cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
     variants: {
         size: {
             small: ["w-8", "h-4"],
@@ -2125,7 +2211,7 @@ const cvaToggleTrack = cvaMerge([
             false: "",
         },
         toggled: {
-            true: ["bg-primary-600", "focus:bg-primary-700", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
             false: "",
         },
     },
@@ -2246,7 +2332,7 @@ const UrlInput = forwardRef((_a, ref) => {
     var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
     const [url, setUrl] = useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }, rest, { actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disabled, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
+    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }, rest, { actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
 });
 UrlInput.displayName = "UrlField";
 
@@ -2263,7 +2349,7 @@ const UrlField = forwardRef((_a, ref) => {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 UrlField.displayName = "UrlField";
 
@@ -2371,4 +2457,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

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