@zag-js/number-input 0.70.0 → 0.72.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/dist/index.js +75 -117
- package/dist/index.mjs +14 -31
- package/package.json +10 -11
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/cursor.ts +0 -57
- package/src/index.ts +0 -13
- package/src/number-input.anatomy.ts +0 -14
- package/src/number-input.connect.ts +0 -265
- package/src/number-input.dom.ts +0 -113
- package/src/number-input.machine.ts +0 -445
- package/src/number-input.props.ts +0 -34
- package/src/number-input.types.ts +0 -324
- package/src/number-input.utils.ts +0 -22
package/dist/index.js
CHANGED
|
@@ -1,34 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
'use strict';
|
|
19
2
|
|
|
20
|
-
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
3
|
+
var anatomy$1 = require('@zag-js/anatomy');
|
|
4
|
+
var domEvent = require('@zag-js/dom-event');
|
|
5
|
+
var domQuery = require('@zag-js/dom-query');
|
|
6
|
+
var numberUtils = require('@zag-js/number-utils');
|
|
7
|
+
var core = require('@zag-js/core');
|
|
8
|
+
var formUtils = require('@zag-js/form-utils');
|
|
9
|
+
var utils = require('@zag-js/utils');
|
|
10
|
+
var number = require('@internationalized/number');
|
|
28
11
|
|
|
29
12
|
// src/number-input.anatomy.ts
|
|
30
|
-
var
|
|
31
|
-
var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
|
|
13
|
+
var anatomy = anatomy$1.createAnatomy("numberInput").parts(
|
|
32
14
|
"root",
|
|
33
15
|
"label",
|
|
34
16
|
"input",
|
|
@@ -39,16 +21,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
|
|
|
39
21
|
"scrubber"
|
|
40
22
|
);
|
|
41
23
|
var parts = anatomy.build();
|
|
42
|
-
|
|
43
|
-
// src/number-input.connect.ts
|
|
44
|
-
var import_dom_event = require("@zag-js/dom-event");
|
|
45
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
46
|
-
var import_number_utils2 = require("@zag-js/number-utils");
|
|
47
|
-
|
|
48
|
-
// src/number-input.dom.ts
|
|
49
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
50
|
-
var import_number_utils = require("@zag-js/number-utils");
|
|
51
|
-
var dom = (0, import_dom_query.createScope)({
|
|
24
|
+
var dom = domQuery.createScope({
|
|
52
25
|
getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
|
|
53
26
|
getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
|
|
54
27
|
getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
|
|
@@ -72,7 +45,7 @@ var dom = (0, import_dom_query.createScope)({
|
|
|
72
45
|
return btnEl;
|
|
73
46
|
},
|
|
74
47
|
setupVirtualCursor(ctx) {
|
|
75
|
-
if (
|
|
48
|
+
if (domQuery.isSafari()) return;
|
|
76
49
|
dom.createVirtualCursor(ctx);
|
|
77
50
|
return () => {
|
|
78
51
|
dom.getCursorEl(ctx)?.remove();
|
|
@@ -98,8 +71,8 @@ var dom = (0, import_dom_query.createScope)({
|
|
|
98
71
|
};
|
|
99
72
|
},
|
|
100
73
|
getMousementValue(ctx, event) {
|
|
101
|
-
const x =
|
|
102
|
-
const y =
|
|
74
|
+
const x = numberUtils.roundToDevicePixel(event.movementX);
|
|
75
|
+
const y = numberUtils.roundToDevicePixel(event.movementY);
|
|
103
76
|
let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
|
|
104
77
|
if (ctx.isRtl && hint === "increment") hint = "decrement";
|
|
105
78
|
if (ctx.isRtl && hint === "decrement") hint = "increment";
|
|
@@ -109,8 +82,8 @@ var dom = (0, import_dom_query.createScope)({
|
|
|
109
82
|
};
|
|
110
83
|
const win = dom.getWin(ctx);
|
|
111
84
|
const width = win.innerWidth;
|
|
112
|
-
const half =
|
|
113
|
-
point.x =
|
|
85
|
+
const half = numberUtils.roundToDevicePixel(7.5);
|
|
86
|
+
point.x = numberUtils.wrap(point.x + half, width) - half;
|
|
114
87
|
return { hint, point };
|
|
115
88
|
},
|
|
116
89
|
createVirtualCursor(ctx) {
|
|
@@ -125,7 +98,7 @@ var dom = (0, import_dom_query.createScope)({
|
|
|
125
98
|
pointerEvents: "none",
|
|
126
99
|
left: "0px",
|
|
127
100
|
top: "0px",
|
|
128
|
-
zIndex:
|
|
101
|
+
zIndex: domQuery.MAX_Z_INDEX,
|
|
129
102
|
transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
|
|
130
103
|
willChange: "transform"
|
|
131
104
|
});
|
|
@@ -182,18 +155,18 @@ function connect(state, send, normalize) {
|
|
|
182
155
|
id: dom.getRootId(state.context),
|
|
183
156
|
...parts.root.attrs,
|
|
184
157
|
dir: state.context.dir,
|
|
185
|
-
"data-disabled":
|
|
186
|
-
"data-focus":
|
|
187
|
-
"data-invalid":
|
|
158
|
+
"data-disabled": domQuery.dataAttr(disabled),
|
|
159
|
+
"data-focus": domQuery.dataAttr(focused),
|
|
160
|
+
"data-invalid": domQuery.dataAttr(invalid)
|
|
188
161
|
});
|
|
189
162
|
},
|
|
190
163
|
getLabelProps() {
|
|
191
164
|
return normalize.label({
|
|
192
165
|
...parts.label.attrs,
|
|
193
166
|
dir: state.context.dir,
|
|
194
|
-
"data-disabled":
|
|
195
|
-
"data-focus":
|
|
196
|
-
"data-invalid":
|
|
167
|
+
"data-disabled": domQuery.dataAttr(disabled),
|
|
168
|
+
"data-focus": domQuery.dataAttr(focused),
|
|
169
|
+
"data-invalid": domQuery.dataAttr(invalid),
|
|
197
170
|
id: dom.getLabelId(state.context),
|
|
198
171
|
htmlFor: dom.getInputId(state.context)
|
|
199
172
|
});
|
|
@@ -204,19 +177,19 @@ function connect(state, send, normalize) {
|
|
|
204
177
|
dir: state.context.dir,
|
|
205
178
|
role: "group",
|
|
206
179
|
"aria-disabled": disabled,
|
|
207
|
-
"data-focus":
|
|
208
|
-
"data-disabled":
|
|
209
|
-
"data-invalid":
|
|
210
|
-
"aria-invalid":
|
|
180
|
+
"data-focus": domQuery.dataAttr(focused),
|
|
181
|
+
"data-disabled": domQuery.dataAttr(disabled),
|
|
182
|
+
"data-invalid": domQuery.dataAttr(invalid),
|
|
183
|
+
"aria-invalid": domQuery.ariaAttr(state.context.invalid)
|
|
211
184
|
});
|
|
212
185
|
},
|
|
213
186
|
getValueTextProps() {
|
|
214
187
|
return normalize.element({
|
|
215
188
|
...parts.valueText.attrs,
|
|
216
189
|
dir: state.context.dir,
|
|
217
|
-
"data-disabled":
|
|
218
|
-
"data-invalid":
|
|
219
|
-
"data-focus":
|
|
190
|
+
"data-disabled": domQuery.dataAttr(disabled),
|
|
191
|
+
"data-invalid": domQuery.dataAttr(invalid),
|
|
192
|
+
"data-focus": domQuery.dataAttr(focused)
|
|
220
193
|
});
|
|
221
194
|
},
|
|
222
195
|
getInputProps() {
|
|
@@ -230,10 +203,10 @@ function connect(state, send, normalize) {
|
|
|
230
203
|
defaultValue: state.context.formattedValue,
|
|
231
204
|
pattern: state.context.pattern,
|
|
232
205
|
inputMode: state.context.inputMode,
|
|
233
|
-
"aria-invalid":
|
|
234
|
-
"data-invalid":
|
|
206
|
+
"aria-invalid": domQuery.ariaAttr(invalid),
|
|
207
|
+
"data-invalid": domQuery.dataAttr(invalid),
|
|
235
208
|
disabled,
|
|
236
|
-
"data-disabled":
|
|
209
|
+
"data-disabled": domQuery.dataAttr(disabled),
|
|
237
210
|
readOnly: state.context.readOnly,
|
|
238
211
|
required: state.context.required,
|
|
239
212
|
autoComplete: "off",
|
|
@@ -268,8 +241,8 @@ function connect(state, send, normalize) {
|
|
|
268
241
|
onKeyDown(event) {
|
|
269
242
|
if (event.defaultPrevented) return;
|
|
270
243
|
if (readOnly) return;
|
|
271
|
-
if (
|
|
272
|
-
const step =
|
|
244
|
+
if (domQuery.isComposingEvent(event)) return;
|
|
245
|
+
const step = domEvent.getEventStep(event) * state.context.step;
|
|
273
246
|
const keyMap = {
|
|
274
247
|
ArrowUp() {
|
|
275
248
|
send({ type: "INPUT.ARROW_UP", step });
|
|
@@ -302,13 +275,13 @@ function connect(state, send, normalize) {
|
|
|
302
275
|
dir: state.context.dir,
|
|
303
276
|
id: dom.getDecrementTriggerId(state.context),
|
|
304
277
|
disabled: isDecrementDisabled,
|
|
305
|
-
"data-disabled":
|
|
278
|
+
"data-disabled": domQuery.dataAttr(isDecrementDisabled),
|
|
306
279
|
"aria-label": translations.decrementLabel,
|
|
307
280
|
type: "button",
|
|
308
281
|
tabIndex: -1,
|
|
309
282
|
"aria-controls": dom.getInputId(state.context),
|
|
310
283
|
onPointerDown(event) {
|
|
311
|
-
if (isDecrementDisabled || !
|
|
284
|
+
if (isDecrementDisabled || !domEvent.isLeftClick(event)) return;
|
|
312
285
|
send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
|
|
313
286
|
if (event.pointerType === "mouse") {
|
|
314
287
|
event.preventDefault();
|
|
@@ -332,13 +305,13 @@ function connect(state, send, normalize) {
|
|
|
332
305
|
dir: state.context.dir,
|
|
333
306
|
id: dom.getIncrementTriggerId(state.context),
|
|
334
307
|
disabled: isIncrementDisabled,
|
|
335
|
-
"data-disabled":
|
|
308
|
+
"data-disabled": domQuery.dataAttr(isIncrementDisabled),
|
|
336
309
|
"aria-label": translations.incrementLabel,
|
|
337
310
|
type: "button",
|
|
338
311
|
tabIndex: -1,
|
|
339
312
|
"aria-controls": dom.getInputId(state.context),
|
|
340
313
|
onPointerDown(event) {
|
|
341
|
-
if (isIncrementDisabled || !
|
|
314
|
+
if (isIncrementDisabled || !domEvent.isLeftClick(event)) return;
|
|
342
315
|
send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
|
|
343
316
|
if (event.pointerType === "mouse") {
|
|
344
317
|
event.preventDefault();
|
|
@@ -359,14 +332,14 @@ function connect(state, send, normalize) {
|
|
|
359
332
|
return normalize.element({
|
|
360
333
|
...parts.scrubber.attrs,
|
|
361
334
|
dir: state.context.dir,
|
|
362
|
-
"data-disabled":
|
|
335
|
+
"data-disabled": domQuery.dataAttr(disabled),
|
|
363
336
|
id: dom.getScrubberId(state.context),
|
|
364
337
|
role: "presentation",
|
|
365
338
|
onMouseDown(event) {
|
|
366
339
|
if (disabled) return;
|
|
367
|
-
const point =
|
|
368
|
-
point.x = point.x -
|
|
369
|
-
point.y = point.y -
|
|
340
|
+
const point = domEvent.getEventPoint(event);
|
|
341
|
+
point.x = point.x - numberUtils.roundToDevicePixel(7.5);
|
|
342
|
+
point.y = point.y - numberUtils.roundToDevicePixel(7.5);
|
|
370
343
|
send({ type: "SCRUBBER.PRESS_DOWN", point });
|
|
371
344
|
event.preventDefault();
|
|
372
345
|
},
|
|
@@ -378,14 +351,6 @@ function connect(state, send, normalize) {
|
|
|
378
351
|
};
|
|
379
352
|
}
|
|
380
353
|
|
|
381
|
-
// src/number-input.machine.ts
|
|
382
|
-
var import_core2 = require("@zag-js/core");
|
|
383
|
-
var import_dom_event2 = require("@zag-js/dom-event");
|
|
384
|
-
var import_dom_query3 = require("@zag-js/dom-query");
|
|
385
|
-
var import_form_utils = require("@zag-js/form-utils");
|
|
386
|
-
var import_number_utils3 = require("@zag-js/number-utils");
|
|
387
|
-
var import_utils = require("@zag-js/utils");
|
|
388
|
-
|
|
389
354
|
// src/cursor.ts
|
|
390
355
|
function recordCursor(inputEl) {
|
|
391
356
|
if (inputEl.ownerDocument.activeElement !== inputEl) return;
|
|
@@ -428,15 +393,11 @@ function restoreCursor(inputEl, selection) {
|
|
|
428
393
|
} catch {
|
|
429
394
|
}
|
|
430
395
|
}
|
|
431
|
-
|
|
432
|
-
// src/number-input.utils.ts
|
|
433
|
-
var import_number = require("@internationalized/number");
|
|
434
|
-
var import_core = require("@zag-js/core");
|
|
435
396
|
var createFormatter = (locale, options = {}) => {
|
|
436
|
-
return
|
|
397
|
+
return core.ref(new Intl.NumberFormat(locale, options));
|
|
437
398
|
};
|
|
438
399
|
var createParser = (locale, options = {}) => {
|
|
439
|
-
return
|
|
400
|
+
return core.ref(new number.NumberParser(locale, options));
|
|
440
401
|
};
|
|
441
402
|
var parseValue = (ctx, value) => {
|
|
442
403
|
if (!ctx.formatOptions) return parseFloat(value);
|
|
@@ -449,10 +410,10 @@ var formatValue = (ctx, value) => {
|
|
|
449
410
|
};
|
|
450
411
|
|
|
451
412
|
// src/number-input.machine.ts
|
|
452
|
-
var { not, and } =
|
|
413
|
+
var { not, and } = core.guards;
|
|
453
414
|
function machine(userContext) {
|
|
454
|
-
const ctx =
|
|
455
|
-
return
|
|
415
|
+
const ctx = utils.compact(userContext);
|
|
416
|
+
return core.createMachine(
|
|
456
417
|
{
|
|
457
418
|
id: "number-input",
|
|
458
419
|
initial: "idle",
|
|
@@ -488,9 +449,9 @@ function machine(userContext) {
|
|
|
488
449
|
isRtl: (ctx2) => ctx2.dir === "rtl",
|
|
489
450
|
valueAsNumber: (ctx2) => parseValue(ctx2, ctx2.value),
|
|
490
451
|
formattedValue: (ctx2) => formatValue(ctx2, ctx2.valueAsNumber),
|
|
491
|
-
isAtMin: (ctx2) =>
|
|
492
|
-
isAtMax: (ctx2) =>
|
|
493
|
-
isOutOfRange: (ctx2) => !
|
|
452
|
+
isAtMin: (ctx2) => numberUtils.isAtMin(ctx2.valueAsNumber, ctx2),
|
|
453
|
+
isAtMax: (ctx2) => numberUtils.isAtMax(ctx2.valueAsNumber, ctx2),
|
|
454
|
+
isOutOfRange: (ctx2) => !numberUtils.isWithinRange(ctx2.valueAsNumber, ctx2),
|
|
494
455
|
isValueEmpty: (ctx2) => ctx2.value === "",
|
|
495
456
|
isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
|
|
496
457
|
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
|
|
@@ -585,7 +546,7 @@ function machine(userContext) {
|
|
|
585
546
|
"before:spin": {
|
|
586
547
|
tags: "focus",
|
|
587
548
|
activities: "trackButtonDisabled",
|
|
588
|
-
entry:
|
|
549
|
+
entry: core.choose([
|
|
589
550
|
{ guard: "isIncrementHint", actions: "increment" },
|
|
590
551
|
{ guard: "isDecrementHint", actions: "decrement" }
|
|
591
552
|
]),
|
|
@@ -664,7 +625,7 @@ function machine(userContext) {
|
|
|
664
625
|
activities: {
|
|
665
626
|
trackFormControl(ctx2, _evt, { initialContext }) {
|
|
666
627
|
const inputEl = dom.getInputEl(ctx2);
|
|
667
|
-
return
|
|
628
|
+
return formUtils.trackFormControl(inputEl, {
|
|
668
629
|
onFieldsetDisabledChange(disabled) {
|
|
669
630
|
ctx2.fieldsetDisabled = disabled;
|
|
670
631
|
},
|
|
@@ -681,7 +642,7 @@ function machine(userContext) {
|
|
|
681
642
|
},
|
|
682
643
|
trackButtonDisabled(ctx2, _evt, { send }) {
|
|
683
644
|
const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
|
|
684
|
-
return
|
|
645
|
+
return domQuery.observeAttributes(btn, {
|
|
685
646
|
attributes: ["disabled"],
|
|
686
647
|
callback() {
|
|
687
648
|
send({ type: "TRIGGER.PRESS_UP", src: "attr" });
|
|
@@ -700,11 +661,11 @@ function machine(userContext) {
|
|
|
700
661
|
send("VALUE.DECREMENT");
|
|
701
662
|
}
|
|
702
663
|
}
|
|
703
|
-
return
|
|
664
|
+
return domEvent.addDomEvent(inputEl, "wheel", onWheel, { passive: false });
|
|
704
665
|
},
|
|
705
666
|
activatePointerLock(ctx2) {
|
|
706
|
-
if (
|
|
707
|
-
return
|
|
667
|
+
if (domQuery.isSafari()) return;
|
|
668
|
+
return domEvent.requestPointerLock(dom.getDoc(ctx2));
|
|
708
669
|
},
|
|
709
670
|
trackMousemove(ctx2, _evt, { send }) {
|
|
710
671
|
const doc = dom.getDoc(ctx2);
|
|
@@ -721,9 +682,9 @@ function machine(userContext) {
|
|
|
721
682
|
function onMouseup() {
|
|
722
683
|
send("SCRUBBER.POINTER_UP");
|
|
723
684
|
}
|
|
724
|
-
return
|
|
725
|
-
|
|
726
|
-
|
|
685
|
+
return utils.callAll(
|
|
686
|
+
domEvent.addDomEvent(doc, "mousemove", onMousemove, false),
|
|
687
|
+
domEvent.addDomEvent(doc, "mouseup", onMouseup, false)
|
|
727
688
|
);
|
|
728
689
|
}
|
|
729
690
|
},
|
|
@@ -732,25 +693,25 @@ function machine(userContext) {
|
|
|
732
693
|
if (!ctx2.focusInputOnChange) return;
|
|
733
694
|
const inputEl = dom.getInputEl(ctx2);
|
|
734
695
|
if (dom.isActiveElement(ctx2, inputEl)) return;
|
|
735
|
-
|
|
696
|
+
domQuery.raf(() => inputEl?.focus({ preventScroll: true }));
|
|
736
697
|
},
|
|
737
698
|
increment(ctx2, evt) {
|
|
738
|
-
const nextValue =
|
|
739
|
-
const value = formatValue(ctx2,
|
|
699
|
+
const nextValue = numberUtils.increment(ctx2.valueAsNumber, evt.step ?? ctx2.step);
|
|
700
|
+
const value = formatValue(ctx2, numberUtils.clamp(nextValue, ctx2));
|
|
740
701
|
set.value(ctx2, value);
|
|
741
702
|
},
|
|
742
703
|
decrement(ctx2, evt) {
|
|
743
|
-
const nextValue =
|
|
744
|
-
const value = formatValue(ctx2,
|
|
704
|
+
const nextValue = numberUtils.decrement(ctx2.valueAsNumber, evt.step ?? ctx2.step);
|
|
705
|
+
const value = formatValue(ctx2, numberUtils.clamp(nextValue, ctx2));
|
|
745
706
|
set.value(ctx2, value);
|
|
746
707
|
},
|
|
747
708
|
setClampedValue(ctx2) {
|
|
748
|
-
const nextValue =
|
|
709
|
+
const nextValue = numberUtils.clamp(ctx2.valueAsNumber, ctx2);
|
|
749
710
|
set.value(ctx2, formatValue(ctx2, nextValue));
|
|
750
711
|
},
|
|
751
712
|
setRawValue(ctx2, evt) {
|
|
752
713
|
const parsedValue = parseValue(ctx2, evt.value);
|
|
753
|
-
const value = formatValue(ctx2,
|
|
714
|
+
const value = formatValue(ctx2, numberUtils.clamp(parsedValue, ctx2));
|
|
754
715
|
set.value(ctx2, value);
|
|
755
716
|
},
|
|
756
717
|
setValue(ctx2, evt) {
|
|
@@ -826,8 +787,8 @@ function machine(userContext) {
|
|
|
826
787
|
}
|
|
827
788
|
},
|
|
828
789
|
compareFns: {
|
|
829
|
-
formatOptions: (a, b) =>
|
|
830
|
-
scrubberCursorPoint: (a, b) =>
|
|
790
|
+
formatOptions: (a, b) => utils.isEqual(a, b),
|
|
791
|
+
scrubberCursorPoint: (a, b) => utils.isEqual(a, b)
|
|
831
792
|
}
|
|
832
793
|
}
|
|
833
794
|
);
|
|
@@ -837,7 +798,7 @@ var sync = {
|
|
|
837
798
|
const inputEl = dom.getInputEl(ctx);
|
|
838
799
|
if (!inputEl) return;
|
|
839
800
|
const sel = recordCursor(inputEl);
|
|
840
|
-
|
|
801
|
+
domQuery.raf(() => {
|
|
841
802
|
dom.setValue(inputEl, value);
|
|
842
803
|
restoreCursor(inputEl, sel);
|
|
843
804
|
});
|
|
@@ -853,15 +814,12 @@ var invoke = {
|
|
|
853
814
|
};
|
|
854
815
|
var set = {
|
|
855
816
|
value: (ctx, value) => {
|
|
856
|
-
if (
|
|
817
|
+
if (utils.isEqual(ctx.value, value)) return;
|
|
857
818
|
ctx.value = value;
|
|
858
819
|
invoke.onChange(ctx);
|
|
859
820
|
}
|
|
860
821
|
};
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
machine
|
|
866
|
-
});
|
|
867
|
-
//# sourceMappingURL=index.js.map
|
|
822
|
+
|
|
823
|
+
exports.anatomy = anatomy;
|
|
824
|
+
exports.connect = connect;
|
|
825
|
+
exports.machine = machine;
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
|
+
import { createAnatomy } from '@zag-js/anatomy';
|
|
2
|
+
import { getEventStep, isLeftClick, getEventPoint, addDomEvent, requestPointerLock } from '@zag-js/dom-event';
|
|
3
|
+
import { createScope, isSafari, MAX_Z_INDEX, dataAttr, ariaAttr, isComposingEvent, observeAttributes, raf } from '@zag-js/dom-query';
|
|
4
|
+
import { roundToDevicePixel, wrap, isAtMin, isAtMax, isWithinRange, increment, clamp, decrement } from '@zag-js/number-utils';
|
|
5
|
+
import { createMachine, choose, ref, guards } from '@zag-js/core';
|
|
6
|
+
import { trackFormControl } from '@zag-js/form-utils';
|
|
7
|
+
import { compact, callAll, isEqual } from '@zag-js/utils';
|
|
8
|
+
import { NumberParser } from '@internationalized/number';
|
|
9
|
+
|
|
1
10
|
// src/number-input.anatomy.ts
|
|
2
|
-
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
11
|
var anatomy = createAnatomy("numberInput").parts(
|
|
4
12
|
"root",
|
|
5
13
|
"label",
|
|
@@ -11,15 +19,6 @@ var anatomy = createAnatomy("numberInput").parts(
|
|
|
11
19
|
"scrubber"
|
|
12
20
|
);
|
|
13
21
|
var parts = anatomy.build();
|
|
14
|
-
|
|
15
|
-
// src/number-input.connect.ts
|
|
16
|
-
import { getEventPoint, getEventStep, isLeftClick } from "@zag-js/dom-event";
|
|
17
|
-
import { ariaAttr, dataAttr, isComposingEvent } from "@zag-js/dom-query";
|
|
18
|
-
import { roundToDevicePixel as roundToDevicePixel2 } from "@zag-js/number-utils";
|
|
19
|
-
|
|
20
|
-
// src/number-input.dom.ts
|
|
21
|
-
import { createScope, isSafari, MAX_Z_INDEX } from "@zag-js/dom-query";
|
|
22
|
-
import { roundToDevicePixel, wrap } from "@zag-js/number-utils";
|
|
23
22
|
var dom = createScope({
|
|
24
23
|
getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
|
|
25
24
|
getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
|
|
@@ -337,8 +336,8 @@ function connect(state, send, normalize) {
|
|
|
337
336
|
onMouseDown(event) {
|
|
338
337
|
if (disabled) return;
|
|
339
338
|
const point = getEventPoint(event);
|
|
340
|
-
point.x = point.x -
|
|
341
|
-
point.y = point.y -
|
|
339
|
+
point.x = point.x - roundToDevicePixel(7.5);
|
|
340
|
+
point.y = point.y - roundToDevicePixel(7.5);
|
|
342
341
|
send({ type: "SCRUBBER.PRESS_DOWN", point });
|
|
343
342
|
event.preventDefault();
|
|
344
343
|
},
|
|
@@ -350,14 +349,6 @@ function connect(state, send, normalize) {
|
|
|
350
349
|
};
|
|
351
350
|
}
|
|
352
351
|
|
|
353
|
-
// src/number-input.machine.ts
|
|
354
|
-
import { choose, createMachine, guards } from "@zag-js/core";
|
|
355
|
-
import { addDomEvent, requestPointerLock } from "@zag-js/dom-event";
|
|
356
|
-
import { isSafari as isSafari2, observeAttributes, raf } from "@zag-js/dom-query";
|
|
357
|
-
import { trackFormControl } from "@zag-js/form-utils";
|
|
358
|
-
import { clamp, decrement, increment, isAtMax, isAtMin, isWithinRange } from "@zag-js/number-utils";
|
|
359
|
-
import { callAll, compact, isEqual } from "@zag-js/utils";
|
|
360
|
-
|
|
361
352
|
// src/cursor.ts
|
|
362
353
|
function recordCursor(inputEl) {
|
|
363
354
|
if (inputEl.ownerDocument.activeElement !== inputEl) return;
|
|
@@ -400,10 +391,6 @@ function restoreCursor(inputEl, selection) {
|
|
|
400
391
|
} catch {
|
|
401
392
|
}
|
|
402
393
|
}
|
|
403
|
-
|
|
404
|
-
// src/number-input.utils.ts
|
|
405
|
-
import { NumberParser } from "@internationalized/number";
|
|
406
|
-
import { ref } from "@zag-js/core";
|
|
407
394
|
var createFormatter = (locale, options = {}) => {
|
|
408
395
|
return ref(new Intl.NumberFormat(locale, options));
|
|
409
396
|
};
|
|
@@ -675,7 +662,7 @@ function machine(userContext) {
|
|
|
675
662
|
return addDomEvent(inputEl, "wheel", onWheel, { passive: false });
|
|
676
663
|
},
|
|
677
664
|
activatePointerLock(ctx2) {
|
|
678
|
-
if (
|
|
665
|
+
if (isSafari()) return;
|
|
679
666
|
return requestPointerLock(dom.getDoc(ctx2));
|
|
680
667
|
},
|
|
681
668
|
trackMousemove(ctx2, _evt, { send }) {
|
|
@@ -830,9 +817,5 @@ var set = {
|
|
|
830
817
|
invoke.onChange(ctx);
|
|
831
818
|
}
|
|
832
819
|
};
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
connect,
|
|
836
|
-
machine
|
|
837
|
-
};
|
|
838
|
-
//# sourceMappingURL=index.mjs.map
|
|
820
|
+
|
|
821
|
+
export { anatomy, connect, machine };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/number-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.72.0",
|
|
4
4
|
"description": "Core logic for the number-input widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/number-input",
|
|
18
18
|
"sideEffects": false,
|
|
19
19
|
"files": [
|
|
20
|
-
"dist"
|
|
21
|
-
"src"
|
|
20
|
+
"dist"
|
|
22
21
|
],
|
|
23
22
|
"publishConfig": {
|
|
24
23
|
"access": "public"
|
|
@@ -28,14 +27,14 @@
|
|
|
28
27
|
},
|
|
29
28
|
"dependencies": {
|
|
30
29
|
"@internationalized/number": "3.5.3",
|
|
31
|
-
"@zag-js/anatomy": "0.
|
|
32
|
-
"@zag-js/core": "0.
|
|
33
|
-
"@zag-js/dom-event": "0.
|
|
34
|
-
"@zag-js/dom-query": "0.
|
|
35
|
-
"@zag-js/form-utils": "0.
|
|
36
|
-
"@zag-js/number-utils": "0.
|
|
37
|
-
"@zag-js/types": "0.
|
|
38
|
-
"@zag-js/utils": "0.
|
|
30
|
+
"@zag-js/anatomy": "0.72.0",
|
|
31
|
+
"@zag-js/core": "0.72.0",
|
|
32
|
+
"@zag-js/dom-event": "0.72.0",
|
|
33
|
+
"@zag-js/dom-query": "0.72.0",
|
|
34
|
+
"@zag-js/form-utils": "0.72.0",
|
|
35
|
+
"@zag-js/number-utils": "0.72.0",
|
|
36
|
+
"@zag-js/types": "0.72.0",
|
|
37
|
+
"@zag-js/utils": "0.72.0"
|
|
39
38
|
},
|
|
40
39
|
"devDependencies": {
|
|
41
40
|
"clean-package": "2.2.0"
|