@pega/cosmos-react-core 10.0.0-build.5.26 → 10.0.0-build.5.27
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/lib/components/Phone/PhoneDisplay.d.ts +10 -0
- package/lib/components/Phone/PhoneDisplay.d.ts.map +1 -1
- package/lib/components/Phone/PhoneDisplay.js +7 -2
- package/lib/components/Phone/PhoneDisplay.js.map +1 -1
- package/lib/components/Phone/PhoneInput.d.ts +10 -0
- package/lib/components/Phone/PhoneInput.d.ts.map +1 -1
- package/lib/components/Phone/PhoneInput.js +18 -5
- package/lib/components/Phone/PhoneInput.js.map +1 -1
- package/lib/components/Phone/utils.d.ts +4 -2
- package/lib/components/Phone/utils.d.ts.map +1 -1
- package/lib/components/Phone/utils.js +17 -6
- package/lib/components/Phone/utils.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Ref } from 'react';
|
|
2
2
|
import type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp } from '../../types';
|
|
3
|
+
import type { PhoneFormattingVariant } from './utils';
|
|
3
4
|
export interface PhoneDisplayProps extends BaseProps, NoChildrenProp {
|
|
4
5
|
/** Phone number, no 'tel:' scheme, '+18887342669' */
|
|
5
6
|
value?: string;
|
|
@@ -17,6 +18,15 @@ export interface PhoneDisplayProps extends BaseProps, NoChildrenProp {
|
|
|
17
18
|
* @default true
|
|
18
19
|
*/
|
|
19
20
|
showCountryCode?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Defines whether the phone number uses domestic or international formatting when the country code is displayed.
|
|
23
|
+
* When the country code is hidden, domestic formatting is used without the country code.
|
|
24
|
+
* @default 'international'
|
|
25
|
+
* @example international: '+1 123 456 7890'
|
|
26
|
+
* @example domestic: '+1 (123) 456-7890'
|
|
27
|
+
* @example without country code: '(123) 456-7890'
|
|
28
|
+
*/
|
|
29
|
+
variant?: PhoneFormattingVariant;
|
|
20
30
|
};
|
|
21
31
|
/** Ref for the wrapping element. */
|
|
22
32
|
ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK9F,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;;;;WAOG;QACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;KAClC,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAwCpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -3,8 +3,13 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { StyledButtonLink } from '../Button';
|
|
4
4
|
import NoValue from '../NoValue/NoValue';
|
|
5
5
|
import { formatPhone } from './utils';
|
|
6
|
-
const PhoneDisplay = forwardRef(function PhoneDisplay({ value, displayText, variant = 'link', formattingOptions: { showCountryCode = true } = {}, ...restProps }, ref) {
|
|
7
|
-
const displayValue = value ? (displayText ||
|
|
6
|
+
const PhoneDisplay = forwardRef(function PhoneDisplay({ value, displayText, variant = 'link', formattingOptions: { showCountryCode = true, variant: formattingVariant = 'international' } = {}, ...restProps }, ref) {
|
|
7
|
+
const displayValue = value ? (displayText ||
|
|
8
|
+
formatPhone(value || '', {
|
|
9
|
+
nationalFormat: showCountryCode ? formattingVariant === 'domestic' : true,
|
|
10
|
+
showCountryCode
|
|
11
|
+
}) ||
|
|
12
|
+
value) : (_jsx(NoValue, {}));
|
|
8
13
|
return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue })) : (_jsx(StyledButtonLink, { ...restProps, variant: 'link', ref: ref, href: `tel:${value}`, children: displayValue }));
|
|
9
14
|
});
|
|
10
15
|
export default PhoneDisplay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkCtC,MAAM,YAAY,GAAuD,UAAU,CACjF,SAAS,YAAY,CACnB,EACE,KAAK,EACL,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,iBAAiB,EAAE,EACjB,eAAe,GAAG,IAAI,EACtB,OAAO,EAAE,iBAAiB,GAAG,eAAe,EAC7C,GAAG,EAAE,EACN,GAAG,SAAS,EACuB,EACrC,GAA6B;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW;QACX,WAAW,CAAC,KAAK,IAAI,EAAE,EAAE;YACvB,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,iBAAiB,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI;YACzE,eAAe;SAChB,CAAC;QACF,KAAK,CACN,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,OACX,SAAS,EACb,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAE,OAAO,KAAK,EAAE,YAEnB,YAAY,GACI,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp } from '../../types';\nimport { StyledButtonLink } from '../Button';\nimport NoValue from '../NoValue/NoValue';\n\nimport { formatPhone } from './utils';\nimport type { PhoneFormattingVariant } from './utils';\n\nexport interface PhoneDisplayProps extends BaseProps, NoChildrenProp {\n /** Phone number, no 'tel:' scheme, '+18887342669' */\n value?: string;\n /** The text to be displayed. */\n displayText?: string;\n /**\n * Controls styling of the field.\n * @default 'link'\n */\n variant?: 'link' | 'text';\n /** Options to define formatting. */\n formattingOptions?: {\n /**\n * Display phone number with country calling code\n * @default true\n */\n showCountryCode?: boolean;\n /**\n * Defines whether the phone number uses domestic or international formatting when the country code is displayed.\n * When the country code is hidden, domestic formatting is used without the country code.\n * @default 'international'\n * @example international: '+1 123 456 7890'\n * @example domestic: '+1 (123) 456-7890'\n * @example without country code: '(123) 456-7890'\n */\n variant?: PhoneFormattingVariant;\n };\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst PhoneDisplay: ForwardRefForwardPropsComponent<PhoneDisplayProps> = forwardRef(\n function PhoneDisplay(\n {\n value,\n displayText,\n variant = 'link',\n formattingOptions: {\n showCountryCode = true,\n variant: formattingVariant = 'international'\n } = {},\n ...restProps\n }: PropsWithoutRef<PhoneDisplayProps>,\n ref: PhoneDisplayProps['ref']\n ) {\n const displayValue = value ? (\n displayText ||\n formatPhone(value || '', {\n nationalFormat: showCountryCode ? formattingVariant === 'domestic' : true,\n showCountryCode\n }) ||\n value\n ) : (\n <NoValue />\n );\n\n return variant === 'text' || !value ? (\n <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n {displayValue}\n </span>\n ) : (\n <StyledButtonLink\n {...restProps}\n variant='link'\n ref={ref as Ref<HTMLAnchorElement>}\n href={`tel:${value}`}\n >\n {displayValue}\n </StyledButtonLink>\n );\n }\n);\n\nexport default PhoneDisplay;\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Ref } from 'react';
|
|
2
2
|
import type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp, TestIdProp } from '../../types';
|
|
3
3
|
import type { FormControlProps } from '../FormControl';
|
|
4
|
+
import type { PhoneFormattingVariant } from './utils';
|
|
4
5
|
type AutoFillTel = AutoFillBase | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${OptionalPrefixToken<AutoFillContactKind>}tel`;
|
|
5
6
|
export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {
|
|
6
7
|
/**
|
|
@@ -8,6 +9,15 @@ export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildren
|
|
|
8
9
|
* @default false
|
|
9
10
|
*/
|
|
10
11
|
showCountryCode?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Defines how the subscriber number is formatted while typing when the country code is displayed.
|
|
14
|
+
* When the country code is hidden, domestic formatting is used without the country code.
|
|
15
|
+
* @default 'international'
|
|
16
|
+
* @example international: '+1 123 456 7890'
|
|
17
|
+
* @example domestic: '+1 (123) 456-7890'
|
|
18
|
+
* @example without country code: '(123) 456-7890'
|
|
19
|
+
*/
|
|
20
|
+
formattingVariant?: PhoneFormattingVariant;
|
|
11
21
|
/** Changes lists of countries calling codes */
|
|
12
22
|
callingCodesList?: string[];
|
|
13
23
|
/** Callback fired on input value change */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgC,GAAG,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgC,GAAG,EAAE,MAAM,OAAO,CAAC;AAa/D,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,KAAK,WAAW,GACZ,YAAY,GACZ,GAAG,mBAAmB,CAAC,eAAe,CAAC,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,KAAK,CAAC;AAEvI,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC9F;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,WAAW,CAAC;CAC5B;;;;AA+ND,wBAA6D"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback, useRef } from 'react';
|
|
3
|
+
import { isValidPhoneNumber } from 'libphonenumber-js';
|
|
3
4
|
import styled, { css } from 'styled-components';
|
|
4
5
|
import { useConsolidatedRef, useElement, useFocusWithin, useI18n, useInputFormatter, useTestIds } from '../../hooks';
|
|
5
6
|
import { defaultThemeProp } from '../../theme';
|
|
@@ -41,14 +42,15 @@ const StyledPhoneInput = styled.div(() => {
|
|
|
41
42
|
});
|
|
42
43
|
StyledPhoneInput.defaultProps = defaultThemeProp;
|
|
43
44
|
const PhoneInput = forwardRef(function PhoneInput(props, ref) {
|
|
44
|
-
const { testId, value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, suggestion, additionalInfo, className, autoComplete = '_off', ...restProps } = props;
|
|
45
|
+
const { testId, value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, formattingVariant = 'international', callingCodesList = callingCodes, onChange, onBlur, onFocus, suggestion, additionalInfo, className, autoComplete = '_off', ...restProps } = props;
|
|
45
46
|
const testIds = useTestIds(testId, getPhoneInputTestIds);
|
|
46
47
|
const [selectEl, setSelectEl] = useElement();
|
|
47
48
|
const [inputEl, setInputEl] = useElement();
|
|
48
49
|
const t = useI18n();
|
|
49
|
-
const [
|
|
50
|
+
const [valueCountryCode, subscriberNumber = ''] = value
|
|
50
51
|
? getPhoneNumberParts(value, callingCodesList)
|
|
51
52
|
: [];
|
|
53
|
+
const countryCode = valueCountryCode ?? callingCodesList[0];
|
|
52
54
|
const onFocusChange = (focused) => {
|
|
53
55
|
const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);
|
|
54
56
|
if (focused)
|
|
@@ -67,12 +69,23 @@ const PhoneInput = forwardRef(function PhoneInput(props, ref) {
|
|
|
67
69
|
useFocusWithin([containerRef], onFocusChange);
|
|
68
70
|
const formatter = useCallback((number) => {
|
|
69
71
|
if (value && readOnly && showCountryCode) {
|
|
70
|
-
|
|
72
|
+
if (isValidPhoneNumber(value)) {
|
|
73
|
+
const formattedPhone = formatPhone(value, {
|
|
74
|
+
nationalFormat: formattingVariant === 'domestic',
|
|
75
|
+
showCountryCode: true
|
|
76
|
+
});
|
|
77
|
+
if (formattedPhone)
|
|
78
|
+
return formattedPhone;
|
|
79
|
+
}
|
|
80
|
+
const formattedNumber = formatPhoneNumber(number, countryCode, formattingVariant === 'international', formattingVariant);
|
|
81
|
+
const temp = valueCountryCode
|
|
82
|
+
? [valueCountryCode, formattedNumber].filter(Boolean).join(' ')
|
|
83
|
+
: formattedNumber;
|
|
71
84
|
if (temp)
|
|
72
85
|
return temp;
|
|
73
86
|
}
|
|
74
|
-
return formatPhoneNumber(number
|
|
75
|
-
}, [readOnly, countryCode, showCountryCode]);
|
|
87
|
+
return formatPhoneNumber(number, countryCode, false, showCountryCode ? formattingVariant : 'domestic');
|
|
88
|
+
}, [value, valueCountryCode, readOnly, countryCode, showCountryCode, formattingVariant]);
|
|
76
89
|
const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);
|
|
77
90
|
const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
|
|
78
91
|
const Comp = (_jsx(StyledPhoneInput, { "data-testid": testIds.root, as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: _jsxs(_Fragment, { children: [showCountryCode && !readOnly && (_jsxs(_Fragment, { children: [_jsx(Select, { "data-testid": testIds.countryCode, value: countryCode, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: autoComplete && autoComplete.endsWith('tel')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useElement,\n useFocusWithin,\n useI18n,\n useInputFormatter,\n useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds, createClassName } from '../../utils';\nimport Tooltip from '../Tooltip';\n\nimport callingCodes from './callingCodes';\nimport {\n convertToCallbackParameter,\n formatPhone,\n formatPhoneNumber,\n getPhoneNumberParts\n} from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\ntype AutoFillTel =\n | AutoFillBase\n | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${OptionalPrefixToken<AutoFillContactKind>}tel`;\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /**\n * Display select with countries calling codes\n * @default false\n */\n showCountryCode?: boolean;\n /** Changes lists of countries calling codes */\n callingCodesList?: string[];\n /** Callback fired on input value change */\n onChange?: (value: string) => void;\n /** Callback fired when the component loses focus */\n onBlur?: (value: string) => void;\n /** CCallback fired when the component gets focus */\n onFocus?: (value: string) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLInputElement>;\n /** Flag defining autocompletion behavior. */\n autoComplete?: AutoFillTel;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n return css`\n border: 0;\n\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n ${StyledSelect},\n ${StyledInput} {\n &:focus {\n z-index: 1;\n }\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: ForwardRefForwardPropsComponent<PhoneInputProps> = forwardRef(function PhoneInput(\n props: PropsWithoutRef<PhoneInputProps>,\n ref: PhoneInputProps['ref']\n) {\n const {\n testId,\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n suggestion,\n additionalInfo,\n className,\n autoComplete = '_off',\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getPhoneInputTestIds);\n const [selectEl, setSelectEl] = useElement<HTMLSelectElement>();\n const [inputEl, setInputEl] = useElement<HTMLInputElement>();\n\n const t = useI18n();\n\n const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref, setInputEl);\n const containerRef = useRef<HTMLDivElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n (number: string) => {\n if (value && readOnly && showCountryCode) {\n const temp = formatPhone(value, { nationalFormat: !readOnly });\n if (temp) return temp;\n }\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode, showCountryCode);\n },\n [readOnly, countryCode, showCountryCode]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n data-testid={testIds.root}\n as={StyledFormControl}\n forwardedAs={Flex}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n <>\n {showCountryCode && !readOnly && (\n <>\n <Select\n data-testid={testIds.countryCode}\n value={countryCode}\n aria-label={t('select_country_code')}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-country-code') as AutoFillTel)\n : autoComplete\n }\n ref={setSelectEl}\n hasSuggestion={status === 'pending' && !!suggestion}\n >\n {codesOptions}\n </Select>\n {selectEl && (\n <Tooltip target={selectEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('country_code')}\n </Tooltip>\n )}\n </>\n )}\n <Input\n data-testid={testIds.control}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-national') as AutoFillTel)\n : autoComplete\n }\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n aria-label={t('enter_a_number')}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n suggestion={suggestion}\n className={createClassName('phone-input', className)}\n />\n {showCountryCode && inputEl && (\n <Tooltip target={inputEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('phone_number')}\n </Tooltip>\n )}\n </>\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n suggestion={suggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, PropsWithoutRef, Ref } from 'react';\nimport { isValidPhoneNumber } from 'libphonenumber-js';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useElement,\n useFocusWithin,\n useI18n,\n useInputFormatter,\n useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds, createClassName } from '../../utils';\nimport Tooltip from '../Tooltip';\n\nimport callingCodes from './callingCodes';\nimport {\n convertToCallbackParameter,\n formatPhone,\n formatPhoneNumber,\n getPhoneNumberParts\n} from './utils';\nimport type { PhoneFormattingVariant } from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\ntype AutoFillTel =\n | AutoFillBase\n | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${OptionalPrefixToken<AutoFillContactKind>}tel`;\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /**\n * Display select with countries calling codes\n * @default false\n */\n showCountryCode?: boolean;\n /**\n * Defines how the subscriber number is formatted while typing when the country code is displayed.\n * When the country code is hidden, domestic formatting is used without the country code.\n * @default 'international'\n * @example international: '+1 123 456 7890'\n * @example domestic: '+1 (123) 456-7890'\n * @example without country code: '(123) 456-7890'\n */\n formattingVariant?: PhoneFormattingVariant;\n /** Changes lists of countries calling codes */\n callingCodesList?: string[];\n /** Callback fired on input value change */\n onChange?: (value: string) => void;\n /** Callback fired when the component loses focus */\n onBlur?: (value: string) => void;\n /** CCallback fired when the component gets focus */\n onFocus?: (value: string) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLInputElement>;\n /** Flag defining autocompletion behavior. */\n autoComplete?: AutoFillTel;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n return css`\n border: 0;\n\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n ${StyledSelect},\n ${StyledInput} {\n &:focus {\n z-index: 1;\n }\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: ForwardRefForwardPropsComponent<PhoneInputProps> = forwardRef(function PhoneInput(\n props: PropsWithoutRef<PhoneInputProps>,\n ref: PhoneInputProps['ref']\n) {\n const {\n testId,\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n formattingVariant = 'international',\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n suggestion,\n additionalInfo,\n className,\n autoComplete = '_off',\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getPhoneInputTestIds);\n const [selectEl, setSelectEl] = useElement<HTMLSelectElement>();\n const [inputEl, setInputEl] = useElement<HTMLInputElement>();\n\n const t = useI18n();\n\n const [valueCountryCode, subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n const countryCode = valueCountryCode ?? callingCodesList[0];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref, setInputEl);\n const containerRef = useRef<HTMLDivElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n (number: string) => {\n if (value && readOnly && showCountryCode) {\n if (isValidPhoneNumber(value)) {\n const formattedPhone = formatPhone(value, {\n nationalFormat: formattingVariant === 'domestic',\n showCountryCode: true\n });\n if (formattedPhone) return formattedPhone;\n }\n\n const formattedNumber = formatPhoneNumber(\n number,\n countryCode,\n formattingVariant === 'international',\n formattingVariant\n );\n const temp = valueCountryCode\n ? [valueCountryCode, formattedNumber].filter(Boolean).join(' ')\n : formattedNumber;\n if (temp) return temp;\n }\n return formatPhoneNumber(\n number,\n countryCode,\n false,\n showCountryCode ? formattingVariant : 'domestic'\n );\n },\n [value, valueCountryCode, readOnly, countryCode, showCountryCode, formattingVariant]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n data-testid={testIds.root}\n as={StyledFormControl}\n forwardedAs={Flex}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n <>\n {showCountryCode && !readOnly && (\n <>\n <Select\n data-testid={testIds.countryCode}\n value={countryCode}\n aria-label={t('select_country_code')}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-country-code') as AutoFillTel)\n : autoComplete\n }\n ref={setSelectEl}\n hasSuggestion={status === 'pending' && !!suggestion}\n >\n {codesOptions}\n </Select>\n {selectEl && (\n <Tooltip target={selectEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('country_code')}\n </Tooltip>\n )}\n </>\n )}\n <Input\n data-testid={testIds.control}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-national') as AutoFillTel)\n : autoComplete\n }\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n aria-label={t('enter_a_number')}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n suggestion={suggestion}\n className={createClassName('phone-input', className)}\n />\n {showCountryCode && inputEl && (\n <Tooltip target={inputEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('phone_number')}\n </Tooltip>\n )}\n </>\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n suggestion={suggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
+
export type PhoneFormattingVariant = 'domestic' | 'international';
|
|
1
2
|
export declare const getPhoneNumberParts: (phoneNumber: string, codesList: string[]) => [string | undefined, string];
|
|
2
3
|
export declare const cleanSubscriberNumber: (phoneNumber: string) => string;
|
|
3
4
|
export declare const getCountry: (countryCode: string, number: string) => import("libphonenumber-js").CountryCode | undefined;
|
|
4
|
-
export declare const formatPhoneNumber: (numberToFormat: string, countryCode?: string, showCountryCode?: boolean) => string;
|
|
5
|
+
export declare const formatPhoneNumber: (numberToFormat: string, countryCode?: string, showCountryCode?: boolean, formattingVariant?: PhoneFormattingVariant) => string;
|
|
5
6
|
export declare const convertToCallbackParameter: (codePart: string | undefined, numberPart: string) => string;
|
|
6
7
|
interface PhoneFormatOptions {
|
|
7
8
|
nationalFormat?: boolean;
|
|
9
|
+
showCountryCode?: boolean;
|
|
8
10
|
}
|
|
9
|
-
export declare const formatPhone: (value: string, { nationalFormat }?: PhoneFormatOptions) => string | undefined;
|
|
11
|
+
export declare const formatPhone: (value: string, { nationalFormat, showCountryCode }?: PhoneFormatOptions) => string | undefined;
|
|
10
12
|
export default getPhoneNumberParts;
|
|
11
13
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,GAC9B,aAAa,MAAM,EACnB,WAAW,MAAM,EAAE,KAClB,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,CAK7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,aAAa,MAAM,WAExD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,aAAa,MAAM,EAAE,QAAQ,MAAM,wDAI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,gBAAgB,MAAM,EACtB,cAAa,MAAW,EACxB,kBAAiB,OAAe,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,eAAe,CAAC;AAElE,eAAO,MAAM,mBAAmB,GAC9B,aAAa,MAAM,EACnB,WAAW,MAAM,EAAE,KAClB,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,CAK7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,aAAa,MAAM,WAExD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,aAAa,MAAM,EAAE,QAAQ,MAAM,wDAI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,gBAAgB,MAAM,EACtB,cAAa,MAAW,EACxB,kBAAiB,OAAe,EAChC,oBAAmB,sBAAuE,WAiB3F,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,UAAU,MAAM,GAAG,SAAS,EAAE,YAAY,MAAM,WAE1F,CAAC;AAEF,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,GACtB,OAAO,MAAM,EACb,sCAA6C,kBAAuB,uBAcrE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -14,11 +14,13 @@ export const getCountry = (countryCode, number) => {
|
|
|
14
14
|
asYouTypeCode.input(countryCode + number);
|
|
15
15
|
return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;
|
|
16
16
|
};
|
|
17
|
-
export const formatPhoneNumber = (numberToFormat, countryCode = '', showCountryCode = false) => {
|
|
17
|
+
export const formatPhoneNumber = (numberToFormat, countryCode = '', showCountryCode = false, formattingVariant = showCountryCode ? 'international' : 'domestic') => {
|
|
18
18
|
let formatted = cleanSubscriberNumber(numberToFormat);
|
|
19
19
|
if (countryCode) {
|
|
20
20
|
const country = getCountry(countryCode, formatted);
|
|
21
|
-
formatted = formatIncompletePhoneNumber(showCountryCode
|
|
21
|
+
formatted = formatIncompletePhoneNumber(showCountryCode || formattingVariant === 'international'
|
|
22
|
+
? countryCode + formatted
|
|
23
|
+
: formatted, country);
|
|
22
24
|
if (formatted.startsWith(countryCode)) {
|
|
23
25
|
formatted = formatted.substring(countryCode.length).trim();
|
|
24
26
|
}
|
|
@@ -28,10 +30,19 @@ export const formatPhoneNumber = (numberToFormat, countryCode = '', showCountryC
|
|
|
28
30
|
export const convertToCallbackParameter = (codePart, numberPart) => {
|
|
29
31
|
return [codePart, cleanSubscriberNumber(numberPart)].join('');
|
|
30
32
|
};
|
|
31
|
-
export const formatPhone = (value, { nationalFormat } = {}) => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
export const formatPhone = (value, { nationalFormat, showCountryCode = false } = {}) => {
|
|
34
|
+
const phoneNumber = parsePhoneNumber(value);
|
|
35
|
+
if (!phoneNumber)
|
|
36
|
+
return undefined;
|
|
37
|
+
if (!nationalFormat)
|
|
38
|
+
return phoneNumber.formatInternational();
|
|
39
|
+
const formatted = phoneNumber.formatNational();
|
|
40
|
+
if (!showCountryCode)
|
|
41
|
+
return formatted;
|
|
42
|
+
const subscriberNumber = formatted.startsWith('0')
|
|
43
|
+
? formatIncompletePhoneNumber(phoneNumber.nationalNumber, phoneNumber.country)
|
|
44
|
+
: formatted;
|
|
45
|
+
return `+${phoneNumber.countryCallingCode} ${subscriberNumber}`;
|
|
35
46
|
};
|
|
36
47
|
export default getPhoneNumberParts;
|
|
37
48
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import parsePhoneNumber, { AsYouType, formatIncompletePhoneNumber } from 'libphonenumber-js';\n\nexport type PhoneFormattingVariant = 'domestic' | 'international';\n\nexport const getPhoneNumberParts = (\n phoneNumber: string,\n codesList: string[]\n): [string | undefined, string] => {\n if (!phoneNumber.startsWith('+') || phoneNumber.startsWith('+0')) return [undefined, phoneNumber];\n const countryCode = codesList.find(code => phoneNumber.startsWith(code));\n const subscriberNumber = phoneNumber.substring(countryCode?.length || 0);\n return [countryCode, subscriberNumber];\n};\n\nexport const cleanSubscriberNumber = (phoneNumber: string) => {\n return phoneNumber.replace(/\\D/g, '');\n};\n\nexport const getCountry = (countryCode: string, number: string) => {\n const asYouTypeCode = new AsYouType();\n asYouTypeCode.input(countryCode + number);\n return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;\n};\n\nexport const formatPhoneNumber = (\n numberToFormat: string,\n countryCode: string = '',\n showCountryCode: boolean = false,\n formattingVariant: PhoneFormattingVariant = showCountryCode ? 'international' : 'domestic'\n) => {\n let formatted = cleanSubscriberNumber(numberToFormat);\n if (countryCode) {\n const country = getCountry(countryCode, formatted);\n formatted = formatIncompletePhoneNumber(\n showCountryCode || formattingVariant === 'international'\n ? countryCode + formatted\n : formatted,\n country\n );\n\n if (formatted.startsWith(countryCode)) {\n formatted = formatted.substring(countryCode.length).trim();\n }\n }\n return formatted;\n};\n\nexport const convertToCallbackParameter = (codePart: string | undefined, numberPart: string) => {\n return [codePart, cleanSubscriberNumber(numberPart)].join('');\n};\n\ninterface PhoneFormatOptions {\n nationalFormat?: boolean;\n showCountryCode?: boolean;\n}\n\nexport const formatPhone = (\n value: string,\n { nationalFormat, showCountryCode = false }: PhoneFormatOptions = {}\n) => {\n const phoneNumber = parsePhoneNumber(value);\n if (!phoneNumber) return undefined;\n\n if (!nationalFormat) return phoneNumber.formatInternational();\n\n const formatted = phoneNumber.formatNational();\n if (!showCountryCode) return formatted;\n\n const subscriberNumber = formatted.startsWith('0')\n ? formatIncompletePhoneNumber(phoneNumber.nationalNumber, phoneNumber.country)\n : formatted;\n return `+${phoneNumber.countryCallingCode} ${subscriberNumber}`;\n};\n\nexport default getPhoneNumberParts;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "10.0.0-build.5.
|
|
3
|
+
"version": "10.0.0-build.5.27",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|