@zag-js/pin-input 0.1.13 → 0.1.14

package/dist/index.d.ts

@@ -8,6 +8,7 @@ declare type IntlMessages = {
 declare type ElementIds = Partial<{
     root: string;
     hiddenInput: string;
+    label: string;
     input(id: string): string;
 }>;
 declare type PublicContext = DirectionProperty & CommonProperties & {
@@ -123,8 +124,9 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     setValue(value: string[]): void;
     clearValue(): void;
     setValueAtIndex(index: number, value: string): void;
-    focus(): void;
+    focus: () => void;
     rootProps: T["element"];
+    labelProps: T["label"];
     hiddenInputProps: T["input"];
     getInputProps({ index }: {
         index: number;

package/dist/index.js

@@ -67,9 +67,7 @@ function getNativeEvent(e) {
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft",
-  Home: "End",
-  End: "Home"
+  ArrowRight: "ArrowLeft"
 };
 var sameKeyMap = {
   Up: "ArrowUp",
@@ -135,6 +133,10 @@ var dom = defineDomHelpers({
     var _a;
     return ((_a = ctx.ids) == null ? void 0 : _a.hiddenInput) ?? `pin-input:${ctx.id}:hidden`;
   },
+  getLabelId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `pin-input:${ctx.id}:label`;
+  },
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
@@ -152,6 +154,10 @@ function connect(state, send, normalize) {
   const isInvalid = state.context.invalid;
   const focusedIndex = state.context.focusedIndex;
   const messages = state.context.messages;
+  function focus() {
+    var _a;
+    (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
+  }
   return {
     value: state.context.value,
     valueAsString: state.context.valueAsString,
@@ -168,10 +174,7 @@ function connect(state, send, normalize) {
     setValueAtIndex(index, value) {
       send({ type: "SET_VALUE", value, index });
     },
-    focus() {
-      var _a;
-      (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
-    },
+    focus,
     rootProps: normalize.element({
       dir: state.context.dir,
       "data-part": "root",
@@ -180,6 +183,18 @@ function connect(state, send, normalize) {
       "data-disabled": dataAttr(state.context.disabled),
       "data-complete": dataAttr(isValueComplete)
     }),
+    labelProps: normalize.label({
+      "data-part": "label",
+      htmlFor: dom.getHiddenInputId(state.context),
+      id: dom.getLabelId(state.context),
+      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(state.context.disabled),
+      "data-complete": dataAttr(isValueComplete),
+      onClick: (event) => {
+        event.preventDefault();
+        focus();
+      }
+    }),
     hiddenInputProps: normalize.input({
       "aria-hidden": true,
       type: "text",
@@ -249,6 +264,8 @@ function connect(state, send, normalize) {
             exec(event);
             event.preventDefault();
           } else {
+            if (key === "Tab")
+              return;
             send({ type: "KEY_DOWN", value: key, preventDefault: () => event.preventDefault() });
           }
         },

package/dist/index.mjs

@@ -40,9 +40,7 @@ function getNativeEvent(e) {
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft",
-  Home: "End",
-  End: "Home"
+  ArrowRight: "ArrowLeft"
 };
 var sameKeyMap = {
   Up: "ArrowUp",
@@ -108,6 +106,10 @@ var dom = defineDomHelpers({
     var _a;
     return ((_a = ctx.ids) == null ? void 0 : _a.hiddenInput) ?? `pin-input:${ctx.id}:hidden`;
   },
+  getLabelId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `pin-input:${ctx.id}:label`;
+  },
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
@@ -125,6 +127,10 @@ function connect(state, send, normalize) {
   const isInvalid = state.context.invalid;
   const focusedIndex = state.context.focusedIndex;
   const messages = state.context.messages;
+  function focus() {
+    var _a;
+    (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
+  }
   return {
     value: state.context.value,
     valueAsString: state.context.valueAsString,
@@ -141,10 +147,7 @@ function connect(state, send, normalize) {
     setValueAtIndex(index, value) {
       send({ type: "SET_VALUE", value, index });
     },
-    focus() {
-      var _a;
-      (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
-    },
+    focus,
     rootProps: normalize.element({
       dir: state.context.dir,
       "data-part": "root",
@@ -153,6 +156,18 @@ function connect(state, send, normalize) {
       "data-disabled": dataAttr(state.context.disabled),
       "data-complete": dataAttr(isValueComplete)
     }),
+    labelProps: normalize.label({
+      "data-part": "label",
+      htmlFor: dom.getHiddenInputId(state.context),
+      id: dom.getLabelId(state.context),
+      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(state.context.disabled),
+      "data-complete": dataAttr(isValueComplete),
+      onClick: (event) => {
+        event.preventDefault();
+        focus();
+      }
+    }),
     hiddenInputProps: normalize.input({
       "aria-hidden": true,
       type: "text",
@@ -222,6 +237,8 @@ function connect(state, send, normalize) {
             exec(event);
             event.preventDefault();
           } else {
+            if (key === "Tab")
+              return;
             send({ type: "KEY_DOWN", value: key, preventDefault: () => event.preventDefault() });
           }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,13 +29,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.9",
-    "@zag-js/types": "0.2.4"
+    "@zag-js/core": "0.1.10",
+    "@zag-js/types": "0.2.5"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.10",
-    "@zag-js/form-utils": "0.1.0",
-    "@zag-js/utils": "0.1.3"
+    "@zag-js/dom-utils": "0.1.11",
+    "@zag-js/form-utils": "0.1.1",
+    "@zag-js/utils": "0.1.4"
   },
   "scripts": {
     "build-fast": "tsup src/index.ts --format=esm,cjs",