@zag-js/number-input 1.30.0 → 1.31.1

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +4 -0
  2. package/dist/index.d.ts +4 -0
  3. package/dist/index.js +16 -8
  4. package/dist/index.mjs +16 -8
  5. package/package.json +6 -6
package/dist/index.d.mts CHANGED
@@ -145,6 +145,10 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
145
145
  * Function invoked when the number input is focused
146
146
  */
147
147
  onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
148
+ /**
149
+ * Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)
150
+ */
151
+ onValueCommit?: ((details: ValueChangeDetails) => void) | undefined;
148
152
  /**
149
153
  * Whether to spin the value when the increment/decrement button is pressed
150
154
  * @default true
package/dist/index.d.ts CHANGED
@@ -145,6 +145,10 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
145
145
  * Function invoked when the number input is focused
146
146
  */
147
147
  onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
148
+ /**
149
+ * Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)
150
+ */
151
+ onValueCommit?: ((details: ValueChangeDetails) => void) | undefined;
148
152
  /**
149
153
  * Whether to spin the value when the increment/decrement button is pressed
150
154
  * @default true
package/dist/index.js CHANGED
@@ -342,8 +342,9 @@ function connect(service, normalize) {
342
342
  send({ type: "INPUT.END" });
343
343
  event.preventDefault();
344
344
  },
345
- Enter() {
346
- send({ type: "INPUT.ENTER" });
345
+ Enter(event2) {
346
+ const selection = recordCursor(event2.currentTarget, scope);
347
+ send({ type: "INPUT.ENTER", selection });
347
348
  }
348
349
  };
349
350
  const exec = keyMap[event.key];
@@ -538,7 +539,7 @@ var machine = createMachine({
538
539
  )
539
540
  },
540
541
  watch({ track, action, context, computed, prop }) {
541
- track([() => context.get("value"), () => prop("locale")], () => {
542
+ track([() => context.get("value"), () => prop("locale"), () => JSON.stringify(prop("formatOptions"))], () => {
542
543
  action(["syncInputElement"]);
543
544
  });
544
545
  track([() => computed("isOutOfRange")], () => {
@@ -614,20 +615,20 @@ var machine = createMachine({
614
615
  {
615
616
  guard: and("clampValueOnBlur", not("isInRange")),
616
617
  target: "idle",
617
- actions: ["setClampedValue", "clearHint", "invokeOnBlur"]
618
+ actions: ["setClampedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
618
619
  },
619
620
  {
620
621
  guard: not("isInRange"),
621
622
  target: "idle",
622
- actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid"]
623
+ actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"]
623
624
  },
624
625
  {
625
626
  target: "idle",
626
- actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
627
+ actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
627
628
  }
628
629
  ],
629
630
  "INPUT.ENTER": {
630
- actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
631
+ actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
631
632
  }
632
633
  }
633
634
  },
@@ -847,10 +848,16 @@ var machine = createMachine({
847
848
  valueAsNumber: computed("valueAsNumber")
848
849
  });
849
850
  },
851
+ invokeOnValueCommit({ computed, prop }) {
852
+ prop("onValueCommit")?.({
853
+ value: computed("formattedValue"),
854
+ valueAsNumber: computed("valueAsNumber")
855
+ });
856
+ },
850
857
  syncInputElement({ context, event, computed, scope }) {
851
858
  const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue");
852
859
  const inputEl = getInputEl(scope);
853
- const sel = event.selection;
860
+ const sel = event.selection ?? recordCursor(inputEl, scope);
854
861
  domQuery.raf(() => {
855
862
  domQuery.setElementValue(inputEl, value);
856
863
  restoreCursor(inputEl, sel, scope);
@@ -895,6 +902,7 @@ var props = types.createProps()([
895
902
  "name",
896
903
  "onFocusChange",
897
904
  "onValueChange",
905
+ "onValueCommit",
898
906
  "onValueInvalid",
899
907
  "pattern",
900
908
  "required",
package/dist/index.mjs CHANGED
@@ -340,8 +340,9 @@ function connect(service, normalize) {
340
340
  send({ type: "INPUT.END" });
341
341
  event.preventDefault();
342
342
  },
343
- Enter() {
344
- send({ type: "INPUT.ENTER" });
343
+ Enter(event2) {
344
+ const selection = recordCursor(event2.currentTarget, scope);
345
+ send({ type: "INPUT.ENTER", selection });
345
346
  }
346
347
  };
347
348
  const exec = keyMap[event.key];
@@ -536,7 +537,7 @@ var machine = createMachine({
536
537
  )
537
538
  },
538
539
  watch({ track, action, context, computed, prop }) {
539
- track([() => context.get("value"), () => prop("locale")], () => {
540
+ track([() => context.get("value"), () => prop("locale"), () => JSON.stringify(prop("formatOptions"))], () => {
540
541
  action(["syncInputElement"]);
541
542
  });
542
543
  track([() => computed("isOutOfRange")], () => {
@@ -612,20 +613,20 @@ var machine = createMachine({
612
613
  {
613
614
  guard: and("clampValueOnBlur", not("isInRange")),
614
615
  target: "idle",
615
- actions: ["setClampedValue", "clearHint", "invokeOnBlur"]
616
+ actions: ["setClampedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
616
617
  },
617
618
  {
618
619
  guard: not("isInRange"),
619
620
  target: "idle",
620
- actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid"]
621
+ actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"]
621
622
  },
622
623
  {
623
624
  target: "idle",
624
- actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
625
+ actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
625
626
  }
626
627
  ],
627
628
  "INPUT.ENTER": {
628
- actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
629
+ actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
629
630
  }
630
631
  }
631
632
  },
@@ -845,10 +846,16 @@ var machine = createMachine({
845
846
  valueAsNumber: computed("valueAsNumber")
846
847
  });
847
848
  },
849
+ invokeOnValueCommit({ computed, prop }) {
850
+ prop("onValueCommit")?.({
851
+ value: computed("formattedValue"),
852
+ valueAsNumber: computed("valueAsNumber")
853
+ });
854
+ },
848
855
  syncInputElement({ context, event, computed, scope }) {
849
856
  const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue");
850
857
  const inputEl = getInputEl(scope);
851
- const sel = event.selection;
858
+ const sel = event.selection ?? recordCursor(inputEl, scope);
852
859
  raf(() => {
853
860
  setElementValue(inputEl, value);
854
861
  restoreCursor(inputEl, sel, scope);
@@ -893,6 +900,7 @@ var props = createProps()([
893
900
  "name",
894
901
  "onFocusChange",
895
902
  "onValueChange",
903
+ "onValueCommit",
896
904
  "onValueInvalid",
897
905
  "pattern",
898
906
  "required",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/number-input",
3
- "version": "1.30.0",
3
+ "version": "1.31.1",
4
4
  "description": "Core logic for the number-input widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -27,11 +27,11 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@internationalized/number": "3.6.5",
30
- "@zag-js/anatomy": "1.30.0",
31
- "@zag-js/core": "1.30.0",
32
- "@zag-js/dom-query": "1.30.0",
33
- "@zag-js/types": "1.30.0",
34
- "@zag-js/utils": "1.30.0"
30
+ "@zag-js/anatomy": "1.31.1",
31
+ "@zag-js/core": "1.31.1",
32
+ "@zag-js/dom-query": "1.31.1",
33
+ "@zag-js/types": "1.31.1",
34
+ "@zag-js/utils": "1.31.1"
35
35
  },
36
36
  "devDependencies": {
37
37
  "clean-package": "2.2.0"