@zag-js/number-input 0.2.8 → 0.2.10

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.
@@ -31,11 +31,11 @@ var MAX_Z_INDEX = 2147483647;
31
31
  // ../../utilities/core/src/functions.ts
32
32
  var runIfFn = (v, ...a) => {
33
33
  const res = typeof v === "function" ? v(...a) : v;
34
- return res != null ? res : void 0;
34
+ return res ?? void 0;
35
35
  };
36
36
  var callAll = (...fns) => (...a) => {
37
37
  fns.forEach(function(fn) {
38
- fn == null ? void 0 : fn(...a);
38
+ fn?.(...a);
39
39
  });
40
40
  };
41
41
 
@@ -56,9 +56,8 @@ function compact(obj) {
56
56
  // ../../utilities/dom/src/platform.ts
57
57
  var isDom = () => typeof window !== "undefined";
58
58
  function getPlatform() {
59
- var _a;
60
59
  const agent = navigator.userAgentData;
61
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
60
+ return agent?.platform ?? navigator.platform;
62
61
  }
63
62
  var pt = (v) => isDom() && v.test(getPlatform());
64
63
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -70,31 +69,23 @@ function isDocument(el) {
70
69
  return el.nodeType === Node.DOCUMENT_NODE;
71
70
  }
72
71
  function isWindow(value) {
73
- return (value == null ? void 0 : value.toString()) === "[object Window]";
72
+ return value?.toString() === "[object Window]";
74
73
  }
75
74
  function getDocument(el) {
76
- var _a;
77
75
  if (isWindow(el))
78
76
  return el.document;
79
77
  if (isDocument(el))
80
78
  return el;
81
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
79
+ return el?.ownerDocument ?? document;
82
80
  }
83
81
  function getWindow(el) {
84
- var _a;
85
- return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
82
+ return el?.ownerDocument.defaultView ?? window;
86
83
  }
87
84
  function defineDomHelpers(helpers) {
88
85
  const dom2 = {
89
- getRootNode: (ctx) => {
90
- var _a, _b;
91
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
92
- },
86
+ getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
93
87
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
94
- getWin: (ctx) => {
95
- var _a;
96
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
97
- },
88
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
98
89
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
99
90
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
100
91
  };
@@ -112,9 +103,9 @@ var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
112
103
  var isRef = (v) => hasProp(v, "current");
113
104
  function addDomEvent(target, eventName, handler, options) {
114
105
  const node = isRef(target) ? target.current : runIfFn(target);
115
- node == null ? void 0 : node.addEventListener(eventName, handler, options);
106
+ node?.addEventListener(eventName, handler, options);
116
107
  return () => {
117
- node == null ? void 0 : node.removeEventListener(eventName, handler, options);
108
+ node?.removeEventListener(eventName, handler, options);
118
109
  };
119
110
  }
120
111
 
@@ -160,13 +151,13 @@ function requestPointerLock(doc, handlers = {}) {
160
151
  const locked = !!doc.pointerLockElement;
161
152
  function onPointerChange() {
162
153
  if (locked)
163
- onPointerLock == null ? void 0 : onPointerLock();
154
+ onPointerLock?.();
164
155
  else
165
- onPointerUnlock == null ? void 0 : onPointerUnlock();
156
+ onPointerUnlock?.();
166
157
  }
167
158
  function onPointerError(event) {
168
159
  if (locked)
169
- onPointerUnlock == null ? void 0 : onPointerUnlock();
160
+ onPointerUnlock?.();
170
161
  console.error("PointerLock error occured:", event);
171
162
  exit();
172
163
  }
@@ -256,51 +247,31 @@ function decimalOperation(a, op, b) {
256
247
 
257
248
  // ../../utilities/form-utils/src/input-event.ts
258
249
  function getDescriptor(el, options) {
259
- var _a;
260
250
  const { type, property = "value" } = options;
261
251
  const proto = getWindow(el)[type].prototype;
262
- return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
252
+ return Object.getOwnPropertyDescriptor(proto, property) ?? {};
263
253
  }
264
254
  function dispatchInputValueEvent(el, value) {
265
- var _a;
266
255
  if (!el)
267
256
  return;
268
257
  const win = getWindow(el);
269
258
  if (!(el instanceof win.HTMLInputElement))
270
259
  return;
271
260
  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
272
- (_a = desc.set) == null ? void 0 : _a.call(el, value);
261
+ desc.set?.call(el, value);
273
262
  const event = new win.Event("input", { bubbles: true });
274
263
  el.dispatchEvent(event);
275
264
  }
276
265
 
277
266
  // src/number-input.dom.ts
278
267
  var dom = defineDomHelpers({
279
- getRootId: (ctx) => {
280
- var _a, _b;
281
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
282
- },
283
- getInputId: (ctx) => {
284
- var _a, _b;
285
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
286
- },
287
- getIncrementTriggerId: (ctx) => {
288
- var _a, _b;
289
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.incrementTrigger) != null ? _b : `number-input:${ctx.id}:inc`;
290
- },
291
- getDecrementTriggerId: (ctx) => {
292
- var _a, _b;
293
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.decrementTrigger) != null ? _b : `number-input:${ctx.id}:dec`;
294
- },
295
- getScrubberId: (ctx) => {
296
- var _a, _b;
297
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
298
- },
268
+ getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
269
+ getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
270
+ getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
271
+ getDecrementTriggerId: (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`,
272
+ getScrubberId: (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`,
299
273
  getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
300
- getLabelId: (ctx) => {
301
- var _a, _b;
302
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
303
- },
274
+ getLabelId: (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`,
304
275
  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
305
276
  getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
306
277
  getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
@@ -321,8 +292,7 @@ var dom = defineDomHelpers({
321
292
  return;
322
293
  dom.createVirtualCursor(ctx);
323
294
  return () => {
324
- var _a;
325
- (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
295
+ dom.getCursorEl(ctx)?.remove();
326
296
  };
327
297
  },
328
298
  preventTextSelection(ctx) {
@@ -392,39 +362,35 @@ var dom = defineDomHelpers({
392
362
  // src/number-input.utils.ts
393
363
  var utils = {
394
364
  isValidNumericEvent: (ctx, event) => {
395
- var _a, _b;
396
365
  if (event.key == null)
397
366
  return true;
398
367
  const isModifier = isModifiedEvent(event);
399
368
  const isSingleKey = event.key.length === 1;
400
369
  if (isModifier || !isSingleKey)
401
370
  return true;
402
- return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
371
+ return ctx.validateCharacter?.(event.key) ?? utils.isFloatingPoint(event.key);
403
372
  },
404
373
  isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
405
374
  sanitize: (ctx, value) => {
406
- var _a;
407
- return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
375
+ return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
408
376
  },
409
377
  increment: (ctx, step) => {
410
- const value = increment(ctx.value, step != null ? step : ctx.step);
378
+ const value = increment(ctx.value, step ?? ctx.step);
411
379
  return formatDecimal(clamp(value, ctx), ctx);
412
380
  },
413
381
  decrement: (ctx, step) => {
414
- const value = decrement(ctx.value, step != null ? step : ctx.step);
382
+ const value = decrement(ctx.value, step ?? ctx.step);
415
383
  return formatDecimal(clamp(value, ctx), ctx);
416
384
  },
417
385
  clamp: (ctx) => {
418
386
  return formatDecimal(clamp(ctx.value, ctx), ctx);
419
387
  },
420
388
  parse: (ctx, value) => {
421
- var _a, _b;
422
- return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
389
+ return ctx.parse?.(value) ?? value;
423
390
  },
424
391
  format: (ctx, value) => {
425
- var _a, _b;
426
392
  const _val = value.toString();
427
- return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
393
+ return ctx.format?.(_val) ?? _val;
428
394
  },
429
395
  round: (ctx) => {
430
396
  return formatDecimal(ctx.value, ctx);
@@ -438,7 +404,7 @@ function machine(userContext) {
438
404
  return (0, import_core.createMachine)(
439
405
  {
440
406
  id: "number-input",
441
- initial: "unknown",
407
+ initial: "idle",
442
408
  context: {
443
409
  dir: "ltr",
444
410
  focusInputOnChange: true,
@@ -470,20 +436,15 @@ function machine(userContext) {
470
436
  isValueEmpty: (ctx2) => ctx2.value === "",
471
437
  canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
472
438
  canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
473
- valueText: (ctx2) => {
474
- var _a, _b;
475
- return (_b = (_a = ctx2.translations).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
476
- },
477
- formattedValue: (ctx2) => {
478
- var _a, _b;
479
- return (_b = (_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) != null ? _b : ctx2.value;
480
- }
439
+ valueText: (ctx2) => ctx2.translations.valueText?.(ctx2.value),
440
+ formattedValue: (ctx2) => ctx2.format?.(ctx2.value).toString() ?? ctx2.value
481
441
  },
482
442
  watch: {
483
443
  value: ["invokeOnChange", "dispatchChangeEvent"],
484
444
  isOutOfRange: ["invokeOnInvalid"],
485
445
  scrubberCursorPoint: ["setVirtualCursorPosition"]
486
446
  },
447
+ entry: ["syncInputValue"],
487
448
  on: {
488
449
  SET_VALUE: [
489
450
  {
@@ -505,14 +466,6 @@ function machine(userContext) {
505
466
  }
506
467
  },
507
468
  states: {
508
- unknown: {
509
- on: {
510
- SETUP: {
511
- target: "idle",
512
- actions: "syncInputValue"
513
- }
514
- }
515
- },
516
469
  idle: {
517
470
  exit: "invokeOnFocus",
518
471
  on: {
@@ -646,15 +599,9 @@ function machine(userContext) {
646
599
  spinOnPress: (ctx2) => !!ctx2.spinOnPress,
647
600
  isAtMax: (ctx2) => ctx2.isAtMax,
648
601
  isInRange: (ctx2) => !ctx2.isOutOfRange,
649
- isDecrementHint: (ctx2, evt) => {
650
- var _a;
651
- return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
652
- },
602
+ isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
653
603
  isEmptyValue: (ctx2) => ctx2.isValueEmpty,
654
- isIncrementHint: (ctx2, evt) => {
655
- var _a;
656
- return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
657
- },
604
+ isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
658
605
  isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
659
606
  },
660
607
  activities: {
@@ -719,7 +666,7 @@ function machine(userContext) {
719
666
  if (!ctx2.focusInputOnChange)
720
667
  return;
721
668
  const input = dom.getInputEl(ctx2);
722
- raf(() => input == null ? void 0 : input.focus());
669
+ raf(() => input?.focus());
723
670
  },
724
671
  increment(ctx2, evt) {
725
672
  ctx2.value = utils.increment(ctx2, evt.step);
@@ -736,8 +683,7 @@ function machine(userContext) {
736
683
  }
737
684
  },
738
685
  setValue(ctx2, evt) {
739
- var _a, _b;
740
- const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
686
+ const value = evt.target?.value ?? evt.value;
741
687
  ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
742
688
  },
743
689
  clearValue(ctx2) {
@@ -759,14 +705,12 @@ function machine(userContext) {
759
705
  ctx2.hint = "set";
760
706
  },
761
707
  invokeOnChange(ctx2) {
762
- var _a;
763
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
708
+ ctx2.onChange?.({
764
709
  value: ctx2.value,
765
710
  valueAsNumber: ctx2.valueAsNumber
766
711
  });
767
712
  },
768
713
  invokeOnFocus(ctx2, evt) {
769
- var _a;
770
714
  let srcElement = null;
771
715
  if (evt.type === "PRESS_DOWN") {
772
716
  srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
@@ -775,25 +719,23 @@ function machine(userContext) {
775
719
  } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
776
720
  srcElement = dom.getScrubberEl(ctx2);
777
721
  }
778
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
722
+ ctx2.onFocus?.({
779
723
  value: ctx2.value,
780
724
  valueAsNumber: ctx2.valueAsNumber,
781
725
  srcElement
782
726
  });
783
727
  },
784
728
  invokeOnBlur(ctx2) {
785
- var _a;
786
- (_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
729
+ ctx2.onBlur?.({
787
730
  value: ctx2.value,
788
731
  valueAsNumber: ctx2.valueAsNumber
789
732
  });
790
733
  },
791
734
  invokeOnInvalid(ctx2) {
792
- var _a;
793
735
  if (!ctx2.isOutOfRange)
794
736
  return;
795
737
  const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
796
- (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
738
+ ctx2.onInvalid?.({
797
739
  reason,
798
740
  value: ctx2.formattedValue,
799
741
  valueAsNumber: ctx2.valueAsNumber
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-MIZ4MW4C.mjs";
4
- import "./chunk-EUVYGWZ6.mjs";
5
- import "./chunk-HP6F2HUY.mjs";
6
- import "./chunk-VCZUWKJT.mjs";
3
+ } from "./chunk-4A67X5BX.mjs";
4
+ import "./chunk-GQN3V2LU.mjs";
5
+ import "./chunk-6CS5P7OC.mjs";
6
+ import "./chunk-EPCXXTFL.mjs";
7
7
  export {
8
8
  machine
9
9
  };
@@ -208,7 +208,7 @@ type ComputedContext = Readonly<{
208
208
  type PrivateContext = Context<{}>;
209
209
  type MachineContext = PublicContext & PrivateContext & ComputedContext;
210
210
  type MachineState = {
211
- value: "unknown" | "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
211
+ value: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
212
212
  tags: "focus";
213
213
  };
214
214
  type State = StateMachine.State<MachineContext, MachineState>;
@@ -72,39 +72,35 @@ function decimalOperation(a, op, b) {
72
72
  // src/number-input.utils.ts
73
73
  var utils = {
74
74
  isValidNumericEvent: (ctx, event) => {
75
- var _a, _b;
76
75
  if (event.key == null)
77
76
  return true;
78
77
  const isModifier = isModifiedEvent(event);
79
78
  const isSingleKey = event.key.length === 1;
80
79
  if (isModifier || !isSingleKey)
81
80
  return true;
82
- return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
81
+ return ctx.validateCharacter?.(event.key) ?? utils.isFloatingPoint(event.key);
83
82
  },
84
83
  isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
85
84
  sanitize: (ctx, value) => {
86
- var _a;
87
- return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
85
+ return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
88
86
  },
89
87
  increment: (ctx, step) => {
90
- const value = increment(ctx.value, step != null ? step : ctx.step);
88
+ const value = increment(ctx.value, step ?? ctx.step);
91
89
  return formatDecimal(clamp(value, ctx), ctx);
92
90
  },
93
91
  decrement: (ctx, step) => {
94
- const value = decrement(ctx.value, step != null ? step : ctx.step);
92
+ const value = decrement(ctx.value, step ?? ctx.step);
95
93
  return formatDecimal(clamp(value, ctx), ctx);
96
94
  },
97
95
  clamp: (ctx) => {
98
96
  return formatDecimal(clamp(ctx.value, ctx), ctx);
99
97
  },
100
98
  parse: (ctx, value) => {
101
- var _a, _b;
102
- return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
99
+ return ctx.parse?.(value) ?? value;
103
100
  },
104
101
  format: (ctx, value) => {
105
- var _a, _b;
106
102
  const _val = value.toString();
107
- return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
103
+ return ctx.format?.(_val) ?? _val;
108
104
  },
109
105
  round: (ctx) => {
110
106
  return formatDecimal(ctx.value, ctx);
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  utils
3
- } from "./chunk-HP6F2HUY.mjs";
4
- import "./chunk-VCZUWKJT.mjs";
3
+ } from "./chunk-6CS5P7OC.mjs";
4
+ import "./chunk-EPCXXTFL.mjs";
5
5
  export {
6
6
  utils
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/number-input",
3
- "version": "0.2.8",
3
+ "version": "0.2.10",
4
4
  "description": "Core logic for the number-input widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -26,16 +26,16 @@
26
26
  "url": "https://github.com/chakra-ui/zag/issues"
27
27
  },
28
28
  "dependencies": {
29
- "@zag-js/anatomy": "0.1.3",
30
- "@zag-js/core": "0.2.5",
31
- "@zag-js/types": "0.3.3"
29
+ "@zag-js/anatomy": "0.1.4",
30
+ "@zag-js/core": "0.2.7",
31
+ "@zag-js/types": "0.3.4"
32
32
  },
33
33
  "devDependencies": {
34
34
  "clean-package": "2.2.0",
35
- "@zag-js/dom-utils": "0.2.3",
36
- "@zag-js/form-utils": "0.2.3",
37
- "@zag-js/number-utils": "0.2.2",
38
- "@zag-js/utils": "0.3.2"
35
+ "@zag-js/dom-utils": "0.2.4",
36
+ "@zag-js/form-utils": "0.2.4",
37
+ "@zag-js/number-utils": "0.2.3",
38
+ "@zag-js/utils": "0.3.3"
39
39
  },
40
40
  "clean-package": "../../../clean-package.config.json",
41
41
  "main": "dist/index.js",