@intlayer/design-system 7.1.3 → 7.1.5
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/Accordion/Accordion.mjs +1 -1
- package/dist/esm/components/Avatar/index.mjs +1 -1
- package/dist/esm/components/Breadcrumb/index.mjs +1 -1
- package/dist/esm/components/Browser/Browser.mjs +1 -1
- package/dist/esm/components/Button/Button.mjs +1 -2
- package/dist/esm/components/Button/Button.mjs.map +1 -1
- package/dist/esm/components/CollapsibleTable/CollapsibleTable.mjs +1 -1
- package/dist/esm/components/ContentEditor/ContentEditor.mjs +1 -1
- package/dist/esm/components/ContentEditor/ContentEditorInput.mjs +1 -1
- package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs +2 -2
- package/dist/esm/components/CopyButton/index.mjs +1 -1
- package/dist/esm/components/CopyToClipboard/index.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/DictionaryEditor.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/NodeWrapper/FileWrapper.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/ContentEditor.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs +3 -3
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs +4 -4
- package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs +2 -2
- package/dist/esm/components/DictionaryFieldEditor/JSONEditor.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs +2 -2
- package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs +4 -4
- package/dist/esm/components/DictionaryFieldEditor/StructureEditor.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs +1 -1
- package/dist/esm/components/EditableField/EditableFieldLayout.mjs +1 -1
- package/dist/esm/components/HideShow/index.mjs +1 -1
- package/dist/esm/components/IDE/FileTree.mjs +1 -1
- package/dist/esm/components/Input/InputPassword.mjs +1 -1
- package/dist/esm/components/Input/OTPInput.mjs +2 -2
- package/dist/esm/components/Input/OTPInput.mjs.map +1 -1
- package/dist/esm/components/KeyboardScreenAdapter/index.mjs +1 -1
- package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs +2 -2
- package/dist/esm/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs +1 -1
- package/dist/esm/components/Modal/Modal.mjs +3 -3
- package/dist/esm/components/Navbar/MobileNavbar.mjs +2 -2
- package/dist/esm/components/RightDrawer/RightDrawer.mjs +3 -3
- package/dist/esm/components/Select/Multiselect.mjs +1 -1
- package/dist/esm/components/SwitchSelector/index.mjs +1 -1
- package/dist/esm/components/Tab/Tab.mjs +1 -1
- package/dist/esm/components/TabSelector/TabSelector.mjs +1 -1
- package/dist/esm/components/Table/Table.mjs +1 -1
- package/dist/esm/components/TextArea/AutocompleteTextArea.mjs +1 -1
- package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs +1 -1
- package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs +1 -1
- package/dist/esm/providers/ReactQueryProvider.mjs +1 -1
- package/dist/types/components/Badge/index.d.ts +2 -2
- 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 +11 -11
- package/dist/types/components/Button/Button.d.ts +3 -3
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/Command/index.d.ts +4 -4
- package/dist/types/components/Container/index.d.ts +4 -4
- 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/CopyButton/CopyButton.content.d.ts.map +1 -1
- 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/nodeTypeSelector.content.d.ts +31 -31
- 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/FormField.d.ts +2 -2
- 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/MultiselectElement.d.ts +2 -2
- package/dist/types/components/Form/elements/OTPElement.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/IDE/copyCode.content.d.ts.map +1 -1
- 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 +3 -3
- package/dist/types/components/Input/Input.d.ts.map +1 -1
- package/dist/types/components/Input/OTPInput.d.ts +4 -4
- package/dist/types/components/Input/SearchInput.d.ts +2 -2
- package/dist/types/components/Link/Link.d.ts +3 -3
- 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/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/MaxWidthSmoother/index.d.ts +2 -2
- package/dist/types/components/MaxWidthSmoother/index.d.ts.map +1 -1
- package/dist/types/components/Navbar/Burger.d.ts +2 -2
- package/dist/types/components/Navbar/Burger.d.ts.map +1 -1
- package/dist/types/components/Navbar/DesktopNavbar.d.ts +2 -2
- package/dist/types/components/Navbar/MobileNavbar.d.ts +2 -2
- package/dist/types/components/Navbar/index.d.ts +2 -2
- package/dist/types/components/Pagination/Pagination.d.ts +3 -3
- package/dist/types/components/Pagination/pagination.content.d.ts +11 -11
- package/dist/types/components/Select/Select.d.ts +3 -3
- package/dist/types/components/SocialNetworks/index.d.ts +2 -2
- package/dist/types/components/SwitchSelector/index.d.ts +6 -6
- 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 +5 -5
- 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/Toaster/Toaster.d.ts +2 -2
- package/dist/types/hooks/reactQuery.d.ts +40 -40
- 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/useUser/index.d.ts +2 -2
- package/package.json +14 -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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"}
|