@mvf/external-components 3.31.1-dev.4 → 3.31.1-dev.5
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/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.js +8 -6
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.js.map +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js +87 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js.map +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/{ErrorDisplay.d.ts → __helpers__/components/display/ErrorDisplay.d.ts} +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.js +17 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{PhoneInput.js → __helpers__/components/forms/PhoneInput.js} +2 -5
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{PhoneInput.test.js → __helpers__/components/forms/PhoneInput.test.js} +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountryDropdown.d.ts → __helpers__/components/ui/CountryDropdown.d.ts} +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountryDropdown.js → __helpers__/components/ui/CountryDropdown.js} +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountryDropdown.test.js → __helpers__/components/ui/CountryDropdown.test.js} +2 -2
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.test.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountryModal.d.ts → __helpers__/components/ui/CountryModal.d.ts} +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountryModal.js → __helpers__/components/ui/CountryModal.js} +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountryModal.test.js → __helpers__/components/ui/CountryModal.test.js} +18 -18
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountrySelector.d.ts → __helpers__/components/ui/CountrySelector.d.ts} +2 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/{CountrySelector.js → __helpers__/components/ui/CountrySelector.js} +8 -5
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/{FlagIcon.d.ts → __helpers__/components/ui/FlagIcon.d.ts} +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.js.map +1 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.d.ts +2 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.js +8 -6
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.js.map +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.d.ts +2 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js +53 -25
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js.map +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.d.ts +5 -2
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.js +28 -5
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.js.map +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.d.ts +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.js +14 -4
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.js.map +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/defaultProps.js +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/defaultProps.js.map +1 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/index.d.ts +5 -5
- package/Components/Molecules/PhoneNumberTextFieldCustom/index.js +5 -5
- package/Components/Molecules/PhoneNumberTextFieldCustom/index.js.map +1 -1
- package/package.json +1 -2
- package/Components/Molecules/PhoneNumberTextField/CountryDropdown.d.ts +0 -12
- package/Components/Molecules/PhoneNumberTextField/CountryDropdown.js +0 -146
- package/Components/Molecules/PhoneNumberTextField/CountryDropdown.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/CountryDropdown.test.js +0 -49
- package/Components/Molecules/PhoneNumberTextField/CountryDropdown.test.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/CountryModal.d.ts +0 -11
- package/Components/Molecules/PhoneNumberTextField/CountryModal.js +0 -180
- package/Components/Molecules/PhoneNumberTextField/CountryModal.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/CountryModal.test.js +0 -54
- package/Components/Molecules/PhoneNumberTextField/CountryModal.test.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/__tests__/PhoneNumberTextField.test.d.ts +0 -1
- package/Components/Molecules/PhoneNumberTextField/__tests__/PhoneNumberTextField.test.js +0 -215
- package/Components/Molecules/PhoneNumberTextField/__tests__/PhoneNumberTextField.test.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/countryData.d.ts +0 -13
- package/Components/Molecules/PhoneNumberTextField/countryData.js +0 -743
- package/Components/Molecules/PhoneNumberTextField/countryData.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/makePhoneInputStyles.d.ts +0 -50
- package/Components/Molecules/PhoneNumberTextField/makePhoneInputStyles.js +0 -147
- package/Components/Molecules/PhoneNumberTextField/makePhoneInputStyles.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/phoneNumberValidation.d.ts +0 -12
- package/Components/Molecules/PhoneNumberTextField/phoneNumberValidation.js +0 -66
- package/Components/Molecules/PhoneNumberTextField/phoneNumberValidation.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextField/phoneValidation.d.ts +0 -12
- package/Components/Molecules/PhoneNumberTextField/phoneValidation.js +0 -71
- package/Components/Molecules/PhoneNumberTextField/phoneValidation.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/CountryDropdown.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/CountryDropdown.test.d.ts +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/CountryDropdown.test.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/CountryModal.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/CountryModal.test.d.ts +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/CountryModal.test.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/CountrySelector.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/ErrorDisplay.js +0 -26
- package/Components/Molecules/PhoneNumberTextFieldCustom/ErrorDisplay.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/FlagIcon.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneInput.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneInput.test.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldRefactored.d.ts +0 -37
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldRefactored.js +0 -154
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldRefactored.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.d.ts +0 -17
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.js +0 -29
- package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useDebouncedValidation.d.ts +0 -12
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useDebouncedValidation.js +0 -70
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useDebouncedValidation.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/DebouncedValidationStory.d.ts +0 -20
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/DebouncedValidationStory.js +0 -60
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/DebouncedValidationStory.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/StrictModeStory.d.ts +0 -18
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/StrictModeStory.js +0 -101
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/StrictModeStory.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryDataFull.d.ts +0 -13
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryDataFull.js +0 -513
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryDataFull.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryDataOptimized.d.ts +0 -0
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryDataOptimized.js +0 -2
- package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryDataOptimized.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/countryData.d.ts +0 -12
- package/Components/Molecules/PhoneNumberTextFieldCustom/countryData.js +0 -507
- package/Components/Molecules/PhoneNumberTextFieldCustom/countryData.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/makeFormControlPhoneNumberStyling.d.ts +0 -8
- package/Components/Molecules/PhoneNumberTextFieldCustom/makeFormControlPhoneNumberStyling.js +0 -139
- package/Components/Molecules/PhoneNumberTextFieldCustom/makeFormControlPhoneNumberStyling.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/phoneValidation.d.ts +0 -15
- package/Components/Molecules/PhoneNumberTextFieldCustom/phoneValidation.js +0 -120
- package/Components/Molecules/PhoneNumberTextFieldCustom/phoneValidation.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/phoneValidation.test.d.ts +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/phoneValidation.test.js +0 -157
- package/Components/Molecules/PhoneNumberTextFieldCustom/phoneValidation.test.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/useCountrySelector.d.ts +0 -12
- package/Components/Molecules/PhoneNumberTextFieldCustom/useCountrySelector.js +0 -34
- package/Components/Molecules/PhoneNumberTextFieldCustom/useCountrySelector.js.map +0 -1
- package/Components/Molecules/PhoneNumberTextFieldCustom/usePhoneNumber.d.ts +0 -31
- package/Components/Molecules/PhoneNumberTextFieldCustom/usePhoneNumber.js +0 -130
- package/Components/Molecules/PhoneNumberTextFieldCustom/usePhoneNumber.js.map +0 -1
- /package/Components/Molecules/PhoneNumberTextFieldCustom/{PhoneInput.d.ts → __helpers__/components/forms/PhoneInput.d.ts} +0 -0
- /package/Components/Molecules/PhoneNumberTextFieldCustom/{PhoneInput.test.d.ts → __helpers__/components/forms/PhoneInput.test.d.ts} +0 -0
- /package/Components/Molecules/{PhoneNumberTextField → PhoneNumberTextFieldCustom/__helpers__/components/ui}/CountryDropdown.test.d.ts +0 -0
- /package/Components/Molecules/{PhoneNumberTextField → PhoneNumberTextFieldCustom/__helpers__/components/ui}/CountryModal.test.d.ts +0 -0
- /package/Components/Molecules/PhoneNumberTextFieldCustom/{FlagIcon.js → __helpers__/components/ui/FlagIcon.js} +0 -0
@@ -1,154 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
14
|
-
var t = {};
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
16
|
-
t[p] = s[p];
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
20
|
-
t[p[i]] = s[p[i]];
|
21
|
-
}
|
22
|
-
return t;
|
23
|
-
};
|
24
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
25
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
26
|
-
};
|
27
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
28
|
-
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
29
|
-
/** @jsxImportSource @emotion/react */
|
30
|
-
var FormControl_1 = __importDefault(require("@mui/material/FormControl"));
|
31
|
-
var FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
|
32
|
-
var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
|
33
|
-
var react_1 = require("react");
|
34
|
-
var Input_1 = __importDefault(require("../../../Components/Atoms/Input"));
|
35
|
-
var InputLabel_1 = __importDefault(require("../../../Components/Atoms/InputLabel"));
|
36
|
-
var makeFormControlPhoneNumberStyling_1 = __importDefault(require("./makeFormControlPhoneNumberStyling"));
|
37
|
-
var makeFormControlStyles_1 = __importDefault(require("../../../Components/Atoms/FormControl/makeFormControlStyles"));
|
38
|
-
var CountryDropdown_1 = __importDefault(require("./CountryDropdown"));
|
39
|
-
var CountryModal_1 = __importDefault(require("./CountryModal"));
|
40
|
-
var FlagIcon_1 = __importDefault(require("./FlagIcon"));
|
41
|
-
var usePhoneNumber_1 = require("./usePhoneNumber");
|
42
|
-
var useCountrySelector_1 = require("./useCountrySelector");
|
43
|
-
var defaultProps = {
|
44
|
-
disabled: false,
|
45
|
-
isAnswered: false,
|
46
|
-
isSafari: false,
|
47
|
-
isAutoFilledActive: false,
|
48
|
-
enableCountryChange: true,
|
49
|
-
enableCountrySearch: false,
|
50
|
-
useModalForCountrySelection: false,
|
51
|
-
label: '',
|
52
|
-
value: '',
|
53
|
-
onBlur: function () { },
|
54
|
-
onClick: function () { },
|
55
|
-
};
|
56
|
-
var PhoneNumberTextFieldRefactored = function (_a) {
|
57
|
-
var
|
58
|
-
// Core props
|
59
|
-
id = _a.id, _b = _a.value, value = _b === void 0 ? '' : _b, label = _a.label, errorMessage = _a.errorMessage, disabled = _a.disabled, placeholder = _a.placeholder,
|
60
|
-
// Country settings
|
61
|
-
initialCountry = _a.initialCountry, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection,
|
62
|
-
// UI state
|
63
|
-
isAnswered = _a.isAnswered, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, experimentName = _a.experimentName,
|
64
|
-
// Callbacks
|
65
|
-
onPhoneNumberChange = _a.onPhoneNumberChange, onCountryChange = _a.onCountryChange, onChange = _a.onChange, // Legacy support
|
66
|
-
// Event handlers
|
67
|
-
onBlur = _a.onBlur, onClick = _a.onClick, props = __rest(_a, ["id", "value", "label", "errorMessage", "disabled", "placeholder", "initialCountry", "enableCountryChange", "enableCountrySearch", "useModalForCountrySelection", "isAnswered", "isSafari", "isAutoFilledActive", "experimentName", "onPhoneNumberChange", "onCountryChange", "onChange", "onBlur", "onClick"]);
|
68
|
-
var countrySelectorRef = (0, react_1.useRef)(null);
|
69
|
-
var inputRef = (0, react_1.useRef)(null);
|
70
|
-
// Custom hooks for clean separation of concerns
|
71
|
-
var phoneNumber = (0, usePhoneNumber_1.usePhoneNumber)({
|
72
|
-
initialCountry: initialCountry,
|
73
|
-
initialValue: value,
|
74
|
-
});
|
75
|
-
var countrySelector = (0, useCountrySelector_1.useCountrySelector)({
|
76
|
-
enableCountryChange: enableCountryChange,
|
77
|
-
});
|
78
|
-
// Handle phone number change events
|
79
|
-
(0, react_1.useEffect)(function () {
|
80
|
-
if (phoneNumber.phoneNumber || phoneNumber.validationResult) {
|
81
|
-
var event_1 = {
|
82
|
-
id: id,
|
83
|
-
phoneNumber: phoneNumber.phoneNumber,
|
84
|
-
e164Number: phoneNumber.formattedE164,
|
85
|
-
isValid: phoneNumber.isValid,
|
86
|
-
selectedCountry: phoneNumber.selectedCountry,
|
87
|
-
validationResult: phoneNumber.validationResult,
|
88
|
-
};
|
89
|
-
onPhoneNumberChange === null || onPhoneNumberChange === void 0 ? void 0 : onPhoneNumberChange(event_1);
|
90
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event_1); // Legacy support
|
91
|
-
}
|
92
|
-
}, [
|
93
|
-
id,
|
94
|
-
phoneNumber.phoneNumber,
|
95
|
-
phoneNumber.formattedE164,
|
96
|
-
phoneNumber.isValid,
|
97
|
-
phoneNumber.selectedCountry,
|
98
|
-
phoneNumber.validationResult,
|
99
|
-
onPhoneNumberChange,
|
100
|
-
onChange,
|
101
|
-
]);
|
102
|
-
// Handle input changes
|
103
|
-
var handlePhoneChange = (0, react_1.useCallback)(function (params) {
|
104
|
-
phoneNumber.setPhoneNumber(params.value);
|
105
|
-
}, [phoneNumber]);
|
106
|
-
// Handle country changes
|
107
|
-
var handleCountryChange = (0, react_1.useCallback)(function (country) {
|
108
|
-
var previousCountry = phoneNumber.selectedCountry;
|
109
|
-
phoneNumber.setSelectedCountry(country);
|
110
|
-
// Call country change callback
|
111
|
-
var event = {
|
112
|
-
id: id,
|
113
|
-
selectedCountry: country,
|
114
|
-
previousCountry: previousCountry,
|
115
|
-
};
|
116
|
-
onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(event);
|
117
|
-
}, [phoneNumber, id, onCountryChange]);
|
118
|
-
// Determine error state
|
119
|
-
var shouldShowError = errorMessage ||
|
120
|
-
(phoneNumber.validationResult && !phoneNumber.validationResult.isValid && phoneNumber.phoneNumber.length > 0);
|
121
|
-
var finalErrorMessage = errorMessage || phoneNumber.errorMessage;
|
122
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormControl_1.default, __assign({ variant: "standard", error: !!shouldShowError, fullWidth: true, css: [
|
123
|
-
(0, makeFormControlPhoneNumberStyling_1.default)({
|
124
|
-
isAnswered: isAnswered !== null && isAnswered !== void 0 ? isAnswered : false,
|
125
|
-
isAutoFilledActive: isAutoFilledActive !== null && isAutoFilledActive !== void 0 ? isAutoFilledActive : false,
|
126
|
-
isSafari: isSafari !== null && isSafari !== void 0 ? isSafari : false,
|
127
|
-
hasError: !!shouldShowError,
|
128
|
-
}),
|
129
|
-
(0, makeFormControlStyles_1.default)({
|
130
|
-
isAutoFilledActive: isAutoFilledActive !== null && isAutoFilledActive !== void 0 ? isAutoFilledActive : false,
|
131
|
-
isSafari: isSafari !== null && isSafari !== void 0 ? isSafari : false
|
132
|
-
}),
|
133
|
-
], sx: { position: 'relative' } }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, __assign({ isAnswered: isAnswered !== null && isAnswered !== void 0 ? isAnswered : false, htmlFor: id, shrink: true, experimentName: experimentName }, { children: label }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "phone-input-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ ref: countrySelectorRef, className: "country-selector", onClick: enableCountryChange ? countrySelector.handleCountrySelectClick : undefined, style: {
|
134
|
-
display: 'flex',
|
135
|
-
alignItems: 'center',
|
136
|
-
padding: '8px 12px',
|
137
|
-
cursor: enableCountryChange ? 'pointer' : 'default',
|
138
|
-
minWidth: '80px',
|
139
|
-
justifyContent: 'center',
|
140
|
-
}, role: enableCountryChange ? 'button' : undefined, tabIndex: enableCountryChange ? 0 : undefined, "aria-label": enableCountryChange
|
141
|
-
? "Select country, currently ".concat(phoneNumber.selectedCountry.name)
|
142
|
-
: "Country: ".concat(phoneNumber.selectedCountry.name), onKeyDown: countrySelector.handleKeyDown }, { children: [(0, jsx_runtime_1.jsx)(FlagIcon_1.default, { countryCode: phoneNumber.selectedCountry.code, style: { marginRight: '8px' } }), enableCountryChange && ((0, jsx_runtime_1.jsx)(ExpandMore_1.default, { style: {
|
143
|
-
fontSize: '16px',
|
144
|
-
color: 'rgba(0, 0, 0, 1)',
|
145
|
-
marginLeft: '4px',
|
146
|
-
transform: countrySelector.isCountryMenuOpen
|
147
|
-
? 'rotate(180deg)'
|
148
|
-
: 'rotate(0deg)',
|
149
|
-
transition: 'transform 0.1s ease-in-out',
|
150
|
-
} }))] })), (0, jsx_runtime_1.jsx)(Input_1.default, __assign({ error: !!shouldShowError, id: id, onChange: handlePhoneChange, isAnswered: isAnswered !== null && isAnswered !== void 0 ? isAnswered : false, value: phoneNumber.phoneNumber, isSafari: isSafari !== null && isSafari !== void 0 ? isSafari : false, isAutoFilledActive: isAutoFilledActive !== null && isAutoFilledActive !== void 0 ? isAutoFilledActive : false, experimentName: experimentName, type: "tel", placeholder: placeholder || phoneNumber.selectedCountry.example, inputRef: inputRef, disabled: disabled, onBlur: onBlur, onClick: onClick }, props))] })), finalErrorMessage && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: finalErrorMessage }))] })), enableCountryChange && useModalForCountrySelection ? ((0, jsx_runtime_1.jsx)(CountryModal_1.default, { selectedCountry: phoneNumber.selectedCountry, onCountryChange: handleCountryChange, enableCountrySearch: enableCountrySearch, open: countrySelector.isCountryMenuOpen, onClose: countrySelector.closeCountryMenu })) : ((0, jsx_runtime_1.jsx)(CountryDropdown_1.default, { selectedCountry: phoneNumber.selectedCountry, onCountryChange: handleCountryChange, enableCountrySearch: enableCountrySearch, anchorEl: countrySelectorRef.current, open: countrySelector.isCountryMenuOpen, onClose: countrySelector.closeCountryMenu }))] }));
|
151
|
-
};
|
152
|
-
PhoneNumberTextFieldRefactored.defaultProps = defaultProps;
|
153
|
-
exports.default = PhoneNumberTextFieldRefactored;
|
154
|
-
//# sourceMappingURL=PhoneNumberTextFieldRefactored.js.map
|
package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldRefactored.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"PhoneNumberTextFieldRefactored.js","sourceRoot":"","sources":["../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldRefactored.tsx"],"names":[],"mappings":"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"}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
type StoryType = React.FunctionComponent<{
|
3
|
-
disabled: boolean;
|
4
|
-
errorMessage: string;
|
5
|
-
isAnswered: boolean;
|
6
|
-
label: string;
|
7
|
-
placeholder: string;
|
8
|
-
type: 'tel' | 'text';
|
9
|
-
parentContainerMaxWidth: number;
|
10
|
-
isSafari: boolean;
|
11
|
-
isAutoFilledActive: boolean;
|
12
|
-
enableCountryChange: boolean;
|
13
|
-
enableCountrySearch: boolean;
|
14
|
-
useModalForCountrySelection: boolean;
|
15
|
-
}>;
|
16
|
-
declare const PhoneNumberTextFieldStory: StoryType;
|
17
|
-
export default PhoneNumberTextFieldStory;
|
@@ -1,29 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
|
-
};
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
17
|
-
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
18
|
-
var addon_actions_1 = require("@storybook/addon-actions");
|
19
|
-
var PhoneNumberTextField_1 = __importDefault(require("./PhoneNumberTextField"));
|
20
|
-
var handleChange = function (_a) {
|
21
|
-
var id = _a.id, value = _a.value;
|
22
|
-
(0, addon_actions_1.action)('Input Change')({ phone: value });
|
23
|
-
};
|
24
|
-
var PhoneNumberTextFieldStory = function (_a) {
|
25
|
-
var disabled = _a.disabled, errorMessage = _a.errorMessage, type = _a.type, isAnswered = _a.isAnswered, label = _a.label, placeholder = _a.placeholder, parentContainerMaxWidth = _a.parentContainerMaxWidth, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection;
|
26
|
-
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: parentContainerMaxWidth } }, { children: (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { disabled: disabled, errorMessage: errorMessage, onChange: handleChange, type: type, id: "id", isAnswered: isAnswered, label: label, placeholder: placeholder, isSafari: isSafari, isAutoFilledActive: isAutoFilledActive, experimentName: "default", enableCountryChange: enableCountryChange, enableCountrySearch: enableCountrySearch, useModalForCountrySelection: useModalForCountrySelection }) })));
|
27
|
-
};
|
28
|
-
exports.default = PhoneNumberTextFieldStory;
|
29
|
-
//# sourceMappingURL=PhoneNumberTextFieldStory.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"PhoneNumberTextFieldStory.js","sourceRoot":"","sources":["../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,0DAAkD;AAGlD,gFAA0D;AAiB1D,IAAM,YAAY,GAAG,UAAC,EAAkD;QAAhD,EAAE,QAAA,EAAE,KAAK,WAAA;IAC/B,IAAA,sBAAM,EAAC,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,IAAM,yBAAyB,GAAc,UAAC,EAa7C;QAZC,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,uBAAuB,6BAAA,EACvB,QAAQ,cAAA,EACR,kBAAkB,wBAAA,EAClB,mBAAmB,yBAAA,EACnB,mBAAmB,yBAAA,EACnB,2BAA2B,iCAAA;IAE3B,OAAO,CACL,yCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,uBAAuB,EAAE,gBAC/C,uBAAC,8BAAoB,IACnB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,IAAI,EACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,cAAc,EAAC,SAAS,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,mBAAmB,EACxC,2BAA2B,EAAE,2BAA2B,GACxD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,yBAAyB,CAAC"}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { PhoneValidationResult } from '../utils/phoneValidation';
|
2
|
-
export interface DebouncedValidationOptions {
|
3
|
-
validationFunction: () => PhoneValidationResult | null;
|
4
|
-
delay?: number;
|
5
|
-
immediate?: boolean;
|
6
|
-
}
|
7
|
-
export interface DebouncedValidationReturn {
|
8
|
-
debouncedResult: PhoneValidationResult | null;
|
9
|
-
isValidating: boolean;
|
10
|
-
validateNow: () => void;
|
11
|
-
}
|
12
|
-
export declare const useDebouncedValidation: ({ validationFunction, delay, immediate, }: DebouncedValidationOptions) => DebouncedValidationReturn;
|
package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useDebouncedValidation.js
DELETED
@@ -1,70 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.useDebouncedValidation = void 0;
|
4
|
-
var react_1 = require("react");
|
5
|
-
var useDebouncedValidation = function (_a) {
|
6
|
-
var validationFunction = _a.validationFunction, _b = _a.delay, delay = _b === void 0 ? 300 : _b, _c = _a.immediate, immediate = _c === void 0 ? false : _c;
|
7
|
-
var _d = (0, react_1.useState)(null), debouncedResult = _d[0], setDebouncedResult = _d[1];
|
8
|
-
var _e = (0, react_1.useState)(false), isValidating = _e[0], setIsValidating = _e[1];
|
9
|
-
var timeoutRef = (0, react_1.useRef)(null);
|
10
|
-
var isFirstCall = (0, react_1.useRef)(true);
|
11
|
-
var validationFunctionRef = (0, react_1.useRef)(validationFunction);
|
12
|
-
// Update the ref when validationFunction changes instead of recreating callbacks
|
13
|
-
(0, react_1.useEffect)(function () {
|
14
|
-
validationFunctionRef.current = validationFunction;
|
15
|
-
}, [validationFunction]);
|
16
|
-
var validateNow = (0, react_1.useCallback)(function () {
|
17
|
-
if (timeoutRef.current) {
|
18
|
-
clearTimeout(timeoutRef.current);
|
19
|
-
timeoutRef.current = null;
|
20
|
-
}
|
21
|
-
setIsValidating(false);
|
22
|
-
var result = validationFunctionRef.current();
|
23
|
-
setDebouncedResult(result);
|
24
|
-
}, []); // No dependencies since we use ref
|
25
|
-
var debouncedValidate = (0, react_1.useCallback)(function () {
|
26
|
-
if (timeoutRef.current) {
|
27
|
-
clearTimeout(timeoutRef.current);
|
28
|
-
}
|
29
|
-
// If it's the first call and immediate validation is enabled, validate right away
|
30
|
-
if (isFirstCall.current && immediate) {
|
31
|
-
isFirstCall.current = false;
|
32
|
-
validateNow();
|
33
|
-
return;
|
34
|
-
}
|
35
|
-
isFirstCall.current = false;
|
36
|
-
setIsValidating(true);
|
37
|
-
timeoutRef.current = setTimeout(function () {
|
38
|
-
validateNow();
|
39
|
-
}, delay);
|
40
|
-
}, [delay, immediate, validateNow]);
|
41
|
-
// Only trigger validation when the validation function actually changes
|
42
|
-
// Use a ref to track the previous function to avoid infinite loops
|
43
|
-
var prevValidationFunctionRef = (0, react_1.useRef)(validationFunction);
|
44
|
-
(0, react_1.useEffect)(function () {
|
45
|
-
// Only re-validate if the function reference actually changed
|
46
|
-
if (prevValidationFunctionRef.current !== validationFunction) {
|
47
|
-
prevValidationFunctionRef.current = validationFunction;
|
48
|
-
debouncedValidate();
|
49
|
-
}
|
50
|
-
return function () {
|
51
|
-
if (timeoutRef.current) {
|
52
|
-
clearTimeout(timeoutRef.current);
|
53
|
-
}
|
54
|
-
};
|
55
|
-
}, [validationFunction, debouncedValidate]);
|
56
|
-
(0, react_1.useEffect)(function () {
|
57
|
-
return function () {
|
58
|
-
if (timeoutRef.current) {
|
59
|
-
clearTimeout(timeoutRef.current);
|
60
|
-
}
|
61
|
-
};
|
62
|
-
}, []);
|
63
|
-
return {
|
64
|
-
debouncedResult: debouncedResult,
|
65
|
-
isValidating: isValidating,
|
66
|
-
validateNow: validateNow,
|
67
|
-
};
|
68
|
-
};
|
69
|
-
exports.useDebouncedValidation = useDebouncedValidation;
|
70
|
-
//# sourceMappingURL=useDebouncedValidation.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useDebouncedValidation.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useDebouncedValidation.ts"],"names":[],"mappings":";;;AAAA,+BAAiE;AAe1D,IAAM,sBAAsB,GAAG,UAAC,EAIV;QAH3B,kBAAkB,wBAAA,EAClB,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EACX,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA;IAEX,IAAA,KACJ,IAAA,gBAAQ,EAA+B,IAAI,CAAC,EADvC,eAAe,QAAA,EAAE,kBAAkB,QACI,CAAC;IACzC,IAAA,KAAkC,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAC;IACxD,IAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,IAAM,WAAW,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IACjC,IAAM,qBAAqB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IAEzD,iFAAiF;IACjF,IAAA,iBAAS,EAAC;QACR,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IACrD,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,IAAM,WAAW,GAAG,IAAA,mBAAW,EAAC;QAC9B,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACjC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;SAC3B;QAED,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,IAAM,MAAM,GAAG,qBAAqB,CAAC,OAAO,EAAE,CAAC;QAC/C,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mCAAmC;IAE3C,IAAM,iBAAiB,GAAG,IAAA,mBAAW,EAAC;QACpC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAClC;QAED,kFAAkF;QAClF,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,EAAE;YACpC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5B,WAAW,EAAE,CAAC;YACd,OAAO;SACR;QAED,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,eAAe,CAAC,IAAI,CAAC,CAAC;QAEtB,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;YAC9B,WAAW,EAAE,CAAC;QAChB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpC,wEAAwE;IACxE,mEAAmE;IACnE,IAAM,yBAAyB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IAC7D,IAAA,iBAAS,EAAC;QACR,8DAA8D;QAC9D,IAAI,yBAAyB,CAAC,OAAO,KAAK,kBAAkB,EAAE;YAC5D,yBAAyB,CAAC,OAAO,GAAG,kBAAkB,CAAC;YACvD,iBAAiB,EAAE,CAAC;SACrB;QAED,OAAO;YACL,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5C,IAAA,iBAAS,EAAC;QACR,OAAO;YACL,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,eAAe,iBAAA;QACf,YAAY,cAAA;QACZ,WAAW,aAAA;KACZ,CAAC;AACJ,CAAC,CAAC;AA9EW,QAAA,sBAAsB,0BA8EjC"}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
type DebouncedValidationStoryType = React.FunctionComponent<{
|
3
|
-
disabled: boolean;
|
4
|
-
errorMessage?: string;
|
5
|
-
isAnswered: boolean;
|
6
|
-
label: string;
|
7
|
-
placeholder?: string;
|
8
|
-
type: 'tel' | 'text';
|
9
|
-
parentContainerMaxWidth: number;
|
10
|
-
isSafari: boolean;
|
11
|
-
isAutoFilledActive: boolean;
|
12
|
-
enableCountryChange: boolean;
|
13
|
-
enableCountrySearch: boolean;
|
14
|
-
useModalForCountrySelection: boolean;
|
15
|
-
enableDebouncedValidation: boolean;
|
16
|
-
validationDelay: number;
|
17
|
-
strictMode?: boolean;
|
18
|
-
}>;
|
19
|
-
declare const DebouncedValidationStory: DebouncedValidationStoryType;
|
20
|
-
export default DebouncedValidationStory;
|
@@ -1,60 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
|
-
};
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
17
|
-
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
18
|
-
var addon_actions_1 = require("@storybook/addon-actions");
|
19
|
-
var react_1 = require("react");
|
20
|
-
var PhoneNumberTextField_1 = __importDefault(require("../../PhoneNumberTextField"));
|
21
|
-
var DebouncedValidationStory = function (_a) {
|
22
|
-
var disabled = _a.disabled, errorMessage = _a.errorMessage, type = _a.type, isAnswered = _a.isAnswered, label = _a.label, placeholder = _a.placeholder, parentContainerMaxWidth = _a.parentContainerMaxWidth, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection, enableDebouncedValidation = _a.enableDebouncedValidation, validationDelay = _a.validationDelay, strictMode = _a.strictMode;
|
23
|
-
var _b = (0, react_1.useState)(''), phoneValue = _b[0], setPhoneValue = _b[1];
|
24
|
-
var _c = (0, react_1.useState)({
|
25
|
-
isValid: false,
|
26
|
-
}), validationInfo = _c[0], setValidationInfo = _c[1];
|
27
|
-
var handlePhoneNumberChange = function (params) {
|
28
|
-
(0, addon_actions_1.action)('Phone Number Change')(params);
|
29
|
-
setPhoneValue(params.phoneNumber);
|
30
|
-
};
|
31
|
-
var handleValidationChange = function (params) {
|
32
|
-
(0, addon_actions_1.action)('Validation Change')(params);
|
33
|
-
setValidationInfo({
|
34
|
-
isValid: params.isValid,
|
35
|
-
errorMessage: params.validationResult.errorMessage,
|
36
|
-
isValidating: false,
|
37
|
-
});
|
38
|
-
};
|
39
|
-
var handleFormattedValueChange = function (params) {
|
40
|
-
(0, addon_actions_1.action)('Formatted Value Change')(params);
|
41
|
-
};
|
42
|
-
var handleCountryChange = function (params) {
|
43
|
-
(0, addon_actions_1.action)('Country Change')(params);
|
44
|
-
};
|
45
|
-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: parentContainerMaxWidth, padding: '20px' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
46
|
-
backgroundColor: '#f5f5f5',
|
47
|
-
padding: '16px',
|
48
|
-
borderRadius: '8px',
|
49
|
-
marginBottom: '20px',
|
50
|
-
fontFamily: 'monospace',
|
51
|
-
} }, { children: [(0, jsx_runtime_1.jsx)("h3", __assign({ style: { margin: '0 0 12px 0', color: '#333' } }, { children: "Debounced Validation Demo" })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { fontSize: '14px', lineHeight: '1.5' } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Debounced Validation:" }), ' ', enableDebouncedValidation ? 'Enabled' : 'Disabled'] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Validation Delay:" }), " ", validationDelay, "ms"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Current Value:" }), " \"", phoneValue, "\""] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Is Valid:" }), ' ', (0, jsx_runtime_1.jsx)("span", __assign({ style: { color: validationInfo.isValid ? 'green' : 'red' } }, { children: validationInfo.isValid ? 'Yes' : 'No' }))] }), validationInfo.errorMessage && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error:" }), ' ', (0, jsx_runtime_1.jsx)("span", __assign({ style: { color: 'red' } }, { children: validationInfo.errorMessage }))] })), validationInfo.isValidating && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Status:" }), ' ', (0, jsx_runtime_1.jsx)("span", __assign({ style: { color: 'orange' } }, { children: "Validating..." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
52
|
-
backgroundColor: '#e3f2fd',
|
53
|
-
padding: '16px',
|
54
|
-
borderRadius: '8px',
|
55
|
-
marginBottom: '20px',
|
56
|
-
fontSize: '14px',
|
57
|
-
} }, { children: [(0, jsx_runtime_1.jsx)("h4", __assign({ style: { margin: '0 0 8px 0', color: '#1976d2' } }, { children: "How to Test Debounced Validation:" })), (0, jsx_runtime_1.jsxs)("ol", __assign({ style: { margin: 0, paddingLeft: '20px' } }, { children: [(0, jsx_runtime_1.jsx)("li", { children: "Type quickly in the phone field - notice validation is delayed" }), (0, jsx_runtime_1.jsx)("li", { children: "When debounced validation is enabled, you'll see \"Validating...\" during the delay" }), (0, jsx_runtime_1.jsx)("li", { children: "Try typing: \"+1555555\" then pause to see validation kick in" }), (0, jsx_runtime_1.jsx)("li", { children: "Compare behavior with debounced validation enabled vs disabled" }), (0, jsx_runtime_1.jsx)("li", { children: "Check the Actions panel to see when callbacks are fired" })] }))] })), (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { disabled: disabled, errorMessage: errorMessage, onPhoneNumberChange: handlePhoneNumberChange, onValidationChange: handleValidationChange, onFormattedValueChange: handleFormattedValueChange, onCountryChange: handleCountryChange, type: type, id: "debounced-phone-input", isAnswered: isAnswered, label: label, placeholder: placeholder, value: phoneValue, isSafari: isSafari, isAutoFilledActive: isAutoFilledActive, experimentName: "debounced-validation-story", enableCountryChange: enableCountryChange, enableCountrySearch: enableCountrySearch, useModalForCountrySelection: useModalForCountrySelection, enableDebouncedValidation: enableDebouncedValidation, validationDelay: validationDelay, strictMode: strictMode })] })));
|
58
|
-
};
|
59
|
-
exports.default = DebouncedValidationStory;
|
60
|
-
//# sourceMappingURL=DebouncedValidationStory.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"DebouncedValidationStory.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/DebouncedValidationStory.tsx"],"names":[],"mappings":"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"}
|
package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/StrictModeStory.d.ts
DELETED
@@ -1,18 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
type StrictModeStoryType = React.FunctionComponent<{
|
3
|
-
disabled: boolean;
|
4
|
-
errorMessage?: string;
|
5
|
-
isAnswered: boolean;
|
6
|
-
label: string;
|
7
|
-
placeholder?: string;
|
8
|
-
type: 'tel' | 'text';
|
9
|
-
parentContainerMaxWidth: number;
|
10
|
-
isSafari: boolean;
|
11
|
-
isAutoFilledActive: boolean;
|
12
|
-
enableCountryChange: boolean;
|
13
|
-
enableCountrySearch: boolean;
|
14
|
-
useModalForCountrySelection: boolean;
|
15
|
-
strictMode: boolean;
|
16
|
-
}>;
|
17
|
-
declare const StrictModeStory: StrictModeStoryType;
|
18
|
-
export default StrictModeStory;
|
package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/StrictModeStory.js
DELETED
@@ -1,101 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
3
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
4
|
-
if (ar || !(i in from)) {
|
5
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
6
|
-
ar[i] = from[i];
|
7
|
-
}
|
8
|
-
}
|
9
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
10
|
-
};
|
11
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
12
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
13
|
-
};
|
14
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
15
|
-
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
16
|
-
var addon_actions_1 = require("@storybook/addon-actions");
|
17
|
-
var react_1 = require("react");
|
18
|
-
var PhoneNumberTextField_1 = __importDefault(require("../../PhoneNumberTextField"));
|
19
|
-
var StrictModeStory = function (_a) {
|
20
|
-
var disabled = _a.disabled, errorMessage = _a.errorMessage, type = _a.type, isAnswered = _a.isAnswered, label = _a.label, placeholder = _a.placeholder, parentContainerMaxWidth = _a.parentContainerMaxWidth, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection, strictMode = _a.strictMode;
|
21
|
-
var _b = (0, react_1.useState)(''), phoneValue = _b[0], setPhoneValue = _b[1];
|
22
|
-
var _c = (0, react_1.useState)({
|
23
|
-
isValid: false,
|
24
|
-
}), validationInfo = _c[0], setValidationInfo = _c[1];
|
25
|
-
var _d = (0, react_1.useState)([]), inputHistory = _d[0], setInputHistory = _d[1];
|
26
|
-
var handlePhoneNumberChange = function (params) {
|
27
|
-
(0, addon_actions_1.action)('Phone Number Change')(params);
|
28
|
-
setPhoneValue(params.phoneNumber);
|
29
|
-
// Track input history for demonstration
|
30
|
-
setInputHistory(function (prev) { return __spreadArray(__spreadArray([], prev.slice(-4), true), [params.phoneNumber], false); });
|
31
|
-
};
|
32
|
-
var handleValidationChange = function (params) {
|
33
|
-
(0, addon_actions_1.action)('Validation Change')(params);
|
34
|
-
setValidationInfo({
|
35
|
-
isValid: params.isValid,
|
36
|
-
errorMessage: params.validationResult.errorMessage,
|
37
|
-
isValidating: false,
|
38
|
-
});
|
39
|
-
};
|
40
|
-
var handleFormattedValueChange = function (params) {
|
41
|
-
(0, addon_actions_1.action)('Formatted Value Change')(params);
|
42
|
-
};
|
43
|
-
var handleCountryChange = function (params) {
|
44
|
-
(0, addon_actions_1.action)('Country Change')(params);
|
45
|
-
};
|
46
|
-
var getStrictModeDescription = function () {
|
47
|
-
if (strictMode) {
|
48
|
-
return {
|
49
|
-
title: 'Strict Mode: ENABLED',
|
50
|
-
color: '#2e7d32',
|
51
|
-
description: 'Only numeric characters and + at the beginning are allowed. Invalid characters are automatically filtered out.',
|
52
|
-
examples: [
|
53
|
-
'Input: "abc123def" → Output: "123"',
|
54
|
-
'Input: "++123++456" → Output: "+123456"',
|
55
|
-
'Input: "123-456-7890" → Output: "1234567890"',
|
56
|
-
'Input: "123@456#789" → Output: "123456789"',
|
57
|
-
],
|
58
|
-
};
|
59
|
-
}
|
60
|
-
else {
|
61
|
-
return {
|
62
|
-
title: 'Strict Mode: DISABLED',
|
63
|
-
color: '#d32f2f',
|
64
|
-
description: 'All characters are allowed. No input filtering is applied.',
|
65
|
-
examples: [
|
66
|
-
'Input: "abc123def" → Output: "abc123def"',
|
67
|
-
'Input: "++123++456" → Output: "++123++456"',
|
68
|
-
'Input: "123-456-7890" → Output: "123-456-7890"',
|
69
|
-
'Input: "123@456#789" → Output: "123@456#789"',
|
70
|
-
],
|
71
|
-
};
|
72
|
-
}
|
73
|
-
};
|
74
|
-
var strictModeInfo = getStrictModeDescription();
|
75
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: parentContainerMaxWidth, padding: '20px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
76
|
-
backgroundColor: '#f5f5f5',
|
77
|
-
padding: '16px',
|
78
|
-
borderRadius: '8px',
|
79
|
-
marginBottom: '20px',
|
80
|
-
fontFamily: 'monospace',
|
81
|
-
borderLeft: "4px solid ".concat(strictModeInfo.color),
|
82
|
-
}, children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: '0 0 12px 0', color: strictModeInfo.color }, children: strictModeInfo.title }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '14px', lineHeight: '1.5', marginBottom: '12px' }, children: strictModeInfo.description }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '13px', color: '#666' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Examples:" }), (0, jsx_runtime_1.jsx)("ul", { style: { margin: '8px 0 0 0', paddingLeft: '20px' }, children: strictModeInfo.examples.map(function (example, index) { return ((0, jsx_runtime_1.jsx)("li", { children: example }, index)); }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
83
|
-
backgroundColor: '#e8f5e8',
|
84
|
-
padding: '16px',
|
85
|
-
borderRadius: '8px',
|
86
|
-
marginBottom: '20px',
|
87
|
-
fontFamily: 'monospace',
|
88
|
-
}, children: [(0, jsx_runtime_1.jsx)("h4", { style: { margin: '0 0 12px 0', color: '#2e7d32' }, children: "Current State" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '14px', lineHeight: '1.5' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Current Value:" }), " \"", phoneValue, "\""] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Is Valid:" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: { color: validationInfo.isValid ? 'green' : 'red' }, children: validationInfo.isValid ? 'Yes' : 'No' })] }), validationInfo.errorMessage && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error:" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: { color: 'red' }, children: validationInfo.errorMessage })] })), inputHistory.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Input History:" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: { color: '#666', fontSize: '12px' }, children: inputHistory
|
89
|
-
.map(function (val, i) {
|
90
|
-
return "\"".concat(val, "\"").concat(i < inputHistory.length - 1 ? ' → ' : '');
|
91
|
-
})
|
92
|
-
.join('') })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
93
|
-
backgroundColor: '#e3f2fd',
|
94
|
-
padding: '16px',
|
95
|
-
borderRadius: '8px',
|
96
|
-
marginBottom: '20px',
|
97
|
-
fontSize: '14px',
|
98
|
-
}, children: [(0, jsx_runtime_1.jsx)("h4", { style: { margin: '0 0 8px 0', color: '#1976d2' }, children: "How to Test Strict Mode:" }), (0, jsx_runtime_1.jsxs)("ol", { style: { margin: 0, paddingLeft: '20px' }, children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Try typing non-numeric characters: ", (0, jsx_runtime_1.jsx)("code", { children: "abc123def" })] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Try multiple plus signs: ", (0, jsx_runtime_1.jsx)("code", { children: "++123++456" })] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Try special characters: ", (0, jsx_runtime_1.jsx)("code", { children: "123-456-7890" })] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Try mixed content: ", (0, jsx_runtime_1.jsx)("code", { children: "123@456#789" })] }), (0, jsx_runtime_1.jsx)("li", { children: "Watch how the input is filtered in real-time" }), (0, jsx_runtime_1.jsx)("li", { children: "Check the Actions panel to see when callbacks are fired" })] })] }), (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { disabled: disabled, errorMessage: errorMessage, onPhoneNumberChange: handlePhoneNumberChange, onValidationChange: handleValidationChange, onFormattedValueChange: handleFormattedValueChange, onCountryChange: handleCountryChange, type: type, id: "strict-mode-phone-input", isAnswered: isAnswered, label: label, placeholder: placeholder, value: phoneValue, isSafari: isSafari, isAutoFilledActive: isAutoFilledActive, experimentName: "strict-mode-story", enableCountryChange: enableCountryChange, enableCountrySearch: enableCountrySearch, useModalForCountrySelection: useModalForCountrySelection, strictMode: strictMode })] }));
|
99
|
-
};
|
100
|
-
exports.default = StrictModeStory;
|
101
|
-
//# sourceMappingURL=StrictModeStory.js.map
|
package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/StrictModeStory.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"StrictModeStory.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/StrictModeStory.tsx"],"names":[],"mappings":"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"}
|
package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryDataFull.d.ts
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
declare const supportedCountries: readonly ["US", "GB", "CA", "AU", "DE", "FR", "IT", "ES", "NL", "BE", "SE", "NO", "DK", "FI", "CH", "AT", "IE", "NZ", "JP", "KR", "CN", "IN", "BR", "MX", "AR", "CL", "CO", "PE", "VE", "EC", "BO", "PY", "UY", "GY", "SR", "FK", "GF", "AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AS", "AW", "AZ", "BA", "BB", "BD", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BS", "BT", "BW", "BY", "BZ", "CD", "CF", "CG", "CI", "CM", "CR", "CU", "CV", "CY", "CZ", "DJ", "DM", "DO", "DZ", "EG", "EH", "ER", "ET", "FJ", "FM", "FO", "GA", "GD", "GE", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GT", "GU", "GW", "HK", "HN", "HR", "HT", "HU", "ID", "IL", "IQ", "IR", "IS", "JM", "JO", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MF", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MY", "MZ", "NA", "NC", "NE", "NF", "NG", "NI", "NP", "NR", "NU", "OM", "PA", "PF", "PG", "PH", "PK", "PL", "PM", "PR", "PS", "PW", "QA", "RE", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SG", "SH", "SI", "SJ", "SK", "SL", "SM", "SN", "SO", "ST", "SV", "SY", "TC", "TD", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "UA", "UG", "VA", "VC", "VG", "VI", "VN", "VU", "WF", "WS", "YE", "YT", "ZM"];
|
2
|
-
export type CountryCode = (typeof supportedCountries)[number];
|
3
|
-
export interface CountryData {
|
4
|
-
code: CountryCode;
|
5
|
-
name: string;
|
6
|
-
dialCode: string;
|
7
|
-
example: string;
|
8
|
-
}
|
9
|
-
export declare const getAllCountryData: () => CountryData[];
|
10
|
-
export declare const getCountryData: () => CountryData[];
|
11
|
-
export declare const getCountryByCode: (code: CountryCode) => CountryData | undefined;
|
12
|
-
export declare const getCountryByDialCode: (dialCode: string) => CountryData | undefined;
|
13
|
-
export {};
|