@zag-js/pin-input 1.2.0 → 1.3.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.
Files changed (5) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +12 -7
  4. package/dist/index.mjs +14 -9
  5. package/package.json +6 -6
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
2
  import * as _zag_js_core from '@zag-js/core';
3
- import { Service, Machine, EventObject } from '@zag-js/core';
4
- import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
3
+ import { EventObject, Service, Machine } from '@zag-js/core';
4
+ import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control">;
7
7
 
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
2
  import * as _zag_js_core from '@zag-js/core';
3
- import { Service, Machine, EventObject } from '@zag-js/core';
4
- import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
3
+ import { EventObject, Service, Machine } from '@zag-js/core';
4
+ import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control">;
7
7
 
package/dist/index.js CHANGED
@@ -23,6 +23,10 @@ var getInputEls = (ctx) => {
23
23
  var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
24
24
  var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
25
25
  var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
26
+ var setInputValue = (inputEl, value) => {
27
+ inputEl.value = value;
28
+ inputEl.setAttribute("value", value);
29
+ };
26
30
 
27
31
  // src/pin-input.utils.ts
28
32
  var REGEX = {
@@ -200,11 +204,11 @@ function connect(service, normalize) {
200
204
  }
201
205
  },
202
206
  onFocus() {
203
- queueMicrotask(() => {
204
- send({ type: "INPUT.FOCUS", index });
205
- });
207
+ send({ type: "INPUT.FOCUS", index });
206
208
  },
207
- onBlur() {
209
+ onBlur(event) {
210
+ const target = event.relatedTarget;
211
+ if (domQuery.isHTMLElement(target) && target.dataset.ownedby === getRootId(scope)) return;
208
212
  send({ type: "INPUT.BLUR", index });
209
213
  }
210
214
  });
@@ -234,6 +238,7 @@ var machine = createMachine({
234
238
  value: bindable(() => ({
235
239
  value: prop("value"),
236
240
  defaultValue: prop("defaultValue"),
241
+ isEqual: utils.isEqual,
237
242
  onChange(value) {
238
243
  prop("onValueChange")?.({ value, valueAsString: value.join("") });
239
244
  }
@@ -399,18 +404,18 @@ var machine = createMachine({
399
404
  },
400
405
  revertInputValue({ context, computed, scope }) {
401
406
  const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
402
- inputEl.value = computed("focusedValue");
407
+ setInputValue(inputEl, computed("focusedValue"));
403
408
  },
404
409
  syncInputValue({ context, event, scope }) {
405
410
  const value = context.get("value");
406
411
  const inputEl = getInputElAtIndex(scope, event.index);
407
- inputEl.value = value[event.index];
412
+ setInputValue(inputEl, value[event.index]);
408
413
  },
409
414
  syncInputElements({ context, scope }) {
410
415
  const inputEls = getInputEls(scope);
411
416
  const value = context.get("value");
412
417
  inputEls.forEach((inputEl, index) => {
413
- inputEl.value = value[index];
418
+ setInputValue(inputEl, value[index]);
414
419
  });
415
420
  },
416
421
  setPastedValue({ context, event, computed, flush }) {
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { createAnatomy } from '@zag-js/anatomy';
2
- import { dispatchInputValueEvent, raf, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, getNativeEvent, isComposingEvent, isModifierKey, getEventKey } from '@zag-js/dom-query';
3
- import { setValueAtIndex, createSplitProps, invariant } from '@zag-js/utils';
2
+ import { raf, dispatchInputValueEvent, queryAll, dataAttr, ariaAttr, isHTMLElement, isComposingEvent, isModifierKey, getEventKey, getNativeEvent, getBeforeInputValue, visuallyHiddenStyle } from '@zag-js/dom-query';
3
+ import { setValueAtIndex, isEqual, createSplitProps, invariant } from '@zag-js/utils';
4
4
  import { setup } from '@zag-js/core';
5
5
  import { createProps } from '@zag-js/types';
6
6
 
@@ -21,6 +21,10 @@ var getInputEls = (ctx) => {
21
21
  var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
22
22
  var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
23
23
  var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
24
+ var setInputValue = (inputEl, value) => {
25
+ inputEl.value = value;
26
+ inputEl.setAttribute("value", value);
27
+ };
24
28
 
25
29
  // src/pin-input.utils.ts
26
30
  var REGEX = {
@@ -198,11 +202,11 @@ function connect(service, normalize) {
198
202
  }
199
203
  },
200
204
  onFocus() {
201
- queueMicrotask(() => {
202
- send({ type: "INPUT.FOCUS", index });
203
- });
205
+ send({ type: "INPUT.FOCUS", index });
204
206
  },
205
- onBlur() {
207
+ onBlur(event) {
208
+ const target = event.relatedTarget;
209
+ if (isHTMLElement(target) && target.dataset.ownedby === getRootId(scope)) return;
206
210
  send({ type: "INPUT.BLUR", index });
207
211
  }
208
212
  });
@@ -232,6 +236,7 @@ var machine = createMachine({
232
236
  value: bindable(() => ({
233
237
  value: prop("value"),
234
238
  defaultValue: prop("defaultValue"),
239
+ isEqual,
235
240
  onChange(value) {
236
241
  prop("onValueChange")?.({ value, valueAsString: value.join("") });
237
242
  }
@@ -397,18 +402,18 @@ var machine = createMachine({
397
402
  },
398
403
  revertInputValue({ context, computed, scope }) {
399
404
  const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
400
- inputEl.value = computed("focusedValue");
405
+ setInputValue(inputEl, computed("focusedValue"));
401
406
  },
402
407
  syncInputValue({ context, event, scope }) {
403
408
  const value = context.get("value");
404
409
  const inputEl = getInputElAtIndex(scope, event.index);
405
- inputEl.value = value[event.index];
410
+ setInputValue(inputEl, value[event.index]);
406
411
  },
407
412
  syncInputElements({ context, scope }) {
408
413
  const inputEls = getInputEls(scope);
409
414
  const value = context.get("value");
410
415
  inputEls.forEach((inputEl, index) => {
411
- inputEl.value = value[index];
416
+ setInputValue(inputEl, value[index]);
412
417
  });
413
418
  },
414
419
  setPastedValue({ context, event, computed, flush }) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/pin-input",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "Core logic for the pin-input widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -26,11 +26,11 @@
26
26
  "url": "https://github.com/chakra-ui/zag/issues"
27
27
  },
28
28
  "dependencies": {
29
- "@zag-js/anatomy": "1.2.0",
30
- "@zag-js/dom-query": "1.2.0",
31
- "@zag-js/utils": "1.2.0",
32
- "@zag-js/core": "1.2.0",
33
- "@zag-js/types": "1.2.0"
29
+ "@zag-js/anatomy": "1.3.0",
30
+ "@zag-js/dom-query": "1.3.0",
31
+ "@zag-js/utils": "1.3.0",
32
+ "@zag-js/core": "1.3.0",
33
+ "@zag-js/types": "1.3.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "clean-package": "2.2.0"