@trackunit/react-form-components 0.0.118 → 0.0.120

package/index.cjs.js

@@ -14493,7 +14493,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, readOnly, dataTestId, placeholder, }) => {
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, }) => {
     const [isCountryCodeMissing, setIsCountryCodeMissing] = React.useState(false);
     React.useEffect(() => {
         countryCode && setIsCountryCodeMissing(false);
@@ -14501,7 +14501,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, readOnly: readOnly, menuIsOpen: readOnly ? false : undefined }));
+    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, onBlur: onBlur, menuIsOpen: readOnly ? false : undefined }));
 };
 
 /**
@@ -14515,7 +14515,7 @@ 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, readOnly } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "readOnly"]);
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder"]);
     const hiddenInputRef = React.useRef(null);
     const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
     React.useEffect(() => {
@@ -14529,7 +14529,8 @@ const PhoneInput = React.forwardRef((_a, ref) => {
     React.useEffect(() => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
-    return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "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 countryCodePlaceholderValue = countryCodePlaceholder || "+45";
+    return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "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: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), 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))] }));
 });
 
 /**

package/index.esm.js

@@ -14467,7 +14467,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, readOnly, dataTestId, placeholder, }) => {
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, }) => {
     const [isCountryCodeMissing, setIsCountryCodeMissing] = useState(false);
     useEffect(() => {
         countryCode && setIsCountryCodeMissing(false);
@@ -14475,7 +14475,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, readOnly: readOnly, menuIsOpen: readOnly ? false : undefined }));
+    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, onBlur: onBlur, menuIsOpen: readOnly ? false : undefined }));
 };
 
 /**
@@ -14489,7 +14489,7 @@ 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, readOnly } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "readOnly"]);
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder"]);
     const hiddenInputRef = useRef(null);
     const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
     useEffect(() => {
@@ -14503,7 +14503,8 @@ const PhoneInput = forwardRef((_a, ref) => {
     useEffect(() => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
-    return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "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 countryCodePlaceholderValue = countryCodePlaceholder || "+45";
+    return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "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: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), 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))] }));
 });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.118",
+  "version": "0.0.120",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.11",
-    "@trackunit/i18n-library-translation": "0.0.68",
+    "@trackunit/i18n-library-translation": "0.0.69",
     "@trackunit/react-components": "0.1.148",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",

package/src/components/OptionCard/OptionCard.d.ts

@@ -16,7 +16,7 @@ export interface IOptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
     /**
      * Descriptive text displayed inside the OptionCard.
      */
-    description?: string;
+    description?: string | JSX.Element;
 }
 /**
  * A card version of a radio button that includes an icon, headings and a description.

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { CommonProps } from "@trackunit/react-components";
+import { FocusEventHandler } from "react";
 import { SingleValue } from "react-select";
 import { CountryCode } from "./CountryCodes";
 interface CountryCodeSelectProps extends CommonProps {
@@ -13,6 +13,7 @@ interface CountryCodeSelectProps extends CommonProps {
     disabled?: boolean;
     readOnly?: boolean;
     placeholder?: string;
+    onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
 }
 /**
  * The CountryCodeSelect component is used to select a country code for a phone number.
@@ -20,5 +21,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, readOnly, dataTestId, placeholder, }: CountryCodeSelectProps) => JSX.Element;
+export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, }: CountryCodeSelectProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { FocusEventHandler } from "react";
 import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
 export interface PhoneNumberProps {
@@ -19,6 +19,14 @@ export interface PhoneInputProps extends BaseInputExposedProps {
      * A callback function that gives you the country code and phone number as separate values.
      */
     onChangeGetSeparateValues?: (params: PhoneNumberProps) => void;
+    /**
+     * On blur handler for country code component.
+     */
+    onBlurCountryCode?: FocusEventHandler<HTMLInputElement> | undefined;
+    /**
+     * A placeholder value for country code.
+     */
+    countryCodePlaceholder?: string;
 }
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.