@trackunit/react-form-components 0.0.173-alpha-5bf259599b.0 → 0.0.175

package/index.cjs.js

@@ -3162,7 +3162,7 @@ const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
 const OptionCard = React.forwardRef((_a, ref) => {
     var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
     const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsxRuntime.jsx("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "peer hidden" }, rest)), jsxRuntime.jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxRuntime.jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { type: "span", subtle: true, align: "center", children: description }))] }))] })] }));
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsxRuntime.jsx("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "peer hidden" }, rest)), jsxRuntime.jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxRuntime.jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { type: "span", weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { type: "span", subtle: true, align: "center", children: description }))] }))] })] }));
 });
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -14546,15 +14546,7 @@ const PhoneInput = React.forwardRef((_a, ref) => {
     const onCodeChangeHandler = React__default["default"].useCallback((codeNumber) => {
         codeRef.current = codeNumber;
         setCode(codeNumber);
-        if (codeNumber !== "") {
-            onChangeHandler({ newPhone: phone, newCode: codeNumber });
-        }
-        else {
-            //Clear the phone number because we disable the field, when there is no country code
-            onChangeHandler({ newPhone: "", newCode: "" });
-            phoneRef.current = "";
-            setPhone("");
-        }
+        onChangeHandler({ newPhone: phone, newCode: codeNumber });
     }, [phone, onChangeHandler, codeRef]);
     const onBlurHandler = React__default["default"].useCallback(() => {
         onFieldsBlur &&
@@ -14579,7 +14571,7 @@ const PhoneInput = React.forwardRef((_a, ref) => {
                 }, onChange: e => {
                     var _a;
                     onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
-                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled || code === "", readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
                     onPhoneChangeHandler(e.target.value);
                 }, onBlur: () => {
                     onBlurHandler();
@@ -14612,14 +14604,18 @@ const PhoneField = React.forwardRef((_a, ref) => {
 /**
  * Validates a phone number
  */
-const validatePhoneNumber = (phoneNumber) => {
+const validatePhoneNumber = ({ phone, countryCode, national, }) => {
+    const phoneNumber = phone ? phone : countryCode || national ? `${countryCode}${national}` : undefined;
+    if (!phoneNumber) {
+        return "REQUIRED";
+    }
+    if (!phone && !countryCode && national) {
+        return "REQUIRED_COUNTRY";
+    }
     if (phoneNumber &&
         (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
         return "NOT_A_NUMBER";
     }
-    if (!phoneNumber) {
-        return "REQUIRED";
-    }
     const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
     if (safePhoneNumber.length <= 5) {
         //needs to be handled manually, parsePhoneNumberFromString can't parse it
@@ -14637,11 +14633,11 @@ const validatePhoneNumber = (phoneNumber) => {
 /**
  * Checks if the country code is valid and required
  */
-const isInvalidCountryCode = (error, required) => !!required && error === "REQUIRED";
+const isInvalidCountryCode = (error, required) => (!!required && error === "REQUIRED") || error === "REQUIRED_COUNTRY";
 /**
  * Checks if the phone number is valid and required
  */
-const isInvalidPhoneNumber = (error, required) => (!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED");
+const isInvalidPhoneNumber = (error, required) => error !== "REQUIRED_COUNTRY" && ((!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED"));
 
 const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     variants: {
@@ -15305,6 +15301,7 @@ exports.Toggle = Toggle;
 exports.UploadField = UploadField;
 exports.UploadInput = UploadInput;
 exports.ValueType = StateManagedSelect$1;
+exports.checkIfPhoneNumberHasPlus = checkIfPhoneNumberHasPlus;
 exports.cvaInput = cvaInput;
 exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputAddonAfter = cvaInputAddonAfter;
@@ -15324,6 +15321,7 @@ exports.cvaSelectMenuList = cvaSelectMenuList;
 exports.cvaSelectPrefix = cvaSelectPrefix;
 exports.cvaSelectXIcon = cvaSelectXIcon;
 exports.getOrderedOptions = getOrderedOptions;
+exports.getPhoneNumberWithPlus = getPhoneNumberWithPlus;
 exports.isInvalidCountryCode = isInvalidCountryCode;
 exports.isInvalidPhoneNumber = isInvalidPhoneNumber;
 exports.isMultiValue = isMultiValue;

package/index.esm.js

@@ -3136,7 +3136,7 @@ const cvaOptionCardContainer = cvaMerge(["contents"]);
 const OptionCard = forwardRef((_a, ref) => {
     var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
     const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
-    return (jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsx$1("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "peer hidden" }, rest)), jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx$1(Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsx$1(Text, { weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsx$1(Text, { type: "span", subtle: true, align: "center", children: description }))] }))] })] }));
+    return (jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsx$1("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "peer hidden" }, rest)), jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx$1(Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsx$1(Text, { type: "span", weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsx$1(Text, { type: "span", subtle: true, align: "center", children: description }))] }))] })] }));
 });
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -14520,15 +14520,7 @@ const PhoneInput = forwardRef((_a, ref) => {
     const onCodeChangeHandler = React__default.useCallback((codeNumber) => {
         codeRef.current = codeNumber;
         setCode(codeNumber);
-        if (codeNumber !== "") {
-            onChangeHandler({ newPhone: phone, newCode: codeNumber });
-        }
-        else {
-            //Clear the phone number because we disable the field, when there is no country code
-            onChangeHandler({ newPhone: "", newCode: "" });
-            phoneRef.current = "";
-            setPhone("");
-        }
+        onChangeHandler({ newPhone: phone, newCode: codeNumber });
     }, [phone, onChangeHandler, codeRef]);
     const onBlurHandler = React__default.useCallback(() => {
         onFieldsBlur &&
@@ -14553,7 +14545,7 @@ const PhoneInput = forwardRef((_a, ref) => {
                 }, onChange: e => {
                     var _a;
                     onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
-                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled || code === "", readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
                     onPhoneChangeHandler(e.target.value);
                 }, onBlur: () => {
                     onBlurHandler();
@@ -14586,14 +14578,18 @@ const PhoneField = forwardRef((_a, ref) => {
 /**
  * Validates a phone number
  */
-const validatePhoneNumber = (phoneNumber) => {
+const validatePhoneNumber = ({ phone, countryCode, national, }) => {
+    const phoneNumber = phone ? phone : countryCode || national ? `${countryCode}${national}` : undefined;
+    if (!phoneNumber) {
+        return "REQUIRED";
+    }
+    if (!phone && !countryCode && national) {
+        return "REQUIRED_COUNTRY";
+    }
     if (phoneNumber &&
         (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
         return "NOT_A_NUMBER";
     }
-    if (!phoneNumber) {
-        return "REQUIRED";
-    }
     const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
     if (safePhoneNumber.length <= 5) {
         //needs to be handled manually, parsePhoneNumberFromString can't parse it
@@ -14611,11 +14607,11 @@ const validatePhoneNumber = (phoneNumber) => {
 /**
  * Checks if the country code is valid and required
  */
-const isInvalidCountryCode = (error, required) => !!required && error === "REQUIRED";
+const isInvalidCountryCode = (error, required) => (!!required && error === "REQUIRED") || error === "REQUIRED_COUNTRY";
 /**
  * Checks if the phone number is valid and required
  */
-const isInvalidPhoneNumber = (error, required) => (!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED");
+const isInvalidPhoneNumber = (error, required) => error !== "REQUIRED_COUNTRY" && ((!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED"));
 
 const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     variants: {
@@ -15246,4 +15242,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validatePhoneNumber, weekDay, workTimeAlarmConversion };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, checkIfPhoneNumberHasPlus, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validatePhoneNumber, weekDay, workTimeAlarmConversion };

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.173-alpha-5bf259599b.0",
+  "version": "0.0.175",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "0.0.15-alpha-5bf259599b.0",
-    "@trackunit/i18n-library-translation": "0.0.88-alpha-5bf259599b.0",
-    "@trackunit/react-components": "0.1.177-alpha-5bf259599b.0",
-    "@trackunit/shared-utils": "0.0.12-alpha-5bf259599b.0",
-    "@trackunit/ui-icons": "0.0.79-alpha-5bf259599b.0",
+    "@trackunit/css-class-variance-utilities": "0.0.14",
+    "@trackunit/i18n-library-translation": "0.0.87",
+    "@trackunit/react-components": "0.1.178",
+    "@trackunit/shared-utils": "0.0.11",
+    "@trackunit/ui-icons": "0.0.78",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",

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

@@ -12,7 +12,7 @@ export interface IOptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
     /**
      * Subheading displayed above the description.
      */
-    subheading?: string;
+    subheading?: string | JSX.Element;
     /**
      * Descriptive text displayed inside the OptionCard.
      */

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

@@ -2,12 +2,8 @@ import React, { FocusEventHandler } from "react";
 import { SingleValue } from "react-select";
 import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
-export interface PhoneNumberProps {
-    countryCode: string;
-    phoneNumber: string;
-}
-interface PhoneNumberValue {
-    phone: string;
+export interface PhoneNumberValue {
+    phone?: string;
     national?: string;
     countryCode?: string;
 }

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

@@ -1,9 +1,14 @@
 import { ValidatePhoneNumberLengthResult } from "libphonenumber-js";
-export type PhoneInputValidationError = "REQUIRED" | ValidatePhoneNumberLengthResult | undefined;
+export type PhoneInputValidationError = "REQUIRED" | "REQUIRED_COUNTRY" | ValidatePhoneNumberLengthResult | undefined;
+export interface PhoneNumberValueForValidation {
+    phone?: string | undefined | null;
+    national?: string | undefined | null;
+    countryCode?: string | undefined | null;
+}
 /**
  * Validates a phone number
  */
-export declare const validatePhoneNumber: (phoneNumber: string | undefined | null) => PhoneInputValidationError;
+export declare const validatePhoneNumber: ({ phone, countryCode, national, }: PhoneNumberValueForValidation) => PhoneInputValidationError;
 /**
  * Checks if the country code is valid and required
  */

package/src/index.d.ts

@@ -14,6 +14,7 @@ export * from "./components/OptionCard/OptionCard";
 export * from "./components/PhoneField/PhoneField";
 export * from "./components/PhoneInput/PhoneInput";
 export * from "./components/PhoneInput/PhoneInputValidationUtils";
+export * from "./components/PhoneInput/PhoneNumberUtilities";
 export * from "./components/RadioGroup";
 export * from "./components/Schedule/Schedule";
 export * from "./components/Schedule/ScheduleParser";