@trackunit/react-form-components 0.0.460 → 0.0.462

package/index.cjs.js

@@ -10,7 +10,6 @@ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities
 var React = require('react');
 var uuid = require('uuid');
 var dateFns = require('date-fns');
-var isDate = require('rxjs/internal/util/isDate');
 var parsePhoneNumberFromString = require('libphonenumber-js');
 var reactHookForm = require('react-hook-form');
 var ReactSelect = require('react-select');
@@ -53,6 +52,8 @@ var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
 	"dropzone.input.title": "Drag-and-drop file input",
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
+	"field.notEditable.tooltip": "This field is not editable",
+	"field.required.asterisk.tooltip": "This field is required",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -384,6 +385,22 @@ const cvaInputAction = cssClassVarianceUtilities.cvaMerge(["absolute", "end-0.5"
     ],
 });
 
+/**
+ * Icon with explanation tooltip for why an input is locked or disabled.
+ * If locked, a permission lacks but the input **can** sometimes be edited.
+ * If disabled, the input **cannot** be edited and is only ever for displaying information.
+ *
+ * @param {DisabledForReasons} props - The reasons for the disabled state.
+ * @param {DisabledKind} kind - The kind of disabled state. If locked, the input can sometimes be edited. If disabled, the input cannot be edited.
+ */
+const DisabledForReasonsTip = ({ reasons, kind }) => {
+    const [t] = useTranslation();
+    if (!reasons || reasons.length === 0) {
+        jsxRuntime.jsx(reactComponents.Tooltip, { label: t("field.notEditable.tooltip"), children: jsxRuntime.jsx(reactComponents.Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) });
+    }
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: jsxRuntime.jsx("ul", { className: typeof reasons === "string" || (reasons === null || reasons === void 0 ? void 0 : reasons.length) === 1 ? "list-inside" : "list-disc", children: typeof reasons === "string" ? jsxRuntime.jsx("li", { children: reasons }) : reasons === null || reasons === void 0 ? void 0 : reasons.map(reason => jsxRuntime.jsx("li", { children: reason }, reason)) }), placement: "top", children: jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) }));
+};
+
 /**
  * A base input component that can be used for text inputs, password inputs, etc.
  * A reference to the input element is provided as the `ref` prop.
@@ -395,7 +412,7 @@ const cvaInputAction = cssClassVarianceUtilities.cvaMerge(["absolute", "end-0.5"
 const BaseInput = React__namespace.forwardRef((_a, ref) => {
     var _b;
     var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "inputClassName", "placeholder", "addonBeforeClassName"]);
-    const renderAsDisabled = rest.disabled || rest.readOnly;
+    const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
     const innerRef = React__namespace.useRef(null);
     // eslint-disable-next-line local-rules/no-typescript-assertion
     React__namespace.useImperativeHandle(ref, () => innerRef.current, []);
@@ -414,7 +431,9 @@ const BaseInput = React__namespace.forwardRef((_a, ref) => {
                     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 ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { disabled: renderAsDisabled, readOnly: rest.readOnly || nonInteractive })), typeof rest.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
+                    disabled: false,
+                }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsxRuntime.jsx(DisabledForReasonsTip, Object.assign({}, rest.disabled)) })) : null, suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
                     addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
                     actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
@@ -631,14 +650,7 @@ const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInval
     return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
 };
 
-const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap"], {
-    variants: {
-        disabled: {
-            true: "pointer-events-none",
-            false: "",
-        },
-    },
-});
+const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap"]);
 const cvaFormGroupContainerBefore = cssClassVarianceUtilities.cvaMerge(["flex", "mb-1", "items-center"]);
 const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
     variants: {
@@ -657,8 +669,9 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
  * @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, required = false, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? jsxRuntime.jsx("span", { className: "required-asterisk", children: "*" }) : null] })) : null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText ? jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText }) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })] }));
+const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
+    const [t] = useTranslation();
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText ? jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText }) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })] }));
 };
 
 /**
@@ -669,7 +682,7 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
 const CheckboxField = React.forwardRef((_a, ref) => {
     var { label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "helpAddon", "isInvalid", "className", "checked", "dataTestId", "checkboxLabel", "onChange"]);
     const htmlForId = id ? id : "checkboxField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
+    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
 });
 CheckboxField.displayName = "CheckboxField";
 
@@ -704,11 +717,11 @@ const ColorField = React.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     const renderAsInvalid = !!errorMessage || (value && typeof value === "string" && !isValidHEXColor(value)) || isInvalid;
-    return (jsxRuntime.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: jsxRuntime.jsxs("div", { className: cvaInput({
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput({
                 disabled: false,
                 invalid: false,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : null, onChange: handleChange, type: "text", value: value }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onChange: handleChange, type: "text", value: value }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
                         if (innerRef.current) {
                             innerRef.current.click();
                         }
@@ -723,7 +736,7 @@ ColorField.displayName = "ColorField";
  */
 const DateInput = React.forwardRef((_a, ref) => {
     var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
-    const formatDateToInputString = (date) => isDate.isValidDate(date) ? dateFns.format(date, "yyyy-MM-dd") : date;
+    const formatDateToInputString = (date) => date instanceof Date ? dateFns.format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
     return (jsxRuntime.jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value) }, rest)));
@@ -741,7 +754,7 @@ const DateField = React.forwardRef((_a, ref) => {
     var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "dateField-" + uuid.v4();
-    return (jsxRuntime.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: jsxRuntime.jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 DateField.displayName = "DateField";
 
@@ -916,7 +929,7 @@ const EmailField = React.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 EmailField.displayName = "EmailField";
 
@@ -1145,7 +1158,7 @@ const PhoneField = React.forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onChange, onBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "name", "onChange", "onBlur"]);
     const htmlForId = id ? id : "phoneField-" + uuid.v4();
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.jsx(FormGroup, { className: className, 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: jsxRuntime.jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
+    return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
 });
 PhoneField.displayName = "PhoneField";
 
@@ -1585,15 +1598,14 @@ const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge([
     "text-slate-400",
     "hover:text-slate-500",
 ]);
-const cvaSelectPrefix = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "text-slate-400",
-    "pl-2",
-    "absolute",
-    "inset-y-0",
-]);
+const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "absolute", "inset-y-0"], {
+    variants: {
+        kind: {
+            prefix: ["pl-3", "left-0"],
+            suffix: ["pr-3", "right-0"],
+        },
+    },
+});
 const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
     "mr-2",
     "flex",
@@ -1784,10 +1796,12 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {React.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
+ * @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @param {boolean} hasError decide to override hasError variant
+ * @param {JSX.Element} prefix a prefix element
  * @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, prefix, hasError) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, 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__namespace.useMemo(() => {
@@ -1827,11 +1841,11 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                     : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) })));
                 }
                 return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
-            }, LoadingIndicator: props => {
-                return jsxRuntime.jsx(reactComponents.Spinner, { className: "mr-1 mt-1.5", size: "small" });
+            }, LoadingIndicator: () => {
+                return jsxRuntime.jsx(reactComponents.Spinner, { centering: "vertically", className: "mr-2", size: "small" });
             }, DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon !== null && dropdownIcon !== void 0 ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
@@ -1879,7 +1893,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
+const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, }) => {
     const customStyles = React__namespace.useMemo(() => {
         return Object.assign({ control: base => {
                 return Object.assign(Object.assign({}, base), { borderRadius: "var(--border-radius-lg)", backgroundColor: "" });
@@ -1887,7 +1901,7 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
                 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: "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 => {
+            }, 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, 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" });
@@ -1903,20 +1917,36 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
  * A hook used by selects to share the common code
  *
  * @param {SelectProps} props - The props for the Select component
- * @returns {IUseSelect} Select component
+ * @returns {UseSelectProps} Select component
  */
 const useSelect = (_a) => {
     var _b;
     var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
     const refContainer = React__default["default"].useRef(null);
     const refPrefix = React__default["default"].useRef(null);
-    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
+    const { customStyles } = useCustomStyles({
+        refContainer,
+        refPrefix,
+        maxSelectedDisplayCount,
+        styles,
+        disabled: Boolean(disabled),
+    });
     const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
     const refMenuIsEnabled = React__default["default"].useRef(true);
-    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError);
+    const customComponents = useCustomComponents({
+        componentsProps: components,
+        disabled: Boolean(disabled),
+        readOnly: Boolean(props.readOnly),
+        refMenuIsEnabled,
+        dataTestId,
+        maxSelectedDisplayCount,
+        dropdownIcon,
+        prefix,
+        hasError,
+    });
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
-        onMenuOpen && onMenuOpen();
+        onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
         if (refMenuIsEnabled.current) {
             setMenuIsOpen(true);
         }
@@ -1955,10 +1985,9 @@ const useSelect = (_a) => {
  * @returns {JSX.Element} CreatableSelect component
  */
 const CreatableSelect = (props) => {
-    const { className, placeholder } = props, rest = __rest(props, ["className", "placeholder"]);
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId, onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = rest;
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const creatableSelectProps = {
+    const reactCreatableSelectProps = React.useMemo(() => ({
         value,
         menuPlacement,
         maxMenuHeight,
@@ -1986,11 +2015,35 @@ const CreatableSelect = (props) => {
         onInputChange,
         allowCreateWhileLoading,
         onCreateOption,
-        isDisabled: disabled || props.isDisabled,
+        isDisabled: Boolean(disabled),
+    }), [
+        allowCreateWhileLoading,
+        classNamePrefix,
+        customComponents,
+        customStyles,
+        dataTestId,
+        disabled,
+        id,
+        isClearable,
+        isLoading,
+        isMulti,
+        isSearchable,
+        label,
+        maxMenuHeight,
+        menuIsOpen,
+        menuPlacement,
+        onChange,
+        onCreateOption,
+        onInputChange,
+        onMenuScrollToBottom,
+        openMenuOnClick,
+        openMenuOnFocus,
+        props.menuPortalTarget,
         readOnly,
-    };
-    const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
+        value,
+    ]);
+    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({}, props, reactCreatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, props, reactCreatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder }))), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, Object.assign({}, props.disabled)) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -2001,10 +2054,9 @@ CreatableSelect.displayName = "CreatableSelect";
  * @returns {JSX.Element} Select component
  */
 const Select = (props) => {
-    const { className, placeholder } = props, rest = __rest(props, ["className", "placeholder"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = dataTestId, onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const selectProps = {
+    const reactSelectProps = React.useMemo(() => ({
         value,
         menuPlacement,
         maxMenuHeight,
@@ -2031,11 +2083,34 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
         hideSelectedOptions,
-        isDisabled: disabled || props.isDisabled,
+        isDisabled: Boolean(disabled),
+    }), [
+        classNamePrefix,
+        customComponents,
+        customStyles,
+        dataTestId,
+        disabled,
+        hideSelectedOptions,
+        id,
+        isClearable,
+        isLoading,
+        isMulti,
+        isSearchable,
+        label,
+        maxMenuHeight,
+        menuIsOpen,
+        menuPlacement,
+        onChange,
+        onInputChange,
+        onMenuScrollToBottom,
+        openMenuOnClick,
+        openMenuOnFocus,
+        props.menuPortalTarget,
         readOnly,
-    };
-    const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, rest, selectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, rest, selectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
+        value,
+    ]);
+    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, props, reactSelectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, props, reactSelectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder }))), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(DisabledForReasonsTip, Object.assign({}, props.disabled)) })) : null] }));
 };
 Select.displayName = "Select";
 
@@ -2078,10 +2153,11 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
         helpText: (renderAsInvalid && errorMessage) || helpText,
         helpAddon,
         tip,
-        label,
-        disabled, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
+        label, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, disabled: Boolean(disabled), children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
+                }) }), children(Object.assign(Object.assign({}, rest), { id,
+                disabled,
+                onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
                     // If theres no value, set the inner value to an empty string
                     // A native select can not have a null value
                     // So even if react-select sends a null value, we need to convert it to an empty string
@@ -2222,10 +2298,10 @@ TextField.displayName = "TextField";
  * @returns {JSX.Element} TimeRangeField component
  */
 const TimeRangeField = (_a) => {
-    var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "disabled", "children", "helpText", "id"]);
+    var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "children", "helpText", "id"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: disabled, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
 };
 
 const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
@@ -2379,7 +2455,7 @@ const UrlField = React.forwardRef((_a, ref) => {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsxRuntime.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: jsxRuntime.jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.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";
 
@@ -2556,7 +2632,7 @@ exports.cvaSelectDynamicTagContainer = cvaSelectDynamicTagContainer;
 exports.cvaSelectIcon = cvaSelectIcon;
 exports.cvaSelectMenu = cvaSelectMenu;
 exports.cvaSelectMenuList = cvaSelectMenuList;
-exports.cvaSelectPrefix = cvaSelectPrefix;
+exports.cvaSelectPrefixSuffix = cvaSelectPrefixSuffix;
 exports.cvaSelectXIcon = cvaSelectXIcon;
 exports.getCountryAbbreviation = getCountryAbbreviation;
 exports.getOrderedOptions = getOrderedOptions;

package/index.esm.js

@@ -7,7 +7,6 @@ import * as React 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';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
 import { Controller } from 'react-hook-form';
 import ReactSelect, { components } from 'react-select';
@@ -23,6 +22,8 @@ var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
 	"dropzone.input.title": "Drag-and-drop file input",
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
+	"field.notEditable.tooltip": "This field is not editable",
+	"field.required.asterisk.tooltip": "This field is required",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -354,6 +355,22 @@ const cvaInputAction = cvaMerge(["absolute", "end-0.5"], {
     ],
 });
 
+/**
+ * Icon with explanation tooltip for why an input is locked or disabled.
+ * If locked, a permission lacks but the input **can** sometimes be edited.
+ * If disabled, the input **cannot** be edited and is only ever for displaying information.
+ *
+ * @param {DisabledForReasons} props - The reasons for the disabled state.
+ * @param {DisabledKind} kind - The kind of disabled state. If locked, the input can sometimes be edited. If disabled, the input cannot be edited.
+ */
+const DisabledForReasonsTip = ({ reasons, kind }) => {
+    const [t] = useTranslation();
+    if (!reasons || reasons.length === 0) {
+        jsx(Tooltip, { label: t("field.notEditable.tooltip"), children: jsx(Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) });
+    }
+    return (jsx(Tooltip, { label: jsx("ul", { className: typeof reasons === "string" || (reasons === null || reasons === void 0 ? void 0 : reasons.length) === 1 ? "list-inside" : "list-disc", children: typeof reasons === "string" ? jsx("li", { children: reasons }) : reasons === null || reasons === void 0 ? void 0 : reasons.map(reason => jsx("li", { children: reason }, reason)) }), placement: "top", children: jsx(Icon, { name: "LockClosed", size: "small" }) }));
+};
+
 /**
  * A base input component that can be used for text inputs, password inputs, etc.
  * A reference to the input element is provided as the `ref` prop.
@@ -365,7 +382,7 @@ const cvaInputAction = cvaMerge(["absolute", "end-0.5"], {
 const BaseInput = React.forwardRef((_a, ref) => {
     var _b;
     var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "inputClassName", "placeholder", "addonBeforeClassName"]);
-    const renderAsDisabled = rest.disabled || rest.readOnly;
+    const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
     const innerRef = React.useRef(null);
     // eslint-disable-next-line local-rules/no-typescript-assertion
     React.useImperativeHandle(ref, () => innerRef.current, []);
@@ -384,7 +401,9 @@ const BaseInput = React.forwardRef((_a, ref) => {
                     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({
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { disabled: renderAsDisabled, readOnly: rest.readOnly || nonInteractive })), typeof rest.disabled === "object" ? (jsx("div", { className: cvaInputSuffix({
+                    disabled: false,
+                }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsx(DisabledForReasonsTip, Object.assign({}, rest.disabled)) })) : null, suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
                     addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
                     actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
@@ -601,14 +620,7 @@ const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInval
     return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
 };
 
-const cvaFormGroup = cvaMerge(["component-formGroup-gap"], {
-    variants: {
-        disabled: {
-            true: "pointer-events-none",
-            false: "",
-        },
-    },
-});
+const cvaFormGroup = cvaMerge(["component-formGroup-gap"]);
 const cvaFormGroupContainerBefore = cvaMerge(["flex", "mb-1", "items-center"]);
 const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
     variants: {
@@ -627,8 +639,9 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @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, required = false, }) => {
-    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? jsx("span", { className: "required-asterisk", children: "*" }) : null] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText ? jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText }) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })] }));
+const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
+    const [t] = useTranslation();
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText ? jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText }) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })] }));
 };
 
 /**
@@ -639,7 +652,7 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
 const CheckboxField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "helpAddon", "isInvalid", "className", "checked", "dataTestId", "checkboxLabel", "onChange"]);
     const htmlForId = id ? id : "checkboxField-" + v4();
-    return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
+    return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
 });
 CheckboxField.displayName = "CheckboxField";
 
@@ -674,11 +687,11 @@ const ColorField = forwardRef((_a, ref) => {
         }
     }, [onChange]);
     const renderAsInvalid = !!errorMessage || (value && typeof value === "string" && !isValidHEXColor(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: jsxs("div", { className: cvaInput({
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxs("div", { className: cvaInput({
                 disabled: false,
                 invalid: false,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : null, onChange: handleChange, type: "text", value: value }), jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsx(IconButton, { className: "mr-1 self-center", icon: jsx(Icon, { name: "Pencil", type: "outline" }), onClick: () => {
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onChange: handleChange, type: "text", value: value }), jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsx(IconButton, { className: "mr-1 self-center", icon: jsx(Icon, { name: "Pencil", type: "outline" }), onClick: () => {
                         if (innerRef.current) {
                             innerRef.current.click();
                         }
@@ -693,7 +706,7 @@ ColorField.displayName = "ColorField";
  */
 const DateInput = forwardRef((_a, ref) => {
     var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
-    const formatDateToInputString = (date) => isValidDate(date) ? format(date, "yyyy-MM-dd") : date;
+    const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
     return (jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value) }, rest)));
@@ -711,7 +724,7 @@ const DateField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "dateField-" + v4();
-    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(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 DateField.displayName = "DateField";
 
@@ -886,7 +899,7 @@ const EmailField = forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 EmailField.displayName = "EmailField";
 
@@ -1115,7 +1128,7 @@ const PhoneField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onChange, onBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "name", "onChange", "onBlur"]);
     const htmlForId = id ? id : "phoneField-" + v4();
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsx(FormGroup, { className: className, 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(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
+    return (jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
 });
 PhoneField.displayName = "PhoneField";
 
@@ -1555,15 +1568,14 @@ const cvaSelectIcon = cvaMerge([
     "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 cvaSelectPrefixSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "absolute", "inset-y-0"], {
+    variants: {
+        kind: {
+            prefix: ["pl-3", "left-0"],
+            suffix: ["pr-3", "right-0"],
+        },
+    },
+});
 const cvaSelectXIcon = cvaMerge([
     "mr-2",
     "flex",
@@ -1754,10 +1766,12 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {React.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
+ * @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @param {boolean} hasError decide to override hasError variant
+ * @param {JSX.Element} prefix a prefix element
  * @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, prefix, hasError) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, 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(() => {
@@ -1797,11 +1811,11 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                     : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) })));
                 }
                 return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
-            }, LoadingIndicator: props => {
-                return jsx(Spinner, { className: "mr-1 mt-1.5", size: "small" });
+            }, LoadingIndicator: () => {
+                return jsx(Spinner, { centering: "vertically", className: "mr-2", size: "small" });
             }, DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon !== null && dropdownIcon !== void 0 ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
@@ -1849,7 +1863,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
+const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, }) => {
     const customStyles = React.useMemo(() => {
         return Object.assign({ control: base => {
                 return Object.assign(Object.assign({}, base), { borderRadius: "var(--border-radius-lg)", backgroundColor: "" });
@@ -1857,7 +1871,7 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
                 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: "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 => {
+            }, 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, 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" });
@@ -1873,20 +1887,36 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
  * A hook used by selects to share the common code
  *
  * @param {SelectProps} props - The props for the Select component
- * @returns {IUseSelect} Select component
+ * @returns {UseSelectProps} Select component
  */
 const useSelect = (_a) => {
     var _b;
     var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
     const refContainer = React__default.useRef(null);
     const refPrefix = React__default.useRef(null);
-    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
+    const { customStyles } = useCustomStyles({
+        refContainer,
+        refPrefix,
+        maxSelectedDisplayCount,
+        styles,
+        disabled: Boolean(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, prefix, hasError);
+    const customComponents = useCustomComponents({
+        componentsProps: components,
+        disabled: Boolean(disabled),
+        readOnly: Boolean(props.readOnly),
+        refMenuIsEnabled,
+        dataTestId,
+        maxSelectedDisplayCount,
+        dropdownIcon,
+        prefix,
+        hasError,
+    });
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
-        onMenuOpen && onMenuOpen();
+        onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
         if (refMenuIsEnabled.current) {
             setMenuIsOpen(true);
         }
@@ -1925,10 +1955,9 @@ const useSelect = (_a) => {
  * @returns {JSX.Element} CreatableSelect component
  */
 const CreatableSelect = (props) => {
-    const { className, placeholder } = props, rest = __rest(props, ["className", "placeholder"]);
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId, onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = rest;
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const creatableSelectProps = {
+    const reactCreatableSelectProps = useMemo(() => ({
         value,
         menuPlacement,
         maxMenuHeight,
@@ -1956,11 +1985,35 @@ const CreatableSelect = (props) => {
         onInputChange,
         allowCreateWhileLoading,
         onCreateOption,
-        isDisabled: disabled || props.isDisabled,
+        isDisabled: Boolean(disabled),
+    }), [
+        allowCreateWhileLoading,
+        classNamePrefix,
+        customComponents,
+        customStyles,
+        dataTestId,
+        disabled,
+        id,
+        isClearable,
+        isLoading,
+        isMulti,
+        isSearchable,
+        label,
+        maxMenuHeight,
+        menuIsOpen,
+        menuPlacement,
+        onChange,
+        onCreateOption,
+        onInputChange,
+        onMenuScrollToBottom,
+        openMenuOnClick,
+        openMenuOnFocus,
+        props.menuPortalTarget,
         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 })))] }));
+        value,
+    ]);
+    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, props, reactCreatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder }))) : (jsx(ReactCreatableSelect, Object.assign({}, props, reactCreatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder }))), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, Object.assign({}, props.disabled)) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -1971,10 +2024,9 @@ CreatableSelect.displayName = "CreatableSelect";
  * @returns {JSX.Element} Select component
  */
 const Select = (props) => {
-    const { className, placeholder } = props, rest = __rest(props, ["className", "placeholder"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = dataTestId, onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const selectProps = {
+    const reactSelectProps = useMemo(() => ({
         value,
         menuPlacement,
         maxMenuHeight,
@@ -2001,11 +2053,34 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
         hideSelectedOptions,
-        isDisabled: disabled || props.isDisabled,
+        isDisabled: Boolean(disabled),
+    }), [
+        classNamePrefix,
+        customComponents,
+        customStyles,
+        dataTestId,
+        disabled,
+        hideSelectedOptions,
+        id,
+        isClearable,
+        isLoading,
+        isMulti,
+        isSearchable,
+        label,
+        maxMenuHeight,
+        menuIsOpen,
+        menuPlacement,
+        onChange,
+        onInputChange,
+        onMenuScrollToBottom,
+        openMenuOnClick,
+        openMenuOnFocus,
+        props.menuPortalTarget,
         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 })))] }));
+        value,
+    ]);
+    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncSelect, Object.assign({}, props, reactSelectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder }))) : (jsx(ReactSelect, Object.assign({}, props, reactSelectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : props.placeholder }))), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, Object.assign({}, props.disabled)) })) : null] }));
 };
 Select.displayName = "Select";
 
@@ -2048,10 +2123,11 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
         helpText: (renderAsInvalid && errorMessage) || helpText,
         helpAddon,
         tip,
-        label,
-        disabled, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
+        label, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, disabled: Boolean(disabled), children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
+                }) }), children(Object.assign(Object.assign({}, rest), { id,
+                disabled,
+                onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
                     // If theres no value, set the inner value to an empty string
                     // A native select can not have a null value
                     // So even if react-select sends a null value, we need to convert it to an empty string
@@ -2192,10 +2268,10 @@ TextField.displayName = "TextField";
  * @returns {JSX.Element} TimeRangeField component
  */
 const TimeRangeField = (_a) => {
-    var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "disabled", "children", "helpText", "id"]);
+    var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "children", "helpText", "id"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + v4();
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: disabled, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
 };
 
 const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
@@ -2349,7 +2425,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", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, 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";
 
@@ -2457,4 +2533,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, 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 };
+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, cvaSelectPrefixSuffix, 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.460",
+  "version": "0.0.462",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -22,7 +22,6 @@
     "@trackunit/i18n-library-translation": "*",
     "zod": "3.22.4",
     "react-hook-form": "7.40.0",
-    "rxjs": "7.8.1",
     "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",

package/src/components/BaseInput/BaseInput.d.ts

@@ -1,6 +1,8 @@
 import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
 import * as React from "react";
-type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
+import { DisabledForReasons } from "./DisabledForReasonsTip";
+type FilteredInputProps = MappedOmit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "disabled">;
 type FieldSize = "small" | "medium";
 export interface BaseInputProps extends FilteredInputProps, CommonProps {
     /**
@@ -65,6 +67,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * If true the input is readonly.
      */
     readonly?: boolean;
+    disabled?: boolean | DisabledForReasons;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.

package/src/components/BaseInput/DisabledForReasonsTip.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+type DisabledKind = "locked" | "disabled";
+export type DisabledForReasons = {
+    kind: DisabledKind;
+    reasons?: string | string[];
+};
+/**
+ * Icon with explanation tooltip for why an input is locked or disabled.
+ * If locked, a permission lacks but the input **can** sometimes be edited.
+ * If disabled, the input **cannot** be edited and is only ever for displaying information.
+ *
+ * @param {DisabledForReasons} props - The reasons for the disabled state.
+ * @param {DisabledKind} kind - The kind of disabled state. If locked, the input can sometimes be edited. If disabled, the input cannot be edited.
+ */
+export declare const DisabledForReasonsTip: ({ reasons, kind }: DisabledForReasons) => JSX.Element;
+export {};

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

@@ -1,4 +1,4 @@
-import { CommonProps, IconProps } from "@trackunit/react-components";
+import { CommonProps } from "@trackunit/react-components";
 import * as React from "react";
 export interface FormGroupProps extends CommonProps {
     /**
@@ -23,15 +23,7 @@ export interface FormGroupProps extends CommonProps {
      * If true the input is rendered in its invalid state.
      */
     isInvalid?: boolean;
-    /**
-     * If true interactions are disabled
-     */
-    disabled?: boolean;
     children?: React.ReactNode;
-    /**
-     * The props for setting the icon on tip.
-     */
-    tipIconProps?: IconProps;
     name?: string;
     /**
      * If true the input is required with an asterisk prepended to the label.
@@ -45,4 +37,4 @@ export interface FormGroupProps extends CommonProps {
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled, required, }: FormGroupProps) => JSX.Element;
+export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required, }: FormGroupProps) => JSX.Element;

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

@@ -1,6 +1,4 @@
-export declare const cvaFormGroup: (props?: ({
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaFormGroup: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaFormGroupContainerBefore: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaFormGroupContainerAfter: (props?: ({
     invalid?: boolean | null | undefined;

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

@@ -17,6 +17,6 @@ export type CreatableSelectProps = {
  * @returns {JSX.Element} CreatableSelect component
  */
 export declare const CreatableSelect: {
-    <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: SelectProps<TOption, TIsAsync, TIsMulti, TGroup> & CreatableSelectProps): JSX.Element;
+    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group> & CreatableSelectProps): JSX.Element;
     displayName: string;
 };

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

@@ -13,6 +13,6 @@ export interface SelectOption<TValue extends string> {
  * @returns {JSX.Element} Select component
  */
 export declare const Select: {
-    <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: SelectProps<TOption, TIsAsync, TIsMulti, TGroup>): JSX.Element;
+    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group>): JSX.Element;
     displayName: string;
 };

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

@@ -8,7 +8,9 @@ export declare const cvaSelectControl: (props?: ({
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaSelectIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectPrefix: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectPrefixSuffix: (props?: ({
+    kind?: "prefix" | "suffix" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaSelectXIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaSelectMenuList: (props?: ({
     menuIsOpen?: boolean | null | undefined;

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

@@ -13,7 +13,19 @@ import { SelectComponents } from "react-select/dist/declarations/src/components"
  * @param {React.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
+ * @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @param {boolean} hasError decide to override hasError variant
+ * @param {JSX.Element} prefix a prefix element
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-export declare const useCustomComponents: <TOption, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(componentsProps: Partial<SelectComponents<TOption, TIsMulti, TGroup>> | undefined, disabled: boolean, menuIsOpen: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element, prefix?: JSX.Element, hasError?: boolean) => Partial<SelectComponents<TOption, TIsMulti, TGroup>>;
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, }: {
+    componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
+    disabled: boolean;
+    readOnly: boolean;
+    refMenuIsEnabled: React.MutableRefObject<boolean>;
+    dataTestId: string;
+    maxSelectedDisplayCount: number | undefined;
+    dropdownIcon?: JSX.Element;
+    prefix?: JSX.Element;
+    hasError?: boolean;
+}) => Partial<SelectComponents<Option, IsMulti, Group>>;

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

@@ -9,6 +9,12 @@ import { GroupBase, StylesConfig } from "react-select";
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>, maxSelectedDisplayCount: number | undefined, styles: StylesConfig<Option, IsMulti, Group> | undefined, disabled: boolean | undefined) => {
+export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, }: {
+    refContainer: React.RefObject<HTMLDivElement>;
+    refPrefix: React.RefObject<HTMLDivElement>;
+    maxSelectedDisplayCount: number | undefined;
+    styles: StylesConfig<Option, IsMulti, Group> | undefined;
+    disabled: boolean | undefined;
+}) => {
     customStyles: StylesConfig<Option, IsMulti, Group>;
 };

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

@@ -1,13 +1,15 @@
 import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
 import React from "react";
 import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
 import { SelectComponents } from "react-select/dist/declarations/src/components";
+import { DisabledForReasons } from "../BaseInput/DisabledForReasonsTip";
 export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
     loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
     defaultOptions: OptionsOrGroups<Option, Group> | undefined;
     cacheOptions: boolean;
 }
-export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = CommonProps & Props<Option, IsMulti, GroupType> & {
+export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = CommonProps & MappedOmit<Props<Option, IsMulti, GroupType>, "isDisabled"> & {
     /**
      * An React element to render before the text in the select.
      * This is typically used to render an icon.
@@ -27,7 +29,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      *
      * @memberof SelectProps
      */
-    disabled?: boolean;
+    disabled?: boolean | DisabledForReasons;
     /**
      * An boolean flag to make the field readonly
      *
@@ -121,7 +123,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      */
     hideSelectedOptions?: boolean;
 };
-interface IUseSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     customStyles: StylesConfig<Option, IsMulti, Group>;
     customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
     refContainer: React.RefObject<HTMLDivElement>;
@@ -136,7 +138,7 @@ interface IUseSelect<Option, IsMulti extends boolean = false, Group extends Grou
  * A hook used by selects to share the common code
  *
  * @param {SelectProps} props - The props for the Select component
- * @returns {IUseSelect} Select component
+ * @returns {UseSelectProps} Select component
  */
-export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => IUseSelect<Option, IsMulti, Group>;
+export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
 export {};

package/src/components/TimeRangeField/TimeRangeField.d.ts

@@ -14,5 +14,5 @@ export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedPro
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {JSX.Element} TimeRangeField component
  */
-export declare const TimeRangeField: ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id, ...rest }: TimeRangeFieldProps) => JSX.Element;
+export declare const TimeRangeField: ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }: TimeRangeFieldProps) => JSX.Element;
 export {};

package/src/translation.d.ts

@@ -15,8 +15,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "dropzone.input.title" | "dropzone.label.default" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "dropzone.input.title" | "dropzone.label.default" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">;
+export declare const useTranslation: () => [TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "dropzone.input.title" | "dropzone.label.default" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "dropzone.input.title" | "dropzone.label.default" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };