@desource/phone-mask-react 0.3.0 → 1.1.0
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/CHANGELOG.md +65 -0
- package/README.md +51 -23
- package/dist/esm/components/PhoneInput.d.ts +2 -9
- package/dist/esm/components/PhoneInput.d.ts.map +1 -1
- package/dist/esm/hooks/internal/useCopyAction.d.ts +14 -0
- package/dist/esm/hooks/internal/useCopyAction.d.ts.map +1 -0
- package/dist/esm/hooks/internal/useCountry.d.ts +21 -0
- package/dist/esm/hooks/internal/useCountry.d.ts.map +1 -0
- package/dist/esm/hooks/internal/useCountrySelector.d.ts +32 -0
- package/dist/esm/hooks/internal/useCountrySelector.d.ts.map +1 -0
- package/dist/esm/hooks/internal/useFormatter.d.ts +45 -0
- package/dist/esm/hooks/internal/useFormatter.d.ts.map +1 -0
- package/dist/esm/hooks/internal/useInputHandlers.d.ts +21 -0
- package/dist/esm/hooks/internal/useInputHandlers.d.ts.map +1 -0
- package/dist/esm/hooks/internal/useTheme.d.ts +9 -0
- package/dist/esm/hooks/internal/useTheme.d.ts.map +1 -0
- package/dist/esm/hooks/internal/useValidationHint.d.ts +6 -0
- package/dist/esm/hooks/internal/useValidationHint.d.ts.map +1 -0
- package/dist/esm/hooks/usePhoneMask.d.ts +2 -1
- package/dist/esm/hooks/usePhoneMask.d.ts.map +1 -1
- package/dist/esm/hooks/utility/useClipboard.d.ts +6 -0
- package/dist/esm/hooks/utility/useClipboard.d.ts.map +1 -0
- package/dist/esm/hooks/utility/useTimer.d.ts +9 -0
- package/dist/esm/hooks/utility/useTimer.d.ts.map +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +751 -705
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.d.ts +18 -20
- package/dist/esm/types.d.ts.map +1 -1
- package/dist/phone-mask-react.cjs +1 -1
- package/dist/phone-mask-react.cjs.map +1 -1
- package/dist/phone-mask-react.css +1 -1
- package/package.json +13 -11
- package/dist/esm/consts.d.ts +0 -4
- package/dist/esm/consts.d.ts.map +0 -1
- package/dist/esm/utils.d.ts +0 -16
- package/dist/esm/utils.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,70 @@
|
|
|
1
1
|
# @desource/phone-mask-react
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Svelte Upgrades:
|
|
8
|
+
- Added attachment `phoneMaskAttachment` for usage in native input (for Svelte 5.29+ versions)
|
|
9
|
+
- Added action `phoneMaskAction` for usage in native input (for Svelte 5.0+ versions)
|
|
10
|
+
- Improved keyboard country selection flow and active-descendant accessibility behavior
|
|
11
|
+
- Refined dropdown/key navigation handling and related focus behavior
|
|
12
|
+
- `usePhoneMask` now exposes `formatter` in the return object
|
|
13
|
+
|
|
14
|
+
- Vue Upgrades:
|
|
15
|
+
- Directive was refactored to align with Svelte action
|
|
16
|
+
- Improved keyboard country selection flow and active-descendant accessibility behavior
|
|
17
|
+
- Refined dropdown/key navigation handling and related focus behavior
|
|
18
|
+
- `usePhoneMask` now exposes `formatter` in the return object
|
|
19
|
+
|
|
20
|
+
- React Upgrades:
|
|
21
|
+
- Improved keyboard country selection flow and active-descendant accessibility behavior
|
|
22
|
+
- Refined dropdown/key navigation handling and related focus behavior
|
|
23
|
+
- `usePhoneMask` now exposes `formatter` in the return object
|
|
24
|
+
|
|
25
|
+
- Core Upgrades:
|
|
26
|
+
- Fixed edge cases in mask variant selection and improved input handler robustness
|
|
27
|
+
- Applied reliability-focused refactors in formatter/handlers and build script generation logic
|
|
28
|
+
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- Updated dependencies []:
|
|
32
|
+
- @desource/phone-mask@1.1.0
|
|
33
|
+
|
|
34
|
+
## 1.0.0
|
|
35
|
+
|
|
36
|
+
### Major Changes
|
|
37
|
+
|
|
38
|
+
- Core Upgrades:
|
|
39
|
+
- Refactored core architecture for better separation of concerns and reusability
|
|
40
|
+
- Added zero-config browser script support path
|
|
41
|
+
- Improved Intl.DisplayNames caching for performance
|
|
42
|
+
- Fixed various edge cases in formatting and event handling
|
|
43
|
+
- Added comprehensive unit tests for core utilities and handlers
|
|
44
|
+
|
|
45
|
+
- React Upgrades:
|
|
46
|
+
- Major internal refactor to a controlled pattern with consistent hooks
|
|
47
|
+
- Improved React 18/19 compatibility for ref behavior
|
|
48
|
+
- Added and expanded unit/e2e tests for React components and behavior
|
|
49
|
+
|
|
50
|
+
- Vue Upgrades:
|
|
51
|
+
- Refactored to align composable structure and reuse core utilities
|
|
52
|
+
- Fixed directive behavior for external value updates and dropdown close logic
|
|
53
|
+
- Added substantial unit/e2e test coverage for Vue composables and directive
|
|
54
|
+
|
|
55
|
+
- 🚀 Svelte Upgrades:
|
|
56
|
+
- Introduced Svelte version of phone-mask library
|
|
57
|
+
|
|
58
|
+
- Nuxt Upgrades:
|
|
59
|
+
- Added full test foundation with @nuxt/test-utils
|
|
60
|
+
- Added unit tests for module and runtime behavior
|
|
61
|
+
- Added e2e fixtures/tests and shared e2e utilities
|
|
62
|
+
|
|
63
|
+
### Patch Changes
|
|
64
|
+
|
|
65
|
+
- Updated dependencies []:
|
|
66
|
+
- @desource/phone-mask@1.0.0
|
|
67
|
+
|
|
3
68
|
## 0.3.0
|
|
4
69
|
|
|
5
70
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
[](https://bundlephobia.com/package/@desource/phone-mask-react)
|
|
7
7
|
[](https://github.com/DeSource-Labs/phone-mask/blob/main/LICENSE)
|
|
8
8
|
|
|
9
|
-
Beautiful, accessible, extreme small & tree-
|
|
9
|
+
Beautiful, accessible, extreme small & tree-shakeable React phone input with auto-formatting, country selector, and validation.
|
|
10
10
|
|
|
11
11
|
## ✨ Features
|
|
12
12
|
|
|
@@ -37,12 +37,14 @@ pnpm add @desource/phone-mask-react
|
|
|
37
37
|
### Importing
|
|
38
38
|
|
|
39
39
|
Component mode:
|
|
40
|
+
|
|
40
41
|
```tsx
|
|
41
42
|
import { PhoneInput } from '@desource/phone-mask-react';
|
|
42
43
|
import '@desource/phone-mask-react/assets/lib.css'; // Import styles
|
|
43
44
|
```
|
|
44
45
|
|
|
45
46
|
Hook mode:
|
|
47
|
+
|
|
46
48
|
```tsx
|
|
47
49
|
import { usePhoneMask } from '@desource/phone-mask-react';
|
|
48
50
|
```
|
|
@@ -60,12 +62,7 @@ function App() {
|
|
|
60
62
|
|
|
61
63
|
return (
|
|
62
64
|
<>
|
|
63
|
-
<PhoneInput
|
|
64
|
-
value={phone}
|
|
65
|
-
onChange={setPhone}
|
|
66
|
-
onValidationChange={setIsValid}
|
|
67
|
-
country="US"
|
|
68
|
-
/>
|
|
65
|
+
<PhoneInput value={phone} onChange={setPhone} onValidationChange={setIsValid} country="US" />
|
|
69
66
|
|
|
70
67
|
{isValid && <p>✓ Valid phone number</p>}
|
|
71
68
|
</>
|
|
@@ -78,15 +75,17 @@ function App() {
|
|
|
78
75
|
For custom input implementations:
|
|
79
76
|
|
|
80
77
|
```tsx
|
|
78
|
+
import { useState } from 'react';
|
|
81
79
|
import { usePhoneMask } from '@desource/phone-mask-react';
|
|
82
80
|
|
|
83
81
|
function CustomPhoneInput() {
|
|
82
|
+
const [value, setValue] = useState('');
|
|
83
|
+
|
|
84
84
|
const { ref, digits, full, fullFormatted, isComplete, country, setCountry } = usePhoneMask({
|
|
85
|
+
value,
|
|
86
|
+
onChange: setValue,
|
|
85
87
|
country: 'US',
|
|
86
|
-
detect: true
|
|
87
|
-
onChange: (phone) => {
|
|
88
|
-
console.log(phone.full, phone.digits);
|
|
89
|
-
}
|
|
88
|
+
detect: true
|
|
90
89
|
});
|
|
91
90
|
|
|
92
91
|
return (
|
|
@@ -105,10 +104,12 @@ function CustomPhoneInput() {
|
|
|
105
104
|
|
|
106
105
|
### Props
|
|
107
106
|
|
|
107
|
+
> **Note:** The component requires controlled behavior. Both `value` and `onChange` props are required.
|
|
108
|
+
|
|
108
109
|
```ts
|
|
109
110
|
interface PhoneInputProps {
|
|
110
|
-
// Controlled value (digits only, without country code)
|
|
111
|
-
value
|
|
111
|
+
// Controlled value (digits only, without country code) - REQUIRED
|
|
112
|
+
value: string;
|
|
112
113
|
|
|
113
114
|
// Preselected country (ISO 3166-1 alpha-2)
|
|
114
115
|
country?: CountryKey;
|
|
@@ -155,9 +156,9 @@ interface PhoneInputProps {
|
|
|
155
156
|
// Disable default styles
|
|
156
157
|
disableDefaultStyles?: boolean; // Default: false
|
|
157
158
|
|
|
158
|
-
// Callback when the digits value changes
|
|
159
|
+
// Callback when the digits value changes - REQUIRED
|
|
159
160
|
// Returns only the digits without country code (e.g. '234567890')
|
|
160
|
-
onChange
|
|
161
|
+
onChange: (digits: string) => void;
|
|
161
162
|
|
|
162
163
|
// Callback when the phone number changes.
|
|
163
164
|
// Provides an object with:
|
|
@@ -218,8 +219,16 @@ phoneInputRef.current?.isComplete(); // Checks if the current phone number is co
|
|
|
218
219
|
|
|
219
220
|
### Options
|
|
220
221
|
|
|
222
|
+
> **Note:** The hook requires controlled behavior. Both `value` and `onChange` options are required.
|
|
223
|
+
|
|
221
224
|
```ts
|
|
222
225
|
interface UsePhoneMaskOptions {
|
|
226
|
+
// Controlled value (digits only, without country code) - REQUIRED
|
|
227
|
+
value: string;
|
|
228
|
+
|
|
229
|
+
// Callback when the digits value changes - REQUIRED
|
|
230
|
+
onChange: (digits: string) => void;
|
|
231
|
+
|
|
223
232
|
// Predefined country ISO code (e.g., 'US', 'DE', 'GB')
|
|
224
233
|
country?: string;
|
|
225
234
|
|
|
@@ -229,8 +238,8 @@ interface UsePhoneMaskOptions {
|
|
|
229
238
|
// Auto-detect country from IP/locale (default: false)
|
|
230
239
|
detect?: boolean;
|
|
231
240
|
|
|
232
|
-
//
|
|
233
|
-
|
|
241
|
+
// Callback when the phone changes (full, fullFormatted, digits)
|
|
242
|
+
onPhoneChange?: (phone: PhoneNumber) => void;
|
|
234
243
|
|
|
235
244
|
// Country change callback
|
|
236
245
|
onCountryChange?: (country: MaskFull) => void;
|
|
@@ -241,15 +250,37 @@ interface UsePhoneMaskOptions {
|
|
|
241
250
|
|
|
242
251
|
```ts
|
|
243
252
|
interface UsePhoneMaskReturn {
|
|
244
|
-
|
|
253
|
+
// Ref to attach to your input element
|
|
254
|
+
ref: RefObject<HTMLInputElement | null>;
|
|
255
|
+
|
|
256
|
+
// Raw digits without formatting (e.g., "1234567890")
|
|
245
257
|
digits: string;
|
|
258
|
+
|
|
259
|
+
// Phone formatter instance
|
|
260
|
+
formatter: FormatterHelpers;
|
|
261
|
+
|
|
262
|
+
// Full phone number with country code (e.g., "+11234567890")
|
|
246
263
|
full: string;
|
|
264
|
+
|
|
265
|
+
// Full phone number formatted (e.g., "+1 123-456-7890")
|
|
247
266
|
fullFormatted: string;
|
|
267
|
+
|
|
268
|
+
// Whether the phone number is complete
|
|
248
269
|
isComplete: boolean;
|
|
270
|
+
|
|
271
|
+
// Whether the input is empty
|
|
249
272
|
isEmpty: boolean;
|
|
273
|
+
|
|
274
|
+
// Whether to show validation warning
|
|
250
275
|
shouldShowWarn: boolean;
|
|
276
|
+
|
|
277
|
+
// Current country data
|
|
251
278
|
country: MaskFull;
|
|
279
|
+
|
|
280
|
+
// Change country programmatically
|
|
252
281
|
setCountry: (countryCode: string) => void;
|
|
282
|
+
|
|
283
|
+
// Clear the input
|
|
253
284
|
clear: () => void;
|
|
254
285
|
}
|
|
255
286
|
```
|
|
@@ -373,11 +404,7 @@ function Example() {
|
|
|
373
404
|
name="phone"
|
|
374
405
|
control={control}
|
|
375
406
|
render={({ field }) => (
|
|
376
|
-
<PhoneInput
|
|
377
|
-
value={field.value}
|
|
378
|
-
onChange={(digits) => field.onChange(digits)}
|
|
379
|
-
onBlur={field.onBlur}
|
|
380
|
-
/>
|
|
407
|
+
<PhoneInput value={field.value} onChange={(digits) => field.onChange(digits)} onBlur={field.onBlur} />
|
|
381
408
|
)}
|
|
382
409
|
/>
|
|
383
410
|
);
|
|
@@ -439,6 +466,7 @@ function Example() {
|
|
|
439
466
|
- [@desource/phone-mask](../phone-mask) — Core library
|
|
440
467
|
- [@desource/phone-mask-nuxt](../phone-mask-nuxt) — Nuxt module
|
|
441
468
|
- [@desource/phone-mask-vue](../phone-mask-vue) — Vue 3 bindings
|
|
469
|
+
- [@desource/phone-mask-svelte](../phone-mask-svelte) — Svelte bindings
|
|
442
470
|
|
|
443
471
|
## 📄 License
|
|
444
472
|
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { PhoneInputProps, PhoneInputRef } from '../types';
|
|
3
|
-
|
|
4
|
-
ref?: Ref<PhoneInputRef>;
|
|
5
|
-
};
|
|
6
|
-
export declare const PhoneInput: {
|
|
7
|
-
({ ref, ...props }: PhoneInputComponent): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
displayName: string;
|
|
9
|
-
};
|
|
10
|
-
export {};
|
|
3
|
+
export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<PhoneInputRef>>;
|
|
11
4
|
//# sourceMappingURL=PhoneInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAmX/D,eAAO,MAAM,UAAU,uFAA8D,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
interface UseCopyActionOptions {
|
|
3
|
+
fullFormatted: string;
|
|
4
|
+
liveRef?: RefObject<HTMLElement | null>;
|
|
5
|
+
onCopy?: (value: string) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare function useCopyAction({ liveRef, fullFormatted, onCopy }: UseCopyActionOptions): {
|
|
8
|
+
copied: boolean;
|
|
9
|
+
copyAriaLabel: string;
|
|
10
|
+
copyButtonTitle: string;
|
|
11
|
+
onCopyClick: () => Promise<void>;
|
|
12
|
+
};
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=useCopyAction.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCopyAction.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/useCopyAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,UAAU,oBAAoB;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAID,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,oBAAoB;;;;;EAiCrF"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type MaskFull } from '@desource/phone-mask';
|
|
2
|
+
export interface UseCountryOptions {
|
|
3
|
+
/** Country ISO code (e.g., 'US', 'DE', 'GB') */
|
|
4
|
+
country?: string;
|
|
5
|
+
/** Locale for country names (default: navigator.language) */
|
|
6
|
+
locale?: string;
|
|
7
|
+
/** Auto-detect country from IP/locale (default: false) */
|
|
8
|
+
detect?: boolean;
|
|
9
|
+
/** Callback when country changes */
|
|
10
|
+
onCountryChange?: (country: MaskFull) => void;
|
|
11
|
+
}
|
|
12
|
+
export interface UseCountryReturn {
|
|
13
|
+
/** Current country data */
|
|
14
|
+
country: MaskFull;
|
|
15
|
+
/** Change country programmatically */
|
|
16
|
+
setCountry: (countryCode?: string | null) => boolean;
|
|
17
|
+
/** Computed locale value */
|
|
18
|
+
locale: string;
|
|
19
|
+
}
|
|
20
|
+
export declare function useCountry({ country: countryOption, locale: localeOption, detect, onCountryChange }: UseCountryOptions): UseCountryReturn;
|
|
21
|
+
//# sourceMappingURL=useCountry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCountry.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/useCountry.ts"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,CAAC;IAClB,sCAAsC;IACtC,UAAU,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC;IACrD,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,EACpB,MAAM,EACN,eAAe,EAChB,EAAE,iBAAiB,GAAG,gBAAgB,CAiDtC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React, { type RefObject } from 'react';
|
|
2
|
+
import { type CountryKey } from '@desource/phone-mask';
|
|
3
|
+
interface UseCountrySelectOptions {
|
|
4
|
+
rootRef: RefObject<HTMLDivElement | null>;
|
|
5
|
+
dropdownRef: RefObject<HTMLDivElement | null>;
|
|
6
|
+
searchRef: RefObject<HTMLInputElement | null>;
|
|
7
|
+
selectorRef: RefObject<HTMLDivElement | null>;
|
|
8
|
+
locale: string;
|
|
9
|
+
onSelectCountry: (code: CountryKey) => void;
|
|
10
|
+
countryOption?: string;
|
|
11
|
+
inactive?: boolean;
|
|
12
|
+
onAfterSelect?: () => void;
|
|
13
|
+
}
|
|
14
|
+
export declare function useCountrySelector({ rootRef, dropdownRef, searchRef, selectorRef, locale, countryOption, inactive, onSelectCountry, onAfterSelect }: UseCountrySelectOptions): {
|
|
15
|
+
dropdownOpen: boolean;
|
|
16
|
+
isClosing: boolean;
|
|
17
|
+
search: string;
|
|
18
|
+
focusedIndex: number;
|
|
19
|
+
dropdownStyle: React.CSSProperties;
|
|
20
|
+
filteredCountries: import("@desource/phone-mask").MaskFull[];
|
|
21
|
+
hasDropdown: boolean;
|
|
22
|
+
openDropdown: () => void;
|
|
23
|
+
closeDropdown: () => void;
|
|
24
|
+
toggleDropdown: () => void;
|
|
25
|
+
selectCountry: (code: CountryKey) => void;
|
|
26
|
+
setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
|
|
27
|
+
handleSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
28
|
+
handleSearchKeydown: (e: React.KeyboardEvent) => void;
|
|
29
|
+
handleDropdownAnimationEnd: () => void;
|
|
30
|
+
};
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=useCountrySelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCountrySelector.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/useCountrySelector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6C,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAE7G,OAAO,EAA8B,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEnF,UAAU,uBAAuB;IAC/B,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,WAAW,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9C,SAAS,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,WAAW,EACX,SAAS,EACT,WAAW,EACX,MAAM,EACN,aAAa,EACb,QAAQ,EACR,eAAe,EACf,aAAa,EACd,EAAE,uBAAuB;;;;;;;;;;;0BA6Cf,UAAU;;4BAUwB,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;6BA0DxE,KAAK,CAAC,aAAa;;EAmE1B"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { type MaskFull, type FormatterHelpers } from '@desource/phone-mask';
|
|
2
|
+
import type { PhoneNumber } from '../../types';
|
|
3
|
+
/** Configuration options for the useFormatter hook */
|
|
4
|
+
export interface UseFormatterOptions {
|
|
5
|
+
/** Pre-resolved country data */
|
|
6
|
+
country: MaskFull;
|
|
7
|
+
/**
|
|
8
|
+
* Controlled value (digits only, without country code)
|
|
9
|
+
* The parent is responsible for managing state via onChange callback.
|
|
10
|
+
*/
|
|
11
|
+
value: string;
|
|
12
|
+
/** Callback when the digits value changes. */
|
|
13
|
+
onChange: (digits: string) => void;
|
|
14
|
+
/** Callback when the phone number changes. */
|
|
15
|
+
onPhoneChange?: (value: PhoneNumber) => void;
|
|
16
|
+
/** Callback when validation state (isComplete) changes */
|
|
17
|
+
onValidationChange?: (isComplete: boolean) => void;
|
|
18
|
+
}
|
|
19
|
+
/** Return type for useFormatter hook */
|
|
20
|
+
export interface UseFormatterReturn {
|
|
21
|
+
/** Raw digits without formatting */
|
|
22
|
+
digits: string;
|
|
23
|
+
/** Phone formatter instance */
|
|
24
|
+
formatter: FormatterHelpers;
|
|
25
|
+
/** Placeholder from formatter */
|
|
26
|
+
displayPlaceholder: string;
|
|
27
|
+
/** Formatted display string */
|
|
28
|
+
displayValue: string;
|
|
29
|
+
/** Full phone number with country code */
|
|
30
|
+
full: string;
|
|
31
|
+
/** Full phone number formatted */
|
|
32
|
+
fullFormatted: string;
|
|
33
|
+
/** Whether the phone number is complete */
|
|
34
|
+
isComplete: boolean;
|
|
35
|
+
/** Whether the input is empty */
|
|
36
|
+
isEmpty: boolean;
|
|
37
|
+
/** Whether to show validation warning */
|
|
38
|
+
shouldShowWarn: boolean;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Hook for phone number formatting and derived computations.
|
|
42
|
+
* Receives pre-resolved country data; country management is handled by the caller.
|
|
43
|
+
*/
|
|
44
|
+
export declare function useFormatter({ country, value, onChange, onPhoneChange, onValidationChange }: UseFormatterOptions): UseFormatterReturn;
|
|
45
|
+
//# sourceMappingURL=useFormatter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormatter.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/useFormatter.ts"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,QAAQ,EAAE,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEjH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAClC,gCAAgC;IAChC,OAAO,EAAE,QAAQ,CAAC;IAClB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD;AAED,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,iCAAiC;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,kBAAkB,EACnB,EAAE,mBAAmB,GAAG,kBAAkB,CA8C1C"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type FormatterHelpers } from '@desource/phone-mask';
|
|
3
|
+
export interface UseInputHandlersOptions {
|
|
4
|
+
formatter: FormatterHelpers;
|
|
5
|
+
digits: string;
|
|
6
|
+
inactive?: boolean;
|
|
7
|
+
onChange?: (newDigits: string) => void;
|
|
8
|
+
scheduleValidationHint?: (delay: number) => void;
|
|
9
|
+
}
|
|
10
|
+
export interface UseInputHandlersReturn {
|
|
11
|
+
handleBeforeInput: (e: React.SyntheticEvent<HTMLInputElement> | InputEvent) => void;
|
|
12
|
+
handleInput: (e: React.SyntheticEvent<HTMLInputElement> | Event) => void;
|
|
13
|
+
handleKeydown: (e: React.KeyboardEvent<HTMLInputElement> | KeyboardEvent) => void;
|
|
14
|
+
handlePaste: (e: React.ClipboardEvent<HTMLInputElement> | ClipboardEvent) => void;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* React hook that provides event handlers for phone input masking.
|
|
18
|
+
* Handlers are compatible with both native events and React synthetic events.
|
|
19
|
+
*/
|
|
20
|
+
export declare function useInputHandlers(options: UseInputHandlersOptions): UseInputHandlersReturn;
|
|
21
|
+
//# sourceMappingURL=useInputHandlers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInputHandlers.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/useInputHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,UAAU,KAAK,IAAI,CAAC;IACpF,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC;IACzE,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IAClF,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,cAAc,KAAK,IAAI,CAAC;CACnF;AAUD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CAyEzF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe;;EA6BlD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useValidationHint.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/useValidationHint.ts"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB;;;oCAcrB,MAAM;EAUjB"}
|
|
@@ -2,6 +2,7 @@ import type { UsePhoneMaskOptions, UsePhoneMaskReturn } from '../types';
|
|
|
2
2
|
/**
|
|
3
3
|
* React hook for phone number masking.
|
|
4
4
|
* Provides low-level phone masking functionality for custom input implementations.
|
|
5
|
+
* Works in controlled mode — caller manages value state via onChange callback.
|
|
5
6
|
*/
|
|
6
|
-
export declare function usePhoneMask(options
|
|
7
|
+
export declare function usePhoneMask(options: UsePhoneMaskOptions): UsePhoneMaskReturn;
|
|
7
8
|
//# sourceMappingURL=usePhoneMask.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePhoneMask.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePhoneMask.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"usePhoneMask.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePhoneMask.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAExE;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CA4F7E"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClipboard.d.ts","sourceRoot":"","sources":["../../../../src/hooks/utility/useClipboard.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,KAAK,SAAQ;;;iBAMzB,MAAM;EAuBtB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom hook for managing timers with automatic cleanup
|
|
3
|
+
* @returns Object with set and clear methods for timer control
|
|
4
|
+
*/
|
|
5
|
+
export declare function useTimer(): {
|
|
6
|
+
set: (callback: () => void, delay: number) => void;
|
|
7
|
+
clear: () => void;
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useTimer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimer.d.ts","sourceRoot":"","sources":["../../../../src/hooks/utility/useTimer.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,QAAQ;oBAWT,MAAM,IAAI,SAAS,MAAM;;EAavC"}
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,OAAO,EACR,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,OAAO,EACR,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,YAAY,EACV,eAAe,EACf,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,IAAI,IAAI,cAAc,EACtB,KAAK,IAAI,eAAe,EACzB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,UAAU,IAAI,WAAW,EACzB,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC3B,IAAI,IAAI,KAAK,EACb,OAAO,IAAI,QAAQ,EACnB,YAAY,IAAI,aAAa,EAC7B,eAAe,IAAI,gBAAgB,EACnC,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}
|