@intlayer/design-system 7.1.4 → 7.1.6
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/esm/components/Browser/Browser.content.mjs +10 -5
- package/dist/esm/components/Browser/Browser.content.mjs.map +1 -1
- package/dist/esm/libs/auth.mjs.map +1 -1
- package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts +3 -3
- package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts.map +1 -1
- package/dist/types/components/Breadcrumb/index.d.ts.map +1 -1
- package/dist/types/components/Browser/Browser.content.d.ts +21 -11
- package/dist/types/components/Browser/Browser.content.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts +5 -5
- package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts +4 -4
- package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts.map +1 -1
- package/dist/types/components/Command/index.d.ts +2 -2
- package/dist/types/components/Container/index.d.ts +9 -9
- package/dist/types/components/Container/index.d.ts.map +1 -1
- package/dist/types/components/CopyButton/CopyButton.content.d.ts +3 -3
- package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.d.ts +25 -25
- package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.content.d.ts +9 -9
- package/dist/types/components/DictionaryFieldEditor/DictionaryDetails/dictionaryDetails.content.d.ts +33 -33
- package/dist/types/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.content.d.ts +25 -25
- package/dist/types/components/DictionaryFieldEditor/NavigationView/navigationViewNode.content.d.ts +25 -25
- package/dist/types/components/DictionaryFieldEditor/SaveForm/saveForm.content.d.ts +33 -33
- package/dist/types/components/DictionaryFieldEditor/StructureView/structureView.content.d.ts +9 -9
- package/dist/types/components/DictionaryFieldEditor/VersionSwitcherDropDown/versionSwitcherDropDown.content.d.ts +7 -7
- package/dist/types/components/DictionaryFieldEditor/dictionaryFieldEditor.content.d.ts +5 -5
- package/dist/types/components/DictionaryFieldEditor/nodeTypeSelector.content.d.ts +31 -31
- package/dist/types/components/DictionaryFieldEditor/nodeTypeSelector.content.d.ts.map +1 -1
- package/dist/types/components/ExpandCollapse/expandCollapse.content.d.ts +3 -3
- package/dist/types/components/Form/FormBase.d.ts +2 -2
- package/dist/types/components/Form/FormBase.d.ts.map +1 -1
- package/dist/types/components/Form/FormField.d.ts +2 -2
- package/dist/types/components/Form/FormField.d.ts.map +1 -1
- package/dist/types/components/Form/FormItem.d.ts +2 -2
- package/dist/types/components/Form/elements/EditableFieldInputElement.d.ts +2 -2
- package/dist/types/components/Form/elements/EditableFieldTextAreaElement.d.ts +2 -2
- package/dist/types/components/Form/elements/FormElement.d.ts +2 -2
- package/dist/types/components/Form/elements/OTPElement.d.ts +2 -2
- package/dist/types/components/Form/elements/SelectElement.d.ts +2 -2
- package/dist/types/components/Form/elements/SwitchSelectorElement.d.ts +2 -2
- package/dist/types/components/IDE/CodeContext.d.ts +2 -2
- package/dist/types/components/IDE/code.content.d.ts +5 -5
- package/dist/types/components/IDE/code.content.d.ts.map +1 -1
- package/dist/types/components/IDE/copyCode.content.d.ts +5 -5
- package/dist/types/components/Input/Checkbox.d.ts +4 -4
- package/dist/types/components/Input/Checkbox.d.ts.map +1 -1
- package/dist/types/components/Input/Input.d.ts +2 -2
- package/dist/types/components/Input/OTPInput.d.ts +5 -5
- package/dist/types/components/Input/SearchInput.d.ts +2 -2
- package/dist/types/components/Link/Link.d.ts +3 -3
- package/dist/types/components/Link/Link.d.ts.map +1 -1
- package/dist/types/components/Loader/index.content.d.ts +3 -3
- package/dist/types/components/Loader/index.content.d.ts.map +1 -1
- package/dist/types/components/Loader/spinner.d.ts +2 -2
- package/dist/types/components/Loader/spinner.d.ts.map +1 -1
- package/dist/types/components/LocaleSwitcherContentDropDown/localeSwitcher.content.d.ts +17 -17
- package/dist/types/components/LocaleSwitcherContentDropDown/localeSwitcher.content.d.ts.map +1 -1
- package/dist/types/components/LocaleSwitcherDropDown/localeSwitcher.content.d.ts +13 -13
- package/dist/types/components/LocaleSwitcherDropDown/localeSwitcher.content.d.ts.map +1 -1
- package/dist/types/components/Navbar/Burger.d.ts +2 -2
- package/dist/types/components/Navbar/DesktopNavbar.d.ts +2 -2
- package/dist/types/components/Navbar/DesktopNavbar.d.ts.map +1 -1
- package/dist/types/components/Navbar/MobileNavbar.d.ts +2 -2
- package/dist/types/components/Navbar/index.d.ts +2 -2
- package/dist/types/components/Navbar/index.d.ts.map +1 -1
- package/dist/types/components/Pagination/Pagination.d.ts +4 -4
- package/dist/types/components/Pagination/Pagination.d.ts.map +1 -1
- package/dist/types/components/Pagination/pagination.content.d.ts +11 -11
- package/dist/types/components/Popover/static.d.ts +3 -3
- package/dist/types/components/RightDrawer/useRightDrawerStore.d.ts +2 -2
- package/dist/types/components/Select/Select.d.ts +3 -3
- package/dist/types/components/SocialNetworks/index.d.ts +2 -2
- package/dist/types/components/SocialNetworks/index.d.ts.map +1 -1
- package/dist/types/components/SwitchSelector/index.d.ts +7 -7
- package/dist/types/components/SwitchSelector/index.d.ts.map +1 -1
- package/dist/types/components/Tab/Tab.d.ts +5 -5
- package/dist/types/components/Tab/Tab.d.ts.map +1 -1
- package/dist/types/components/Tab/TabContext.d.ts +2 -2
- package/dist/types/components/TabSelector/TabSelector.d.ts +3 -3
- package/dist/types/components/TabSelector/TabSelector.d.ts.map +1 -1
- package/dist/types/components/Table/table.content.d.ts +3 -3
- package/dist/types/components/Table/table.content.d.ts.map +1 -1
- package/dist/types/components/Tag/index.d.ts +5 -5
- package/dist/types/components/Tag/index.d.ts.map +1 -1
- package/dist/types/components/Toaster/Toast.d.ts +3 -3
- package/dist/types/components/Toaster/Toast.d.ts.map +1 -1
- package/dist/types/components/Toaster/Toaster.d.ts +2 -2
- package/dist/types/components/Toaster/Toaster.d.ts.map +1 -1
- package/dist/types/hooks/reactQuery.d.ts +73 -1257
- package/dist/types/hooks/reactQuery.d.ts.map +1 -1
- package/dist/types/hooks/useAuth/useOAuth2.d.ts +1 -2
- package/dist/types/hooks/useAuth/useOAuth2.d.ts.map +1 -1
- package/dist/types/hooks/useScrollBlockage/useScrollBlockageStore.d.ts +2 -2
- package/dist/types/hooks/useUser/index.d.ts +3 -20
- package/dist/types/hooks/useUser/index.d.ts.map +1 -1
- package/dist/types/libs/auth.d.ts +5574 -2316
- package/dist/types/libs/auth.d.ts.map +1 -1
- package/package.json +15 -14
- package/dist/esm/components/Form/elements/CodeInputElement.mjs +0 -40
- package/dist/esm/components/Form/elements/CodeInputElement.mjs.map +0 -1
- package/dist/esm/components/Input/CodeInput.mjs +0 -84
- package/dist/esm/components/Input/CodeInput.mjs.map +0 -1
- package/dist/esm/components/Input/OTPInput/Input.mjs +0 -426
- package/dist/esm/components/Input/OTPInput/Input.mjs.map +0 -1
- package/dist/esm/components/Input/OTPInput/index.mjs +0 -495
- package/dist/esm/components/Input/OTPInput/index.mjs.map +0 -1
- package/dist/types/Checkbox.d.ts +0 -2
- package/dist/types/Input.d.ts +0 -16
- package/dist/types/Input.d.ts.map +0 -1
- package/dist/types/InputPassword.d.ts +0 -2
- package/dist/types/OTPElement.d.ts +0 -30
- package/dist/types/OTPElement.d.ts.map +0 -1
- package/dist/types/OTPInput.d.ts +0 -3
- package/dist/types/SearchInput.d.ts +0 -1
- package/dist/types/components/Input/OTPInput/Input.d.ts +0 -57
- package/dist/types/components/Input/OTPInput/Input.d.ts.map +0 -1
- package/dist/types/components/Input/OTPInput/index.d.ts +0 -78
- package/dist/types/components/Input/OTPInput/index.d.ts.map +0 -1
- package/dist/types/index.d.ts +0 -5
|
@@ -1,426 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { createContext, useEffect, useRef, useState } from "react";
|
|
5
|
-
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
|
|
7
|
-
//#region src/components/Input/OTPInput/Input.tsx
|
|
8
|
-
const syncTimeouts = (cb) => {
|
|
9
|
-
return [
|
|
10
|
-
setTimeout(cb, 0),
|
|
11
|
-
setTimeout(cb, 10),
|
|
12
|
-
setTimeout(cb, 50)
|
|
13
|
-
];
|
|
14
|
-
};
|
|
15
|
-
const PWM_BADGE_MARGIN_RIGHT = 18;
|
|
16
|
-
const PWM_BADGE_SPACE_WIDTH_PX = 40;
|
|
17
|
-
const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
|
|
18
|
-
const PASSWORD_MANAGERS_SELECTORS = [
|
|
19
|
-
"[data-lastpass-icon-root]",
|
|
20
|
-
"com-1password-button",
|
|
21
|
-
"[data-dashlanecreated]",
|
|
22
|
-
"[style$=\"2147483647 !important;\"]"
|
|
23
|
-
].join(",");
|
|
24
|
-
const usePasswordManagerBadge = ({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused }) => {
|
|
25
|
-
/** Password managers have a badge
|
|
26
|
-
* and I'll use this state to push them
|
|
27
|
-
* outside the input */
|
|
28
|
-
const [hasPWMBadge, setHasPWMBadge] = useState(false);
|
|
29
|
-
const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = useState(false);
|
|
30
|
-
const [done, setDone] = useState(false);
|
|
31
|
-
const willPushPWMBadge = pushPasswordManagerStrategy === "none" ? false : (pushPasswordManagerStrategy === "increase-width" || pushPasswordManagerStrategy === "experimental-no-flickering") && hasPWMBadge && hasPWMBadgeSpace;
|
|
32
|
-
const trackPWMBadge = () => {
|
|
33
|
-
const container = containerRef.current;
|
|
34
|
-
const input = inputRef.current;
|
|
35
|
-
if (!container || !input || done || pushPasswordManagerStrategy === "none") return;
|
|
36
|
-
const elementToCompare = container;
|
|
37
|
-
const rightCornerX = elementToCompare.getBoundingClientRect().left + elementToCompare.offsetWidth;
|
|
38
|
-
const centereredY = elementToCompare.getBoundingClientRect().top + elementToCompare.offsetHeight / 2;
|
|
39
|
-
const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
|
|
40
|
-
const y = centereredY;
|
|
41
|
-
if (document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS).length === 0) {
|
|
42
|
-
if (document.elementFromPoint(x, y) === container) return;
|
|
43
|
-
}
|
|
44
|
-
setHasPWMBadge(true);
|
|
45
|
-
setDone(true);
|
|
46
|
-
};
|
|
47
|
-
useEffect(() => {
|
|
48
|
-
const container = containerRef.current;
|
|
49
|
-
if (!container || pushPasswordManagerStrategy === "none") return;
|
|
50
|
-
const checkHasSpace = () => {
|
|
51
|
-
setHasPWMBadgeSpace(window.innerWidth - container.getBoundingClientRect().right >= PWM_BADGE_SPACE_WIDTH_PX);
|
|
52
|
-
};
|
|
53
|
-
checkHasSpace();
|
|
54
|
-
const interval = setInterval(checkHasSpace, 1e3);
|
|
55
|
-
return () => {
|
|
56
|
-
clearInterval(interval);
|
|
57
|
-
};
|
|
58
|
-
}, [containerRef, pushPasswordManagerStrategy]);
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
const _isFocused = isFocused || document.activeElement === inputRef.current;
|
|
61
|
-
if (pushPasswordManagerStrategy === "none" || !_isFocused) return;
|
|
62
|
-
const t1 = setTimeout(trackPWMBadge, 0);
|
|
63
|
-
const t2 = setTimeout(trackPWMBadge, 2e3);
|
|
64
|
-
const t3 = setTimeout(trackPWMBadge, 5e3);
|
|
65
|
-
const t4 = setTimeout(() => {
|
|
66
|
-
setDone(true);
|
|
67
|
-
}, 6e3);
|
|
68
|
-
return () => {
|
|
69
|
-
clearTimeout(t1);
|
|
70
|
-
clearTimeout(t2);
|
|
71
|
-
clearTimeout(t3);
|
|
72
|
-
clearTimeout(t4);
|
|
73
|
-
};
|
|
74
|
-
}, [
|
|
75
|
-
inputRef,
|
|
76
|
-
isFocused,
|
|
77
|
-
pushPasswordManagerStrategy
|
|
78
|
-
]);
|
|
79
|
-
return {
|
|
80
|
-
hasPWMBadge,
|
|
81
|
-
willPushPWMBadge,
|
|
82
|
-
PWM_BADGE_SPACE_WIDTH
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
|
-
const usePrevious = (value) => {
|
|
86
|
-
const ref = useRef(void 0);
|
|
87
|
-
useEffect(() => {
|
|
88
|
-
ref.current = value;
|
|
89
|
-
});
|
|
90
|
-
return ref.current;
|
|
91
|
-
};
|
|
92
|
-
const OTPInputContext = createContext({});
|
|
93
|
-
const OTPInput = ({ value: uncheckedValue, onChange: uncheckedOnChange, maxLength, textAlign = "left", pattern, placeholder, inputMode = "numeric", onComplete, pushPasswordManagerStrategy = "increase-width", pasteTransformer, containerClassName, noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK, render, children, ...props }) => {
|
|
94
|
-
const [internalValue, setInternalValue] = useState(typeof props.defaultValue === "string" ? props.defaultValue : "");
|
|
95
|
-
const value = uncheckedValue ?? internalValue;
|
|
96
|
-
const previousValue = usePrevious(value);
|
|
97
|
-
const onChange = (newValue) => {
|
|
98
|
-
uncheckedOnChange?.(newValue);
|
|
99
|
-
setInternalValue(newValue);
|
|
100
|
-
};
|
|
101
|
-
const regexp = pattern !== void 0 ? typeof pattern === "string" ? new RegExp(pattern) : pattern : null;
|
|
102
|
-
/** useRef */
|
|
103
|
-
const inputRef = useRef(null);
|
|
104
|
-
const containerRef = useRef(null);
|
|
105
|
-
const initialLoadRef = useRef({
|
|
106
|
-
value,
|
|
107
|
-
onChange,
|
|
108
|
-
isIOS: typeof window !== "undefined" && window?.CSS?.supports?.("-webkit-touch-callout", "none")
|
|
109
|
-
});
|
|
110
|
-
const inputMetadataRef = useRef({ prev: [
|
|
111
|
-
inputRef.current?.selectionStart ?? null,
|
|
112
|
-
inputRef.current?.selectionEnd ?? null,
|
|
113
|
-
inputRef.current?.selectionDirection ?? "none"
|
|
114
|
-
] });
|
|
115
|
-
useEffect(() => {
|
|
116
|
-
const input = inputRef.current;
|
|
117
|
-
const container = containerRef.current;
|
|
118
|
-
if (!input || !container) return;
|
|
119
|
-
if (initialLoadRef.current.value !== input.value) initialLoadRef.current.onChange(input.value);
|
|
120
|
-
inputMetadataRef.current.prev = [
|
|
121
|
-
input.selectionStart,
|
|
122
|
-
input.selectionEnd,
|
|
123
|
-
input.selectionDirection ?? "none"
|
|
124
|
-
];
|
|
125
|
-
const onDocumentSelectionChange = () => {
|
|
126
|
-
if (document.activeElement !== input) {
|
|
127
|
-
setMirrorSelectionStart(null);
|
|
128
|
-
setMirrorSelectionEnd(null);
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
const _s = input.selectionStart;
|
|
132
|
-
const _e = input.selectionEnd;
|
|
133
|
-
const _dir = input.selectionDirection;
|
|
134
|
-
const _ml = input.maxLength;
|
|
135
|
-
const _val = input.value;
|
|
136
|
-
const _prev = inputMetadataRef.current.prev;
|
|
137
|
-
let start = -1;
|
|
138
|
-
let end = -1;
|
|
139
|
-
let direction = _dir ?? "none";
|
|
140
|
-
if (_val.length !== 0 && _s !== null && _e !== null) {
|
|
141
|
-
const isSingleCaret = _s === _e;
|
|
142
|
-
const isInsertMode = _s === _val.length && _val.length < _ml;
|
|
143
|
-
if (isSingleCaret && !isInsertMode) {
|
|
144
|
-
const c = _s;
|
|
145
|
-
if (c === 0) {
|
|
146
|
-
start = 0;
|
|
147
|
-
end = 1;
|
|
148
|
-
direction = "forward";
|
|
149
|
-
} else if (c === _ml) {
|
|
150
|
-
start = c - 1;
|
|
151
|
-
end = c;
|
|
152
|
-
direction = "backward";
|
|
153
|
-
} else if (_ml > 1 && _val.length > 1) {
|
|
154
|
-
let offset = 0;
|
|
155
|
-
if (_prev[0] !== null && _prev[1] !== null) {
|
|
156
|
-
direction = c < _prev[1] ? "backward" : "forward";
|
|
157
|
-
const wasPreviouslyInserting = _prev[0] === _prev[1] && _prev[0] < _ml;
|
|
158
|
-
if (direction === "backward" && !wasPreviouslyInserting) offset = -1;
|
|
159
|
-
}
|
|
160
|
-
start = offset + c;
|
|
161
|
-
end = offset + c + 1;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
if (start !== -1 && end !== -1 && start !== end) inputRef.current?.setSelectionRange(start, end, direction);
|
|
165
|
-
}
|
|
166
|
-
const s = start !== -1 ? start : _s;
|
|
167
|
-
const e = end !== -1 ? end : _e;
|
|
168
|
-
const dir = direction;
|
|
169
|
-
setMirrorSelectionStart(s);
|
|
170
|
-
setMirrorSelectionEnd(e);
|
|
171
|
-
inputMetadataRef.current.prev = [
|
|
172
|
-
s,
|
|
173
|
-
e,
|
|
174
|
-
dir
|
|
175
|
-
];
|
|
176
|
-
};
|
|
177
|
-
document.addEventListener("selectionchange", onDocumentSelectionChange, { capture: true });
|
|
178
|
-
onDocumentSelectionChange();
|
|
179
|
-
if (document.activeElement === input) setIsFocused(true);
|
|
180
|
-
if (!document.getElementById("input-otp-style")) {
|
|
181
|
-
const styleEl = document.createElement("style");
|
|
182
|
-
styleEl.id = "input-otp-style";
|
|
183
|
-
document.head.appendChild(styleEl);
|
|
184
|
-
if (styleEl.sheet) {
|
|
185
|
-
const autofillStyles = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
|
|
186
|
-
safeInsertRule(styleEl.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }");
|
|
187
|
-
safeInsertRule(styleEl.sheet, `[data-input-otp]:autofill { ${autofillStyles} }`);
|
|
188
|
-
safeInsertRule(styleEl.sheet, `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`);
|
|
189
|
-
safeInsertRule(styleEl.sheet, `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`);
|
|
190
|
-
safeInsertRule(styleEl.sheet, `[data-input-otp] + * { pointer-events: all !important; }`);
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
const updateRootHeight = () => {
|
|
194
|
-
if (container) container.style.setProperty("--root-height", `${input.clientHeight}px`);
|
|
195
|
-
};
|
|
196
|
-
updateRootHeight();
|
|
197
|
-
const resizeObserver = new ResizeObserver(updateRootHeight);
|
|
198
|
-
resizeObserver.observe(input);
|
|
199
|
-
return () => {
|
|
200
|
-
document.removeEventListener("selectionchange", onDocumentSelectionChange, { capture: true });
|
|
201
|
-
resizeObserver.disconnect();
|
|
202
|
-
};
|
|
203
|
-
}, []);
|
|
204
|
-
/** Mirrors for UI rendering purpose only */
|
|
205
|
-
const [isHoveringInput, setIsHoveringInput] = useState(false);
|
|
206
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
207
|
-
const [mirrorSelectionStart, setMirrorSelectionStart] = useState(null);
|
|
208
|
-
const [mirrorSelectionEnd, setMirrorSelectionEnd] = useState(null);
|
|
209
|
-
/** Effects */
|
|
210
|
-
useEffect(() => {
|
|
211
|
-
syncTimeouts(() => {
|
|
212
|
-
inputRef.current?.dispatchEvent(new Event("input"));
|
|
213
|
-
const s = inputRef.current?.selectionStart ?? null;
|
|
214
|
-
const e = inputRef.current?.selectionEnd ?? null;
|
|
215
|
-
const dir = inputRef.current?.selectionDirection ?? "none";
|
|
216
|
-
if (s !== null && e !== null) {
|
|
217
|
-
setMirrorSelectionStart(s);
|
|
218
|
-
setMirrorSelectionEnd(e);
|
|
219
|
-
inputMetadataRef.current.prev = [
|
|
220
|
-
s,
|
|
221
|
-
e,
|
|
222
|
-
dir
|
|
223
|
-
];
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
}, [value, isFocused]);
|
|
227
|
-
useEffect(() => {
|
|
228
|
-
if (previousValue === void 0) return;
|
|
229
|
-
if (value !== previousValue && previousValue.length < maxLength && value.length === maxLength) onComplete?.(value);
|
|
230
|
-
}, [
|
|
231
|
-
maxLength,
|
|
232
|
-
onComplete,
|
|
233
|
-
previousValue,
|
|
234
|
-
value
|
|
235
|
-
]);
|
|
236
|
-
const pwmb = usePasswordManagerBadge({
|
|
237
|
-
containerRef,
|
|
238
|
-
inputRef,
|
|
239
|
-
pushPasswordManagerStrategy,
|
|
240
|
-
isFocused
|
|
241
|
-
});
|
|
242
|
-
/** Event handlers */
|
|
243
|
-
const _changeListener = (e) => {
|
|
244
|
-
const newValue = e.currentTarget.value.slice(0, maxLength);
|
|
245
|
-
if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
|
|
246
|
-
e.preventDefault();
|
|
247
|
-
return;
|
|
248
|
-
}
|
|
249
|
-
if (typeof previousValue === "string" && newValue.length < previousValue.length) document.dispatchEvent(new Event("selectionchange"));
|
|
250
|
-
onChange(newValue);
|
|
251
|
-
};
|
|
252
|
-
const _focusListener = () => {
|
|
253
|
-
if (inputRef.current) {
|
|
254
|
-
const start = Math.min(inputRef.current.value.length, maxLength - 1);
|
|
255
|
-
const end = inputRef.current.value.length;
|
|
256
|
-
inputRef.current?.setSelectionRange(start, end);
|
|
257
|
-
setMirrorSelectionStart(start);
|
|
258
|
-
setMirrorSelectionEnd(end);
|
|
259
|
-
}
|
|
260
|
-
setIsFocused(true);
|
|
261
|
-
};
|
|
262
|
-
const _pasteListener = (e) => {
|
|
263
|
-
const input = inputRef.current;
|
|
264
|
-
if (!pasteTransformer && (!initialLoadRef.current.isIOS || !e.clipboardData || !input)) return;
|
|
265
|
-
const _content = e.clipboardData.getData("text/plain");
|
|
266
|
-
const content = pasteTransformer ? pasteTransformer(_content) : _content;
|
|
267
|
-
e.preventDefault();
|
|
268
|
-
const start = inputRef.current?.selectionStart;
|
|
269
|
-
const end = inputRef.current?.selectionEnd;
|
|
270
|
-
const newValue = (start !== end ? value.slice(0, start ?? 0) + content + value.slice(end ?? 0) : value.slice(0, start ?? 0) + content + value.slice(start ?? 0)).slice(0, maxLength);
|
|
271
|
-
if (newValue.length > 0 && regexp && !regexp.test(newValue)) return;
|
|
272
|
-
if (input) {
|
|
273
|
-
input.value = newValue;
|
|
274
|
-
onChange(newValue);
|
|
275
|
-
const _start = Math.min(newValue.length, maxLength - 1);
|
|
276
|
-
const _end = newValue.length;
|
|
277
|
-
input.setSelectionRange(_start, _end);
|
|
278
|
-
setMirrorSelectionStart(_start);
|
|
279
|
-
setMirrorSelectionEnd(_end);
|
|
280
|
-
}
|
|
281
|
-
};
|
|
282
|
-
/** Styles */
|
|
283
|
-
const rootStyle = {
|
|
284
|
-
position: "relative",
|
|
285
|
-
cursor: props.disabled ? "default" : "text",
|
|
286
|
-
userSelect: "none",
|
|
287
|
-
WebkitUserSelect: "none",
|
|
288
|
-
pointerEvents: "none"
|
|
289
|
-
};
|
|
290
|
-
const inputStyle = {
|
|
291
|
-
position: "absolute",
|
|
292
|
-
inset: 0,
|
|
293
|
-
width: pwmb.willPushPWMBadge ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})` : "100%",
|
|
294
|
-
clipPath: pwmb.willPushPWMBadge ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0,
|
|
295
|
-
height: "100%",
|
|
296
|
-
display: "flex",
|
|
297
|
-
textAlign,
|
|
298
|
-
opacity: "1",
|
|
299
|
-
color: "transparent",
|
|
300
|
-
pointerEvents: "all",
|
|
301
|
-
background: "transparent",
|
|
302
|
-
caretColor: "transparent",
|
|
303
|
-
border: "0 solid transparent",
|
|
304
|
-
outline: "0 solid transparent",
|
|
305
|
-
boxShadow: "none",
|
|
306
|
-
lineHeight: "1",
|
|
307
|
-
letterSpacing: "-.5em",
|
|
308
|
-
fontSize: "var(--root-height)",
|
|
309
|
-
fontFamily: "monospace",
|
|
310
|
-
zIndex: -1,
|
|
311
|
-
fontVariantNumeric: "tabular-nums"
|
|
312
|
-
};
|
|
313
|
-
/** Rendering */
|
|
314
|
-
const renderedInput = /* @__PURE__ */ jsx("input", {
|
|
315
|
-
autoComplete: props.autoComplete || "one-time-code",
|
|
316
|
-
...props,
|
|
317
|
-
"data-input-otp": true,
|
|
318
|
-
"data-input-otp-placeholder-shown": value.length === 0 || void 0,
|
|
319
|
-
"data-input-otp-mss": mirrorSelectionStart,
|
|
320
|
-
"data-input-otp-mse": mirrorSelectionEnd,
|
|
321
|
-
inputMode,
|
|
322
|
-
pattern: regexp?.source,
|
|
323
|
-
"aria-placeholder": placeholder,
|
|
324
|
-
style: inputStyle,
|
|
325
|
-
maxLength,
|
|
326
|
-
value,
|
|
327
|
-
ref: inputRef,
|
|
328
|
-
onPaste: (e) => {
|
|
329
|
-
_pasteListener(e);
|
|
330
|
-
props.onPaste?.(e);
|
|
331
|
-
},
|
|
332
|
-
onChange: _changeListener,
|
|
333
|
-
onMouseOver: (e) => {
|
|
334
|
-
setIsHoveringInput(true);
|
|
335
|
-
props.onMouseOver?.(e);
|
|
336
|
-
},
|
|
337
|
-
onMouseLeave: (e) => {
|
|
338
|
-
setIsHoveringInput(false);
|
|
339
|
-
props.onMouseLeave?.(e);
|
|
340
|
-
},
|
|
341
|
-
onFocus: (e) => {
|
|
342
|
-
_focusListener();
|
|
343
|
-
props.onFocus?.(e);
|
|
344
|
-
},
|
|
345
|
-
onBlur: (e) => {
|
|
346
|
-
setIsFocused(false);
|
|
347
|
-
props.onBlur?.(e);
|
|
348
|
-
}
|
|
349
|
-
});
|
|
350
|
-
const setSelection = (index) => {
|
|
351
|
-
const input = inputRef.current;
|
|
352
|
-
if (!input || props.disabled) return;
|
|
353
|
-
const clampedIndex = Math.max(0, Math.min(index, maxLength - 1));
|
|
354
|
-
if (document.activeElement !== input) input.focus();
|
|
355
|
-
const hasChar = value[clampedIndex] !== void 0;
|
|
356
|
-
const start = clampedIndex;
|
|
357
|
-
const end = hasChar ? clampedIndex + 1 : clampedIndex;
|
|
358
|
-
input.setSelectionRange(start, end);
|
|
359
|
-
setMirrorSelectionStart(start);
|
|
360
|
-
setMirrorSelectionEnd(end);
|
|
361
|
-
setIsFocused(true);
|
|
362
|
-
};
|
|
363
|
-
const contextValue = {
|
|
364
|
-
slots: Array.from({ length: maxLength }).map((_, slotIdx) => {
|
|
365
|
-
const isActive = isFocused && mirrorSelectionStart !== null && mirrorSelectionEnd !== null && (mirrorSelectionStart === mirrorSelectionEnd && slotIdx === mirrorSelectionStart || slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd);
|
|
366
|
-
const char = value[slotIdx] !== void 0 ? value[slotIdx] : null;
|
|
367
|
-
return {
|
|
368
|
-
char,
|
|
369
|
-
placeholderChar: value[0] !== void 0 ? null : placeholder?.[slotIdx] ?? null,
|
|
370
|
-
isActive,
|
|
371
|
-
hasFakeCaret: isActive && char === null
|
|
372
|
-
};
|
|
373
|
-
}),
|
|
374
|
-
isFocused,
|
|
375
|
-
isHovering: !props.disabled && isHoveringInput,
|
|
376
|
-
setSelection
|
|
377
|
-
};
|
|
378
|
-
const renderedChildren = render !== void 0 ? render(contextValue) : /* @__PURE__ */ jsx(OTPInputContext.Provider, {
|
|
379
|
-
value: contextValue,
|
|
380
|
-
children
|
|
381
|
-
});
|
|
382
|
-
return /* @__PURE__ */ jsxs(Fragment$1, { children: [noScriptCSSFallback !== null && /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx("style", { children: noScriptCSSFallback }) }), /* @__PURE__ */ jsxs("div", {
|
|
383
|
-
ref: containerRef,
|
|
384
|
-
"data-input-otp-container": true,
|
|
385
|
-
style: rootStyle,
|
|
386
|
-
className: containerClassName,
|
|
387
|
-
children: [renderedChildren, /* @__PURE__ */ jsx("div", {
|
|
388
|
-
style: {
|
|
389
|
-
position: "absolute",
|
|
390
|
-
inset: 0
|
|
391
|
-
},
|
|
392
|
-
children: renderedInput
|
|
393
|
-
})]
|
|
394
|
-
})] });
|
|
395
|
-
};
|
|
396
|
-
const safeInsertRule = (sheet, rule) => {
|
|
397
|
-
try {
|
|
398
|
-
sheet.insertRule(rule);
|
|
399
|
-
} catch {
|
|
400
|
-
console.error("input-otp could not insert CSS rule:", rule);
|
|
401
|
-
}
|
|
402
|
-
};
|
|
403
|
-
const NOSCRIPT_CSS_FALLBACK = `
|
|
404
|
-
[data-input-otp] {
|
|
405
|
-
--nojs-bg: white !important;
|
|
406
|
-
--nojs-fg: black !important;
|
|
407
|
-
|
|
408
|
-
background-color: var(--nojs-bg) !important;
|
|
409
|
-
color: var(--nojs-fg) !important;
|
|
410
|
-
caret-color: var(--nojs-fg) !important;
|
|
411
|
-
letter-spacing: .25em !important;
|
|
412
|
-
text-align: center !important;
|
|
413
|
-
border: 1px solid var(--nojs-fg) !important;
|
|
414
|
-
border-radius: 4px !important;
|
|
415
|
-
width: 100% !important;
|
|
416
|
-
}
|
|
417
|
-
@media (prefers-color-scheme: dark) {
|
|
418
|
-
[data-input-otp] {
|
|
419
|
-
--nojs-bg: black !important;
|
|
420
|
-
--nojs-fg: white !important;
|
|
421
|
-
}
|
|
422
|
-
}`;
|
|
423
|
-
|
|
424
|
-
//#endregion
|
|
425
|
-
export { OTPInput, OTPInputContext, usePasswordManagerBadge, usePrevious };
|
|
426
|
-
//# sourceMappingURL=Input.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input.mjs","names":["OTPInput: FC<OTPInputProps>","direction: 'forward' | 'backward' | 'none'","rootStyle: CSSProperties","inputStyle: CSSProperties","contextValue: RenderProps"],"sources":["../../../../../src/components/Input/OTPInput/Input.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ChangeEvent,\n type ClipboardEvent,\n type CSSProperties,\n createContext,\n type FC,\n type InputHTMLAttributes,\n type ReactNode,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst syncTimeouts = (cb: (...args: any[]) => unknown): number[] => {\n const t1 = setTimeout(cb, 0); // For faster machines\n const t2 = setTimeout(cb, 1_0);\n const t3 = setTimeout(cb, 5_0);\n return [t1, t2, t3];\n};\n\nexport type SlotProps = {\n isActive: boolean;\n char: string | null;\n placeholderChar: string | null;\n hasFakeCaret: boolean;\n};\nexport type RenderProps = {\n slots: SlotProps[];\n isFocused: boolean;\n isHovering: boolean;\n setSelection: (index: number) => void;\n};\ntype OverrideProps<T, R> = Omit<T, keyof R> & R;\ntype OTPInputBaseProps = OverrideProps<\n InputHTMLAttributes<HTMLInputElement>,\n {\n value?: string;\n onChange?: (newValue: string) => unknown;\n\n maxLength: number;\n\n textAlign?: 'left' | 'center' | 'right';\n\n onComplete?: (...args: any[]) => unknown;\n pushPasswordManagerStrategy?: 'increase-width' | 'none';\n pasteTransformer?: (pasted: string) => string;\n\n containerClassName?: string;\n\n noScriptCSSFallback?: string | null;\n }\n>;\n\ntype InputOTPRenderFn = (props: RenderProps) => ReactNode;\n\nexport type OTPInputProps = OTPInputBaseProps &\n (\n | {\n render: InputOTPRenderFn;\n children?: never;\n }\n | {\n render?: never;\n children: ReactNode;\n }\n );\n\nconst PWM_BADGE_MARGIN_RIGHT = 18;\nconst PWM_BADGE_SPACE_WIDTH_PX = 40;\nconst PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const;\n\nconst PASSWORD_MANAGERS_SELECTORS = [\n '[data-lastpass-icon-root]', // LastPass\n 'com-1password-button', // 1Password\n '[data-dashlanecreated]', // Dashlane\n '[style$=\"2147483647 !important;\"]', // Bitwarden\n].join(',');\n\nexport const usePasswordManagerBadge = ({\n containerRef,\n inputRef,\n pushPasswordManagerStrategy,\n isFocused,\n}: {\n containerRef: RefObject<HTMLDivElement | null>;\n inputRef: RefObject<HTMLInputElement | null>;\n pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy'];\n isFocused: boolean;\n}) => {\n /** Password managers have a badge\n * and I'll use this state to push them\n * outside the input */\n const [hasPWMBadge, setHasPWMBadge] = useState(false);\n const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = useState(false);\n const [done, setDone] = useState(false);\n\n const willPushPWMBadge =\n pushPasswordManagerStrategy === 'none'\n ? false\n : (pushPasswordManagerStrategy === 'increase-width' ||\n // TODO: remove 'experimental-no-flickering' support in 2.0.0\n pushPasswordManagerStrategy === 'experimental-no-flickering') &&\n hasPWMBadge &&\n hasPWMBadgeSpace;\n\n const trackPWMBadge = () => {\n const container = containerRef.current;\n const input = inputRef.current;\n if (\n !container ||\n !input ||\n done ||\n pushPasswordManagerStrategy === 'none'\n ) {\n return;\n }\n\n const elementToCompare = container;\n\n // Get the top right-center point of the container.\n // That is usually where most password managers place their badge.\n const rightCornerX =\n elementToCompare.getBoundingClientRect().left +\n elementToCompare.offsetWidth;\n const centereredY =\n elementToCompare.getBoundingClientRect().top +\n elementToCompare.offsetHeight / 2;\n const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;\n const y = centereredY;\n\n // Do an extra search to check for famous password managers\n const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS);\n\n // If no password manager is automatically detect,\n // we'll try to dispatch document.elementFromPoint\n // to identify badges\n if (pmws.length === 0) {\n const maybeBadgeEl = document.elementFromPoint(x, y);\n\n // If the found element is the input itself,\n // then we assume it's not a password manager badge.\n // We are not sure. Most times that means there isn't a badge.\n if (maybeBadgeEl === container) {\n return;\n }\n }\n\n setHasPWMBadge(true);\n setDone(true);\n };\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container || pushPasswordManagerStrategy === 'none') {\n return;\n }\n\n // Check if the PWM area is 100% visible\n const checkHasSpace = () => {\n const viewportWidth = window.innerWidth;\n const distanceToRightEdge =\n viewportWidth - container.getBoundingClientRect().right;\n setHasPWMBadgeSpace(distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX);\n };\n\n checkHasSpace();\n const interval = setInterval(checkHasSpace, 1000);\n\n return () => {\n clearInterval(interval);\n };\n }, [containerRef, pushPasswordManagerStrategy]);\n\n useEffect(() => {\n const _isFocused = isFocused || document.activeElement === inputRef.current;\n\n if (pushPasswordManagerStrategy === 'none' || !_isFocused) {\n return;\n }\n const t1 = setTimeout(trackPWMBadge, 0);\n const t2 = setTimeout(trackPWMBadge, 2000);\n const t3 = setTimeout(trackPWMBadge, 5000);\n const t4 = setTimeout(() => {\n setDone(true);\n }, 6000);\n return () => {\n clearTimeout(t1);\n clearTimeout(t2);\n clearTimeout(t3);\n clearTimeout(t4);\n };\n }, [inputRef, isFocused, pushPasswordManagerStrategy]);\n\n return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH };\n};\n\nexport const usePrevious = <T,>(value: T): T | undefined => {\n const ref = useRef<T | undefined>(undefined);\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n};\n\nexport const OTPInputContext = createContext<RenderProps>({} as RenderProps);\n\nexport const OTPInput: FC<OTPInputProps> = ({\n value: uncheckedValue,\n onChange: uncheckedOnChange,\n maxLength,\n textAlign = 'left',\n pattern,\n placeholder,\n inputMode = 'numeric',\n onComplete,\n pushPasswordManagerStrategy = 'increase-width',\n pasteTransformer,\n containerClassName,\n noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK,\n render,\n children,\n ...props\n}) => {\n // Only used when `value` state is not provided\n const [internalValue, setInternalValue] = useState(\n typeof props.defaultValue === 'string' ? props.defaultValue : ''\n );\n\n // Definitions\n const value = uncheckedValue ?? internalValue;\n const previousValue = usePrevious(value);\n const onChange = (newValue: string) => {\n uncheckedOnChange?.(newValue);\n setInternalValue(newValue);\n };\n const regexp =\n pattern !== undefined\n ? typeof pattern === 'string'\n ? new RegExp(pattern)\n : pattern\n : null;\n\n /** useRef */\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const initialLoadRef = useRef({\n value,\n onChange,\n isIOS:\n typeof window !== 'undefined' &&\n window?.CSS?.supports?.('-webkit-touch-callout', 'none'),\n });\n const inputMetadataRef = useRef<{\n prev: [number | null, number | null, 'none' | 'forward' | 'backward'];\n }>({\n prev: [\n inputRef.current?.selectionStart ?? null,\n inputRef.current?.selectionEnd ?? null,\n inputRef.current?.selectionDirection ?? 'none',\n ],\n });\n useEffect(() => {\n const input = inputRef.current;\n const container = containerRef.current;\n\n if (!input || !container) {\n return;\n }\n\n // Sync input value\n if (initialLoadRef.current.value !== input.value) {\n initialLoadRef.current.onChange(input.value);\n }\n\n // Previous selection\n inputMetadataRef.current.prev = [\n input.selectionStart,\n input.selectionEnd,\n input.selectionDirection ?? 'none',\n ];\n const onDocumentSelectionChange = () => {\n if (document.activeElement !== input) {\n setMirrorSelectionStart(null);\n setMirrorSelectionEnd(null);\n return;\n }\n\n // Aliases\n const _s = input.selectionStart;\n const _e = input.selectionEnd;\n const _dir = input.selectionDirection;\n const _ml = input.maxLength;\n const _val = input.value;\n const _prev = inputMetadataRef.current.prev;\n\n // Algorithm\n let start = -1;\n let end = -1;\n let direction: 'forward' | 'backward' | 'none' = _dir ?? 'none';\n if (_val.length !== 0 && _s !== null && _e !== null) {\n const isSingleCaret = _s === _e;\n const isInsertMode = _s === _val.length && _val.length < _ml;\n\n if (isSingleCaret && !isInsertMode) {\n const c = _s;\n if (c === 0) {\n start = 0;\n end = 1;\n direction = 'forward';\n } else if (c === _ml) {\n start = c - 1;\n end = c;\n direction = 'backward';\n } else if (_ml > 1 && _val.length > 1) {\n let offset = 0;\n if (_prev[0] !== null && _prev[1] !== null) {\n direction = c < _prev[1] ? 'backward' : 'forward';\n const wasPreviouslyInserting =\n _prev[0] === _prev[1] && _prev[0] < _ml;\n if (direction === 'backward' && !wasPreviouslyInserting) {\n offset = -1;\n }\n }\n\n start = offset + c;\n end = offset + c + 1;\n }\n }\n\n if (start !== -1 && end !== -1 && start !== end) {\n inputRef.current?.setSelectionRange(start, end, direction);\n }\n }\n\n // Finally, update the state\n const s = start !== -1 ? start : _s;\n const e = end !== -1 ? end : _e;\n const dir = direction;\n setMirrorSelectionStart(s);\n setMirrorSelectionEnd(e);\n // Store the previous selection value\n inputMetadataRef.current.prev = [s, e, dir];\n };\n document.addEventListener('selectionchange', onDocumentSelectionChange, {\n capture: true,\n });\n\n // Set initial mirror state\n onDocumentSelectionChange();\n if (document.activeElement === input) {\n setIsFocused(true);\n }\n\n // Apply needed styles\n if (!document.getElementById('input-otp-style')) {\n const styleEl = document.createElement('style');\n styleEl.id = 'input-otp-style';\n document.head.appendChild(styleEl);\n\n if (styleEl.sheet) {\n const autofillStyles =\n 'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';\n\n safeInsertRule(\n styleEl.sheet,\n '[data-input-otp]::selection { background: transparent !important; color: transparent !important; }'\n );\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp]:autofill { ${autofillStyles} }`\n );\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`\n );\n // iOS\n safeInsertRule(\n styleEl.sheet,\n `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`\n );\n // PWM badges\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp] + * { pointer-events: all !important; }`\n );\n }\n }\n // Track root height\n const updateRootHeight = () => {\n if (container) {\n container.style.setProperty('--root-height', `${input.clientHeight}px`);\n }\n };\n updateRootHeight();\n const resizeObserver = new ResizeObserver(updateRootHeight);\n resizeObserver.observe(input);\n\n return () => {\n document.removeEventListener(\n 'selectionchange',\n onDocumentSelectionChange,\n { capture: true }\n );\n resizeObserver.disconnect();\n };\n }, []);\n\n /** Mirrors for UI rendering purpose only */\n const [isHoveringInput, setIsHoveringInput] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [mirrorSelectionStart, setMirrorSelectionStart] = useState<\n number | null\n >(null);\n const [mirrorSelectionEnd, setMirrorSelectionEnd] = useState<number | null>(\n null\n );\n\n /** Effects */\n useEffect(() => {\n syncTimeouts(() => {\n // Forcefully remove :autofill state\n inputRef.current?.dispatchEvent(new Event('input'));\n\n // Update the selection state\n const s = inputRef.current?.selectionStart ?? null;\n const e = inputRef.current?.selectionEnd ?? null;\n const dir = inputRef.current?.selectionDirection ?? 'none';\n if (s !== null && e !== null) {\n setMirrorSelectionStart(s);\n setMirrorSelectionEnd(e);\n inputMetadataRef.current.prev = [s, e, dir];\n }\n });\n }, [value, isFocused]);\n\n useEffect(() => {\n if (previousValue === undefined) {\n return;\n }\n\n if (\n value !== previousValue &&\n previousValue.length < maxLength &&\n value.length === maxLength\n ) {\n onComplete?.(value);\n }\n }, [maxLength, onComplete, previousValue, value]);\n\n const pwmb = usePasswordManagerBadge({\n containerRef,\n inputRef,\n pushPasswordManagerStrategy,\n isFocused,\n });\n\n /** Event handlers */\n const _changeListener = (e: ChangeEvent<HTMLInputElement>) => {\n const newValue = e.currentTarget.value.slice(0, maxLength);\n if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n e.preventDefault();\n return;\n }\n const maybeHasDeleted =\n typeof previousValue === 'string' &&\n newValue.length < previousValue.length;\n if (maybeHasDeleted) {\n // Since cutting/deleting text doesn't trigger\n // selectionchange event, we'll have to dispatch it manually.\n // NOTE: The following line also triggers when cmd+A then pasting\n // a value with smaller length, which is not ideal for performance.\n document.dispatchEvent(new Event('selectionchange'));\n }\n onChange(newValue);\n };\n const _focusListener = () => {\n if (inputRef.current) {\n const start = Math.min(inputRef.current.value.length, maxLength - 1);\n const end = inputRef.current.value.length;\n inputRef.current?.setSelectionRange(start, end);\n setMirrorSelectionStart(start);\n setMirrorSelectionEnd(end);\n }\n setIsFocused(true);\n };\n // Fix iOS pasting\n const _pasteListener = (e: ClipboardEvent<HTMLInputElement>) => {\n const input = inputRef.current;\n if (\n !pasteTransformer &&\n (!initialLoadRef.current.isIOS || !e.clipboardData || !input)\n ) {\n return;\n }\n\n const _content = e.clipboardData.getData('text/plain');\n const content = pasteTransformer ? pasteTransformer(_content) : _content;\n e.preventDefault();\n\n const start = inputRef.current?.selectionStart;\n const end = inputRef.current?.selectionEnd;\n\n const isReplacing = start !== end;\n\n const newValueUncapped = isReplacing\n ? value.slice(0, start ?? 0) + content + value.slice(end ?? 0) // Replacing\n : value.slice(0, start ?? 0) + content + value.slice(start ?? 0); // Inserting\n const newValue = newValueUncapped.slice(0, maxLength);\n\n if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n return;\n }\n\n if (input) {\n input.value = newValue;\n onChange(newValue);\n\n const _start = Math.min(newValue.length, maxLength - 1);\n const _end = newValue.length;\n\n input.setSelectionRange(_start, _end);\n setMirrorSelectionStart(_start);\n setMirrorSelectionEnd(_end);\n }\n };\n\n /** Styles */\n const rootStyle: CSSProperties = {\n position: 'relative',\n cursor: props.disabled ? 'default' : 'text',\n userSelect: 'none',\n WebkitUserSelect: 'none',\n pointerEvents: 'none',\n };\n\n const inputStyle: CSSProperties = {\n position: 'absolute',\n inset: 0,\n width: pwmb.willPushPWMBadge\n ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})`\n : '100%',\n clipPath: pwmb.willPushPWMBadge\n ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)`\n : undefined,\n height: '100%',\n display: 'flex',\n textAlign,\n opacity: '1', // Mandatory for iOS hold-paste\n color: 'transparent',\n pointerEvents: 'all',\n background: 'transparent',\n caretColor: 'transparent',\n border: '0 solid transparent',\n outline: '0 solid transparent',\n boxShadow: 'none',\n lineHeight: '1',\n letterSpacing: '-.5em',\n fontSize: 'var(--root-height)',\n fontFamily: 'monospace',\n zIndex: -1,\n fontVariantNumeric: 'tabular-nums',\n // letterSpacing: '-1em',\n // transform: 'scale(1.5)',\n // paddingRight: '100%',\n // paddingBottom: '100%',\n // debugging purposes\n // inset: undefined,\n // position: undefined,\n // color: 'black',\n // background: 'white',\n // opacity: '1',\n // caretColor: 'black',\n // padding: '0',\n // letterSpacing: 'unset',\n // fontSize: 'unset',\n // paddingInline: '.5rem',\n };\n\n /** Rendering */\n const renderedInput = (\n <input\n autoComplete={props.autoComplete || 'one-time-code'}\n {...props}\n data-input-otp\n data-input-otp-placeholder-shown={value.length === 0 || undefined}\n data-input-otp-mss={mirrorSelectionStart}\n data-input-otp-mse={mirrorSelectionEnd}\n inputMode={inputMode}\n pattern={regexp?.source}\n aria-placeholder={placeholder}\n style={inputStyle}\n maxLength={maxLength}\n value={value}\n ref={inputRef}\n onPaste={(e) => {\n _pasteListener(e);\n props.onPaste?.(e);\n }}\n onChange={_changeListener}\n onMouseOver={(e) => {\n setIsHoveringInput(true);\n props.onMouseOver?.(e);\n }}\n onMouseLeave={(e) => {\n setIsHoveringInput(false);\n props.onMouseLeave?.(e);\n }}\n onFocus={(e) => {\n _focusListener();\n props.onFocus?.(e);\n }}\n onBlur={(e) => {\n setIsFocused(false);\n props.onBlur?.(e);\n }}\n />\n );\n\n const setSelection = (index: number) => {\n const input = inputRef.current;\n if (!input || props.disabled) {\n return;\n }\n\n // Clamp index to valid range\n const clampedIndex = Math.max(0, Math.min(index, maxLength - 1));\n\n // Focus the input if not already focused\n if (document.activeElement !== input) {\n input.focus();\n }\n\n // Set selection to the clicked slot\n // If there's a character at that position, select it; otherwise just position the caret\n const hasChar = value[clampedIndex] !== undefined;\n const start = clampedIndex;\n const end = hasChar ? clampedIndex + 1 : clampedIndex;\n\n input.setSelectionRange(start, end);\n setMirrorSelectionStart(start);\n setMirrorSelectionEnd(end);\n setIsFocused(true);\n };\n\n const contextValue: RenderProps = {\n slots: Array.from({ length: maxLength }).map((_, slotIdx) => {\n const isActive =\n isFocused &&\n mirrorSelectionStart !== null &&\n mirrorSelectionEnd !== null &&\n ((mirrorSelectionStart === mirrorSelectionEnd &&\n slotIdx === mirrorSelectionStart) ||\n (slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd));\n\n const char = value[slotIdx] !== undefined ? value[slotIdx] : null;\n const placeholderChar =\n value[0] !== undefined ? null : (placeholder?.[slotIdx] ?? null);\n\n return {\n char,\n placeholderChar,\n isActive,\n hasFakeCaret: isActive && char === null,\n };\n }),\n isFocused,\n isHovering: !props.disabled && isHoveringInput,\n setSelection,\n };\n\n const renderedChildren =\n render !== undefined ? (\n render(contextValue)\n ) : (\n <OTPInputContext.Provider value={contextValue}>\n {children}\n </OTPInputContext.Provider>\n );\n\n return (\n <>\n {noScriptCSSFallback !== null && (\n <noscript>\n <style>{noScriptCSSFallback}</style>\n </noscript>\n )}\n\n <div\n ref={containerRef}\n data-input-otp-container\n style={rootStyle}\n className={containerClassName}\n >\n {renderedChildren}\n\n <div\n style={{\n position: 'absolute',\n inset: 0,\n }}\n >\n {renderedInput}\n </div>\n </div>\n </>\n );\n};\n\nconst safeInsertRule = (sheet: CSSStyleSheet, rule: string) => {\n try {\n sheet.insertRule(rule);\n } catch {\n console.error('input-otp could not insert CSS rule:', rule);\n }\n};\n\n// Decided to go with <noscript>\n// instead of `scripting` CSS media query\n// because it's a fallback for initial page load\n// and the <script> tag won't be loaded\n// unless the user has JS disabled.\nconst NOSCRIPT_CSS_FALLBACK = `\n[data-input-otp] {\n --nojs-bg: white !important;\n --nojs-fg: black !important;\n\n background-color: var(--nojs-bg) !important;\n color: var(--nojs-fg) !important;\n caret-color: var(--nojs-fg) !important;\n letter-spacing: .25em !important;\n text-align: center !important;\n border: 1px solid var(--nojs-fg) !important;\n border-radius: 4px !important;\n width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n [data-input-otp] {\n --nojs-bg: black !important;\n --nojs-fg: white !important;\n }\n}`;\n"],"mappings":"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"}
|