@zag-js/pin-input 0.1.10 → 0.1.11
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/LICENSE +21 -0
- package/dist/index.d.ts +136 -3
- package/dist/index.js +33 -66
- package/dist/index.mjs +28 -69
- package/package.json +12 -11
- package/dist/pin-input.connect.d.ts +0 -16
- package/dist/pin-input.dom.d.ts +0 -27
- package/dist/pin-input.machine.d.ts +0 -2
- package/dist/pin-input.types.d.ts +0 -122
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Chakra UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,136 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import * as _zag_js_core from '@zag-js/core';
|
|
3
|
+
import { StateMachine } from '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare type IntlMessages = {
|
|
6
|
+
inputLabel: (index: number, length: number) => string;
|
|
7
|
+
};
|
|
8
|
+
declare type ElementIds = Partial<{
|
|
9
|
+
root: string;
|
|
10
|
+
hiddenInput: string;
|
|
11
|
+
input(id: string): string;
|
|
12
|
+
}>;
|
|
13
|
+
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
14
|
+
/**
|
|
15
|
+
* The name of the input element. Useful for form submission.
|
|
16
|
+
*/
|
|
17
|
+
name?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The regular expression that the user-entered input value is checked against.
|
|
20
|
+
*/
|
|
21
|
+
pattern?: string;
|
|
22
|
+
/**
|
|
23
|
+
* The ids of the elements in the pin input. Useful for composition.
|
|
24
|
+
*/
|
|
25
|
+
ids?: ElementIds;
|
|
26
|
+
/**
|
|
27
|
+
* Whether the inputs are disabled
|
|
28
|
+
*/
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The placeholder text for the input
|
|
32
|
+
*/
|
|
33
|
+
placeholder?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Whether to auto-focus the first input.
|
|
36
|
+
*/
|
|
37
|
+
autoFocus?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the pin input is in the invalid state
|
|
40
|
+
*/
|
|
41
|
+
invalid?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* If `true`, the pin input component signals to its fields that they should
|
|
44
|
+
* use `autocomplete="one-time-code"`.
|
|
45
|
+
*/
|
|
46
|
+
otp?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* The value of the the pin input.
|
|
49
|
+
*/
|
|
50
|
+
value: string[];
|
|
51
|
+
/**
|
|
52
|
+
* The type of value the pin-input should allow
|
|
53
|
+
*/
|
|
54
|
+
type?: "alphanumeric" | "numeric" | "alphabetic";
|
|
55
|
+
/**
|
|
56
|
+
* Function called when all inputs have valid values
|
|
57
|
+
*/
|
|
58
|
+
onComplete?: (details: {
|
|
59
|
+
value: string[];
|
|
60
|
+
valueAsString: string;
|
|
61
|
+
}) => void;
|
|
62
|
+
/**
|
|
63
|
+
* Function called on input change
|
|
64
|
+
*/
|
|
65
|
+
onChange?: (details: {
|
|
66
|
+
value: string[];
|
|
67
|
+
}) => void;
|
|
68
|
+
/**
|
|
69
|
+
* Function called when an invalid value is entered
|
|
70
|
+
*/
|
|
71
|
+
onInvalid?: (details: {
|
|
72
|
+
value: string;
|
|
73
|
+
index: number;
|
|
74
|
+
}) => void;
|
|
75
|
+
/**
|
|
76
|
+
* If `true`, the input's value will be masked just like `type=password`
|
|
77
|
+
*/
|
|
78
|
+
mask?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Whether to blur the input when the value is complete
|
|
81
|
+
*/
|
|
82
|
+
blurOnComplete?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
85
|
+
*/
|
|
86
|
+
messages: IntlMessages;
|
|
87
|
+
};
|
|
88
|
+
declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
89
|
+
declare type ComputedContext = Readonly<{
|
|
90
|
+
/**
|
|
91
|
+
* @computed
|
|
92
|
+
* The number of inputs
|
|
93
|
+
*/
|
|
94
|
+
valueLength: number;
|
|
95
|
+
/**
|
|
96
|
+
* @computed
|
|
97
|
+
* The number of inputs that are not empty
|
|
98
|
+
*/
|
|
99
|
+
filledValueLength: number;
|
|
100
|
+
/**
|
|
101
|
+
* @computed
|
|
102
|
+
* Whether all input values are valid
|
|
103
|
+
*/
|
|
104
|
+
isValueComplete: boolean;
|
|
105
|
+
/**
|
|
106
|
+
* @computed
|
|
107
|
+
* The string representation of the input values
|
|
108
|
+
*/
|
|
109
|
+
valueAsString: string;
|
|
110
|
+
}>;
|
|
111
|
+
declare type PrivateContext = Context<{}>;
|
|
112
|
+
declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
113
|
+
declare type MachineState = {
|
|
114
|
+
value: "unknown" | "idle" | "focused";
|
|
115
|
+
};
|
|
116
|
+
declare type State = StateMachine.State<MachineContext, MachineState>;
|
|
117
|
+
declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
118
|
+
|
|
119
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
120
|
+
value: string[];
|
|
121
|
+
valueAsString: string;
|
|
122
|
+
isValueComplete: boolean;
|
|
123
|
+
setValue(value: string[]): void;
|
|
124
|
+
clearValue(): void;
|
|
125
|
+
setValueAtIndex(index: number, value: string): void;
|
|
126
|
+
focus(): void;
|
|
127
|
+
rootProps: T["element"];
|
|
128
|
+
hiddenInputProps: T["input"];
|
|
129
|
+
getInputProps({ index }: {
|
|
130
|
+
index: number;
|
|
131
|
+
}): T["input"];
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
135
|
+
|
|
136
|
+
export { UserDefinedContext as Context, connect, machine };
|
package/dist/index.js
CHANGED
|
@@ -1,25 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
6
|
var __export = (target, all) => {
|
|
24
7
|
for (var name in all)
|
|
25
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -43,22 +26,6 @@ __export(src_exports, {
|
|
|
43
26
|
module.exports = __toCommonJS(src_exports);
|
|
44
27
|
|
|
45
28
|
// ../../utilities/dom/dist/index.mjs
|
|
46
|
-
var __defProp2 = Object.defineProperty;
|
|
47
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
48
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
49
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
50
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
51
|
-
var __spreadValues2 = (a, b) => {
|
|
52
|
-
for (var prop in b || (b = {}))
|
|
53
|
-
if (__hasOwnProp2.call(b, prop))
|
|
54
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
55
|
-
if (__getOwnPropSymbols2)
|
|
56
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
57
|
-
if (__propIsEnum2.call(b, prop))
|
|
58
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
59
|
-
}
|
|
60
|
-
return a;
|
|
61
|
-
};
|
|
62
29
|
var dataAttr = (guard) => {
|
|
63
30
|
return guard ? "" : void 0;
|
|
64
31
|
};
|
|
@@ -72,43 +39,39 @@ function isWindow(value) {
|
|
|
72
39
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
73
40
|
}
|
|
74
41
|
function getDocument(el) {
|
|
75
|
-
var _a;
|
|
76
42
|
if (isWindow(el))
|
|
77
43
|
return el.document;
|
|
78
44
|
if (isDocument(el))
|
|
79
45
|
return el;
|
|
80
|
-
return (
|
|
46
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
81
47
|
}
|
|
82
48
|
function getWindow(el) {
|
|
83
|
-
|
|
84
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
49
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
85
50
|
}
|
|
86
51
|
function defineDomHelpers(helpers) {
|
|
87
52
|
const dom2 = {
|
|
88
53
|
getRootNode: (ctx) => {
|
|
89
|
-
var _a, _b;
|
|
90
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
91
|
-
},
|
|
92
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
93
|
-
getWin: (ctx) => {
|
|
94
54
|
var _a;
|
|
95
|
-
return (_a =
|
|
55
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
96
56
|
},
|
|
57
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
58
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
97
59
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
98
60
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
99
61
|
};
|
|
100
|
-
return
|
|
62
|
+
return {
|
|
63
|
+
...dom2,
|
|
64
|
+
...helpers
|
|
65
|
+
};
|
|
101
66
|
}
|
|
102
67
|
function getNativeEvent(e) {
|
|
103
|
-
|
|
104
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
68
|
+
return e.nativeEvent ?? e;
|
|
105
69
|
}
|
|
106
70
|
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
107
71
|
function getDescriptor(el, options) {
|
|
108
|
-
var _a;
|
|
109
72
|
const { type, property } = options;
|
|
110
73
|
const proto = getWindow(el)[type].prototype;
|
|
111
|
-
return
|
|
74
|
+
return Object.getOwnPropertyDescriptor(proto, property) ?? {};
|
|
112
75
|
}
|
|
113
76
|
function dispatchInputValueEvent(el, value) {
|
|
114
77
|
var _a;
|
|
@@ -138,10 +101,9 @@ var sameKeyMap = {
|
|
|
138
101
|
Right: "ArrowRight"
|
|
139
102
|
};
|
|
140
103
|
function getEventKey(event, options = {}) {
|
|
141
|
-
var _a;
|
|
142
104
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
143
105
|
let { key } = event;
|
|
144
|
-
key =
|
|
106
|
+
key = sameKeyMap[key] ?? key;
|
|
145
107
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
146
108
|
if (isRtl && key in rtlKeyMap) {
|
|
147
109
|
key = rtlKeyMap[key];
|
|
@@ -155,8 +117,7 @@ function raf(fn) {
|
|
|
155
117
|
};
|
|
156
118
|
}
|
|
157
119
|
function queryAll(root, selector) {
|
|
158
|
-
|
|
159
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
120
|
+
return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
|
|
160
121
|
}
|
|
161
122
|
var visuallyHiddenStyle = {
|
|
162
123
|
border: "0",
|
|
@@ -175,7 +136,7 @@ var visuallyHiddenStyle = {
|
|
|
175
136
|
function invariant(...a) {
|
|
176
137
|
const m = a.length === 1 ? a[0] : a[1];
|
|
177
138
|
const c = a.length === 2 ? a[0] : true;
|
|
178
|
-
if (c &&
|
|
139
|
+
if (c && process.env.NODE_ENV !== "production") {
|
|
179
140
|
throw new Error(m);
|
|
180
141
|
}
|
|
181
142
|
}
|
|
@@ -183,16 +144,16 @@ function invariant(...a) {
|
|
|
183
144
|
// src/pin-input.dom.ts
|
|
184
145
|
var dom = defineDomHelpers({
|
|
185
146
|
getRootId: (ctx) => {
|
|
186
|
-
var _a
|
|
187
|
-
return (
|
|
147
|
+
var _a;
|
|
148
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `pin-input:${ctx.id}`;
|
|
188
149
|
},
|
|
189
150
|
getInputId: (ctx, id) => {
|
|
190
|
-
var _a, _b
|
|
191
|
-
return (
|
|
151
|
+
var _a, _b;
|
|
152
|
+
return ((_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) ?? `pin-input:${ctx.id}:${id}`;
|
|
192
153
|
},
|
|
193
154
|
getHiddenInputId: (ctx) => {
|
|
194
|
-
var _a
|
|
195
|
-
return (
|
|
155
|
+
var _a;
|
|
156
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.hiddenInput) ?? `pin-input:${ctx.id}:hidden`;
|
|
196
157
|
},
|
|
197
158
|
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
198
159
|
getElements: (ctx) => {
|
|
@@ -329,17 +290,18 @@ function machine(ctx) {
|
|
|
329
290
|
return (0, import_core.createMachine)({
|
|
330
291
|
id: "pin-input",
|
|
331
292
|
initial: "unknown",
|
|
332
|
-
context:
|
|
293
|
+
context: {
|
|
333
294
|
value: [],
|
|
334
295
|
focusedIndex: -1,
|
|
335
296
|
placeholder: "\u25CB",
|
|
336
297
|
otp: false,
|
|
337
|
-
type: "numeric"
|
|
338
|
-
|
|
339
|
-
messages:
|
|
340
|
-
inputLabel: (index, length) => `pin code ${index + 1} of ${length}
|
|
341
|
-
|
|
342
|
-
|
|
298
|
+
type: "numeric",
|
|
299
|
+
...ctx,
|
|
300
|
+
messages: {
|
|
301
|
+
inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
|
|
302
|
+
...ctx.messages
|
|
303
|
+
}
|
|
304
|
+
},
|
|
343
305
|
computed: {
|
|
344
306
|
valueLength: (ctx2) => ctx2.value.length,
|
|
345
307
|
filledValueLength: (ctx2) => ctx2.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").length,
|
|
@@ -581,3 +543,8 @@ function assign(ctx, value) {
|
|
|
581
543
|
function lastChar(value) {
|
|
582
544
|
return value.charAt(value.length - 1);
|
|
583
545
|
}
|
|
546
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
547
|
+
0 && (module.exports = {
|
|
548
|
+
connect,
|
|
549
|
+
machine
|
|
550
|
+
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,40 +1,4 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
21
1
|
// ../../utilities/dom/dist/index.mjs
|
|
22
|
-
var __defProp2 = Object.defineProperty;
|
|
23
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
24
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
25
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
26
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
27
|
-
var __spreadValues2 = (a, b) => {
|
|
28
|
-
for (var prop in b || (b = {}))
|
|
29
|
-
if (__hasOwnProp2.call(b, prop))
|
|
30
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
31
|
-
if (__getOwnPropSymbols2)
|
|
32
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
33
|
-
if (__propIsEnum2.call(b, prop))
|
|
34
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
35
|
-
}
|
|
36
|
-
return a;
|
|
37
|
-
};
|
|
38
2
|
var dataAttr = (guard) => {
|
|
39
3
|
return guard ? "" : void 0;
|
|
40
4
|
};
|
|
@@ -48,43 +12,39 @@ function isWindow(value) {
|
|
|
48
12
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
49
13
|
}
|
|
50
14
|
function getDocument(el) {
|
|
51
|
-
var _a;
|
|
52
15
|
if (isWindow(el))
|
|
53
16
|
return el.document;
|
|
54
17
|
if (isDocument(el))
|
|
55
18
|
return el;
|
|
56
|
-
return (
|
|
19
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
57
20
|
}
|
|
58
21
|
function getWindow(el) {
|
|
59
|
-
|
|
60
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
22
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
61
23
|
}
|
|
62
24
|
function defineDomHelpers(helpers) {
|
|
63
25
|
const dom2 = {
|
|
64
26
|
getRootNode: (ctx) => {
|
|
65
|
-
var _a, _b;
|
|
66
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
67
|
-
},
|
|
68
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
69
|
-
getWin: (ctx) => {
|
|
70
27
|
var _a;
|
|
71
|
-
return (_a =
|
|
28
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
72
29
|
},
|
|
30
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
31
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
73
32
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
74
33
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
75
34
|
};
|
|
76
|
-
return
|
|
35
|
+
return {
|
|
36
|
+
...dom2,
|
|
37
|
+
...helpers
|
|
38
|
+
};
|
|
77
39
|
}
|
|
78
40
|
function getNativeEvent(e) {
|
|
79
|
-
|
|
80
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
41
|
+
return e.nativeEvent ?? e;
|
|
81
42
|
}
|
|
82
43
|
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
83
44
|
function getDescriptor(el, options) {
|
|
84
|
-
var _a;
|
|
85
45
|
const { type, property } = options;
|
|
86
46
|
const proto = getWindow(el)[type].prototype;
|
|
87
|
-
return
|
|
47
|
+
return Object.getOwnPropertyDescriptor(proto, property) ?? {};
|
|
88
48
|
}
|
|
89
49
|
function dispatchInputValueEvent(el, value) {
|
|
90
50
|
var _a;
|
|
@@ -114,10 +74,9 @@ var sameKeyMap = {
|
|
|
114
74
|
Right: "ArrowRight"
|
|
115
75
|
};
|
|
116
76
|
function getEventKey(event, options = {}) {
|
|
117
|
-
var _a;
|
|
118
77
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
119
78
|
let { key } = event;
|
|
120
|
-
key =
|
|
79
|
+
key = sameKeyMap[key] ?? key;
|
|
121
80
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
122
81
|
if (isRtl && key in rtlKeyMap) {
|
|
123
82
|
key = rtlKeyMap[key];
|
|
@@ -131,8 +90,7 @@ function raf(fn) {
|
|
|
131
90
|
};
|
|
132
91
|
}
|
|
133
92
|
function queryAll(root, selector) {
|
|
134
|
-
|
|
135
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
93
|
+
return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
|
|
136
94
|
}
|
|
137
95
|
var visuallyHiddenStyle = {
|
|
138
96
|
border: "0",
|
|
@@ -151,7 +109,7 @@ var visuallyHiddenStyle = {
|
|
|
151
109
|
function invariant(...a) {
|
|
152
110
|
const m = a.length === 1 ? a[0] : a[1];
|
|
153
111
|
const c = a.length === 2 ? a[0] : true;
|
|
154
|
-
if (c &&
|
|
112
|
+
if (c && process.env.NODE_ENV !== "production") {
|
|
155
113
|
throw new Error(m);
|
|
156
114
|
}
|
|
157
115
|
}
|
|
@@ -159,16 +117,16 @@ function invariant(...a) {
|
|
|
159
117
|
// src/pin-input.dom.ts
|
|
160
118
|
var dom = defineDomHelpers({
|
|
161
119
|
getRootId: (ctx) => {
|
|
162
|
-
var _a
|
|
163
|
-
return (
|
|
120
|
+
var _a;
|
|
121
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `pin-input:${ctx.id}`;
|
|
164
122
|
},
|
|
165
123
|
getInputId: (ctx, id) => {
|
|
166
|
-
var _a, _b
|
|
167
|
-
return (
|
|
124
|
+
var _a, _b;
|
|
125
|
+
return ((_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) ?? `pin-input:${ctx.id}:${id}`;
|
|
168
126
|
},
|
|
169
127
|
getHiddenInputId: (ctx) => {
|
|
170
|
-
var _a
|
|
171
|
-
return (
|
|
128
|
+
var _a;
|
|
129
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.hiddenInput) ?? `pin-input:${ctx.id}:hidden`;
|
|
172
130
|
},
|
|
173
131
|
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
174
132
|
getElements: (ctx) => {
|
|
@@ -305,17 +263,18 @@ function machine(ctx) {
|
|
|
305
263
|
return createMachine({
|
|
306
264
|
id: "pin-input",
|
|
307
265
|
initial: "unknown",
|
|
308
|
-
context:
|
|
266
|
+
context: {
|
|
309
267
|
value: [],
|
|
310
268
|
focusedIndex: -1,
|
|
311
269
|
placeholder: "\u25CB",
|
|
312
270
|
otp: false,
|
|
313
|
-
type: "numeric"
|
|
314
|
-
|
|
315
|
-
messages:
|
|
316
|
-
inputLabel: (index, length) => `pin code ${index + 1} of ${length}
|
|
317
|
-
|
|
318
|
-
|
|
271
|
+
type: "numeric",
|
|
272
|
+
...ctx,
|
|
273
|
+
messages: {
|
|
274
|
+
inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
|
|
275
|
+
...ctx.messages
|
|
276
|
+
}
|
|
277
|
+
},
|
|
319
278
|
computed: {
|
|
320
279
|
valueLength: (ctx2) => ctx2.value.length,
|
|
321
280
|
filledValueLength: (ctx2) => ctx2.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").length,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/pin-input",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Core logic for the pin-input widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,20 +29,21 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.1.
|
|
33
|
-
"@zag-js/types": "0.2.
|
|
32
|
+
"@zag-js/core": "0.1.9",
|
|
33
|
+
"@zag-js/types": "0.2.3"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zag-js/dom-utils": "0.1.
|
|
37
|
-
"@zag-js/utils": "0.1.
|
|
36
|
+
"@zag-js/dom-utils": "0.1.8",
|
|
37
|
+
"@zag-js/utils": "0.1.3"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
|
-
"build
|
|
41
|
-
"start": "
|
|
42
|
-
"build": "
|
|
40
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
41
|
+
"start": "pnpm build --watch",
|
|
42
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
43
43
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
44
44
|
"lint": "eslint src --ext .ts,.tsx",
|
|
45
|
-
"test
|
|
46
|
-
"test
|
|
45
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
46
|
+
"test-watch": "pnpm test --watch -u",
|
|
47
|
+
"typecheck": "tsc --noEmit"
|
|
47
48
|
}
|
|
48
|
-
}
|
|
49
|
+
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
2
|
-
import type { Send, State } from "./pin-input.types";
|
|
3
|
-
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
4
|
-
value: string[];
|
|
5
|
-
valueAsString: string;
|
|
6
|
-
isValueComplete: boolean;
|
|
7
|
-
setValue(value: string[]): void;
|
|
8
|
-
clearValue(): void;
|
|
9
|
-
setValueAtIndex(index: number, value: string): void;
|
|
10
|
-
focus(): void;
|
|
11
|
-
rootProps: T["element"];
|
|
12
|
-
hiddenInputProps: T["input"];
|
|
13
|
-
getInputProps({ index }: {
|
|
14
|
-
index: number;
|
|
15
|
-
}): T["input"];
|
|
16
|
-
};
|
package/dist/pin-input.dom.d.ts
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { MachineContext as Ctx } from "./pin-input.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getRootNode: (ctx: {
|
|
4
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
5
|
-
}) => Document | ShadowRoot;
|
|
6
|
-
getDoc: (ctx: {
|
|
7
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
8
|
-
}) => Document;
|
|
9
|
-
getWin: (ctx: {
|
|
10
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
11
|
-
}) => Window & typeof globalThis;
|
|
12
|
-
getActiveElement: (ctx: {
|
|
13
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
14
|
-
}) => HTMLElement;
|
|
15
|
-
getById: <T_1 = HTMLElement>(ctx: {
|
|
16
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
17
|
-
}, id: string) => T_1;
|
|
18
|
-
} & {
|
|
19
|
-
getRootId: (ctx: Ctx) => string;
|
|
20
|
-
getInputId: (ctx: Ctx, id: string) => string;
|
|
21
|
-
getHiddenInputId: (ctx: Ctx) => string;
|
|
22
|
-
getRootEl: (ctx: Ctx) => HTMLElement;
|
|
23
|
-
getElements: (ctx: Ctx) => HTMLInputElement[];
|
|
24
|
-
getFocusedEl: (ctx: Ctx) => HTMLInputElement;
|
|
25
|
-
getFirstInputEl: (ctx: Ctx) => HTMLInputElement;
|
|
26
|
-
getHiddenInputEl: (ctx: Ctx) => HTMLInputElement;
|
|
27
|
-
};
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
|
|
3
|
-
declare type IntlMessages = {
|
|
4
|
-
inputLabel: (index: number, length: number) => string;
|
|
5
|
-
};
|
|
6
|
-
declare type ElementIds = Partial<{
|
|
7
|
-
root: string;
|
|
8
|
-
hiddenInput: string;
|
|
9
|
-
input(id: string): string;
|
|
10
|
-
}>;
|
|
11
|
-
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
12
|
-
/**
|
|
13
|
-
* The name of the input element. Useful for form submission.
|
|
14
|
-
*/
|
|
15
|
-
name?: string;
|
|
16
|
-
/**
|
|
17
|
-
* The regular expression that the user-entered input value is checked against.
|
|
18
|
-
*/
|
|
19
|
-
pattern?: string;
|
|
20
|
-
/**
|
|
21
|
-
* The ids of the elements in the pin input. Useful for composition.
|
|
22
|
-
*/
|
|
23
|
-
ids?: ElementIds;
|
|
24
|
-
/**
|
|
25
|
-
* Whether the inputs are disabled
|
|
26
|
-
*/
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* The placeholder text for the input
|
|
30
|
-
*/
|
|
31
|
-
placeholder?: string;
|
|
32
|
-
/**
|
|
33
|
-
* Whether to auto-focus the first input.
|
|
34
|
-
*/
|
|
35
|
-
autoFocus?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Whether the pin input is in the invalid state
|
|
38
|
-
*/
|
|
39
|
-
invalid?: boolean;
|
|
40
|
-
/**
|
|
41
|
-
* If `true`, the pin input component signals to its fields that they should
|
|
42
|
-
* use `autocomplete="one-time-code"`.
|
|
43
|
-
*/
|
|
44
|
-
otp?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
* The value of the the pin input.
|
|
47
|
-
*/
|
|
48
|
-
value: string[];
|
|
49
|
-
/**
|
|
50
|
-
* The type of value the pin-input should allow
|
|
51
|
-
*/
|
|
52
|
-
type?: "alphanumeric" | "numeric" | "alphabetic";
|
|
53
|
-
/**
|
|
54
|
-
* Function called when all inputs have valid values
|
|
55
|
-
*/
|
|
56
|
-
onComplete?: (details: {
|
|
57
|
-
value: string[];
|
|
58
|
-
valueAsString: string;
|
|
59
|
-
}) => void;
|
|
60
|
-
/**
|
|
61
|
-
* Function called on input change
|
|
62
|
-
*/
|
|
63
|
-
onChange?: (details: {
|
|
64
|
-
value: string[];
|
|
65
|
-
}) => void;
|
|
66
|
-
/**
|
|
67
|
-
* Function called when an invalid value is entered
|
|
68
|
-
*/
|
|
69
|
-
onInvalid?: (details: {
|
|
70
|
-
value: string;
|
|
71
|
-
index: number;
|
|
72
|
-
}) => void;
|
|
73
|
-
/**
|
|
74
|
-
* If `true`, the input's value will be masked just like `type=password`
|
|
75
|
-
*/
|
|
76
|
-
mask?: boolean;
|
|
77
|
-
/**
|
|
78
|
-
* Whether to blur the input when the value is complete
|
|
79
|
-
*/
|
|
80
|
-
blurOnComplete?: boolean;
|
|
81
|
-
/**
|
|
82
|
-
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
83
|
-
*/
|
|
84
|
-
messages: IntlMessages;
|
|
85
|
-
};
|
|
86
|
-
export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
87
|
-
declare type ComputedContext = Readonly<{
|
|
88
|
-
/**
|
|
89
|
-
* @computed
|
|
90
|
-
* The number of inputs
|
|
91
|
-
*/
|
|
92
|
-
valueLength: number;
|
|
93
|
-
/**
|
|
94
|
-
* @computed
|
|
95
|
-
* The number of inputs that are not empty
|
|
96
|
-
*/
|
|
97
|
-
filledValueLength: number;
|
|
98
|
-
/**
|
|
99
|
-
* @computed
|
|
100
|
-
* Whether all input values are valid
|
|
101
|
-
*/
|
|
102
|
-
isValueComplete: boolean;
|
|
103
|
-
/**
|
|
104
|
-
* @computed
|
|
105
|
-
* The string representation of the input values
|
|
106
|
-
*/
|
|
107
|
-
valueAsString: string;
|
|
108
|
-
}>;
|
|
109
|
-
declare type PrivateContext = Context<{
|
|
110
|
-
/**
|
|
111
|
-
* @internal
|
|
112
|
-
* The index of the input field that has focus
|
|
113
|
-
*/
|
|
114
|
-
focusedIndex: number;
|
|
115
|
-
}>;
|
|
116
|
-
export declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
117
|
-
export declare type MachineState = {
|
|
118
|
-
value: "unknown" | "idle" | "focused";
|
|
119
|
-
};
|
|
120
|
-
export declare type State = S.State<MachineContext, MachineState>;
|
|
121
|
-
export declare type Send = S.Send<S.AnyEventObject>;
|
|
122
|
-
export {};
|