@trackunit/react-form-components 0.0.128-alpha-b0920fa0dd.0 → 0.0.128
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs.js
CHANGED
|
@@ -14515,7 +14515,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
|
|
|
14515
14515
|
* @returns {JSX.Element} - The PhoneInput component.
|
|
14516
14516
|
*/
|
|
14517
14517
|
const PhoneInput = React.forwardRef((_a, ref) => {
|
|
14518
|
-
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"]);
|
|
14518
|
+
var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode"]);
|
|
14519
14519
|
const hiddenInputRef = React.useRef(null);
|
|
14520
14520
|
const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
|
|
14521
14521
|
React.useEffect(() => {
|
|
@@ -14530,7 +14530,10 @@ const PhoneInput = React.forwardRef((_a, ref) => {
|
|
|
14530
14530
|
onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
|
|
14531
14531
|
}, [countryCode, onChangeGetSeparateValues, phoneNumber]);
|
|
14532
14532
|
const countryCodePlaceholderValue = countryCodePlaceholder || "+45";
|
|
14533
|
-
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:
|
|
14533
|
+
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: e => {
|
|
14534
|
+
handleCountryCodeChange(e);
|
|
14535
|
+
onChangeCountryCode && onChangeCountryCode(e);
|
|
14536
|
+
}, 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))] }));
|
|
14534
14537
|
});
|
|
14535
14538
|
|
|
14536
14539
|
/**
|
package/index.esm.js
CHANGED
|
@@ -14489,7 +14489,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
|
|
|
14489
14489
|
* @returns {JSX.Element} - The PhoneInput component.
|
|
14490
14490
|
*/
|
|
14491
14491
|
const PhoneInput = forwardRef((_a, ref) => {
|
|
14492
|
-
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"]);
|
|
14492
|
+
var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode"]);
|
|
14493
14493
|
const hiddenInputRef = useRef(null);
|
|
14494
14494
|
const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
|
|
14495
14495
|
useEffect(() => {
|
|
@@ -14504,7 +14504,10 @@ const PhoneInput = forwardRef((_a, ref) => {
|
|
|
14504
14504
|
onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
|
|
14505
14505
|
}, [countryCode, onChangeGetSeparateValues, phoneNumber]);
|
|
14506
14506
|
const countryCodePlaceholderValue = countryCodePlaceholder || "+45";
|
|
14507
|
-
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:
|
|
14507
|
+
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: e => {
|
|
14508
|
+
handleCountryCodeChange(e);
|
|
14509
|
+
onChangeCountryCode && onChangeCountryCode(e);
|
|
14510
|
+
}, 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))] }));
|
|
14508
14511
|
});
|
|
14509
14512
|
|
|
14510
14513
|
/**
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-form-components",
|
|
3
|
-
"version": "0.0.128
|
|
3
|
+
"version": "0.0.128",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": ">=18.x"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@trackunit/css-class-variance-utilities": "0.0.
|
|
11
|
-
"@trackunit/i18n-library-translation": "0.0.
|
|
12
|
-
"@trackunit/react-components": "0.1.
|
|
13
|
-
"@trackunit/shared-utils": "0.0.
|
|
10
|
+
"@trackunit/css-class-variance-utilities": "0.0.12",
|
|
11
|
+
"@trackunit/i18n-library-translation": "0.0.72",
|
|
12
|
+
"@trackunit/react-components": "0.1.150",
|
|
13
|
+
"@trackunit/shared-utils": "0.0.3",
|
|
14
14
|
"date-fns": "2.29.3",
|
|
15
15
|
"libphonenumber-js": "1.10.36",
|
|
16
16
|
"react": "18.2.0",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FocusEventHandler } from "react";
|
|
2
2
|
import { BaseInputProps } from "../BaseInput";
|
|
3
|
+
import { SingleValue } from "react-select";
|
|
3
4
|
type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
|
|
4
5
|
export interface PhoneNumberProps {
|
|
5
6
|
countryCode: string;
|
|
@@ -23,6 +24,13 @@ export interface PhoneInputProps extends BaseInputExposedProps {
|
|
|
23
24
|
* On blur handler for country code component.
|
|
24
25
|
*/
|
|
25
26
|
onBlurCountryCode?: FocusEventHandler<HTMLInputElement> | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* On change handler for country code component.
|
|
29
|
+
*/
|
|
30
|
+
onChangeCountryCode?: (value: SingleValue<{
|
|
31
|
+
label: string;
|
|
32
|
+
value: string;
|
|
33
|
+
}>) => void;
|
|
26
34
|
/**
|
|
27
35
|
* A placeholder value for country code.
|
|
28
36
|
*/
|