numora-react 3.1.0 → 3.3.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/README.md +23 -336
- package/dist/index.cjs +15 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +16 -13
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/index.tsx +21 -13
package/README.md
CHANGED
|
@@ -3,69 +3,17 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/numora-react)
|
|
4
4
|
[](https://www.npmjs.com/package/numora-react)
|
|
5
5
|
|
|
6
|
-
React component wrapper for [
|
|
6
|
+
React component wrapper for [numora](../core/README.md) - a precision-first numeric input library.
|
|
7
7
|
|
|
8
|
-
##
|
|
9
|
-
|
|
10
|
-
| Feature | Description |
|
|
11
|
-
|---------|-------------|
|
|
12
|
-
| **React Component** | Drop-in replacement for `<input>` with numeric formatting |
|
|
13
|
-
| **Decimal Precision Control** | Configure maximum decimal places with `maxDecimals` prop |
|
|
14
|
-
| **Thousand Separators** | Customizable thousand separators with `thousandSeparator` prop |
|
|
15
|
-
| **Grouping Styles** | Support for different grouping styles (`thousand`, `lakh`, `wan`) |
|
|
16
|
-
| **Format on Blur/Change** | Choose when to apply formatting: on blur or on change |
|
|
17
|
-
| **Compact Notation Expansion** | When enabled via `enableCompactNotation`, expands compact notation during paste (e.g., `"1k"` → `"1000"`, `"1.5m"` → `"1500000"`) |
|
|
18
|
-
| **Scientific Notation Expansion** | Always automatically expands scientific notation (e.g., `"1.5e-7"` → `"0.00000015"`, `"2e+5"` → `"200000"`) |
|
|
19
|
-
| **Paste Event Handling** | Intelligent paste handling with automatic sanitization, formatting, and cursor positioning |
|
|
20
|
-
| **Cursor Position Preservation** | Smart cursor positioning that works with thousand separators, even during formatting |
|
|
21
|
-
| **Thousand Separator Skipping** | On delete/backspace, cursor automatically skips over thousand separators for better UX |
|
|
22
|
-
| **Mobile Keyboard Optimization** | Automatic `inputmode="decimal"` for mobile numeric keyboards |
|
|
23
|
-
| **Mobile Keyboard Filtering** | Automatically filters non-breaking spaces and Unicode whitespace artifacts from mobile keyboards |
|
|
24
|
-
| **Non-numeric Character Filtering** | Automatic removal of invalid characters |
|
|
25
|
-
| **Comma/Dot Conversion** | When `thousandStyle` is not set (or `None`), typing comma or dot automatically converts to the configured decimal separator |
|
|
26
|
-
| **TypeScript Support** | Full TypeScript definitions included |
|
|
27
|
-
| **Ref Forwarding** | Supports React ref forwarding for direct input access |
|
|
28
|
-
| **Standard Input Props** | Accepts all standard HTMLInputElement props |
|
|
29
|
-
|
|
30
|
-
**Note:** Some advanced features from the core package (like `decimalMinLength`, `enableNegative`, `enableLeadingZeros`, `rawValueMode`) are not yet exposed through the React component props. For full control, consider using the core `numora` package directly.
|
|
31
|
-
|
|
32
|
-
## Comparison
|
|
33
|
-
|
|
34
|
-
| Feature | numora-react | react-number-format | Native Number Input |
|
|
35
|
-
|---------|--------------|---------------------|---------------------|
|
|
36
|
-
| **React Component** | ✅ Yes | ✅ Yes | ⚠️ Basic |
|
|
37
|
-
| **Decimal Precision Control** | ✅ Max | ✅ Max | ❌ Limited |
|
|
38
|
-
| **Thousand Separators** | ✅ Customizable | ✅ Yes | ❌ No |
|
|
39
|
-
| **Custom Decimal Separator** | ✅ Yes | ✅ Yes | ❌ No (always `.`) |
|
|
40
|
-
| **Formatting Options** | ✅ Blur/Change modes | ✅ Multiple modes | ❌ No |
|
|
41
|
-
| **Cursor Preservation** | ✅ Advanced | ✅ Basic | ❌ N/A |
|
|
42
|
-
| **Mobile Support** | ✅ Yes | ✅ Yes | ⚠️ Limited |
|
|
43
|
-
| **TypeScript Support** | ✅ Yes | ✅ Yes | ⚠️ Partial |
|
|
44
|
-
| **Dependencies** | ⚠️ React + numora | ⚠️ React required | ✅ None |
|
|
45
|
-
| **Framework Support** | ✅ React | ❌ React only | ✅ All |
|
|
46
|
-
| **Scientific Notation** | ✅ Auto-expand | ⚠️ Limited | ❌ No |
|
|
47
|
-
| **Compact Notation** | ✅ Yes (on paste when enabled) | ❌ No | ❌ No |
|
|
48
|
-
| **Paste Handling** | ✅ Intelligent | ✅ Yes | ⚠️ Basic |
|
|
49
|
-
| **Ref Forwarding** | ✅ Yes | ✅ Yes | ✅ Yes |
|
|
50
|
-
| **Grouping Styles** | ✅ Thousand/Lakh/Wan | ⚠️ Thousand only | ❌ No |
|
|
51
|
-
| **Comma/Dot Conversion** | ✅ Yes | ⚠️ Limited | ❌ No |
|
|
52
|
-
|
|
53
|
-
## Installation
|
|
8
|
+
## Install
|
|
54
9
|
|
|
55
10
|
```bash
|
|
56
11
|
npm install numora-react
|
|
57
|
-
# or
|
|
58
|
-
yarn add numora-react
|
|
59
|
-
# or
|
|
60
|
-
pnpm add numora-react
|
|
12
|
+
# or pnpm add numora-react / yarn add numora-react
|
|
61
13
|
```
|
|
62
14
|
|
|
63
|
-
**Note:** `numora-react` depends on `numora` core package, which will be installed automatically.
|
|
64
|
-
|
|
65
15
|
## Usage
|
|
66
16
|
|
|
67
|
-
### Basic Example
|
|
68
|
-
|
|
69
17
|
```tsx
|
|
70
18
|
import { NumoraInput } from 'numora-react';
|
|
71
19
|
|
|
@@ -73,304 +21,43 @@ function App() {
|
|
|
73
21
|
return (
|
|
74
22
|
<NumoraInput
|
|
75
23
|
maxDecimals={2}
|
|
76
|
-
onChange={(e) => {
|
|
77
|
-
console.log('Value:', e.target.value);
|
|
78
|
-
}}
|
|
79
|
-
/>
|
|
80
|
-
);
|
|
81
|
-
}
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
### Advanced Example
|
|
85
|
-
|
|
86
|
-
```tsx
|
|
87
|
-
import { NumoraInput } from 'numora-react';
|
|
88
|
-
import { useRef } from 'react';
|
|
89
|
-
|
|
90
|
-
function PaymentForm() {
|
|
91
|
-
const inputRef = useRef<HTMLInputElement>(null);
|
|
92
|
-
|
|
93
|
-
return (
|
|
94
|
-
<NumoraInput
|
|
95
|
-
ref={inputRef}
|
|
96
|
-
maxDecimals={18}
|
|
97
|
-
formatOn="change"
|
|
98
24
|
thousandSeparator=","
|
|
99
25
|
thousandStyle="thousand"
|
|
100
|
-
|
|
101
|
-
placeholder="Enter amount"
|
|
102
|
-
className="payment-input"
|
|
103
|
-
onChange={(e) => {
|
|
104
|
-
const value = e.target.value;
|
|
105
|
-
console.log('Formatted value:', value);
|
|
106
|
-
}}
|
|
107
|
-
onFocus={(e) => {
|
|
108
|
-
console.log('Input focused');
|
|
109
|
-
}}
|
|
110
|
-
onBlur={(e) => {
|
|
111
|
-
console.log('Input blurred');
|
|
112
|
-
}}
|
|
113
|
-
/>
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### Compact Notation Example
|
|
119
|
-
|
|
120
|
-
```tsx
|
|
121
|
-
import { NumoraInput } from 'numora-react';
|
|
122
|
-
|
|
123
|
-
function App() {
|
|
124
|
-
return (
|
|
125
|
-
<NumoraInput
|
|
126
|
-
maxDecimals={18}
|
|
127
|
-
enableCompactNotation={true} // Enable compact notation expansion
|
|
128
|
-
onChange={(e) => {
|
|
129
|
-
console.log('Value:', e.target.value);
|
|
130
|
-
}}
|
|
131
|
-
/>
|
|
132
|
-
);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// When user pastes "1.5k", it automatically expands to "1500"
|
|
136
|
-
// Scientific notation like "1.5e-7" is always automatically expanded
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
### Scientific Notation Example
|
|
140
|
-
|
|
141
|
-
```tsx
|
|
142
|
-
import { NumoraInput } from 'numora-react';
|
|
143
|
-
|
|
144
|
-
function App() {
|
|
145
|
-
return (
|
|
146
|
-
<NumoraInput
|
|
147
|
-
maxDecimals={18}
|
|
148
|
-
onChange={(e) => {
|
|
149
|
-
console.log('Value:', e.target.value);
|
|
150
|
-
}}
|
|
151
|
-
/>
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// Scientific notation is ALWAYS automatically expanded
|
|
156
|
-
// User can paste "1.5e-7" and it becomes "0.00000015"
|
|
157
|
-
// User can paste "2e+5" and it becomes "200000"
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### With Form Libraries
|
|
161
|
-
|
|
162
|
-
#### React Hook Form
|
|
163
|
-
|
|
164
|
-
`NumoraInput` works seamlessly with react-hook-form. The recommended approach is to use the `Controller` component, which is react-hook-form's official pattern for controlled components.
|
|
165
|
-
|
|
166
|
-
**Recommended: Controller Pattern**
|
|
167
|
-
```tsx
|
|
168
|
-
import { useForm, Controller } from 'react-hook-form';
|
|
169
|
-
import { NumoraInput } from 'numora-react';
|
|
170
|
-
|
|
171
|
-
function Form() {
|
|
172
|
-
const { control, handleSubmit, setValue } = useForm();
|
|
173
|
-
|
|
174
|
-
return (
|
|
175
|
-
<form onSubmit={handleSubmit((data) => console.log(data))}>
|
|
176
|
-
<Controller
|
|
177
|
-
control={control}
|
|
178
|
-
name="amount"
|
|
179
|
-
render={({ field: { onChange, name, value } }) => (
|
|
180
|
-
<NumoraInput
|
|
181
|
-
name={name}
|
|
182
|
-
value={value || ''}
|
|
183
|
-
onChange={onChange}
|
|
184
|
-
maxDecimals={2}
|
|
185
|
-
thousandSeparator=","
|
|
186
|
-
/>
|
|
187
|
-
)}
|
|
188
|
-
/>
|
|
189
|
-
<button type="button" onClick={() => setValue('amount', '1000')}>
|
|
190
|
-
Set to 1000
|
|
191
|
-
</button>
|
|
192
|
-
<button type="submit">Submit</button>
|
|
193
|
-
</form>
|
|
194
|
-
);
|
|
195
|
-
}
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
**Storing Raw Values** (for calculations):
|
|
199
|
-
If you need to store raw values (without thousand separators) in your form state:
|
|
200
|
-
|
|
201
|
-
```tsx
|
|
202
|
-
<Controller
|
|
203
|
-
control={control}
|
|
204
|
-
name="amount"
|
|
205
|
-
render={({ field }) => (
|
|
206
|
-
<NumoraInput
|
|
207
|
-
value={field.value || ''}
|
|
208
|
-
onChange={(e) => {
|
|
209
|
-
// Store raw value - better for calculations
|
|
210
|
-
field.onChange((e.target as any).rawValue);
|
|
211
|
-
}}
|
|
212
|
-
maxDecimals={2}
|
|
213
|
-
thousandSeparator=","
|
|
26
|
+
onChange={(e) => console.log(e.target.value)}
|
|
214
27
|
/>
|
|
215
|
-
)}
|
|
216
|
-
/>
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
**Alternative: Register Pattern** (uncontrolled, basic forms only):
|
|
220
|
-
```tsx
|
|
221
|
-
import { useForm } from 'react-hook-form';
|
|
222
|
-
import { NumoraInput } from 'numora-react';
|
|
223
|
-
|
|
224
|
-
function Form() {
|
|
225
|
-
const { register, handleSubmit } = useForm();
|
|
226
|
-
|
|
227
|
-
return (
|
|
228
|
-
<form onSubmit={handleSubmit((data) => console.log(data))}>
|
|
229
|
-
<NumoraInput
|
|
230
|
-
{...register('amount')}
|
|
231
|
-
maxDecimals={2}
|
|
232
|
-
thousandSeparator=","
|
|
233
|
-
/>
|
|
234
|
-
<button type="submit">Submit</button>
|
|
235
|
-
</form>
|
|
236
28
|
);
|
|
237
29
|
}
|
|
238
30
|
```
|
|
239
31
|
|
|
240
|
-
|
|
241
|
-
- `numora-react` does not require `react-hook-form` as a dependency. It works with react-hook-form when it's present in your project.
|
|
242
|
-
- The `Controller` pattern is recommended because it works seamlessly with `setValue()`, validation, and all react-hook-form features.
|
|
243
|
-
- `NumoraInput` provides both formatted (`e.target.value`) and raw (`e.target.rawValue`) values in the onChange event.
|
|
244
|
-
|
|
245
|
-
#### Formik
|
|
246
|
-
|
|
247
|
-
```tsx
|
|
248
|
-
import { useFormik } from 'formik';
|
|
249
|
-
import { NumoraInput } from 'numora-react';
|
|
250
|
-
|
|
251
|
-
function Form() {
|
|
252
|
-
const formik = useFormik({
|
|
253
|
-
initialValues: { amount: '' },
|
|
254
|
-
onSubmit: (values) => {
|
|
255
|
-
console.log(values);
|
|
256
|
-
},
|
|
257
|
-
});
|
|
258
|
-
|
|
259
|
-
return (
|
|
260
|
-
<form onSubmit={formik.handleSubmit}>
|
|
261
|
-
<NumoraInput
|
|
262
|
-
name="amount"
|
|
263
|
-
value={formik.values.amount}
|
|
264
|
-
onChange={formik.handleChange}
|
|
265
|
-
onBlur={formik.handleBlur}
|
|
266
|
-
maxDecimals={2}
|
|
267
|
-
thousandSeparator=","
|
|
268
|
-
/>
|
|
269
|
-
<button type="submit">Submit</button>
|
|
270
|
-
</form>
|
|
271
|
-
);
|
|
272
|
-
}
|
|
273
|
-
```
|
|
274
|
-
|
|
275
|
-
### Controlled Component
|
|
276
|
-
|
|
277
|
-
```tsx
|
|
278
|
-
import { NumoraInput } from 'numora-react';
|
|
279
|
-
import { useState } from 'react';
|
|
280
|
-
|
|
281
|
-
function ControlledInput() {
|
|
282
|
-
const [value, setValue] = useState('');
|
|
283
|
-
|
|
284
|
-
return (
|
|
285
|
-
<NumoraInput
|
|
286
|
-
value={value}
|
|
287
|
-
onChange={(e) => setValue(e.target.value)}
|
|
288
|
-
maxDecimals={2}
|
|
289
|
-
thousandSeparator=","
|
|
290
|
-
/>
|
|
291
|
-
);
|
|
292
|
-
}
|
|
293
|
-
```
|
|
294
|
-
|
|
295
|
-
### Uncontrolled Component
|
|
296
|
-
|
|
297
|
-
```tsx
|
|
298
|
-
import { NumoraInput } from 'numora-react';
|
|
299
|
-
import { useRef } from 'react';
|
|
300
|
-
|
|
301
|
-
function UncontrolledInput() {
|
|
302
|
-
const inputRef = useRef<HTMLInputElement>(null);
|
|
303
|
-
|
|
304
|
-
const handleSubmit = () => {
|
|
305
|
-
const value = inputRef.current?.value;
|
|
306
|
-
console.log('Value:', value);
|
|
307
|
-
};
|
|
32
|
+
## Features
|
|
308
33
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
</>
|
|
318
|
-
);
|
|
319
|
-
}
|
|
320
|
-
```
|
|
34
|
+
- [Sanitization](https://numora.xyz/docs/numora-react/features/sanitization) - filters invalid characters and mobile keyboard artifacts
|
|
35
|
+
- [Formatting](https://numora.xyz/docs/numora-react/features/formatting) - thousand separators (Thousand/Lakh/Wan), format on blur or change
|
|
36
|
+
- [Decimals](https://numora.xyz/docs/numora-react/features/decimals) - configurable max decimal places and custom decimal separator
|
|
37
|
+
- [Compact Notation](https://numora.xyz/docs/numora-react/features/compact-notation) - expands "1k" → "1000" on paste (opt-in)
|
|
38
|
+
- [Scientific Notation](https://numora.xyz/docs/numora-react/features/scientific-notation) - always expands "1.5e-7" → "0.00000015" automatically
|
|
39
|
+
- [Leading Zeros](https://numora.xyz/docs/numora-react/features/leading-zeros) - configurable leading zero behavior
|
|
40
|
+
- [React Hook Form](https://numora.xyz/docs/numora-react/integrations/react-hook-form) - seamless integration via the `Controller` pattern
|
|
41
|
+
- Ref forwarding, controlled and uncontrolled modes, all standard input props
|
|
321
42
|
|
|
322
43
|
## Props
|
|
323
44
|
|
|
324
45
|
| Prop | Type | Default | Description |
|
|
325
46
|
|------|------|---------|-------------|
|
|
326
|
-
| `maxDecimals` | `number` | `2` | Maximum
|
|
327
|
-
| `formatOn` | `'blur' \| 'change'` | `'blur'` | When to apply formatting
|
|
328
|
-
| `thousandSeparator` | `string` | `','` |
|
|
329
|
-
| `thousandStyle` | `'thousand' \| 'lakh' \| 'wan'` | `'thousand'` | Grouping style
|
|
330
|
-
| `enableCompactNotation` | `boolean` | `false` |
|
|
331
|
-
| `onChange` | `(e: ChangeEvent<HTMLInputElement>
|
|
332
|
-
| `additionalStyle` | `string` | `undefined` | Additional CSS styles (deprecated, use `style` prop) |
|
|
333
|
-
|
|
334
|
-
All standard HTMLInputElement props are also supported (e.g., `placeholder`, `className`, `disabled`, `id`, `onFocus`, `onBlur`, etc.), except:
|
|
335
|
-
- `type` - Always set to `'text'` (required for formatting)
|
|
336
|
-
- `inputMode` - Always set to `'decimal'` (for mobile keyboards)
|
|
337
|
-
|
|
338
|
-
**Note:** Scientific notation expansion (e.g., `"1.5e-7"` → `"0.00000015"`) always happens automatically and is not configurable.
|
|
339
|
-
|
|
340
|
-
## API Reference
|
|
341
|
-
|
|
342
|
-
### NumoraInput
|
|
343
|
-
|
|
344
|
-
A React component that wraps the core Numora functionality in a React-friendly API.
|
|
47
|
+
| `maxDecimals` | `number` | `2` | Maximum decimal places allowed |
|
|
48
|
+
| `formatOn` | `'blur' \| 'change'` | `'blur'` | When to apply formatting |
|
|
49
|
+
| `thousandSeparator` | `string` | `','` | Thousand separator character |
|
|
50
|
+
| `thousandStyle` | `'thousand' \| 'lakh' \| 'wan'` | `'thousand'` | Grouping style |
|
|
51
|
+
| `enableCompactNotation` | `boolean` | `false` | Expand compact notation on paste |
|
|
52
|
+
| `onChange` | `(e: ChangeEvent<HTMLInputElement>) => void` | `undefined` | Called when value changes |
|
|
345
53
|
|
|
346
|
-
|
|
54
|
+
All standard `HTMLInputElement` props are supported except `type` (always `'text'`) and `inputMode` (always `'decimal'`).
|
|
347
55
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
## TypeScript
|
|
351
|
-
|
|
352
|
-
Full TypeScript support is included. The component is typed with proper interfaces:
|
|
353
|
-
|
|
354
|
-
```tsx
|
|
355
|
-
import { NumoraInput } from 'numora-react';
|
|
356
|
-
|
|
357
|
-
// All props are fully typed
|
|
358
|
-
const input = (
|
|
359
|
-
<NumoraInput
|
|
360
|
-
maxDecimals={18} // ✅ TypeScript knows this is a number
|
|
361
|
-
formatOn="change" // ✅ TypeScript knows valid values
|
|
362
|
-
enableCompactNotation={true} // ✅ TypeScript knows this is boolean
|
|
363
|
-
onChange={(e) => {
|
|
364
|
-
// ✅ e is properly typed as ChangeEvent<HTMLInputElement>
|
|
365
|
-
console.log(e.target.value);
|
|
366
|
-
}}
|
|
367
|
-
/>
|
|
368
|
-
);
|
|
369
|
-
```
|
|
56
|
+
Both `e.target.value` (formatted) and `e.target.rawValue` (unformatted) are available in `onChange`.
|
|
370
57
|
|
|
371
|
-
##
|
|
58
|
+
## Documentation
|
|
372
59
|
|
|
373
|
-
|
|
60
|
+
Full docs and live demo at [numora.xyz/docs/numora-react](https://numora.xyz/docs/numora-react).
|
|
374
61
|
|
|
375
62
|
## License
|
|
376
63
|
|
package/dist/index.cjs
CHANGED
|
@@ -62,7 +62,7 @@ function createSyntheticChangeEvent(input) {
|
|
|
62
62
|
};
|
|
63
63
|
}
|
|
64
64
|
const NumoraInput = react.forwardRef((props, ref) => {
|
|
65
|
-
const { maxDecimals = 2, onChange, onPaste, onBlur, onKeyDown, onFocus, onRawValueChange, formatOn = numora.FormatOn.Blur, thousandSeparator
|
|
65
|
+
const { maxDecimals = 2, onChange, onPaste, onBlur, onKeyDown, onFocus, onRawValueChange, formatOn = numora.FormatOn.Blur, thousandSeparator, thousandStyle = numora.ThousandStyle.Thousand, decimalSeparator, decimalMinLength, enableCompactNotation = false, enableNegative = false, enableLeadingZeros = false, rawValueMode = false, value: controlledValue, defaultValue, ...rest } = props;
|
|
66
66
|
numora.validateNumoraInputOptions({
|
|
67
67
|
decimalMaxLength: maxDecimals,
|
|
68
68
|
decimalMinLength,
|
|
@@ -80,17 +80,20 @@ const NumoraInput = react.forwardRef((props, ref) => {
|
|
|
80
80
|
const lastCaretPosRef = react.useRef(null);
|
|
81
81
|
// Memoize to give callbacks a stable reference - avoids recreating all
|
|
82
82
|
// useCallback functions on every render when primitive props haven't changed.
|
|
83
|
-
const formattingOptions = react.useMemo(() =>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
83
|
+
const formattingOptions = react.useMemo(() => {
|
|
84
|
+
const resolved = numora.resolveLocaleOptions({ thousandSeparator, thousandStyle, decimalSeparator });
|
|
85
|
+
return {
|
|
86
|
+
formatOn,
|
|
87
|
+
thousandSeparator: resolved.thousandSeparator,
|
|
88
|
+
ThousandStyle: resolved.thousandStyle,
|
|
89
|
+
decimalSeparator: resolved.decimalSeparator,
|
|
90
|
+
decimalMinLength,
|
|
91
|
+
enableCompactNotation,
|
|
92
|
+
enableNegative,
|
|
93
|
+
enableLeadingZeros,
|
|
94
|
+
rawValueMode,
|
|
95
|
+
};
|
|
96
|
+
}, [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,
|
|
94
97
|
enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);
|
|
95
98
|
const getInitialValue = () => {
|
|
96
99
|
const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/handlers.ts","../src/index.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n handleOnChangeNumoraInput,\n handleOnKeyDownNumoraInput,\n handleOnPasteNumoraInput,\n formatValueForDisplay,\n type CaretPositionInfo,\n type FormattingOptions,\n FormatOn,\n} from 'numora';\n\ntype ChangeResult = {\n value: string;\n rawValue?: string;\n};\n\ntype PasteResult = ChangeResult;\ntype BlurResult = ChangeResult;\n\ntype BaseOptions = {\n decimalMaxLength: number;\n caretPositionBeforeChange?: CaretPositionInfo;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n};\n\nexport function handleNumoraOnChange(\n e: React.ChangeEvent<HTMLInputElement>,\n options: BaseOptions\n): ChangeResult {\n const { formatted, raw } = handleOnChangeNumoraInput(\n e.nativeEvent as unknown as Event,\n options.decimalMaxLength,\n options.caretPositionBeforeChange,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnPaste(\n e: React.ClipboardEvent<HTMLInputElement>,\n options: Omit<BaseOptions, 'caretPositionBeforeChange'>\n): PasteResult {\n const { formatted, raw } = handleOnPasteNumoraInput(\n e.nativeEvent as ClipboardEvent,\n options.decimalMaxLength,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnKeyDown(\n e: React.KeyboardEvent<HTMLInputElement>,\n formattingOptions: FormattingOptions\n): CaretPositionInfo | undefined {\n return handleOnKeyDownNumoraInput(\n e.nativeEvent as unknown as KeyboardEvent,\n formattingOptions\n );\n}\n\nexport function handleNumoraOnBlur(\n e: React.FocusEvent<HTMLInputElement>,\n options: {\n decimalMaxLength: number;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n }\n): BlurResult {\n if (options.formattingOptions.formatOn === FormatOn.Blur) {\n const { formatted, raw } = formatValueForDisplay(\n e.target.value,\n options.decimalMaxLength,\n { ...options.formattingOptions, formatOn: FormatOn.Change }\n );\n return {\n value: formatted,\n rawValue: raw,\n };\n }\n\n return {\n value: e.target.value,\n rawValue: undefined,\n };\n}\n","import {\n useRef,\n useState,\n useEffect,\n useLayoutEffect,\n forwardRef,\n useCallback,\n useMemo,\n ClipboardEvent,\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n InputHTMLAttributes\n} from 'react';\nimport {\n FormatOn,\n ThousandStyle,\n formatValueForDisplay,\n removeThousandSeparators,\n validateNumoraInputOptions,\n type CaretPositionInfo,\n type FormattingOptions,\n} from 'numora';\nimport {\n handleNumoraOnBlur,\n handleNumoraOnChange,\n handleNumoraOnKeyDown,\n handleNumoraOnPaste,\n} from './handlers';\n\nexport interface NumoraHTMLInputElement extends HTMLInputElement {\n rawValue?: string;\n}\n\nexport type NumoraInputChangeEvent = Omit<ChangeEvent<HTMLInputElement>, 'target'> & {\n target: NumoraHTMLInputElement;\n};\n\n/**\n * Creates a complete synthetic change event from a real HTMLInputElement.\n * Used when a change needs to be signalled without an actual DOM change event\n * (e.g. after paste with preventDefault, or after a controlled-value reformat).\n */\nfunction createSyntheticChangeEvent(input: HTMLInputElement): NumoraInputChangeEvent {\n const nativeEvent = new Event('change', { bubbles: true, cancelable: false });\n return {\n nativeEvent,\n target: input as NumoraHTMLInputElement,\n currentTarget: input,\n type: 'change',\n bubbles: true,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: Event.AT_TARGET,\n isTrusted: false,\n timeStamp: Date.now(),\n isDefaultPrevented: () => false,\n isPropagationStopped: () => false,\n persist: () => {},\n preventDefault: () => {},\n stopPropagation: () => {},\n stopImmediatePropagation: () => {},\n } as unknown as NumoraInputChangeEvent;\n}\n\nexport interface NumoraInputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'onChange' | 'type' | 'inputMode' | 'onFocus' | 'onBlur'\n > {\n maxDecimals?: number;\n onChange?: (e: NumoraInputChangeEvent) => void;\n onFocus?: (e: FocusEvent<HTMLInputElement>) => void;\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void;\n /** Called with the raw (unformatted) numeric string on every value change. */\n onRawValueChange?: (rawValue: string | undefined) => void;\n\n formatOn?: FormatOn;\n thousandSeparator?: string;\n thousandStyle?: ThousandStyle;\n decimalSeparator?: string;\n decimalMinLength?: number;\n\n enableCompactNotation?: boolean;\n enableNegative?: boolean;\n enableLeadingZeros?: boolean;\n rawValueMode?: boolean;\n}\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref) => {\n const {\n maxDecimals = 2,\n onChange,\n onPaste,\n onBlur,\n onKeyDown,\n onFocus,\n onRawValueChange,\n formatOn = FormatOn.Blur,\n thousandSeparator = ',',\n thousandStyle = ThousandStyle.Thousand,\n decimalSeparator = '.',\n decimalMinLength,\n enableCompactNotation = false,\n enableNegative = false,\n enableLeadingZeros = false,\n rawValueMode = false,\n value: controlledValue,\n defaultValue,\n ...rest\n } = props;\n\n validateNumoraInputOptions({\n decimalMaxLength: maxDecimals,\n decimalMinLength,\n formatOn,\n thousandSeparator,\n thousandStyle,\n decimalSeparator,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n });\n\n const internalInputRef = useRef<HTMLInputElement>(null);\n const caretInfoRef = useRef<CaretPositionInfo | undefined>(undefined);\n const lastCaretPosRef = useRef<number | null>(null);\n\n // Memoize to give callbacks a stable reference - avoids recreating all\n // useCallback functions on every render when primitive props haven't changed.\n const formattingOptions: FormattingOptions = useMemo(() => ({\n formatOn,\n thousandSeparator,\n ThousandStyle: thousandStyle,\n decimalSeparator,\n decimalMinLength,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n }), [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,\n enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);\n\n const getInitialValue = (): string => {\n const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;\n if (valueToFormat !== undefined) {\n const { formatted } = formatValueForDisplay(String(valueToFormat), maxDecimals, formattingOptions);\n return formatted;\n }\n return '';\n };\n\n const [displayValue, setDisplayValue] = useState<string>(getInitialValue);\n\n // Track the current displayValue via a ref so the controlled-value useEffect\n // can compare against it without adding displayValue as a dependency (which\n // would cause the effect to re-run on every keystroke).\n const displayValueRef = useRef<string>(displayValue);\n displayValueRef.current = displayValue;\n\n // Sync external ref with internal ref\n useLayoutEffect(() => {\n if (!ref) return;\n if (typeof ref === 'function') {\n ref(internalInputRef.current);\n } else {\n ref.current = internalInputRef.current;\n }\n }, [ref]);\n\n // When the controlled value or formatting options change, reformat the display.\n // Uses displayValueRef (not displayValue in deps) to avoid re-running on every keystroke.\n // Does NOT call onChange - that would create a circular loop with react-hook-form Controller.\n useEffect(() => {\n if (controlledValue !== undefined) {\n const { formatted, raw } = formatValueForDisplay(String(controlledValue), maxDecimals, formattingOptions);\n if (formatted !== displayValueRef.current) {\n setDisplayValue(formatted);\n\n if (internalInputRef.current) {\n (internalInputRef.current as NumoraHTMLInputElement).rawValue = raw;\n }\n onRawValueChange?.(raw);\n }\n }\n }, [controlledValue, maxDecimals, formattingOptions, onRawValueChange]);\n\n // Restore cursor position after render.\n // No dependency array is intentional: this must run after every render so it catches\n // the re-render triggered by setDisplayValue in handleChange/handlePaste.\n // lastCaretPosRef is a ref (not reactive), so it cannot be a dependency.\n useLayoutEffect(() => {\n if (internalInputRef.current && lastCaretPosRef.current !== null) {\n const input = internalInputRef.current;\n const pos = lastCaretPosRef.current;\n input.setSelectionRange(pos, pos);\n lastCaretPosRef.current = null;\n }\n });\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnChange(e, {\n decimalMaxLength: maxDecimals,\n caretPositionBeforeChange: caretInfoRef.current,\n formattingOptions,\n });\n\n if (internalInputRef.current) {\n const cursorPos = internalInputRef.current.selectionStart;\n if (cursorPos !== null && cursorPos !== undefined) {\n lastCaretPosRef.current = cursorPos;\n }\n }\n\n caretInfoRef.current = undefined;\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onChange) {\n onChange(e as unknown as NumoraInputChangeEvent);\n }\n }, [maxDecimals, formattingOptions, onChange, onRawValueChange]);\n\n const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n const coreCaretInfo = handleNumoraOnKeyDown(e, formattingOptions);\n\n if (!coreCaretInfo && internalInputRef.current) {\n const selectionStart = internalInputRef.current.selectionStart ?? 0;\n const selectionEnd = internalInputRef.current.selectionEnd ?? 0;\n caretInfoRef.current = {\n selectionStart,\n selectionEnd,\n };\n } else {\n caretInfoRef.current = coreCaretInfo;\n }\n\n if (onKeyDown) {\n onKeyDown(e);\n }\n }, [formattingOptions, onKeyDown]);\n\n const handlePaste = useCallback((e: ClipboardEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnPaste(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n lastCaretPosRef.current = (e.target as HTMLInputElement).selectionStart;\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onPaste) {\n onPaste(e);\n }\n\n // Paste calls e.preventDefault() internally, so React's onChange never fires.\n // We synthesise a proper change event so consumers see a typed ChangeEvent.\n if (onChange) {\n onChange(createSyntheticChangeEvent(e.target as HTMLInputElement));\n }\n }, [maxDecimals, formattingOptions, onPaste, onChange, onRawValueChange]);\n\n const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n if (\n formattingOptions.formatOn === FormatOn.Blur &&\n formattingOptions.thousandSeparator &&\n formattingOptions.ThousandStyle !== ThousandStyle.None\n ) {\n // Read directly from the DOM element to avoid a stale displayValue closure\n // and to eliminate displayValue from the deps array (which would recreate\n // this callback on every keystroke).\n const currentValue = (e.target as HTMLInputElement).value;\n setDisplayValue(removeThousandSeparators(currentValue, formattingOptions.thousandSeparator!));\n }\n\n if (onFocus) {\n onFocus(e);\n }\n }, [formattingOptions, onFocus]);\n\n const handleBlur = useCallback((e: FocusEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnBlur(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n onRawValueChange?.(rawValue);\n setDisplayValue(value);\n\n if (onBlur) {\n onBlur(e);\n }\n }, [maxDecimals, formattingOptions, onBlur, onRawValueChange]);\n\n return (\n <input\n {...rest}\n ref={internalInputRef}\n value={displayValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n onFocus={handleFocus}\n onBlur={handleBlur}\n type=\"text\"\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n />\n );\n});\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["handleOnChangeNumoraInput","handleOnPasteNumoraInput","handleOnKeyDownNumoraInput","FormatOn","formatValueForDisplay","forwardRef","ThousandStyle","validateNumoraInputOptions","useRef","useMemo","useState","useLayoutEffect","useEffect","useCallback","removeThousandSeparators","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/handlers.ts","../src/index.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n handleOnChangeNumoraInput,\n handleOnKeyDownNumoraInput,\n handleOnPasteNumoraInput,\n formatValueForDisplay,\n type CaretPositionInfo,\n type FormattingOptions,\n FormatOn,\n} from 'numora';\n\ntype ChangeResult = {\n value: string;\n rawValue?: string;\n};\n\ntype PasteResult = ChangeResult;\ntype BlurResult = ChangeResult;\n\ntype BaseOptions = {\n decimalMaxLength: number;\n caretPositionBeforeChange?: CaretPositionInfo;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n};\n\nexport function handleNumoraOnChange(\n e: React.ChangeEvent<HTMLInputElement>,\n options: BaseOptions\n): ChangeResult {\n const { formatted, raw } = handleOnChangeNumoraInput(\n e.nativeEvent as unknown as Event,\n options.decimalMaxLength,\n options.caretPositionBeforeChange,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnPaste(\n e: React.ClipboardEvent<HTMLInputElement>,\n options: Omit<BaseOptions, 'caretPositionBeforeChange'>\n): PasteResult {\n const { formatted, raw } = handleOnPasteNumoraInput(\n e.nativeEvent as ClipboardEvent,\n options.decimalMaxLength,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnKeyDown(\n e: React.KeyboardEvent<HTMLInputElement>,\n formattingOptions: FormattingOptions\n): CaretPositionInfo | undefined {\n return handleOnKeyDownNumoraInput(\n e.nativeEvent as unknown as KeyboardEvent,\n formattingOptions\n );\n}\n\nexport function handleNumoraOnBlur(\n e: React.FocusEvent<HTMLInputElement>,\n options: {\n decimalMaxLength: number;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n }\n): BlurResult {\n if (options.formattingOptions.formatOn === FormatOn.Blur) {\n const { formatted, raw } = formatValueForDisplay(\n e.target.value,\n options.decimalMaxLength,\n { ...options.formattingOptions, formatOn: FormatOn.Change }\n );\n return {\n value: formatted,\n rawValue: raw,\n };\n }\n\n return {\n value: e.target.value,\n rawValue: undefined,\n };\n}\n","import {\n useRef,\n useState,\n useEffect,\n useLayoutEffect,\n forwardRef,\n useCallback,\n useMemo,\n ClipboardEvent,\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n InputHTMLAttributes\n} from 'react';\nimport {\n FormatOn,\n ThousandStyle,\n resolveLocaleOptions,\n formatValueForDisplay,\n removeThousandSeparators,\n validateNumoraInputOptions,\n type CaretPositionInfo,\n type FormattingOptions,\n} from 'numora';\nimport {\n handleNumoraOnBlur,\n handleNumoraOnChange,\n handleNumoraOnKeyDown,\n handleNumoraOnPaste,\n} from './handlers';\n\nexport interface NumoraHTMLInputElement extends HTMLInputElement {\n rawValue?: string;\n}\n\nexport type NumoraInputChangeEvent = Omit<ChangeEvent<HTMLInputElement>, 'target'> & {\n target: NumoraHTMLInputElement;\n};\n\n/**\n * Creates a complete synthetic change event from a real HTMLInputElement.\n * Used when a change needs to be signalled without an actual DOM change event\n * (e.g. after paste with preventDefault, or after a controlled-value reformat).\n */\nfunction createSyntheticChangeEvent(input: HTMLInputElement): NumoraInputChangeEvent {\n const nativeEvent = new Event('change', { bubbles: true, cancelable: false });\n return {\n nativeEvent,\n target: input as NumoraHTMLInputElement,\n currentTarget: input,\n type: 'change',\n bubbles: true,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: Event.AT_TARGET,\n isTrusted: false,\n timeStamp: Date.now(),\n isDefaultPrevented: () => false,\n isPropagationStopped: () => false,\n persist: () => {},\n preventDefault: () => {},\n stopPropagation: () => {},\n stopImmediatePropagation: () => {},\n } as unknown as NumoraInputChangeEvent;\n}\n\nexport interface NumoraInputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'onChange' | 'type' | 'inputMode' | 'onFocus' | 'onBlur'\n > {\n maxDecimals?: number;\n onChange?: (e: NumoraInputChangeEvent) => void;\n onFocus?: (e: FocusEvent<HTMLInputElement>) => void;\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void;\n /** Called with the raw (unformatted) numeric string on every value change. */\n onRawValueChange?: (rawValue: string | undefined) => void;\n\n formatOn?: FormatOn;\n thousandSeparator?: string;\n thousandStyle?: ThousandStyle;\n decimalSeparator?: string;\n decimalMinLength?: number;\n\n enableCompactNotation?: boolean;\n enableNegative?: boolean;\n enableLeadingZeros?: boolean;\n rawValueMode?: boolean;\n}\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref) => {\n const {\n maxDecimals = 2,\n onChange,\n onPaste,\n onBlur,\n onKeyDown,\n onFocus,\n onRawValueChange,\n formatOn = FormatOn.Blur,\n thousandSeparator,\n thousandStyle = ThousandStyle.Thousand,\n decimalSeparator,\n decimalMinLength,\n enableCompactNotation = false,\n enableNegative = false,\n enableLeadingZeros = false,\n rawValueMode = false,\n value: controlledValue,\n defaultValue,\n ...rest\n } = props;\n\n validateNumoraInputOptions({\n decimalMaxLength: maxDecimals,\n decimalMinLength,\n formatOn,\n thousandSeparator,\n thousandStyle,\n decimalSeparator,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n });\n\n const internalInputRef = useRef<HTMLInputElement>(null);\n const caretInfoRef = useRef<CaretPositionInfo | undefined>(undefined);\n const lastCaretPosRef = useRef<number | null>(null);\n\n // Memoize to give callbacks a stable reference - avoids recreating all\n // useCallback functions on every render when primitive props haven't changed.\n const formattingOptions: FormattingOptions = useMemo(() => {\n const resolved = resolveLocaleOptions({ thousandSeparator, thousandStyle, decimalSeparator });\n\n return {\n formatOn,\n thousandSeparator: resolved.thousandSeparator,\n ThousandStyle: resolved.thousandStyle,\n decimalSeparator: resolved.decimalSeparator,\n decimalMinLength,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n };\n }, [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,\n enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);\n\n const getInitialValue = (): string => {\n const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;\n if (valueToFormat !== undefined) {\n const { formatted } = formatValueForDisplay(String(valueToFormat), maxDecimals, formattingOptions);\n return formatted;\n }\n return '';\n };\n\n const [displayValue, setDisplayValue] = useState<string>(getInitialValue);\n\n // Track the current displayValue via a ref so the controlled-value useEffect\n // can compare against it without adding displayValue as a dependency (which\n // would cause the effect to re-run on every keystroke).\n const displayValueRef = useRef<string>(displayValue);\n displayValueRef.current = displayValue;\n\n // Sync external ref with internal ref\n useLayoutEffect(() => {\n if (!ref) return;\n if (typeof ref === 'function') {\n ref(internalInputRef.current);\n } else {\n ref.current = internalInputRef.current;\n }\n }, [ref]);\n\n // When the controlled value or formatting options change, reformat the display.\n // Uses displayValueRef (not displayValue in deps) to avoid re-running on every keystroke.\n // Does NOT call onChange - that would create a circular loop with react-hook-form Controller.\n useEffect(() => {\n if (controlledValue !== undefined) {\n const { formatted, raw } = formatValueForDisplay(String(controlledValue), maxDecimals, formattingOptions);\n if (formatted !== displayValueRef.current) {\n setDisplayValue(formatted);\n\n if (internalInputRef.current) {\n (internalInputRef.current as NumoraHTMLInputElement).rawValue = raw;\n }\n onRawValueChange?.(raw);\n }\n }\n }, [controlledValue, maxDecimals, formattingOptions, onRawValueChange]);\n\n // Restore cursor position after render.\n // No dependency array is intentional: this must run after every render so it catches\n // the re-render triggered by setDisplayValue in handleChange/handlePaste.\n // lastCaretPosRef is a ref (not reactive), so it cannot be a dependency.\n useLayoutEffect(() => {\n if (internalInputRef.current && lastCaretPosRef.current !== null) {\n const input = internalInputRef.current;\n const pos = lastCaretPosRef.current;\n input.setSelectionRange(pos, pos);\n lastCaretPosRef.current = null;\n }\n });\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnChange(e, {\n decimalMaxLength: maxDecimals,\n caretPositionBeforeChange: caretInfoRef.current,\n formattingOptions,\n });\n\n if (internalInputRef.current) {\n const cursorPos = internalInputRef.current.selectionStart;\n if (cursorPos !== null && cursorPos !== undefined) {\n lastCaretPosRef.current = cursorPos;\n }\n }\n\n caretInfoRef.current = undefined;\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onChange) {\n onChange(e as unknown as NumoraInputChangeEvent);\n }\n }, [maxDecimals, formattingOptions, onChange, onRawValueChange]);\n\n const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n const coreCaretInfo = handleNumoraOnKeyDown(e, formattingOptions);\n\n if (!coreCaretInfo && internalInputRef.current) {\n const selectionStart = internalInputRef.current.selectionStart ?? 0;\n const selectionEnd = internalInputRef.current.selectionEnd ?? 0;\n caretInfoRef.current = {\n selectionStart,\n selectionEnd,\n };\n } else {\n caretInfoRef.current = coreCaretInfo;\n }\n\n if (onKeyDown) {\n onKeyDown(e);\n }\n }, [formattingOptions, onKeyDown]);\n\n const handlePaste = useCallback((e: ClipboardEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnPaste(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n lastCaretPosRef.current = (e.target as HTMLInputElement).selectionStart;\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onPaste) {\n onPaste(e);\n }\n\n // Paste calls e.preventDefault() internally, so React's onChange never fires.\n // We synthesise a proper change event so consumers see a typed ChangeEvent.\n if (onChange) {\n onChange(createSyntheticChangeEvent(e.target as HTMLInputElement));\n }\n }, [maxDecimals, formattingOptions, onPaste, onChange, onRawValueChange]);\n\n const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n if (\n formattingOptions.formatOn === FormatOn.Blur &&\n formattingOptions.thousandSeparator &&\n formattingOptions.ThousandStyle !== ThousandStyle.None\n ) {\n // Read directly from the DOM element to avoid a stale displayValue closure\n // and to eliminate displayValue from the deps array (which would recreate\n // this callback on every keystroke).\n const currentValue = (e.target as HTMLInputElement).value;\n setDisplayValue(removeThousandSeparators(currentValue, formattingOptions.thousandSeparator!));\n }\n\n if (onFocus) {\n onFocus(e);\n }\n }, [formattingOptions, onFocus]);\n\n const handleBlur = useCallback((e: FocusEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnBlur(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n\n onRawValueChange?.(rawValue);\n setDisplayValue(value);\n\n if (onBlur) {\n onBlur(e);\n }\n }, [maxDecimals, formattingOptions, onBlur, onRawValueChange]);\n\n return (\n <input\n {...rest}\n ref={internalInputRef}\n value={displayValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n onFocus={handleFocus}\n onBlur={handleBlur}\n type=\"text\"\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n />\n );\n});\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["handleOnChangeNumoraInput","handleOnPasteNumoraInput","handleOnKeyDownNumoraInput","FormatOn","formatValueForDisplay","forwardRef","ThousandStyle","validateNumoraInputOptions","useRef","useMemo","resolveLocaleOptions","useState","useLayoutEffect","useEffect","useCallback","removeThousandSeparators","_jsx"],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef, useRef, useMemo, useState, useLayoutEffect, useEffect, useCallback } from 'react';
|
|
3
|
-
import { handleOnChangeNumoraInput, handleOnKeyDownNumoraInput, handleOnPasteNumoraInput, FormatOn, formatValueForDisplay, ThousandStyle, validateNumoraInputOptions, removeThousandSeparators } from 'numora';
|
|
3
|
+
import { handleOnChangeNumoraInput, handleOnKeyDownNumoraInput, handleOnPasteNumoraInput, FormatOn, formatValueForDisplay, ThousandStyle, validateNumoraInputOptions, resolveLocaleOptions, removeThousandSeparators } from 'numora';
|
|
4
4
|
export { FormatOn, ThousandStyle } from 'numora';
|
|
5
5
|
|
|
6
6
|
function handleNumoraOnChange(e, options) {
|
|
@@ -61,7 +61,7 @@ function createSyntheticChangeEvent(input) {
|
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
63
|
const NumoraInput = forwardRef((props, ref) => {
|
|
64
|
-
const { maxDecimals = 2, onChange, onPaste, onBlur, onKeyDown, onFocus, onRawValueChange, formatOn = FormatOn.Blur, thousandSeparator
|
|
64
|
+
const { maxDecimals = 2, onChange, onPaste, onBlur, onKeyDown, onFocus, onRawValueChange, formatOn = FormatOn.Blur, thousandSeparator, thousandStyle = ThousandStyle.Thousand, decimalSeparator, decimalMinLength, enableCompactNotation = false, enableNegative = false, enableLeadingZeros = false, rawValueMode = false, value: controlledValue, defaultValue, ...rest } = props;
|
|
65
65
|
validateNumoraInputOptions({
|
|
66
66
|
decimalMaxLength: maxDecimals,
|
|
67
67
|
decimalMinLength,
|
|
@@ -79,17 +79,20 @@ const NumoraInput = forwardRef((props, ref) => {
|
|
|
79
79
|
const lastCaretPosRef = useRef(null);
|
|
80
80
|
// Memoize to give callbacks a stable reference - avoids recreating all
|
|
81
81
|
// useCallback functions on every render when primitive props haven't changed.
|
|
82
|
-
const formattingOptions = useMemo(() =>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
82
|
+
const formattingOptions = useMemo(() => {
|
|
83
|
+
const resolved = resolveLocaleOptions({ thousandSeparator, thousandStyle, decimalSeparator });
|
|
84
|
+
return {
|
|
85
|
+
formatOn,
|
|
86
|
+
thousandSeparator: resolved.thousandSeparator,
|
|
87
|
+
ThousandStyle: resolved.thousandStyle,
|
|
88
|
+
decimalSeparator: resolved.decimalSeparator,
|
|
89
|
+
decimalMinLength,
|
|
90
|
+
enableCompactNotation,
|
|
91
|
+
enableNegative,
|
|
92
|
+
enableLeadingZeros,
|
|
93
|
+
rawValueMode,
|
|
94
|
+
};
|
|
95
|
+
}, [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,
|
|
93
96
|
enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);
|
|
94
97
|
const getInitialValue = () => {
|
|
95
98
|
const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/handlers.ts","../src/index.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n handleOnChangeNumoraInput,\n handleOnKeyDownNumoraInput,\n handleOnPasteNumoraInput,\n formatValueForDisplay,\n type CaretPositionInfo,\n type FormattingOptions,\n FormatOn,\n} from 'numora';\n\ntype ChangeResult = {\n value: string;\n rawValue?: string;\n};\n\ntype PasteResult = ChangeResult;\ntype BlurResult = ChangeResult;\n\ntype BaseOptions = {\n decimalMaxLength: number;\n caretPositionBeforeChange?: CaretPositionInfo;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n};\n\nexport function handleNumoraOnChange(\n e: React.ChangeEvent<HTMLInputElement>,\n options: BaseOptions\n): ChangeResult {\n const { formatted, raw } = handleOnChangeNumoraInput(\n e.nativeEvent as unknown as Event,\n options.decimalMaxLength,\n options.caretPositionBeforeChange,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnPaste(\n e: React.ClipboardEvent<HTMLInputElement>,\n options: Omit<BaseOptions, 'caretPositionBeforeChange'>\n): PasteResult {\n const { formatted, raw } = handleOnPasteNumoraInput(\n e.nativeEvent as ClipboardEvent,\n options.decimalMaxLength,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnKeyDown(\n e: React.KeyboardEvent<HTMLInputElement>,\n formattingOptions: FormattingOptions\n): CaretPositionInfo | undefined {\n return handleOnKeyDownNumoraInput(\n e.nativeEvent as unknown as KeyboardEvent,\n formattingOptions\n );\n}\n\nexport function handleNumoraOnBlur(\n e: React.FocusEvent<HTMLInputElement>,\n options: {\n decimalMaxLength: number;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n }\n): BlurResult {\n if (options.formattingOptions.formatOn === FormatOn.Blur) {\n const { formatted, raw } = formatValueForDisplay(\n e.target.value,\n options.decimalMaxLength,\n { ...options.formattingOptions, formatOn: FormatOn.Change }\n );\n return {\n value: formatted,\n rawValue: raw,\n };\n }\n\n return {\n value: e.target.value,\n rawValue: undefined,\n };\n}\n","import {\n useRef,\n useState,\n useEffect,\n useLayoutEffect,\n forwardRef,\n useCallback,\n useMemo,\n ClipboardEvent,\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n InputHTMLAttributes\n} from 'react';\nimport {\n FormatOn,\n ThousandStyle,\n formatValueForDisplay,\n removeThousandSeparators,\n validateNumoraInputOptions,\n type CaretPositionInfo,\n type FormattingOptions,\n} from 'numora';\nimport {\n handleNumoraOnBlur,\n handleNumoraOnChange,\n handleNumoraOnKeyDown,\n handleNumoraOnPaste,\n} from './handlers';\n\nexport interface NumoraHTMLInputElement extends HTMLInputElement {\n rawValue?: string;\n}\n\nexport type NumoraInputChangeEvent = Omit<ChangeEvent<HTMLInputElement>, 'target'> & {\n target: NumoraHTMLInputElement;\n};\n\n/**\n * Creates a complete synthetic change event from a real HTMLInputElement.\n * Used when a change needs to be signalled without an actual DOM change event\n * (e.g. after paste with preventDefault, or after a controlled-value reformat).\n */\nfunction createSyntheticChangeEvent(input: HTMLInputElement): NumoraInputChangeEvent {\n const nativeEvent = new Event('change', { bubbles: true, cancelable: false });\n return {\n nativeEvent,\n target: input as NumoraHTMLInputElement,\n currentTarget: input,\n type: 'change',\n bubbles: true,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: Event.AT_TARGET,\n isTrusted: false,\n timeStamp: Date.now(),\n isDefaultPrevented: () => false,\n isPropagationStopped: () => false,\n persist: () => {},\n preventDefault: () => {},\n stopPropagation: () => {},\n stopImmediatePropagation: () => {},\n } as unknown as NumoraInputChangeEvent;\n}\n\nexport interface NumoraInputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'onChange' | 'type' | 'inputMode' | 'onFocus' | 'onBlur'\n > {\n maxDecimals?: number;\n onChange?: (e: NumoraInputChangeEvent) => void;\n onFocus?: (e: FocusEvent<HTMLInputElement>) => void;\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void;\n /** Called with the raw (unformatted) numeric string on every value change. */\n onRawValueChange?: (rawValue: string | undefined) => void;\n\n formatOn?: FormatOn;\n thousandSeparator?: string;\n thousandStyle?: ThousandStyle;\n decimalSeparator?: string;\n decimalMinLength?: number;\n\n enableCompactNotation?: boolean;\n enableNegative?: boolean;\n enableLeadingZeros?: boolean;\n rawValueMode?: boolean;\n}\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref) => {\n const {\n maxDecimals = 2,\n onChange,\n onPaste,\n onBlur,\n onKeyDown,\n onFocus,\n onRawValueChange,\n formatOn = FormatOn.Blur,\n thousandSeparator = ',',\n thousandStyle = ThousandStyle.Thousand,\n decimalSeparator = '.',\n decimalMinLength,\n enableCompactNotation = false,\n enableNegative = false,\n enableLeadingZeros = false,\n rawValueMode = false,\n value: controlledValue,\n defaultValue,\n ...rest\n } = props;\n\n validateNumoraInputOptions({\n decimalMaxLength: maxDecimals,\n decimalMinLength,\n formatOn,\n thousandSeparator,\n thousandStyle,\n decimalSeparator,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n });\n\n const internalInputRef = useRef<HTMLInputElement>(null);\n const caretInfoRef = useRef<CaretPositionInfo | undefined>(undefined);\n const lastCaretPosRef = useRef<number | null>(null);\n\n // Memoize to give callbacks a stable reference - avoids recreating all\n // useCallback functions on every render when primitive props haven't changed.\n const formattingOptions: FormattingOptions = useMemo(() => ({\n formatOn,\n thousandSeparator,\n ThousandStyle: thousandStyle,\n decimalSeparator,\n decimalMinLength,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n }), [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,\n enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);\n\n const getInitialValue = (): string => {\n const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;\n if (valueToFormat !== undefined) {\n const { formatted } = formatValueForDisplay(String(valueToFormat), maxDecimals, formattingOptions);\n return formatted;\n }\n return '';\n };\n\n const [displayValue, setDisplayValue] = useState<string>(getInitialValue);\n\n // Track the current displayValue via a ref so the controlled-value useEffect\n // can compare against it without adding displayValue as a dependency (which\n // would cause the effect to re-run on every keystroke).\n const displayValueRef = useRef<string>(displayValue);\n displayValueRef.current = displayValue;\n\n // Sync external ref with internal ref\n useLayoutEffect(() => {\n if (!ref) return;\n if (typeof ref === 'function') {\n ref(internalInputRef.current);\n } else {\n ref.current = internalInputRef.current;\n }\n }, [ref]);\n\n // When the controlled value or formatting options change, reformat the display.\n // Uses displayValueRef (not displayValue in deps) to avoid re-running on every keystroke.\n // Does NOT call onChange - that would create a circular loop with react-hook-form Controller.\n useEffect(() => {\n if (controlledValue !== undefined) {\n const { formatted, raw } = formatValueForDisplay(String(controlledValue), maxDecimals, formattingOptions);\n if (formatted !== displayValueRef.current) {\n setDisplayValue(formatted);\n\n if (internalInputRef.current) {\n (internalInputRef.current as NumoraHTMLInputElement).rawValue = raw;\n }\n onRawValueChange?.(raw);\n }\n }\n }, [controlledValue, maxDecimals, formattingOptions, onRawValueChange]);\n\n // Restore cursor position after render.\n // No dependency array is intentional: this must run after every render so it catches\n // the re-render triggered by setDisplayValue in handleChange/handlePaste.\n // lastCaretPosRef is a ref (not reactive), so it cannot be a dependency.\n useLayoutEffect(() => {\n if (internalInputRef.current && lastCaretPosRef.current !== null) {\n const input = internalInputRef.current;\n const pos = lastCaretPosRef.current;\n input.setSelectionRange(pos, pos);\n lastCaretPosRef.current = null;\n }\n });\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnChange(e, {\n decimalMaxLength: maxDecimals,\n caretPositionBeforeChange: caretInfoRef.current,\n formattingOptions,\n });\n\n if (internalInputRef.current) {\n const cursorPos = internalInputRef.current.selectionStart;\n if (cursorPos !== null && cursorPos !== undefined) {\n lastCaretPosRef.current = cursorPos;\n }\n }\n\n caretInfoRef.current = undefined;\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onChange) {\n onChange(e as unknown as NumoraInputChangeEvent);\n }\n }, [maxDecimals, formattingOptions, onChange, onRawValueChange]);\n\n const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n const coreCaretInfo = handleNumoraOnKeyDown(e, formattingOptions);\n\n if (!coreCaretInfo && internalInputRef.current) {\n const selectionStart = internalInputRef.current.selectionStart ?? 0;\n const selectionEnd = internalInputRef.current.selectionEnd ?? 0;\n caretInfoRef.current = {\n selectionStart,\n selectionEnd,\n };\n } else {\n caretInfoRef.current = coreCaretInfo;\n }\n\n if (onKeyDown) {\n onKeyDown(e);\n }\n }, [formattingOptions, onKeyDown]);\n\n const handlePaste = useCallback((e: ClipboardEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnPaste(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n lastCaretPosRef.current = (e.target as HTMLInputElement).selectionStart;\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onPaste) {\n onPaste(e);\n }\n\n // Paste calls e.preventDefault() internally, so React's onChange never fires.\n // We synthesise a proper change event so consumers see a typed ChangeEvent.\n if (onChange) {\n onChange(createSyntheticChangeEvent(e.target as HTMLInputElement));\n }\n }, [maxDecimals, formattingOptions, onPaste, onChange, onRawValueChange]);\n\n const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n if (\n formattingOptions.formatOn === FormatOn.Blur &&\n formattingOptions.thousandSeparator &&\n formattingOptions.ThousandStyle !== ThousandStyle.None\n ) {\n // Read directly from the DOM element to avoid a stale displayValue closure\n // and to eliminate displayValue from the deps array (which would recreate\n // this callback on every keystroke).\n const currentValue = (e.target as HTMLInputElement).value;\n setDisplayValue(removeThousandSeparators(currentValue, formattingOptions.thousandSeparator!));\n }\n\n if (onFocus) {\n onFocus(e);\n }\n }, [formattingOptions, onFocus]);\n\n const handleBlur = useCallback((e: FocusEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnBlur(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n onRawValueChange?.(rawValue);\n setDisplayValue(value);\n\n if (onBlur) {\n onBlur(e);\n }\n }, [maxDecimals, formattingOptions, onBlur, onRawValueChange]);\n\n return (\n <input\n {...rest}\n ref={internalInputRef}\n value={displayValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n onFocus={handleFocus}\n onBlur={handleBlur}\n type=\"text\"\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n />\n );\n});\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../src/handlers.ts","../src/index.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n handleOnChangeNumoraInput,\n handleOnKeyDownNumoraInput,\n handleOnPasteNumoraInput,\n formatValueForDisplay,\n type CaretPositionInfo,\n type FormattingOptions,\n FormatOn,\n} from 'numora';\n\ntype ChangeResult = {\n value: string;\n rawValue?: string;\n};\n\ntype PasteResult = ChangeResult;\ntype BlurResult = ChangeResult;\n\ntype BaseOptions = {\n decimalMaxLength: number;\n caretPositionBeforeChange?: CaretPositionInfo;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n};\n\nexport function handleNumoraOnChange(\n e: React.ChangeEvent<HTMLInputElement>,\n options: BaseOptions\n): ChangeResult {\n const { formatted, raw } = handleOnChangeNumoraInput(\n e.nativeEvent as unknown as Event,\n options.decimalMaxLength,\n options.caretPositionBeforeChange,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnPaste(\n e: React.ClipboardEvent<HTMLInputElement>,\n options: Omit<BaseOptions, 'caretPositionBeforeChange'>\n): PasteResult {\n const { formatted, raw } = handleOnPasteNumoraInput(\n e.nativeEvent as ClipboardEvent,\n options.decimalMaxLength,\n options.formattingOptions\n );\n\n return {\n value: formatted,\n rawValue: raw,\n };\n}\n\nexport function handleNumoraOnKeyDown(\n e: React.KeyboardEvent<HTMLInputElement>,\n formattingOptions: FormattingOptions\n): CaretPositionInfo | undefined {\n return handleOnKeyDownNumoraInput(\n e.nativeEvent as unknown as KeyboardEvent,\n formattingOptions\n );\n}\n\nexport function handleNumoraOnBlur(\n e: React.FocusEvent<HTMLInputElement>,\n options: {\n decimalMaxLength: number;\n formattingOptions: FormattingOptions & { rawValueMode?: boolean };\n }\n): BlurResult {\n if (options.formattingOptions.formatOn === FormatOn.Blur) {\n const { formatted, raw } = formatValueForDisplay(\n e.target.value,\n options.decimalMaxLength,\n { ...options.formattingOptions, formatOn: FormatOn.Change }\n );\n return {\n value: formatted,\n rawValue: raw,\n };\n }\n\n return {\n value: e.target.value,\n rawValue: undefined,\n };\n}\n","import {\n useRef,\n useState,\n useEffect,\n useLayoutEffect,\n forwardRef,\n useCallback,\n useMemo,\n ClipboardEvent,\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n InputHTMLAttributes\n} from 'react';\nimport {\n FormatOn,\n ThousandStyle,\n resolveLocaleOptions,\n formatValueForDisplay,\n removeThousandSeparators,\n validateNumoraInputOptions,\n type CaretPositionInfo,\n type FormattingOptions,\n} from 'numora';\nimport {\n handleNumoraOnBlur,\n handleNumoraOnChange,\n handleNumoraOnKeyDown,\n handleNumoraOnPaste,\n} from './handlers';\n\nexport interface NumoraHTMLInputElement extends HTMLInputElement {\n rawValue?: string;\n}\n\nexport type NumoraInputChangeEvent = Omit<ChangeEvent<HTMLInputElement>, 'target'> & {\n target: NumoraHTMLInputElement;\n};\n\n/**\n * Creates a complete synthetic change event from a real HTMLInputElement.\n * Used when a change needs to be signalled without an actual DOM change event\n * (e.g. after paste with preventDefault, or after a controlled-value reformat).\n */\nfunction createSyntheticChangeEvent(input: HTMLInputElement): NumoraInputChangeEvent {\n const nativeEvent = new Event('change', { bubbles: true, cancelable: false });\n return {\n nativeEvent,\n target: input as NumoraHTMLInputElement,\n currentTarget: input,\n type: 'change',\n bubbles: true,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: Event.AT_TARGET,\n isTrusted: false,\n timeStamp: Date.now(),\n isDefaultPrevented: () => false,\n isPropagationStopped: () => false,\n persist: () => {},\n preventDefault: () => {},\n stopPropagation: () => {},\n stopImmediatePropagation: () => {},\n } as unknown as NumoraInputChangeEvent;\n}\n\nexport interface NumoraInputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'onChange' | 'type' | 'inputMode' | 'onFocus' | 'onBlur'\n > {\n maxDecimals?: number;\n onChange?: (e: NumoraInputChangeEvent) => void;\n onFocus?: (e: FocusEvent<HTMLInputElement>) => void;\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void;\n /** Called with the raw (unformatted) numeric string on every value change. */\n onRawValueChange?: (rawValue: string | undefined) => void;\n\n formatOn?: FormatOn;\n thousandSeparator?: string;\n thousandStyle?: ThousandStyle;\n decimalSeparator?: string;\n decimalMinLength?: number;\n\n enableCompactNotation?: boolean;\n enableNegative?: boolean;\n enableLeadingZeros?: boolean;\n rawValueMode?: boolean;\n}\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref) => {\n const {\n maxDecimals = 2,\n onChange,\n onPaste,\n onBlur,\n onKeyDown,\n onFocus,\n onRawValueChange,\n formatOn = FormatOn.Blur,\n thousandSeparator,\n thousandStyle = ThousandStyle.Thousand,\n decimalSeparator,\n decimalMinLength,\n enableCompactNotation = false,\n enableNegative = false,\n enableLeadingZeros = false,\n rawValueMode = false,\n value: controlledValue,\n defaultValue,\n ...rest\n } = props;\n\n validateNumoraInputOptions({\n decimalMaxLength: maxDecimals,\n decimalMinLength,\n formatOn,\n thousandSeparator,\n thousandStyle,\n decimalSeparator,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n });\n\n const internalInputRef = useRef<HTMLInputElement>(null);\n const caretInfoRef = useRef<CaretPositionInfo | undefined>(undefined);\n const lastCaretPosRef = useRef<number | null>(null);\n\n // Memoize to give callbacks a stable reference - avoids recreating all\n // useCallback functions on every render when primitive props haven't changed.\n const formattingOptions: FormattingOptions = useMemo(() => {\n const resolved = resolveLocaleOptions({ thousandSeparator, thousandStyle, decimalSeparator });\n\n return {\n formatOn,\n thousandSeparator: resolved.thousandSeparator,\n ThousandStyle: resolved.thousandStyle,\n decimalSeparator: resolved.decimalSeparator,\n decimalMinLength,\n enableCompactNotation,\n enableNegative,\n enableLeadingZeros,\n rawValueMode,\n };\n }, [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,\n enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);\n\n const getInitialValue = (): string => {\n const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;\n if (valueToFormat !== undefined) {\n const { formatted } = formatValueForDisplay(String(valueToFormat), maxDecimals, formattingOptions);\n return formatted;\n }\n return '';\n };\n\n const [displayValue, setDisplayValue] = useState<string>(getInitialValue);\n\n // Track the current displayValue via a ref so the controlled-value useEffect\n // can compare against it without adding displayValue as a dependency (which\n // would cause the effect to re-run on every keystroke).\n const displayValueRef = useRef<string>(displayValue);\n displayValueRef.current = displayValue;\n\n // Sync external ref with internal ref\n useLayoutEffect(() => {\n if (!ref) return;\n if (typeof ref === 'function') {\n ref(internalInputRef.current);\n } else {\n ref.current = internalInputRef.current;\n }\n }, [ref]);\n\n // When the controlled value or formatting options change, reformat the display.\n // Uses displayValueRef (not displayValue in deps) to avoid re-running on every keystroke.\n // Does NOT call onChange - that would create a circular loop with react-hook-form Controller.\n useEffect(() => {\n if (controlledValue !== undefined) {\n const { formatted, raw } = formatValueForDisplay(String(controlledValue), maxDecimals, formattingOptions);\n if (formatted !== displayValueRef.current) {\n setDisplayValue(formatted);\n\n if (internalInputRef.current) {\n (internalInputRef.current as NumoraHTMLInputElement).rawValue = raw;\n }\n onRawValueChange?.(raw);\n }\n }\n }, [controlledValue, maxDecimals, formattingOptions, onRawValueChange]);\n\n // Restore cursor position after render.\n // No dependency array is intentional: this must run after every render so it catches\n // the re-render triggered by setDisplayValue in handleChange/handlePaste.\n // lastCaretPosRef is a ref (not reactive), so it cannot be a dependency.\n useLayoutEffect(() => {\n if (internalInputRef.current && lastCaretPosRef.current !== null) {\n const input = internalInputRef.current;\n const pos = lastCaretPosRef.current;\n input.setSelectionRange(pos, pos);\n lastCaretPosRef.current = null;\n }\n });\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnChange(e, {\n decimalMaxLength: maxDecimals,\n caretPositionBeforeChange: caretInfoRef.current,\n formattingOptions,\n });\n\n if (internalInputRef.current) {\n const cursorPos = internalInputRef.current.selectionStart;\n if (cursorPos !== null && cursorPos !== undefined) {\n lastCaretPosRef.current = cursorPos;\n }\n }\n\n caretInfoRef.current = undefined;\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onChange) {\n onChange(e as unknown as NumoraInputChangeEvent);\n }\n }, [maxDecimals, formattingOptions, onChange, onRawValueChange]);\n\n const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n const coreCaretInfo = handleNumoraOnKeyDown(e, formattingOptions);\n\n if (!coreCaretInfo && internalInputRef.current) {\n const selectionStart = internalInputRef.current.selectionStart ?? 0;\n const selectionEnd = internalInputRef.current.selectionEnd ?? 0;\n caretInfoRef.current = {\n selectionStart,\n selectionEnd,\n };\n } else {\n caretInfoRef.current = coreCaretInfo;\n }\n\n if (onKeyDown) {\n onKeyDown(e);\n }\n }, [formattingOptions, onKeyDown]);\n\n const handlePaste = useCallback((e: ClipboardEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnPaste(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n lastCaretPosRef.current = (e.target as HTMLInputElement).selectionStart;\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n\n onRawValueChange?.(rawValue);\n\n setDisplayValue(value);\n\n if (onPaste) {\n onPaste(e);\n }\n\n // Paste calls e.preventDefault() internally, so React's onChange never fires.\n // We synthesise a proper change event so consumers see a typed ChangeEvent.\n if (onChange) {\n onChange(createSyntheticChangeEvent(e.target as HTMLInputElement));\n }\n }, [maxDecimals, formattingOptions, onPaste, onChange, onRawValueChange]);\n\n const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n if (\n formattingOptions.formatOn === FormatOn.Blur &&\n formattingOptions.thousandSeparator &&\n formattingOptions.ThousandStyle !== ThousandStyle.None\n ) {\n // Read directly from the DOM element to avoid a stale displayValue closure\n // and to eliminate displayValue from the deps array (which would recreate\n // this callback on every keystroke).\n const currentValue = (e.target as HTMLInputElement).value;\n setDisplayValue(removeThousandSeparators(currentValue, formattingOptions.thousandSeparator!));\n }\n\n if (onFocus) {\n onFocus(e);\n }\n }, [formattingOptions, onFocus]);\n\n const handleBlur = useCallback((e: FocusEvent<HTMLInputElement>) => {\n const { value, rawValue } = handleNumoraOnBlur(e, {\n decimalMaxLength: maxDecimals,\n formattingOptions,\n });\n\n (e.target as NumoraHTMLInputElement).rawValue = rawValue;\n\n onRawValueChange?.(rawValue);\n setDisplayValue(value);\n\n if (onBlur) {\n onBlur(e);\n }\n }, [maxDecimals, formattingOptions, onBlur, onRawValueChange]);\n\n return (\n <input\n {...rest}\n ref={internalInputRef}\n value={displayValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n onFocus={handleFocus}\n onBlur={handleBlur}\n type=\"text\"\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n />\n );\n});\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "numora-react",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|
|
18
18
|
"react-dom": ">=16.8.0",
|
|
19
|
-
"numora": ">=3.0
|
|
19
|
+
"numora": ">=3.3.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependenciesMeta": {
|
|
22
22
|
"react-dom": {
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
72
72
|
"tslib": "^2.8.1",
|
|
73
73
|
"typescript": "^5.8.2",
|
|
74
|
-
"numora": "^3.
|
|
74
|
+
"numora": "^3.3.0"
|
|
75
75
|
},
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
package/src/index.tsx
CHANGED
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
import {
|
|
16
16
|
FormatOn,
|
|
17
17
|
ThousandStyle,
|
|
18
|
+
resolveLocaleOptions,
|
|
18
19
|
formatValueForDisplay,
|
|
19
20
|
removeThousandSeparators,
|
|
20
21
|
validateNumoraInputOptions,
|
|
@@ -97,9 +98,9 @@ const NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref)
|
|
|
97
98
|
onFocus,
|
|
98
99
|
onRawValueChange,
|
|
99
100
|
formatOn = FormatOn.Blur,
|
|
100
|
-
thousandSeparator
|
|
101
|
+
thousandSeparator,
|
|
101
102
|
thousandStyle = ThousandStyle.Thousand,
|
|
102
|
-
decimalSeparator
|
|
103
|
+
decimalSeparator,
|
|
103
104
|
decimalMinLength,
|
|
104
105
|
enableCompactNotation = false,
|
|
105
106
|
enableNegative = false,
|
|
@@ -129,17 +130,21 @@ const NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref)
|
|
|
129
130
|
|
|
130
131
|
// Memoize to give callbacks a stable reference - avoids recreating all
|
|
131
132
|
// useCallback functions on every render when primitive props haven't changed.
|
|
132
|
-
const formattingOptions: FormattingOptions = useMemo(() =>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
133
|
+
const formattingOptions: FormattingOptions = useMemo(() => {
|
|
134
|
+
const resolved = resolveLocaleOptions({ thousandSeparator, thousandStyle, decimalSeparator });
|
|
135
|
+
|
|
136
|
+
return {
|
|
137
|
+
formatOn,
|
|
138
|
+
thousandSeparator: resolved.thousandSeparator,
|
|
139
|
+
ThousandStyle: resolved.thousandStyle,
|
|
140
|
+
decimalSeparator: resolved.decimalSeparator,
|
|
141
|
+
decimalMinLength,
|
|
142
|
+
enableCompactNotation,
|
|
143
|
+
enableNegative,
|
|
144
|
+
enableLeadingZeros,
|
|
145
|
+
rawValueMode,
|
|
146
|
+
};
|
|
147
|
+
}, [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,
|
|
143
148
|
enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);
|
|
144
149
|
|
|
145
150
|
const getInitialValue = (): string => {
|
|
@@ -216,6 +221,7 @@ const NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref)
|
|
|
216
221
|
caretInfoRef.current = undefined;
|
|
217
222
|
|
|
218
223
|
(e.target as NumoraHTMLInputElement).rawValue = rawValue;
|
|
224
|
+
|
|
219
225
|
onRawValueChange?.(rawValue);
|
|
220
226
|
|
|
221
227
|
setDisplayValue(value);
|
|
@@ -252,6 +258,7 @@ const NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref)
|
|
|
252
258
|
|
|
253
259
|
lastCaretPosRef.current = (e.target as HTMLInputElement).selectionStart;
|
|
254
260
|
(e.target as NumoraHTMLInputElement).rawValue = rawValue;
|
|
261
|
+
|
|
255
262
|
onRawValueChange?.(rawValue);
|
|
256
263
|
|
|
257
264
|
setDisplayValue(value);
|
|
@@ -292,6 +299,7 @@ const NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref)
|
|
|
292
299
|
});
|
|
293
300
|
|
|
294
301
|
(e.target as NumoraHTMLInputElement).rawValue = rawValue;
|
|
302
|
+
|
|
295
303
|
onRawValueChange?.(rawValue);
|
|
296
304
|
setDisplayValue(value);
|
|
297
305
|
|