@zag-js/number-input 0.1.2 → 0.1.5

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 CHANGED
@@ -45,17 +45,13 @@ module.exports = __toCommonJS(src_exports);
45
45
  var dataAttr = (guard) => {
46
46
  return guard ? "" : void 0;
47
47
  };
48
- function nextTick(fn) {
49
- const set = /* @__PURE__ */ new Set();
50
- function raf2(fn2) {
51
- const id = globalThis.requestAnimationFrame(fn2);
52
- set.add(() => globalThis.cancelAnimationFrame(id));
53
- }
54
- raf2(() => raf2(fn));
48
+ var ariaAttr = (guard) => {
49
+ return guard ? "true" : void 0;
50
+ };
51
+ function raf(fn) {
52
+ const id = globalThis.requestAnimationFrame(fn);
55
53
  return function cleanup() {
56
- set.forEach(function(fn2) {
57
- fn2();
58
- });
54
+ globalThis.cancelAnimationFrame(id);
59
55
  };
60
56
  }
61
57
  var noop = () => {
@@ -130,11 +126,11 @@ function addDomEvent(target, event, listener, options) {
130
126
  const node = isRef(target) ? target.current : runIfFn(target);
131
127
  return globalEventBus(node, event, listener, options);
132
128
  }
129
+ var MAX_Z_INDEX = 2147483647;
133
130
  function getNativeEvent(event) {
134
131
  var _a;
135
132
  return (_a = event.nativeEvent) != null ? _a : event;
136
133
  }
137
- var MAX_Z_INDEX = 2147483647;
138
134
  var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
139
135
  var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
140
136
  function getEventStep(event) {
@@ -161,6 +157,30 @@ function observeAttributes(node, attributes, fn) {
161
157
  obs.observe(node, { attributes: true, attributeFilter: attrs });
162
158
  return () => obs.disconnect();
163
159
  }
160
+ function itemById(v, id) {
161
+ return v.find((node) => node.id === id);
162
+ }
163
+ function indexOfId(v, id) {
164
+ const item = itemById(v, id);
165
+ return item ? v.indexOf(item) : -1;
166
+ }
167
+ var getValueText = (item) => {
168
+ var _a, _b;
169
+ return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
170
+ };
171
+ var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
172
+ var wrap = (v, idx) => {
173
+ return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
174
+ };
175
+ function findByText(v, text, currentId) {
176
+ const index = currentId ? indexOfId(v, currentId) : -1;
177
+ let items = currentId ? wrap(v, index) : v;
178
+ const isSingleKey = text.length === 1;
179
+ if (isSingleKey) {
180
+ items = items.filter((item) => item.id !== currentId);
181
+ }
182
+ return items.find((item) => match(getValueText(item), text));
183
+ }
164
184
  function addPointerlockChangeListener(doc, fn) {
165
185
  return addDomEvent(doc, "pointerlockchange", fn, false);
166
186
  }
@@ -201,42 +221,41 @@ function requestPointerLock(doc, handlers = {}) {
201
221
  exit();
202
222
  };
203
223
  }
224
+ function findByTypeahead(_items, options) {
225
+ const { state: state2, activeId, key, timeout = 350 } = options;
226
+ const search = state2.keysSoFar + key;
227
+ const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
228
+ const query2 = isRepeated ? search[0] : search;
229
+ let items = _items.slice();
230
+ const next = findByText(items, query2, activeId);
231
+ function cleanup() {
232
+ clearTimeout(state2.timer);
233
+ state2.timer = -1;
234
+ }
235
+ function update(value) {
236
+ state2.keysSoFar = value;
237
+ cleanup();
238
+ if (value !== "") {
239
+ state2.timer = +setTimeout(() => {
240
+ update("");
241
+ cleanup();
242
+ }, timeout);
243
+ }
244
+ }
245
+ update(search);
246
+ return next;
247
+ }
248
+ findByTypeahead.defaultOptions = {
249
+ keysSoFar: "",
250
+ timer: -1
251
+ };
204
252
 
205
253
  // ../../utilities/number/dist/index.mjs
206
- var __defProp2 = Object.defineProperty;
207
- var __defProps2 = Object.defineProperties;
208
- var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
209
- var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
210
- var __hasOwnProp2 = Object.prototype.hasOwnProperty;
211
- var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
212
254
  var __pow = Math.pow;
213
- var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
214
- var __spreadValues2 = (a, b) => {
215
- for (var prop in b || (b = {}))
216
- if (__hasOwnProp2.call(b, prop))
217
- __defNormalProp2(a, prop, b[prop]);
218
- if (__getOwnPropSymbols2)
219
- for (var prop of __getOwnPropSymbols2(b)) {
220
- if (__propIsEnum2.call(b, prop))
221
- __defNormalProp2(a, prop, b[prop]);
222
- }
223
- return a;
224
- };
225
- var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
226
- var nf = new Intl.NumberFormat("en-US", { style: "decimal" });
227
- function formatter(n) {
228
- return parseFloat(nf.format(n));
229
- }
230
- function wrap(num, max) {
255
+ function wrap2(num, max) {
231
256
  return (num % max + max) % max;
232
257
  }
233
- function round(v, t2) {
234
- let num = valueOf(v);
235
- const p = __pow(10, t2 != null ? t2 : 10);
236
- num = Math.round(num * p) / p;
237
- return t2 ? num.toFixed(t2) : v.toString();
238
- }
239
- function roundToPx(num) {
258
+ function roundToDevicePixel(num) {
240
259
  if (typeof window === "undefined")
241
260
  return Math.round(num);
242
261
  const dp = window.devicePixelRatio;
@@ -245,28 +264,31 @@ function roundToPx(num) {
245
264
  function clamp(v, o) {
246
265
  return Math.min(Math.max(valueOf(v), o.min), o.max);
247
266
  }
248
- function countDecimals(v) {
249
- var _a, _b;
250
- return (_b = (_a = nf.formatToParts(v).find((p) => p.type === "fraction")) == null ? void 0 : _a.value.length) != null ? _b : 0;
267
+ function countDecimals(value) {
268
+ if (!Number.isFinite(value))
269
+ return 0;
270
+ let e = 1, p = 0;
271
+ while (Math.round(value * e) / e !== value) {
272
+ e *= 10;
273
+ p += 1;
274
+ }
275
+ return p;
251
276
  }
252
- var increment = (v, s) => formatter(valueOf(v) + s);
253
- var decrement = (v, s) => formatter(valueOf(v) - s);
254
- var multiply = (v, s) => formatter(valueOf(v) * s);
277
+ var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
278
+ var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
255
279
  function valueOf(v) {
256
280
  if (typeof v === "number")
257
281
  return v;
258
282
  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
259
283
  return !Number.isNaN(num) ? num : 0;
260
284
  }
261
- function getMaxPrecision(o) {
262
- var _a;
263
- const stepPrecision = countDecimals(o.step);
264
- const val = valueOf(o.value);
265
- const valuePrecision = Number.isNaN(val) ? stepPrecision : Math.max(countDecimals(val), stepPrecision);
266
- return Math.max(valuePrecision, (_a = o.precision) != null ? _a : 0);
267
- }
268
- function roundToPrecision(v, o) {
269
- return round(v, getMaxPrecision(__spreadProps2(__spreadValues2({}, o), { value: v })));
285
+ function formatDecimal(v, o) {
286
+ return new Intl.NumberFormat("en-US", {
287
+ useGrouping: false,
288
+ style: "decimal",
289
+ minimumFractionDigits: o.minFractionDigits,
290
+ maximumFractionDigits: o.maxFractionDigits
291
+ }).format(valueOf(v));
270
292
  }
271
293
  function isAtMax(v, o) {
272
294
  const val = valueOf(v);
@@ -280,6 +302,18 @@ function isWithinRange(v, o) {
280
302
  const val = valueOf(v);
281
303
  return val >= o.min && val <= o.max;
282
304
  }
305
+ function decimalOperation(a, op, b) {
306
+ let result = op === "+" ? a + b : a - b;
307
+ if (a % 1 !== 0 || b % 1 !== 0) {
308
+ const multiplier = __pow(10, Math.max(countDecimals(a), countDecimals(b)));
309
+ a = Math.round(a * multiplier);
310
+ b = Math.round(b * multiplier);
311
+ result = op === "+" ? a + b : a - b;
312
+ result /= multiplier;
313
+ }
314
+ return result;
315
+ }
316
+ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
283
317
 
284
318
  // ../../utilities/rect/dist/index.mjs
285
319
  var isArray = (v) => Array.isArray(v);
@@ -297,6 +331,19 @@ function createNormalizer(fn) {
297
331
  }
298
332
  var normalizeProp = createNormalizer((v) => v);
299
333
 
334
+ // ../../utilities/core/dist/index.mjs
335
+ var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
336
+ var platform = (v) => isDom() && v.test(navigator.platform);
337
+ var ua = (v) => isDom() && v.test(navigator.userAgent);
338
+ var isDom = () => !!(typeof window !== "undefined");
339
+ var isMac = () => platform(/^Mac/);
340
+ var isIPhone = () => platform(/^iPhone/);
341
+ var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
342
+ var isIos = () => isIPhone() || isIPad();
343
+ var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
344
+ var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
345
+ var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
346
+
300
347
  // src/number-input.dom.ts
301
348
  var dom = {
302
349
  getDoc: (ctx) => {
@@ -307,6 +354,10 @@ var dom = {
307
354
  var _a;
308
355
  return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
309
356
  },
357
+ getRootNode: (ctx) => {
358
+ var _a;
359
+ return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
360
+ },
310
361
  getRootId: (ctx) => {
311
362
  var _a, _b;
312
363
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.uid}`;
@@ -332,14 +383,14 @@ var dom = {
332
383
  var _a, _b;
333
384
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.uid}:label`;
334
385
  },
335
- getInputEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getInputId(ctx)),
336
- getIncButtonEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getIncButtonId(ctx)),
337
- getDecButtonEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getDecButtonId(ctx)),
338
- getScrubberEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getScrubberId(ctx)),
386
+ getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
387
+ getIncButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIncButtonId(ctx)),
388
+ getDecButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDecButtonId(ctx)),
389
+ getScrubberEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getScrubberId(ctx)),
339
390
  getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
340
391
  getMousementValue(ctx, event) {
341
- const x = roundToPx(event.movementX);
342
- const y = roundToPx(event.movementY);
392
+ const x = roundToDevicePixel(event.movementX);
393
+ const y = roundToDevicePixel(event.movementY);
343
394
  let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
344
395
  if (ctx.isRtl && hint === "increment")
345
396
  hint = "decrement";
@@ -351,8 +402,8 @@ var dom = {
351
402
  };
352
403
  const win = dom.getWin(ctx);
353
404
  const width = win.innerWidth;
354
- const half = roundToPx(7.5);
355
- point.x = wrap(point.x + half, width) - half;
405
+ const half = roundToDevicePixel(7.5);
406
+ point.x = wrap2(point.x + half, width) - half;
356
407
  return { hint, point };
357
408
  },
358
409
  createVirtualCursor(ctx) {
@@ -388,9 +439,9 @@ var utils = {
388
439
  var _a, _b;
389
440
  if (event.key == null)
390
441
  return true;
391
- const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
392
- const isSingleCharacterKey = event.key.length === 1;
393
- if (isModifierKey || !isSingleCharacterKey)
442
+ const isModifier = isModifiedEvent(event);
443
+ const isSingleKey = event.key.length === 1;
444
+ if (isModifier || !isSingleKey)
394
445
  return true;
395
446
  return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
396
447
  },
@@ -400,18 +451,15 @@ var utils = {
400
451
  return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
401
452
  },
402
453
  increment: (ctx, step) => {
403
- let value = increment(ctx.value, step != null ? step : ctx.step);
404
- value = clamp(value, ctx);
405
- return roundToPrecision(value, ctx);
454
+ const value = increment(ctx.value, step != null ? step : ctx.step);
455
+ return formatDecimal(clamp(value, ctx), ctx);
406
456
  },
407
457
  decrement: (ctx, step) => {
408
- let value = decrement(ctx.value, step != null ? step : ctx.step);
409
- value = clamp(value, ctx);
410
- return roundToPrecision(value, ctx);
458
+ const value = decrement(ctx.value, step != null ? step : ctx.step);
459
+ return formatDecimal(clamp(value, ctx), ctx);
411
460
  },
412
461
  clamp: (ctx) => {
413
- let value = clamp(ctx.value, ctx);
414
- return roundToPrecision(value, ctx);
462
+ return formatDecimal(clamp(ctx.value, ctx), ctx);
415
463
  },
416
464
  parse: (ctx, value) => {
417
465
  var _a, _b;
@@ -423,7 +471,7 @@ var utils = {
423
471
  return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
424
472
  },
425
473
  round: (ctx) => {
426
- return roundToPrecision(ctx.value, ctx);
474
+ return formatDecimal(ctx.value, ctx);
427
475
  }
428
476
  };
429
477
 
@@ -444,7 +492,7 @@ function connect(state, send, normalize = normalizeProp) {
444
492
  send({ type: "SET_VALUE", value: value.toString() });
445
493
  },
446
494
  clearValue() {
447
- send({ type: "SET_VALUE", value: "" });
495
+ send("CLEAR_VALUE");
448
496
  },
449
497
  increment() {
450
498
  send("INCREMENT");
@@ -459,10 +507,8 @@ function connect(state, send, normalize = normalizeProp) {
459
507
  send({ type: "SET_VALUE", value: state.context.min });
460
508
  },
461
509
  focus() {
462
- nextTick(() => {
463
- var _a;
464
- (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
465
- });
510
+ var _a;
511
+ (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
466
512
  },
467
513
  rootProps: normalize.element({
468
514
  id: dom.getRootId(state.context),
@@ -476,6 +522,14 @@ function connect(state, send, normalize = normalizeProp) {
476
522
  id: dom.getLabelId(state.context),
477
523
  htmlFor: dom.getInputId(state.context)
478
524
  }),
525
+ groupProps: normalize.element({
526
+ "data-part": "group",
527
+ role: "group",
528
+ "aria-disabled": isDisabled,
529
+ "data-disabled": dataAttr(isDisabled),
530
+ "data-invalid": dataAttr(isInvalid),
531
+ "aria-invalid": ariaAttr(state.context.invalid)
532
+ }),
479
533
  inputProps: normalize.input({
480
534
  "data-part": "input",
481
535
  name: state.context.name,
@@ -493,7 +547,7 @@ function connect(state, send, normalize = normalizeProp) {
493
547
  autoCorrect: "off",
494
548
  spellCheck: "false",
495
549
  type: "text",
496
- "aria-roledescription": "number field",
550
+ "aria-roledescription": !isIos() ? "number field" : void 0,
497
551
  "aria-valuemin": state.context.min,
498
552
  "aria-valuemax": state.context.max,
499
553
  "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
@@ -517,7 +571,7 @@ function connect(state, send, normalize = normalizeProp) {
517
571
  if (!utils.isValidNumericEvent(state.context, event)) {
518
572
  event.preventDefault();
519
573
  }
520
- const step = multiply(getEventStep(event), state.context.step);
574
+ const step = getEventStep(event) * state.context.step;
521
575
  const keyMap = {
522
576
  ArrowUp() {
523
577
  send({ type: "ARROW_UP", step });
@@ -541,6 +595,7 @@ function connect(state, send, normalize = normalizeProp) {
541
595
  }),
542
596
  decrementButtonProps: normalize.button({
543
597
  "data-part": "spin-button",
598
+ "data-type": "decrement",
544
599
  id: dom.getDecButtonId(state.context),
545
600
  disabled: isDecrementDisabled,
546
601
  "data-disabled": dataAttr(isDecrementDisabled),
@@ -565,6 +620,7 @@ function connect(state, send, normalize = normalizeProp) {
565
620
  }),
566
621
  incrementButtonProps: normalize.button({
567
622
  "data-part": "spin-button",
623
+ "data-type": "increment",
568
624
  id: dom.getIncButtonId(state.context),
569
625
  disabled: isIncrementDisabled,
570
626
  "data-disabled": dataAttr(isIncrementDisabled),
@@ -596,8 +652,8 @@ function connect(state, send, normalize = normalizeProp) {
596
652
  const evt = getNativeEvent(event);
597
653
  event.preventDefault();
598
654
  const point = getEventPoint(evt);
599
- point.x = point.x - roundToPx(7.5);
600
- point.y = point.y - roundToPx(7.5);
655
+ point.x = point.x - roundToDevicePixel(7.5);
656
+ point.y = point.y - roundToDevicePixel(7.5);
601
657
  send({ type: "PRESS_DOWN_SCRUBBER", point });
602
658
  },
603
659
  style: {
@@ -609,15 +665,6 @@ function connect(state, send, normalize = normalizeProp) {
609
665
 
610
666
  // src/number-input.machine.ts
611
667
  var import_core = require("@zag-js/core");
612
-
613
- // ../../utilities/core/dist/index.mjs
614
- var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
615
- var ua = (v) => isDom() && v.test(navigator.userAgent);
616
- var isDom = () => !!(typeof window !== "undefined");
617
- var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
618
- var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
619
-
620
- // src/number-input.machine.ts
621
668
  var { not, and } = import_core.guards;
622
669
  function machine(ctx = {}) {
623
670
  return (0, import_core.createMachine)({
@@ -636,8 +683,6 @@ function machine(ctx = {}) {
636
683
  step: 1,
637
684
  min: Number.MIN_SAFE_INTEGER,
638
685
  max: Number.MAX_SAFE_INTEGER,
639
- precision: 0,
640
- inputSelection: null,
641
686
  scrubberCursorPoint: null,
642
687
  invalid: false
643
688
  }, ctx), {
@@ -667,20 +712,26 @@ function machine(ctx = {}) {
667
712
  value: ["invokeOnChange"],
668
713
  isOutOfRange: ["invokeOnInvalid"]
669
714
  },
670
- entry: ["syncInputValue"],
671
715
  on: {
672
716
  SET_VALUE: {
673
717
  actions: ["setValue", "setHintToSet"]
674
718
  },
675
- INCREMENT: { actions: ["increment"] },
676
- DECREMENT: { actions: ["decrement"] }
719
+ CLEAR_VALUE: {
720
+ actions: ["clearValue"]
721
+ },
722
+ INCREMENT: {
723
+ actions: ["increment"]
724
+ },
725
+ DECREMENT: {
726
+ actions: ["decrement"]
727
+ }
677
728
  },
678
729
  states: {
679
730
  unknown: {
680
731
  on: {
681
732
  SETUP: {
682
733
  target: "idle",
683
- actions: "setupDocument"
734
+ actions: ["setupDocument", "syncInputValue"]
684
735
  }
685
736
  }
686
737
  },
@@ -722,7 +773,7 @@ function machine(ctx = {}) {
722
773
  actions: "setToMax"
723
774
  },
724
775
  CHANGE: {
725
- actions: ["setValue", "setSelectionRange", "setHint"]
776
+ actions: ["setValue", "setHint"]
726
777
  },
727
778
  BLUR: [
728
779
  {
@@ -736,6 +787,7 @@ function machine(ctx = {}) {
736
787
  actions: ["clampValue", "clearHint"]
737
788
  },
738
789
  {
790
+ target: "idle",
739
791
  actions: ["roundValue"]
740
792
  }
741
793
  ]
@@ -756,7 +808,7 @@ function machine(ctx = {}) {
756
808
  on: {
757
809
  PRESS_UP: {
758
810
  target: "focused",
759
- actions: ["clearHint", "restoreSelection"]
811
+ actions: "clearHint"
760
812
  }
761
813
  }
762
814
  },
@@ -778,7 +830,7 @@ function machine(ctx = {}) {
778
830
  on: {
779
831
  PRESS_UP: {
780
832
  target: "focused",
781
- actions: ["clearHint", "restoreSelection"]
833
+ actions: "clearHint"
782
834
  }
783
835
  }
784
836
  },
@@ -838,26 +890,23 @@ function machine(ctx = {}) {
838
890
  send("PRESS_UP");
839
891
  });
840
892
  },
841
- attachWheelListener(ctx2) {
842
- const cleanups = [];
843
- cleanups.push(nextTick(() => {
844
- const input = dom.getInputEl(ctx2);
845
- if (!input)
893
+ attachWheelListener(ctx2, _evt, { send }) {
894
+ const input = dom.getInputEl(ctx2);
895
+ if (!input)
896
+ return;
897
+ function onWheel(event) {
898
+ const isInputFocused = dom.getDoc(ctx2).activeElement === input;
899
+ if (!ctx2.allowMouseWheel || !isInputFocused)
846
900
  return;
847
- function onWheel(event) {
848
- const isInputFocused = dom.getDoc(ctx2).activeElement === input;
849
- if (!ctx2.allowMouseWheel || !isInputFocused)
850
- return;
851
- event.preventDefault();
852
- const dir = Math.sign(event.deltaY) * -1;
853
- if (dir === 1)
854
- ctx2.value = utils.increment(ctx2);
855
- else if (dir === -1)
856
- ctx2.value = utils.decrement(ctx2);
901
+ event.preventDefault();
902
+ const dir = Math.sign(event.deltaY) * -1;
903
+ if (dir === 1) {
904
+ send("INCREMENT");
905
+ } else if (dir === -1) {
906
+ send("DECREMENT");
857
907
  }
858
- cleanups.push(addDomEvent(input, "wheel", onWheel, { passive: false }));
859
- }));
860
- return () => cleanups.forEach((c) => c());
908
+ }
909
+ return addDomEvent(input, "wheel", onWheel, { passive: false });
861
910
  },
862
911
  activatePointerLock(ctx2) {
863
912
  if (isSafari() || !supportsPointerEvent())
@@ -872,7 +921,11 @@ function machine(ctx = {}) {
872
921
  const value = dom.getMousementValue(ctx2, event);
873
922
  if (!value.hint)
874
923
  return;
875
- send({ type: "POINTER_MOVE_SCRUBBER", hint: value.hint, point: value.point });
924
+ send({
925
+ type: "POINTER_MOVE_SCRUBBER",
926
+ hint: value.hint,
927
+ point: value.point
928
+ });
876
929
  }
877
930
  function onMouseup() {
878
931
  send("POINTER_UP_SCRUBBER");
@@ -884,13 +937,15 @@ function machine(ctx = {}) {
884
937
  setupDocument: (ctx2, evt) => {
885
938
  if (evt.doc)
886
939
  ctx2.doc = (0, import_core.ref)(evt.doc);
940
+ if (evt.root)
941
+ ctx2.rootNode = (0, import_core.ref)(evt.root);
887
942
  ctx2.uid = evt.id;
888
943
  },
889
944
  focusInput(ctx2) {
890
945
  if (!ctx2.focusInputOnChange)
891
946
  return;
892
947
  const input = dom.getInputEl(ctx2);
893
- nextTick(() => input == null ? void 0 : input.focus());
948
+ raf(() => input == null ? void 0 : input.focus());
894
949
  },
895
950
  increment(ctx2, evt) {
896
951
  ctx2.value = utils.increment(ctx2, evt.step);
@@ -902,7 +957,9 @@ function machine(ctx = {}) {
902
957
  ctx2.value = utils.clamp(ctx2);
903
958
  },
904
959
  roundValue(ctx2) {
905
- ctx2.value = utils.round(ctx2);
960
+ if (ctx2.value !== "") {
961
+ ctx2.value = utils.round(ctx2);
962
+ }
906
963
  },
907
964
  setValue(ctx2, evt) {
908
965
  var _a, _b;
@@ -927,30 +984,23 @@ function machine(ctx = {}) {
927
984
  setHintToSet(ctx2) {
928
985
  ctx2.hint = "set";
929
986
  },
930
- setSelectionRange(ctx2, evt) {
931
- ctx2.inputSelection = {
932
- start: evt.target.selectionStart,
933
- end: evt.target.selectionEnd
934
- };
935
- },
936
- restoreSelection(ctx2) {
937
- var _a, _b, _c;
938
- const input = dom.getInputEl(ctx2);
939
- if (!input || !ctx2.inputSelection)
940
- return;
941
- input.selectionStart = (_b = ctx2.inputSelection.start) != null ? _b : (_a = input.value) == null ? void 0 : _a.length;
942
- input.selectionEnd = (_c = ctx2.inputSelection.end) != null ? _c : input.selectionStart;
943
- },
944
987
  invokeOnChange(ctx2) {
945
988
  var _a;
946
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value, valueAsNumber: ctx2.valueAsNumber });
989
+ (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
990
+ value: ctx2.value,
991
+ valueAsNumber: ctx2.valueAsNumber
992
+ });
947
993
  },
948
994
  invokeOnInvalid(ctx2) {
949
995
  var _a;
950
996
  if (!ctx2.isOutOfRange)
951
997
  return;
952
998
  const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
953
- (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, { reason, value: ctx2.formattedValue, valueAsNumber: ctx2.valueAsNumber });
999
+ (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
1000
+ reason,
1001
+ value: ctx2.formattedValue,
1002
+ valueAsNumber: ctx2.valueAsNumber
1003
+ });
954
1004
  },
955
1005
  syncInputValue(ctx2) {
956
1006
  const input = dom.getInputEl(ctx2);
@@ -969,7 +1019,8 @@ function machine(ctx = {}) {
969
1019
  const cursor = dom.getCursorEl(ctx2);
970
1020
  if (!cursor || !ctx2.scrubberCursorPoint)
971
1021
  return;
972
- cursor.style.transform = `translate3d(${ctx2.scrubberCursorPoint.x}px, ${ctx2.scrubberCursorPoint.y}px, 0px)`;
1022
+ const { x, y } = ctx2.scrubberCursorPoint;
1023
+ cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
973
1024
  },
974
1025
  addCustomCursor(ctx2) {
975
1026
  if (isSafari() || !supportsPointerEvent())
@@ -977,11 +1028,10 @@ function machine(ctx = {}) {
977
1028
  dom.createVirtualCursor(ctx2);
978
1029
  },
979
1030
  removeCustomCursor(ctx2) {
1031
+ var _a;
980
1032
  if (isSafari() || !supportsPointerEvent())
981
1033
  return;
982
- const doc = dom.getDoc(ctx2);
983
- const el = doc.getElementById(dom.getCursorId(ctx2));
984
- el == null ? void 0 : el.remove();
1034
+ (_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
985
1035
  },
986
1036
  disableTextSelection(ctx2) {
987
1037
  const doc = dom.getDoc(ctx2);