@radix-ui/react-password-toggle-field 0.1.0-rc.1745439717073
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +13 -0
- package/dist/index.d.mts +41 -0
- package/dist/index.d.ts +41 -0
- package/dist/index.js +339 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +307 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +76 -0
- package/src/index.ts +21 -0
- package/src/password-toggle-field.test.tsx +219 -0
- package/src/password-toggle-field.tsx +479 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 WorkOS
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface PasswordToggleFieldProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
visible?: boolean;
|
|
6
|
+
defaultVisible?: boolean;
|
|
7
|
+
onVisiblityChange?: (visible: boolean) => void;
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
declare const PasswordToggleField: React.FC<PasswordToggleFieldProps>;
|
|
11
|
+
type PrimitiveInputProps = React.ComponentPropsWithoutRef<'input'>;
|
|
12
|
+
interface PasswordToggleFieldOwnProps {
|
|
13
|
+
autoComplete?: 'current-password' | 'new-password';
|
|
14
|
+
}
|
|
15
|
+
interface PasswordToggleFieldInputProps extends PasswordToggleFieldOwnProps, Omit<PrimitiveInputProps, keyof PasswordToggleFieldOwnProps | 'type'> {
|
|
16
|
+
autoComplete?: 'current-password' | 'new-password';
|
|
17
|
+
}
|
|
18
|
+
declare const PasswordToggleFieldInput: React.ForwardRefExoticComponent<PasswordToggleFieldInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
19
|
+
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<'button'>;
|
|
20
|
+
interface PasswordToggleFieldToggleProps extends Omit<PrimitiveButtonProps, 'type'> {
|
|
21
|
+
}
|
|
22
|
+
declare const PasswordToggleFieldToggle: React.ForwardRefExoticComponent<PasswordToggleFieldToggleProps & React.RefAttributes<HTMLButtonElement>>;
|
|
23
|
+
interface PasswordToggleFieldSlotDeclarativeProps {
|
|
24
|
+
visible: React.ReactNode;
|
|
25
|
+
hidden: React.ReactNode;
|
|
26
|
+
}
|
|
27
|
+
interface PasswordToggleFieldSlotRenderProps {
|
|
28
|
+
render: (args: {
|
|
29
|
+
visible: boolean;
|
|
30
|
+
}) => React.ReactElement;
|
|
31
|
+
}
|
|
32
|
+
type PasswordToggleFieldSlotProps = PasswordToggleFieldSlotDeclarativeProps | PasswordToggleFieldSlotRenderProps;
|
|
33
|
+
declare const PasswordToggleFieldSlot: React.FC<PasswordToggleFieldSlotProps>;
|
|
34
|
+
type PrimitiveSvgProps = React.ComponentPropsWithoutRef<'svg'>;
|
|
35
|
+
interface PasswordToggleFieldIconProps extends Omit<PrimitiveSvgProps, 'children'> {
|
|
36
|
+
visible: React.ReactElement;
|
|
37
|
+
hidden: React.ReactElement;
|
|
38
|
+
}
|
|
39
|
+
declare const PasswordToggleFieldIcon: React.ForwardRefExoticComponent<PasswordToggleFieldIconProps & React.RefAttributes<SVGSVGElement>>;
|
|
40
|
+
|
|
41
|
+
export { PasswordToggleFieldIcon as Icon, PasswordToggleFieldInput as Input, PasswordToggleField, PasswordToggleFieldIcon, type PasswordToggleFieldIconProps, PasswordToggleFieldInput, type PasswordToggleFieldInputProps, type PasswordToggleFieldProps, PasswordToggleFieldSlot, type PasswordToggleFieldSlotProps, PasswordToggleFieldToggle, type PasswordToggleFieldToggleProps, PasswordToggleField as Root, PasswordToggleFieldSlot as Slot, PasswordToggleFieldToggle as Toggle };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface PasswordToggleFieldProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
visible?: boolean;
|
|
6
|
+
defaultVisible?: boolean;
|
|
7
|
+
onVisiblityChange?: (visible: boolean) => void;
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
declare const PasswordToggleField: React.FC<PasswordToggleFieldProps>;
|
|
11
|
+
type PrimitiveInputProps = React.ComponentPropsWithoutRef<'input'>;
|
|
12
|
+
interface PasswordToggleFieldOwnProps {
|
|
13
|
+
autoComplete?: 'current-password' | 'new-password';
|
|
14
|
+
}
|
|
15
|
+
interface PasswordToggleFieldInputProps extends PasswordToggleFieldOwnProps, Omit<PrimitiveInputProps, keyof PasswordToggleFieldOwnProps | 'type'> {
|
|
16
|
+
autoComplete?: 'current-password' | 'new-password';
|
|
17
|
+
}
|
|
18
|
+
declare const PasswordToggleFieldInput: React.ForwardRefExoticComponent<PasswordToggleFieldInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
19
|
+
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<'button'>;
|
|
20
|
+
interface PasswordToggleFieldToggleProps extends Omit<PrimitiveButtonProps, 'type'> {
|
|
21
|
+
}
|
|
22
|
+
declare const PasswordToggleFieldToggle: React.ForwardRefExoticComponent<PasswordToggleFieldToggleProps & React.RefAttributes<HTMLButtonElement>>;
|
|
23
|
+
interface PasswordToggleFieldSlotDeclarativeProps {
|
|
24
|
+
visible: React.ReactNode;
|
|
25
|
+
hidden: React.ReactNode;
|
|
26
|
+
}
|
|
27
|
+
interface PasswordToggleFieldSlotRenderProps {
|
|
28
|
+
render: (args: {
|
|
29
|
+
visible: boolean;
|
|
30
|
+
}) => React.ReactElement;
|
|
31
|
+
}
|
|
32
|
+
type PasswordToggleFieldSlotProps = PasswordToggleFieldSlotDeclarativeProps | PasswordToggleFieldSlotRenderProps;
|
|
33
|
+
declare const PasswordToggleFieldSlot: React.FC<PasswordToggleFieldSlotProps>;
|
|
34
|
+
type PrimitiveSvgProps = React.ComponentPropsWithoutRef<'svg'>;
|
|
35
|
+
interface PasswordToggleFieldIconProps extends Omit<PrimitiveSvgProps, 'children'> {
|
|
36
|
+
visible: React.ReactElement;
|
|
37
|
+
hidden: React.ReactElement;
|
|
38
|
+
}
|
|
39
|
+
declare const PasswordToggleFieldIcon: React.ForwardRefExoticComponent<PasswordToggleFieldIconProps & React.RefAttributes<SVGSVGElement>>;
|
|
40
|
+
|
|
41
|
+
export { PasswordToggleFieldIcon as Icon, PasswordToggleFieldInput as Input, PasswordToggleField, PasswordToggleFieldIcon, type PasswordToggleFieldIconProps, PasswordToggleFieldInput, type PasswordToggleFieldInputProps, type PasswordToggleFieldProps, PasswordToggleFieldSlot, type PasswordToggleFieldSlotProps, PasswordToggleFieldToggle, type PasswordToggleFieldToggleProps, PasswordToggleField as Root, PasswordToggleFieldSlot as Slot, PasswordToggleFieldToggle as Toggle };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
|
|
31
|
+
// src/index.ts
|
|
32
|
+
var index_exports = {};
|
|
33
|
+
__export(index_exports, {
|
|
34
|
+
Icon: () => PasswordToggleFieldIcon,
|
|
35
|
+
Input: () => PasswordToggleFieldInput,
|
|
36
|
+
PasswordToggleField: () => PasswordToggleField,
|
|
37
|
+
PasswordToggleFieldIcon: () => PasswordToggleFieldIcon,
|
|
38
|
+
PasswordToggleFieldInput: () => PasswordToggleFieldInput,
|
|
39
|
+
PasswordToggleFieldSlot: () => PasswordToggleFieldSlot,
|
|
40
|
+
PasswordToggleFieldToggle: () => PasswordToggleFieldToggle,
|
|
41
|
+
Root: () => PasswordToggleField,
|
|
42
|
+
Slot: () => PasswordToggleFieldSlot,
|
|
43
|
+
Toggle: () => PasswordToggleFieldToggle
|
|
44
|
+
});
|
|
45
|
+
module.exports = __toCommonJS(index_exports);
|
|
46
|
+
|
|
47
|
+
// src/password-toggle-field.tsx
|
|
48
|
+
var React = __toESM(require("react"));
|
|
49
|
+
var import_react_dom = require("react-dom");
|
|
50
|
+
var import_primitive = require("@radix-ui/primitive");
|
|
51
|
+
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
52
|
+
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
53
|
+
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
54
|
+
var import_react_id = require("@radix-ui/react-id");
|
|
55
|
+
var import_react_use_is_hydrated = require("@radix-ui/react-use-is-hydrated");
|
|
56
|
+
var import_react_use_effect_event = require("@radix-ui/react-use-effect-event");
|
|
57
|
+
var import_react_context = require("@radix-ui/react-context");
|
|
58
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
|
+
var PASSWORD_TOGGLE_FIELD_NAME = "PasswordToggleField";
|
|
60
|
+
var [createPasswordToggleFieldContext] = (0, import_react_context.createContextScope)(PASSWORD_TOGGLE_FIELD_NAME);
|
|
61
|
+
var [PasswordToggleFieldProvider, usePasswordToggleFieldContext] = createPasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_NAME);
|
|
62
|
+
var INITIAL_FOCUS_STATE = {
|
|
63
|
+
clickTriggered: false,
|
|
64
|
+
selectionStart: null,
|
|
65
|
+
selectionEnd: null
|
|
66
|
+
};
|
|
67
|
+
var PasswordToggleField = ({
|
|
68
|
+
__scopePasswordToggleField,
|
|
69
|
+
...props
|
|
70
|
+
}) => {
|
|
71
|
+
const baseId = (0, import_react_id.useId)(props.id);
|
|
72
|
+
const defaultInputId = `${baseId}-input`;
|
|
73
|
+
const [inputIdState, setInputIdState] = React.useState(defaultInputId);
|
|
74
|
+
const inputId = inputIdState ?? defaultInputId;
|
|
75
|
+
const syncInputId = React.useCallback(
|
|
76
|
+
(providedId) => setInputIdState(providedId != null ? String(providedId) : null),
|
|
77
|
+
[]
|
|
78
|
+
);
|
|
79
|
+
const { visible: visibleProp, defaultVisible, onVisiblityChange, children } = props;
|
|
80
|
+
const [visible = false, setVisible] = (0, import_react_use_controllable_state.useControllableState)({
|
|
81
|
+
caller: PASSWORD_TOGGLE_FIELD_NAME,
|
|
82
|
+
prop: visibleProp,
|
|
83
|
+
defaultProp: defaultVisible ?? false,
|
|
84
|
+
onChange: onVisiblityChange
|
|
85
|
+
});
|
|
86
|
+
const inputRef = React.useRef(null);
|
|
87
|
+
const focusState = React.useRef(INITIAL_FOCUS_STATE);
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
+
PasswordToggleFieldProvider,
|
|
90
|
+
{
|
|
91
|
+
scope: __scopePasswordToggleField,
|
|
92
|
+
inputId,
|
|
93
|
+
inputRef,
|
|
94
|
+
setVisible,
|
|
95
|
+
syncInputId,
|
|
96
|
+
visible,
|
|
97
|
+
focusState,
|
|
98
|
+
children
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
};
|
|
102
|
+
PasswordToggleField.displayName = PASSWORD_TOGGLE_FIELD_NAME;
|
|
103
|
+
var PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Input";
|
|
104
|
+
var PasswordToggleFieldInput = React.forwardRef(
|
|
105
|
+
({
|
|
106
|
+
__scopePasswordToggleField,
|
|
107
|
+
autoComplete = "current-password",
|
|
108
|
+
autoCapitalize = "off",
|
|
109
|
+
spellCheck = false,
|
|
110
|
+
id: idProp,
|
|
111
|
+
...props
|
|
112
|
+
}, forwardedRef) => {
|
|
113
|
+
const { visible, inputRef, inputId, syncInputId, setVisible, focusState } = usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);
|
|
114
|
+
React.useEffect(() => {
|
|
115
|
+
syncInputId(idProp);
|
|
116
|
+
}, [idProp, syncInputId]);
|
|
117
|
+
const _setVisible = (0, import_react_use_effect_event.useEffectEvent)(setVisible);
|
|
118
|
+
React.useEffect(() => {
|
|
119
|
+
const inputElement = inputRef.current;
|
|
120
|
+
const form = inputElement?.form;
|
|
121
|
+
if (!form) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
const controller = new AbortController();
|
|
125
|
+
form.addEventListener(
|
|
126
|
+
"reset",
|
|
127
|
+
(event) => {
|
|
128
|
+
if (!event.defaultPrevented) {
|
|
129
|
+
_setVisible(false);
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
{ signal: controller.signal }
|
|
133
|
+
);
|
|
134
|
+
form.addEventListener(
|
|
135
|
+
"submit",
|
|
136
|
+
() => {
|
|
137
|
+
_setVisible(false);
|
|
138
|
+
},
|
|
139
|
+
{ signal: controller.signal }
|
|
140
|
+
);
|
|
141
|
+
return () => {
|
|
142
|
+
controller.abort();
|
|
143
|
+
};
|
|
144
|
+
}, [inputRef, _setVisible]);
|
|
145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
146
|
+
import_react_primitive.Primitive.input,
|
|
147
|
+
{
|
|
148
|
+
...props,
|
|
149
|
+
id: idProp ?? inputId,
|
|
150
|
+
autoCapitalize,
|
|
151
|
+
autoComplete,
|
|
152
|
+
ref: (0, import_react_compose_refs.useComposedRefs)(forwardedRef, inputRef),
|
|
153
|
+
spellCheck,
|
|
154
|
+
type: visible ? "text" : "password",
|
|
155
|
+
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, (event) => {
|
|
156
|
+
const { selectionStart, selectionEnd } = event.currentTarget;
|
|
157
|
+
focusState.current.selectionStart = selectionStart;
|
|
158
|
+
focusState.current.selectionEnd = selectionEnd;
|
|
159
|
+
})
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
PasswordToggleFieldInput.displayName = PASSWORD_TOGGLE_FIELD_INPUT_NAME;
|
|
165
|
+
var PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Toggle";
|
|
166
|
+
var PasswordToggleFieldToggle = React.forwardRef(
|
|
167
|
+
({
|
|
168
|
+
__scopePasswordToggleField,
|
|
169
|
+
onClick,
|
|
170
|
+
onPointerDown,
|
|
171
|
+
onPointerCancel,
|
|
172
|
+
onPointerUp,
|
|
173
|
+
onFocus,
|
|
174
|
+
children,
|
|
175
|
+
"aria-label": ariaLabelProp,
|
|
176
|
+
"aria-controls": ariaControls,
|
|
177
|
+
"aria-hidden": ariaHidden,
|
|
178
|
+
tabIndex,
|
|
179
|
+
...props
|
|
180
|
+
}, forwardedRef) => {
|
|
181
|
+
const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(
|
|
182
|
+
PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,
|
|
183
|
+
__scopePasswordToggleField
|
|
184
|
+
);
|
|
185
|
+
const [internalAriaLabel, setInternalAriaLabel] = React.useState(void 0);
|
|
186
|
+
const elementRef = React.useRef(null);
|
|
187
|
+
const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, elementRef);
|
|
188
|
+
const isHydrated = (0, import_react_use_is_hydrated.useIsHydrated)();
|
|
189
|
+
React.useEffect(() => {
|
|
190
|
+
const element = elementRef.current;
|
|
191
|
+
if (!element || ariaLabelProp) {
|
|
192
|
+
setInternalAriaLabel(void 0);
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
const DEFAULT_ARIA_LABEL = visible ? "Hide password" : "Show password";
|
|
196
|
+
function checkForInnerTextLabel(textContent) {
|
|
197
|
+
const text = textContent ? textContent : void 0;
|
|
198
|
+
setInternalAriaLabel(text ? void 0 : DEFAULT_ARIA_LABEL);
|
|
199
|
+
}
|
|
200
|
+
checkForInnerTextLabel(element.textContent);
|
|
201
|
+
const observer = new MutationObserver((entries) => {
|
|
202
|
+
let textContent;
|
|
203
|
+
for (const entry of entries) {
|
|
204
|
+
if (entry.type === "characterData") {
|
|
205
|
+
if (element.textContent) {
|
|
206
|
+
textContent = element.textContent;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
checkForInnerTextLabel(textContent);
|
|
211
|
+
});
|
|
212
|
+
observer.observe(element, { characterData: true, subtree: true });
|
|
213
|
+
return () => {
|
|
214
|
+
observer.disconnect();
|
|
215
|
+
};
|
|
216
|
+
}, [visible, ariaLabelProp]);
|
|
217
|
+
const ariaLabel = ariaLabelProp || internalAriaLabel;
|
|
218
|
+
if (!isHydrated) {
|
|
219
|
+
ariaHidden ??= true;
|
|
220
|
+
tabIndex ??= -1;
|
|
221
|
+
} else {
|
|
222
|
+
ariaControls ??= inputId;
|
|
223
|
+
}
|
|
224
|
+
React.useEffect(() => {
|
|
225
|
+
let cleanup = () => {
|
|
226
|
+
};
|
|
227
|
+
const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;
|
|
228
|
+
const reset = () => focusState.current.clickTriggered = false;
|
|
229
|
+
const handlePointerUp = () => cleanup = requestIdleCallback(ownerWindow, reset);
|
|
230
|
+
ownerWindow.addEventListener("pointerup", handlePointerUp);
|
|
231
|
+
return () => {
|
|
232
|
+
cleanup();
|
|
233
|
+
ownerWindow.removeEventListener("pointerup", handlePointerUp);
|
|
234
|
+
};
|
|
235
|
+
}, [focusState]);
|
|
236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
237
|
+
import_react_primitive.Primitive.button,
|
|
238
|
+
{
|
|
239
|
+
"aria-controls": ariaControls,
|
|
240
|
+
"aria-hidden": ariaHidden,
|
|
241
|
+
"aria-label": ariaLabel,
|
|
242
|
+
ref,
|
|
243
|
+
id: inputId,
|
|
244
|
+
...props,
|
|
245
|
+
onPointerDown: (0, import_primitive.composeEventHandlers)(onPointerDown, () => {
|
|
246
|
+
focusState.current.clickTriggered = true;
|
|
247
|
+
}),
|
|
248
|
+
onPointerCancel: (event) => {
|
|
249
|
+
onPointerCancel?.(event);
|
|
250
|
+
focusState.current = INITIAL_FOCUS_STATE;
|
|
251
|
+
},
|
|
252
|
+
onClick: (event) => {
|
|
253
|
+
onClick?.(event);
|
|
254
|
+
if (event.defaultPrevented) {
|
|
255
|
+
focusState.current = INITIAL_FOCUS_STATE;
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
258
|
+
(0, import_react_dom.flushSync)(() => {
|
|
259
|
+
setVisible((s) => !s);
|
|
260
|
+
});
|
|
261
|
+
if (focusState.current.clickTriggered) {
|
|
262
|
+
const input = inputRef.current;
|
|
263
|
+
if (input) {
|
|
264
|
+
const { selectionStart, selectionEnd } = focusState.current;
|
|
265
|
+
input.focus();
|
|
266
|
+
if (selectionStart !== null || selectionEnd !== null) {
|
|
267
|
+
requestAnimationFrame(() => {
|
|
268
|
+
if (input.ownerDocument.activeElement === input) {
|
|
269
|
+
input.selectionStart = selectionStart;
|
|
270
|
+
input.selectionEnd = selectionEnd;
|
|
271
|
+
}
|
|
272
|
+
});
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
focusState.current = INITIAL_FOCUS_STATE;
|
|
277
|
+
},
|
|
278
|
+
onPointerUp: (event) => {
|
|
279
|
+
onPointerUp?.(event);
|
|
280
|
+
setTimeout(() => {
|
|
281
|
+
focusState.current = INITIAL_FOCUS_STATE;
|
|
282
|
+
}, 50);
|
|
283
|
+
},
|
|
284
|
+
type: "button",
|
|
285
|
+
children
|
|
286
|
+
}
|
|
287
|
+
);
|
|
288
|
+
}
|
|
289
|
+
);
|
|
290
|
+
PasswordToggleFieldToggle.displayName = PASSWORD_TOGGLE_FIELD_TOGGLE_NAME;
|
|
291
|
+
var PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Slot";
|
|
292
|
+
var PasswordToggleFieldSlot = ({
|
|
293
|
+
__scopePasswordToggleField,
|
|
294
|
+
...props
|
|
295
|
+
}) => {
|
|
296
|
+
const { visible } = usePasswordToggleFieldContext(
|
|
297
|
+
PASSWORD_TOGGLE_FIELD_SLOT_NAME,
|
|
298
|
+
__scopePasswordToggleField
|
|
299
|
+
);
|
|
300
|
+
return "render" in props ? (
|
|
301
|
+
//
|
|
302
|
+
props.render({ visible })
|
|
303
|
+
) : visible ? props.visible : props.hidden;
|
|
304
|
+
};
|
|
305
|
+
PasswordToggleFieldSlot.displayName = PASSWORD_TOGGLE_FIELD_SLOT_NAME;
|
|
306
|
+
var PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Icon";
|
|
307
|
+
var PasswordToggleFieldIcon = React.forwardRef(
|
|
308
|
+
({
|
|
309
|
+
__scopePasswordToggleField,
|
|
310
|
+
// @ts-expect-error
|
|
311
|
+
children,
|
|
312
|
+
...props
|
|
313
|
+
}, forwardedRef) => {
|
|
314
|
+
const { visible } = usePasswordToggleFieldContext(
|
|
315
|
+
PASSWORD_TOGGLE_FIELD_ICON_NAME,
|
|
316
|
+
__scopePasswordToggleField
|
|
317
|
+
);
|
|
318
|
+
const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = props;
|
|
319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.svg, { ...domProps, ref: forwardedRef, "aria-hidden": true, asChild: true, children: visible ? visibleIcon : hiddenIcon });
|
|
320
|
+
}
|
|
321
|
+
);
|
|
322
|
+
PasswordToggleFieldIcon.displayName = PASSWORD_TOGGLE_FIELD_ICON_NAME;
|
|
323
|
+
function requestIdleCallback(window2, callback, options) {
|
|
324
|
+
if (window2.requestIdleCallback) {
|
|
325
|
+
const id2 = window2.requestIdleCallback(callback, options);
|
|
326
|
+
return () => {
|
|
327
|
+
window2.cancelIdleCallback(id2);
|
|
328
|
+
};
|
|
329
|
+
}
|
|
330
|
+
const start = Date.now();
|
|
331
|
+
const id = window2.setTimeout(() => {
|
|
332
|
+
const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));
|
|
333
|
+
callback({ didTimeout: false, timeRemaining });
|
|
334
|
+
}, 1);
|
|
335
|
+
return () => {
|
|
336
|
+
window2.clearTimeout(id);
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/index.ts", "../src/password-toggle-field.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client';\nexport type {\n PasswordToggleFieldProps,\n PasswordToggleFieldInputProps,\n PasswordToggleFieldToggleProps,\n PasswordToggleFieldIconProps,\n PasswordToggleFieldSlotProps,\n} from './password-toggle-field';\nexport {\n PasswordToggleField,\n PasswordToggleFieldInput,\n PasswordToggleFieldToggle,\n PasswordToggleFieldIcon,\n PasswordToggleFieldSlot,\n //\n Root,\n Input,\n Toggle,\n Icon,\n Slot,\n} from './password-toggle-field';\n", "import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useId } from '@radix-ui/react-id';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport { useEffectEvent } from '@radix-ui/react-use-effect-event';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\n\nconst PASSWORD_TOGGLE_FIELD_NAME = 'PasswordToggleField';\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype InternalFocusState = {\n clickTriggered: boolean;\n selectionStart: number | null;\n selectionEnd: number | null;\n};\n\ninterface PasswordToggleFieldContextValue {\n inputId: string;\n inputRef: React.RefObject<HTMLInputElement | null>;\n visible: boolean;\n setVisible: React.Dispatch<React.SetStateAction<boolean>>;\n syncInputId: (providedId: string | number | undefined) => void;\n focusState: React.RefObject<InternalFocusState>;\n}\n\nconst [createPasswordToggleFieldContext] = createContextScope(PASSWORD_TOGGLE_FIELD_NAME);\nconst [PasswordToggleFieldProvider, usePasswordToggleFieldContext] =\n createPasswordToggleFieldContext<PasswordToggleFieldContextValue>(PASSWORD_TOGGLE_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleField\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScopedProps<P> = P & { __scopePasswordToggleField?: Scope };\n\ninterface PasswordToggleFieldProps {\n id?: string;\n visible?: boolean;\n defaultVisible?: boolean;\n onVisiblityChange?: (visible: boolean) => void;\n children?: React.ReactNode;\n}\n\nconst INITIAL_FOCUS_STATE: InternalFocusState = {\n clickTriggered: false,\n selectionStart: null,\n selectionEnd: null,\n};\n\nconst PasswordToggleField: React.FC<PasswordToggleFieldProps> = ({\n __scopePasswordToggleField,\n ...props\n}: ScopedProps<PasswordToggleFieldProps>) => {\n const baseId = useId(props.id);\n const defaultInputId = `${baseId}-input`;\n const [inputIdState, setInputIdState] = React.useState<null | string>(defaultInputId);\n const inputId = inputIdState ?? defaultInputId;\n const syncInputId = React.useCallback(\n (providedId: string | number | undefined) =>\n setInputIdState(providedId != null ? String(providedId) : null),\n []\n );\n\n const { visible: visibleProp, defaultVisible, onVisiblityChange, children } = props;\n const [visible = false, setVisible] = useControllableState({\n caller: PASSWORD_TOGGLE_FIELD_NAME,\n prop: visibleProp,\n defaultProp: defaultVisible ?? false,\n onChange: onVisiblityChange,\n });\n\n const inputRef = React.useRef<HTMLInputElement | null>(null);\n const focusState = React.useRef<InternalFocusState>(INITIAL_FOCUS_STATE);\n\n return (\n <PasswordToggleFieldProvider\n scope={__scopePasswordToggleField}\n inputId={inputId}\n inputRef={inputRef}\n setVisible={setVisible}\n syncInputId={syncInputId}\n visible={visible}\n focusState={focusState}\n >\n {children}\n </PasswordToggleFieldProvider>\n );\n};\nPasswordToggleField.displayName = PASSWORD_TOGGLE_FIELD_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Input';\n\ntype PrimitiveInputProps = React.ComponentPropsWithoutRef<'input'>;\n\ninterface PasswordToggleFieldOwnProps {\n autoComplete?: 'current-password' | 'new-password';\n}\n\ninterface PasswordToggleFieldInputProps\n extends PasswordToggleFieldOwnProps,\n Omit<PrimitiveInputProps, keyof PasswordToggleFieldOwnProps | 'type'> {\n autoComplete?: 'current-password' | 'new-password';\n}\n\nconst PasswordToggleFieldInput = React.forwardRef<HTMLInputElement, PasswordToggleFieldInputProps>(\n (\n {\n __scopePasswordToggleField,\n autoComplete = 'current-password',\n autoCapitalize = 'off',\n spellCheck = false,\n id: idProp,\n ...props\n }: ScopedProps<PasswordToggleFieldInputProps>,\n forwardedRef\n ) => {\n const { visible, inputRef, inputId, syncInputId, setVisible, focusState } =\n usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);\n\n React.useEffect(() => {\n syncInputId(idProp);\n }, [idProp, syncInputId]);\n\n // We want to reset the visibility to `false` to revert the input to\n // `type=\"password\"` when:\n // - The form is reset (for consistency with other form controls)\n // - The form is submitted (to prevent the browser from remembering the\n // input's value.\n //\n // See \"Keeping things secure\":\n // https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/)\n const _setVisible = useEffectEvent(setVisible);\n React.useEffect(() => {\n const inputElement = inputRef.current;\n const form = inputElement?.form;\n if (!form) {\n return;\n }\n\n const controller = new AbortController();\n form.addEventListener(\n 'reset',\n (event) => {\n if (!event.defaultPrevented) {\n _setVisible(false);\n }\n },\n { signal: controller.signal }\n );\n form.addEventListener(\n 'submit',\n () => {\n // always reset the visibility on submit regardless of whether the\n // default action is prevented\n _setVisible(false);\n },\n { signal: controller.signal }\n );\n return () => {\n controller.abort();\n };\n }, [inputRef, _setVisible]);\n\n return (\n <Primitive.input\n {...props}\n id={idProp ?? inputId}\n autoCapitalize={autoCapitalize}\n autoComplete={autoComplete}\n ref={useComposedRefs(forwardedRef, inputRef)}\n spellCheck={spellCheck}\n type={visible ? 'text' : 'password'}\n onBlur={composeEventHandlers(props.onBlur, (event) => {\n // get the cursor position\n const { selectionStart, selectionEnd } = event.currentTarget;\n focusState.current.selectionStart = selectionStart;\n focusState.current.selectionEnd = selectionEnd;\n })}\n />\n );\n }\n);\nPasswordToggleFieldInput.displayName = PASSWORD_TOGGLE_FIELD_INPUT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldToggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Toggle';\n\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<'button'>;\n\ninterface PasswordToggleFieldToggleProps extends Omit<PrimitiveButtonProps, 'type'> {}\n\nconst PasswordToggleFieldToggle = React.forwardRef<\n HTMLButtonElement,\n PasswordToggleFieldToggleProps\n>(\n (\n {\n __scopePasswordToggleField,\n onClick,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onFocus,\n children,\n 'aria-label': ariaLabelProp,\n 'aria-controls': ariaControls,\n 'aria-hidden': ariaHidden,\n tabIndex,\n ...props\n }: ScopedProps<PasswordToggleFieldToggleProps>,\n forwardedRef\n ) => {\n const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(\n PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,\n __scopePasswordToggleField\n );\n const [internalAriaLabel, setInternalAriaLabel] = React.useState<string | undefined>(undefined);\n const elementRef = React.useRef<HTMLButtonElement>(null);\n const ref = useComposedRefs(forwardedRef, elementRef);\n const isHydrated = useIsHydrated();\n\n React.useEffect(() => {\n const element = elementRef.current;\n if (!element || ariaLabelProp) {\n setInternalAriaLabel(undefined);\n return;\n }\n\n const DEFAULT_ARIA_LABEL = visible ? 'Hide password' : 'Show password';\n\n function checkForInnerTextLabel(textContent: string | undefined | null) {\n const text = textContent ? textContent : undefined;\n // If the element has inner text, no need to force an aria-label.\n setInternalAriaLabel(text ? undefined : DEFAULT_ARIA_LABEL);\n }\n\n checkForInnerTextLabel(element.textContent);\n\n const observer = new MutationObserver((entries) => {\n let textContent: string | undefined;\n for (const entry of entries) {\n if (entry.type === 'characterData') {\n if (element.textContent) {\n textContent = element.textContent;\n }\n }\n }\n checkForInnerTextLabel(textContent);\n });\n observer.observe(element, { characterData: true, subtree: true });\n return () => {\n observer.disconnect();\n };\n }, [visible, ariaLabelProp]);\n\n const ariaLabel = ariaLabelProp || internalAriaLabel;\n\n // Before hydration the button will not work, but we want to render it\n // regardless to prevent potential layout shift. Hide it from assistive tech\n // by default. Post-hydration it will be visible, focusable and associated\n // with the input via aria-controls.\n if (!isHydrated) {\n ariaHidden ??= true;\n tabIndex ??= -1;\n } else {\n ariaControls ??= inputId;\n }\n\n React.useEffect(() => {\n let cleanup = () => {};\n const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;\n const reset = () => (focusState.current.clickTriggered = false);\n const handlePointerUp = () => (cleanup = requestIdleCallback(ownerWindow, reset));\n ownerWindow.addEventListener('pointerup', handlePointerUp);\n return () => {\n cleanup();\n ownerWindow.removeEventListener('pointerup', handlePointerUp);\n };\n }, [focusState]);\n\n return (\n <Primitive.button\n aria-controls={ariaControls}\n aria-hidden={ariaHidden}\n aria-label={ariaLabel}\n ref={ref}\n id={inputId}\n {...props}\n onPointerDown={composeEventHandlers(onPointerDown, () => {\n focusState.current.clickTriggered = true;\n })}\n onPointerCancel={(event) => {\n // do not use `composeEventHandlers` here because we always want to\n // reset the ref on cancellation, regardless of whether the user has\n // called preventDefault on the event\n onPointerCancel?.(event);\n focusState.current = INITIAL_FOCUS_STATE;\n }}\n // do not use `composeEventHandlers` here because we always want to\n // reset the ref after click, regardless of whether the user has\n // called preventDefault on the event\n onClick={(event) => {\n onClick?.(event);\n if (event.defaultPrevented) {\n focusState.current = INITIAL_FOCUS_STATE;\n return;\n }\n\n flushSync(() => {\n setVisible((s) => !s);\n });\n if (focusState.current.clickTriggered) {\n const input = inputRef.current;\n if (input) {\n const { selectionStart, selectionEnd } = focusState.current;\n input.focus();\n if (selectionStart !== null || selectionEnd !== null) {\n // wait a tick so that focus has settled, then restore select position\n requestAnimationFrame(() => {\n // make sure the input still has focus (developer may have\n // programatically moved focus elsewhere)\n if (input.ownerDocument.activeElement === input) {\n input.selectionStart = selectionStart;\n input.selectionEnd = selectionEnd;\n }\n });\n }\n }\n }\n focusState.current = INITIAL_FOCUS_STATE;\n }}\n onPointerUp={(event) => {\n onPointerUp?.(event);\n // if click handler hasn't been called at this point, it may have been\n // intercepted, in which case we still want to reset our internal\n // state\n setTimeout(() => {\n focusState.current = INITIAL_FOCUS_STATE;\n }, 50);\n }}\n type=\"button\"\n >\n {children}\n </Primitive.button>\n );\n }\n);\nPasswordToggleFieldToggle.displayName = PASSWORD_TOGGLE_FIELD_TOGGLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldSlot\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Slot';\n\ninterface PasswordToggleFieldSlotDeclarativeProps {\n visible: React.ReactNode;\n hidden: React.ReactNode;\n}\n\ninterface PasswordToggleFieldSlotRenderProps {\n render: (args: { visible: boolean }) => React.ReactElement;\n}\n\ntype PasswordToggleFieldSlotProps =\n | PasswordToggleFieldSlotDeclarativeProps\n | PasswordToggleFieldSlotRenderProps;\n\nconst PasswordToggleFieldSlot: React.FC<PasswordToggleFieldSlotProps> = ({\n __scopePasswordToggleField,\n ...props\n}: ScopedProps<PasswordToggleFieldSlotProps>) => {\n const { visible } = usePasswordToggleFieldContext(\n PASSWORD_TOGGLE_FIELD_SLOT_NAME,\n __scopePasswordToggleField\n );\n\n return 'render' in props\n ? //\n props.render({ visible })\n : visible\n ? props.visible\n : props.hidden;\n};\nPasswordToggleFieldSlot.displayName = PASSWORD_TOGGLE_FIELD_SLOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Icon';\n\ntype PrimitiveSvgProps = React.ComponentPropsWithoutRef<'svg'>;\n\ninterface PasswordToggleFieldIconProps extends Omit<PrimitiveSvgProps, 'children'> {\n visible: React.ReactElement;\n hidden: React.ReactElement;\n}\n\nconst PasswordToggleFieldIcon = React.forwardRef<SVGSVGElement, PasswordToggleFieldIconProps>(\n (\n {\n __scopePasswordToggleField,\n // @ts-expect-error\n children,\n ...props\n }: ScopedProps<PasswordToggleFieldIconProps>,\n forwardedRef\n ) => {\n const { visible } = usePasswordToggleFieldContext(\n PASSWORD_TOGGLE_FIELD_ICON_NAME,\n __scopePasswordToggleField\n );\n const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = props;\n return (\n <Primitive.svg {...domProps} ref={forwardedRef} aria-hidden asChild>\n {visible ? visibleIcon : hiddenIcon}\n </Primitive.svg>\n );\n }\n);\nPasswordToggleFieldIcon.displayName = PASSWORD_TOGGLE_FIELD_ICON_NAME;\n\nexport {\n PasswordToggleField,\n PasswordToggleFieldInput,\n PasswordToggleFieldToggle,\n PasswordToggleFieldSlot,\n PasswordToggleFieldIcon,\n //\n PasswordToggleField as Root,\n PasswordToggleFieldInput as Input,\n PasswordToggleFieldToggle as Toggle,\n PasswordToggleFieldSlot as Slot,\n PasswordToggleFieldIcon as Icon,\n};\nexport type {\n PasswordToggleFieldProps,\n PasswordToggleFieldInputProps,\n PasswordToggleFieldToggleProps,\n PasswordToggleFieldIconProps,\n PasswordToggleFieldSlotProps,\n};\n\nfunction requestIdleCallback(\n window: Window,\n callback: IdleRequestCallback,\n options?: IdleRequestOptions\n): () => void {\n if ((window as any).requestIdleCallback) {\n const id = window.requestIdleCallback(callback, options);\n return () => {\n window.cancelIdleCallback(id);\n };\n }\n const start = Date.now();\n const id = window.setTimeout(() => {\n const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));\n callback({ didTimeout: false, timeRemaining });\n }, 1);\n return () => {\n window.clearTimeout(id);\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["window", "id"]
|
|
7
|
+
}
|