@trackunit/react-form-components 0.0.101-alpha-ea50faef71.0 → 0.0.101

package/index.cjs

@@ -6063,7 +6063,7 @@ const usePhoneInput = (value) => {
     const [combinedValue, setCombinedValue] = React.useState(value !== null && value !== void 0 ? value : "");
     React.useEffect(() => {
         var _a, _b;
-        if (value) {
+        if (value && ((!countryCode && !phoneNumber) || !combinedValue)) {
             const safePhoneNumber = getPhoneNumberWithPlus(value);
             const number = parsePhoneNumber(safePhoneNumber);
             setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
@@ -14147,7 +14147,7 @@ var AsyncSelect$1 = AsyncSelect;
  */
 const Select = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, readOnly, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -14161,11 +14161,11 @@ const Select = (props) => {
         tabSelectsValue: false,
         blurInputOnSelect: !isMulti,
         menuPortalTarget: props.menuPortalTarget || document.body,
-        isSearchable: disabled ? false : isSearchable,
+        isSearchable: disabled || readOnly ? false : isSearchable,
         menuShouldBlockScroll: true,
         menuShouldScrollIntoView: true,
         openMenuOnFocus: true,
-        menuIsOpen,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
         openMenuOnClick: true,
         closeMenuOnSelect: false,
         isMulti,
@@ -14176,12 +14176,13 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
     };
-    return (jsxRuntime.jsxs(SelectContainer, { ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled, children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
+    return (jsxRuntime.jsxs(SelectContainer, { ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled, "$isReadOnly": readOnly, children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
 };
 const SelectContainer = tailwindStyledComponents.tw.div `
   tu-select
   ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
   ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
+  ${({ $isReadOnly }) => ($isReadOnly ? tailwindStyledComponents.tws `tu-select--readonly` : null)}
 `;
 Select.displayName = "Select";
 
@@ -14229,7 +14230,7 @@ const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
  * @returns {JSX.Element} CountryCodeSelect component
  */
-const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }) => {
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, }) => {
     const [isCountryCodeMissing, setIsCountryCodeMissing] = React.useState(false);
     React.useEffect(() => {
         countryCode && setIsCountryCodeMissing(false);
@@ -14237,7 +14238,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
     const filteredCodes = countryCodes.filter(code => {
         return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
     });
-    return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled }));
+    return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, menuIsOpen: readOnly ? false : undefined }));
 };
 
 /**
@@ -14251,9 +14252,9 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = React.forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues"]);
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, readOnly } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "readOnly"]);
     const hiddenInputRef = React.useRef(null);
-    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
+    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
     React.useEffect(() => {
         const element = hiddenInputRef.current;
         const event = new Event("change");
@@ -14265,7 +14266,7 @@ const PhoneInput = React.forwardRef((_a, ref) => {
     React.useEffect(() => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
-    return (jsxRuntime.jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    return (jsxRuntime.jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 const Container = tailwindStyledComponents.tw.div `
   grid
@@ -14294,7 +14295,7 @@ const PhoneField = React.forwardRef((_a, ref) => {
     const { isCombinedValueInvalid, isPhoneNumberInvalid, isCountryCodeInvalid, combinedValue } = usePhoneInput(value);
     const renderAsInvalid = isCombinedValueInvalid || isPhoneNumberInvalid || isCountryCodeInvalid || isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "phoneField-" + v4();
-    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: combinedValue, defaultValue: defaultValue, ref: ref }, rest)) }));
+    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: combinedValue, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId }, rest)) }));
 });
 
 const RadioGroupContext = React__namespace.createContext(null);

package/index.js

@@ -6037,7 +6037,7 @@ const usePhoneInput = (value) => {
     const [combinedValue, setCombinedValue] = useState(value !== null && value !== void 0 ? value : "");
     useEffect(() => {
         var _a, _b;
-        if (value) {
+        if (value && ((!countryCode && !phoneNumber) || !combinedValue)) {
             const safePhoneNumber = getPhoneNumberWithPlus(value);
             const number = parsePhoneNumber(safePhoneNumber);
             setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
@@ -14121,7 +14121,7 @@ var AsyncSelect$1 = AsyncSelect;
  */
 const Select = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, readOnly, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -14135,11 +14135,11 @@ const Select = (props) => {
         tabSelectsValue: false,
         blurInputOnSelect: !isMulti,
         menuPortalTarget: props.menuPortalTarget || document.body,
-        isSearchable: disabled ? false : isSearchable,
+        isSearchable: disabled || readOnly ? false : isSearchable,
         menuShouldBlockScroll: true,
         menuShouldScrollIntoView: true,
         openMenuOnFocus: true,
-        menuIsOpen,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
         openMenuOnClick: true,
         closeMenuOnSelect: false,
         isMulti,
@@ -14150,12 +14150,13 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
     };
-    return (jsxs(SelectContainer, { ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled, children: [prefix !== undefined && (jsx$1(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx$1(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx$1(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
+    return (jsxs(SelectContainer, { ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled, "$isReadOnly": readOnly, children: [prefix !== undefined && (jsx$1(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx$1(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx$1(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
 };
 const SelectContainer = tw.div `
   tu-select
   ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
   ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
+  ${({ $isReadOnly }) => ($isReadOnly ? tws `tu-select--readonly` : null)}
 `;
 Select.displayName = "Select";
 
@@ -14203,7 +14204,7 @@ const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
  * @returns {JSX.Element} CountryCodeSelect component
  */
-const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }) => {
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, }) => {
     const [isCountryCodeMissing, setIsCountryCodeMissing] = useState(false);
     useEffect(() => {
         countryCode && setIsCountryCodeMissing(false);
@@ -14211,7 +14212,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
     const filteredCodes = countryCodes.filter(code => {
         return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
     });
-    return (jsx$1(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled }));
+    return (jsx$1(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, menuIsOpen: readOnly ? false : undefined }));
 };
 
 /**
@@ -14225,9 +14226,9 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues"]);
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, readOnly } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "readOnly"]);
     const hiddenInputRef = useRef(null);
-    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
+    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
     useEffect(() => {
         const element = hiddenInputRef.current;
         const event = new Event("change");
@@ -14239,7 +14240,7 @@ const PhoneInput = forwardRef((_a, ref) => {
     useEffect(() => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
-    return (jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    return (jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 const Container = tw.div `
   grid
@@ -14268,7 +14269,7 @@ const PhoneField = forwardRef((_a, ref) => {
     const { isCombinedValueInvalid, isPhoneNumberInvalid, isCountryCodeInvalid, combinedValue } = usePhoneInput(value);
     const renderAsInvalid = isCombinedValueInvalid || isPhoneNumberInvalid || isCountryCodeInvalid || isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "phoneField-" + v4();
-    return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: combinedValue, defaultValue: defaultValue, ref: ref }, rest)) }));
+    return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: combinedValue, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId }, rest)) }));
 });
 
 const RadioGroupContext = React.createContext(null);

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.101-alpha-ea50faef71.0",
+  "version": "0.0.101",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "0.0.12-alpha-ea50faef71.0",
-    "@trackunit/i18n-library-translation": "0.0.68-alpha-ea50faef71.0",
-    "@trackunit/react-components": "0.1.138-alpha-ea50faef71.0",
-    "@trackunit/tailwind-styled-components": "0.0.61-alpha-ea50faef71.0",
+    "@trackunit/css-class-variance-utilities": "0.0.11",
+    "@trackunit/i18n-library-translation": "0.0.67",
+    "@trackunit/react-components": "0.1.137",
+    "@trackunit/tailwind-styled-components": "0.0.60",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",

package/src/components/PhoneInput/CountryCodeSelect.d.ts

@@ -11,6 +11,7 @@ interface CountryCodeSelectProps extends CommonProps {
         value: string;
     }>) => void;
     disabled?: boolean;
+    readOnly?: boolean;
     placeholder?: string;
 }
 /**
@@ -19,5 +20,5 @@ interface CountryCodeSelectProps extends CommonProps {
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
  * @returns {JSX.Element} CountryCodeSelect component
  */
-export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }: CountryCodeSelectProps) => JSX.Element;
+export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, }: CountryCodeSelectProps) => JSX.Element;
 export {};

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

@@ -31,6 +31,13 @@ export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends bo
      * @memberof SelectProps
      */
     disabled?: boolean;
+    /**
+     * An boolean flag to make the field readonly
+     *
+     *
+     * @memberof SelectProps
+     */
+    readOnly?: boolean;
     /**
      * An field id
      *