@zag-js/number-input 0.1.18 → 0.2.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.d.ts +2 -2
- package/dist/index.js +116 -54
- package/dist/index.mjs +1032 -0
- package/package.json +12 -12
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ declare type ElementIds = Partial<{
|
|
|
11
11
|
decBtn: string;
|
|
12
12
|
scrubber: string;
|
|
13
13
|
}>;
|
|
14
|
-
declare type
|
|
14
|
+
declare type IntlTranslations = {
|
|
15
15
|
/**
|
|
16
16
|
* Function that returns the human-readable value.
|
|
17
17
|
* It is used to set the `aria-valuetext` property of the input
|
|
@@ -101,7 +101,7 @@ declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
|
101
101
|
/**
|
|
102
102
|
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
103
103
|
*/
|
|
104
|
-
|
|
104
|
+
translations: IntlTranslations;
|
|
105
105
|
/**
|
|
106
106
|
* If using a custom display format, this converts the custom format to a format `parseFloat` understands.
|
|
107
107
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,31 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
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);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
connect: () => connect,
|
|
24
|
+
machine: () => machine
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(src_exports);
|
|
27
|
+
|
|
28
|
+
// ../../utilities/dom/dist/index.mjs
|
|
2
29
|
var dataAttr = (guard) => {
|
|
3
30
|
return guard ? "" : void 0;
|
|
4
31
|
};
|
|
@@ -8,7 +35,7 @@ var ariaAttr = (guard) => {
|
|
|
8
35
|
var MAX_Z_INDEX = 2147483647;
|
|
9
36
|
var runIfFn = (v, ...a) => {
|
|
10
37
|
const res = typeof v === "function" ? v(...a) : v;
|
|
11
|
-
return res
|
|
38
|
+
return res != null ? res : void 0;
|
|
12
39
|
};
|
|
13
40
|
var callAll = (...fns) => (...a) => {
|
|
14
41
|
fns.forEach(function(fn) {
|
|
@@ -20,8 +47,9 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
20
47
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
21
48
|
var isDom = () => typeof window !== "undefined";
|
|
22
49
|
function getPlatform() {
|
|
50
|
+
var _a;
|
|
23
51
|
const agent = navigator.userAgentData;
|
|
24
|
-
return (agent == null ? void 0 : agent.platform)
|
|
52
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
25
53
|
}
|
|
26
54
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
27
55
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -34,22 +62,44 @@ function isWindow(value) {
|
|
|
34
62
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
35
63
|
}
|
|
36
64
|
function getDocument(el) {
|
|
65
|
+
var _a;
|
|
37
66
|
if (isWindow(el))
|
|
38
67
|
return el.document;
|
|
39
68
|
if (isDocument(el))
|
|
40
69
|
return el;
|
|
41
|
-
return (el == null ? void 0 : el.ownerDocument)
|
|
70
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
42
71
|
}
|
|
43
72
|
function defineDomHelpers(helpers) {
|
|
44
73
|
const dom2 = {
|
|
45
74
|
getRootNode: (ctx) => {
|
|
46
|
-
var _a;
|
|
47
|
-
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx))
|
|
75
|
+
var _a, _b;
|
|
76
|
+
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
48
77
|
},
|
|
49
78
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
50
|
-
getWin: (ctx) =>
|
|
79
|
+
getWin: (ctx) => {
|
|
80
|
+
var _a;
|
|
81
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
82
|
+
},
|
|
51
83
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
52
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
84
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
85
|
+
createEmitter: (ctx, target) => {
|
|
86
|
+
const win = dom2.getWin(ctx);
|
|
87
|
+
return function emit(evt, detail, options) {
|
|
88
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
89
|
+
const eventName = `zag:${evt}`;
|
|
90
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
91
|
+
const event = new win.CustomEvent(eventName, init);
|
|
92
|
+
target.dispatchEvent(event);
|
|
93
|
+
};
|
|
94
|
+
},
|
|
95
|
+
createListener: (target) => {
|
|
96
|
+
return function listen(evt, handler) {
|
|
97
|
+
const eventName = `zag:${evt}`;
|
|
98
|
+
const listener = (e) => handler(e);
|
|
99
|
+
target.addEventListener(eventName, listener);
|
|
100
|
+
return () => target.removeEventListener(eventName, listener);
|
|
101
|
+
};
|
|
102
|
+
}
|
|
53
103
|
};
|
|
54
104
|
return {
|
|
55
105
|
...dom2,
|
|
@@ -57,7 +107,8 @@ function defineDomHelpers(helpers) {
|
|
|
57
107
|
};
|
|
58
108
|
}
|
|
59
109
|
function getNativeEvent(e) {
|
|
60
|
-
|
|
110
|
+
var _a;
|
|
111
|
+
return (_a = e.nativeEvent) != null ? _a : e;
|
|
61
112
|
}
|
|
62
113
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
63
114
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
@@ -70,7 +121,8 @@ var fallback = {
|
|
|
70
121
|
clientY: 0
|
|
71
122
|
};
|
|
72
123
|
function getEventPoint(event, type = "page") {
|
|
73
|
-
|
|
124
|
+
var _a, _b;
|
|
125
|
+
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
74
126
|
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
75
127
|
}
|
|
76
128
|
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
@@ -157,7 +209,7 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
157
209
|
};
|
|
158
210
|
}
|
|
159
211
|
|
|
160
|
-
// ../../utilities/number/dist/index.
|
|
212
|
+
// ../../utilities/number/dist/index.mjs
|
|
161
213
|
function wrap(num, max) {
|
|
162
214
|
return (num % max + max) % max;
|
|
163
215
|
}
|
|
@@ -224,29 +276,29 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
|
|
|
224
276
|
// src/number-input.dom.ts
|
|
225
277
|
var dom = defineDomHelpers({
|
|
226
278
|
getRootId: (ctx) => {
|
|
227
|
-
var _a;
|
|
228
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.root)
|
|
279
|
+
var _a, _b;
|
|
280
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
|
|
229
281
|
},
|
|
230
282
|
getInputId: (ctx) => {
|
|
231
|
-
var _a;
|
|
232
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.input)
|
|
283
|
+
var _a, _b;
|
|
284
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
|
|
233
285
|
},
|
|
234
286
|
getIncButtonId: (ctx) => {
|
|
235
|
-
var _a;
|
|
236
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.incBtn)
|
|
287
|
+
var _a, _b;
|
|
288
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.id}:inc-btn`;
|
|
237
289
|
},
|
|
238
290
|
getDecButtonId: (ctx) => {
|
|
239
|
-
var _a;
|
|
240
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.decBtn)
|
|
291
|
+
var _a, _b;
|
|
292
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.id}:dec-btn`;
|
|
241
293
|
},
|
|
242
294
|
getScrubberId: (ctx) => {
|
|
243
|
-
var _a;
|
|
244
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.scrubber)
|
|
295
|
+
var _a, _b;
|
|
296
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
|
|
245
297
|
},
|
|
246
298
|
getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
|
|
247
299
|
getLabelId: (ctx) => {
|
|
248
|
-
var _a;
|
|
249
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.label)
|
|
300
|
+
var _a, _b;
|
|
301
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
|
|
250
302
|
},
|
|
251
303
|
getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
|
|
252
304
|
getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
|
|
@@ -339,38 +391,39 @@ var dom = defineDomHelpers({
|
|
|
339
391
|
// src/number-input.utils.ts
|
|
340
392
|
var utils = {
|
|
341
393
|
isValidNumericEvent: (ctx, event) => {
|
|
342
|
-
var _a;
|
|
394
|
+
var _a, _b;
|
|
343
395
|
if (event.key == null)
|
|
344
396
|
return true;
|
|
345
397
|
const isModifier = isModifiedEvent(event);
|
|
346
398
|
const isSingleKey = event.key.length === 1;
|
|
347
399
|
if (isModifier || !isSingleKey)
|
|
348
400
|
return true;
|
|
349
|
-
return ((_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key))
|
|
401
|
+
return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
|
|
350
402
|
},
|
|
351
403
|
isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
|
|
352
404
|
sanitize: (ctx, value) => {
|
|
353
|
-
|
|
405
|
+
var _a;
|
|
406
|
+
return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
|
|
354
407
|
},
|
|
355
408
|
increment: (ctx, step) => {
|
|
356
|
-
const value = increment(ctx.value, step
|
|
409
|
+
const value = increment(ctx.value, step != null ? step : ctx.step);
|
|
357
410
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
358
411
|
},
|
|
359
412
|
decrement: (ctx, step) => {
|
|
360
|
-
const value = decrement(ctx.value, step
|
|
413
|
+
const value = decrement(ctx.value, step != null ? step : ctx.step);
|
|
361
414
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
362
415
|
},
|
|
363
416
|
clamp: (ctx) => {
|
|
364
417
|
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
365
418
|
},
|
|
366
419
|
parse: (ctx, value) => {
|
|
367
|
-
var _a;
|
|
368
|
-
return ((_a = ctx.parse) == null ? void 0 : _a.call(ctx, value))
|
|
420
|
+
var _a, _b;
|
|
421
|
+
return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
|
|
369
422
|
},
|
|
370
423
|
format: (ctx, value) => {
|
|
371
|
-
var _a;
|
|
424
|
+
var _a, _b;
|
|
372
425
|
const _val = value.toString();
|
|
373
|
-
return ((_a = ctx.format) == null ? void 0 : _a.call(ctx, _val))
|
|
426
|
+
return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
|
|
374
427
|
},
|
|
375
428
|
round: (ctx) => {
|
|
376
429
|
return formatDecimal(ctx.value, ctx);
|
|
@@ -385,7 +438,7 @@ function connect(state, send, normalize) {
|
|
|
385
438
|
const isValueEmpty = state.context.isValueEmpty;
|
|
386
439
|
const isIncrementDisabled = isDisabled || !state.context.canIncrement;
|
|
387
440
|
const isDecrementDisabled = isDisabled || !state.context.canDecrement;
|
|
388
|
-
const
|
|
441
|
+
const translations = state.context.translations;
|
|
389
442
|
return {
|
|
390
443
|
isFocused,
|
|
391
444
|
isInvalid,
|
|
@@ -507,7 +560,7 @@ function connect(state, send, normalize) {
|
|
|
507
560
|
id: dom.getDecButtonId(state.context),
|
|
508
561
|
disabled: isDecrementDisabled,
|
|
509
562
|
"data-disabled": dataAttr(isDecrementDisabled),
|
|
510
|
-
"aria-label":
|
|
563
|
+
"aria-label": translations.decrementLabel,
|
|
511
564
|
type: "button",
|
|
512
565
|
tabIndex: -1,
|
|
513
566
|
"aria-controls": dom.getInputId(state.context),
|
|
@@ -532,7 +585,7 @@ function connect(state, send, normalize) {
|
|
|
532
585
|
id: dom.getIncButtonId(state.context),
|
|
533
586
|
disabled: isIncrementDisabled,
|
|
534
587
|
"data-disabled": dataAttr(isIncrementDisabled),
|
|
535
|
-
"aria-label":
|
|
588
|
+
"aria-label": translations.incrementLabel,
|
|
536
589
|
type: "button",
|
|
537
590
|
tabIndex: -1,
|
|
538
591
|
"aria-controls": dom.getInputId(state.context),
|
|
@@ -572,23 +625,25 @@ function connect(state, send, normalize) {
|
|
|
572
625
|
}
|
|
573
626
|
|
|
574
627
|
// src/number-input.machine.ts
|
|
575
|
-
|
|
628
|
+
var import_core = require("@zag-js/core");
|
|
576
629
|
|
|
577
|
-
// ../../utilities/core/dist/index.
|
|
630
|
+
// ../../utilities/core/dist/index.mjs
|
|
578
631
|
var callAll2 = (...fns) => (...a) => {
|
|
579
632
|
fns.forEach(function(fn) {
|
|
580
633
|
fn == null ? void 0 : fn(...a);
|
|
581
634
|
});
|
|
582
635
|
};
|
|
583
636
|
|
|
584
|
-
// ../../utilities/form-utils/dist/index.
|
|
637
|
+
// ../../utilities/form-utils/dist/index.mjs
|
|
585
638
|
function getWindow(el) {
|
|
586
|
-
|
|
639
|
+
var _a;
|
|
640
|
+
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
587
641
|
}
|
|
588
642
|
function getDescriptor(el, options) {
|
|
643
|
+
var _a;
|
|
589
644
|
const { type, property } = options;
|
|
590
645
|
const proto = getWindow(el)[type].prototype;
|
|
591
|
-
return Object.getOwnPropertyDescriptor(proto, property)
|
|
646
|
+
return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
|
|
592
647
|
}
|
|
593
648
|
function dispatchInputValueEvent(el, value) {
|
|
594
649
|
var _a;
|
|
@@ -604,9 +659,9 @@ function dispatchInputValueEvent(el, value) {
|
|
|
604
659
|
}
|
|
605
660
|
|
|
606
661
|
// src/number-input.machine.ts
|
|
607
|
-
var { not, and } = guards;
|
|
662
|
+
var { not, and } = import_core.guards;
|
|
608
663
|
function machine(ctx) {
|
|
609
|
-
return createMachine(
|
|
664
|
+
return (0, import_core.createMachine)(
|
|
610
665
|
{
|
|
611
666
|
id: "number-input",
|
|
612
667
|
initial: "unknown",
|
|
@@ -626,10 +681,10 @@ function machine(ctx) {
|
|
|
626
681
|
invalid: false,
|
|
627
682
|
spinOnPress: true,
|
|
628
683
|
...ctx,
|
|
629
|
-
|
|
684
|
+
translations: {
|
|
630
685
|
incrementLabel: "increment value",
|
|
631
686
|
decrementLabel: "decrease value",
|
|
632
|
-
...ctx.
|
|
687
|
+
...ctx.translations
|
|
633
688
|
}
|
|
634
689
|
},
|
|
635
690
|
computed: {
|
|
@@ -643,11 +698,11 @@ function machine(ctx) {
|
|
|
643
698
|
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
|
|
644
699
|
valueText: (ctx2) => {
|
|
645
700
|
var _a, _b;
|
|
646
|
-
return (_b = (_a = ctx2.
|
|
701
|
+
return (_b = (_a = ctx2.translations).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
|
|
647
702
|
},
|
|
648
703
|
formattedValue: (ctx2) => {
|
|
649
|
-
var _a;
|
|
650
|
-
return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString())
|
|
704
|
+
var _a, _b;
|
|
705
|
+
return (_b = (_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) != null ? _b : ctx2.value;
|
|
651
706
|
}
|
|
652
707
|
},
|
|
653
708
|
watch: {
|
|
@@ -747,7 +802,7 @@ function machine(ctx) {
|
|
|
747
802
|
"before:spin": {
|
|
748
803
|
tags: "focus",
|
|
749
804
|
activities: "trackButtonDisabled",
|
|
750
|
-
entry: choose([
|
|
805
|
+
entry: (0, import_core.choose)([
|
|
751
806
|
{ guard: "isIncrementHint", actions: "increment" },
|
|
752
807
|
{ guard: "isDecrementHint", actions: "decrement" }
|
|
753
808
|
]),
|
|
@@ -817,9 +872,15 @@ function machine(ctx) {
|
|
|
817
872
|
spinOnPress: (ctx2) => !!ctx2.spinOnPress,
|
|
818
873
|
isAtMax: (ctx2) => ctx2.isAtMax,
|
|
819
874
|
isInRange: (ctx2) => !ctx2.isOutOfRange,
|
|
820
|
-
isDecrementHint: (ctx2, evt) =>
|
|
875
|
+
isDecrementHint: (ctx2, evt) => {
|
|
876
|
+
var _a;
|
|
877
|
+
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
|
|
878
|
+
},
|
|
821
879
|
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
822
|
-
isIncrementHint: (ctx2, evt) =>
|
|
880
|
+
isIncrementHint: (ctx2, evt) => {
|
|
881
|
+
var _a;
|
|
882
|
+
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
|
|
883
|
+
},
|
|
823
884
|
isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
|
|
824
885
|
},
|
|
825
886
|
activities: {
|
|
@@ -901,8 +962,8 @@ function machine(ctx) {
|
|
|
901
962
|
}
|
|
902
963
|
},
|
|
903
964
|
setValue(ctx2, evt) {
|
|
904
|
-
var _a;
|
|
905
|
-
const value = ((_a = evt.target) == null ? void 0 : _a.value)
|
|
965
|
+
var _a, _b;
|
|
966
|
+
const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
|
|
906
967
|
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
907
968
|
},
|
|
908
969
|
clearValue(ctx2) {
|
|
@@ -992,7 +1053,8 @@ function machine(ctx) {
|
|
|
992
1053
|
}
|
|
993
1054
|
);
|
|
994
1055
|
}
|
|
995
|
-
export
|
|
1056
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
1057
|
+
0 && (module.exports = {
|
|
996
1058
|
connect,
|
|
997
1059
|
machine
|
|
998
|
-
};
|
|
1060
|
+
});
|