braid-design-system
Version:
Themeable design system for the SEEK Group
85 lines (84 loc) • 2.46 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useRef, useState, useCallback, Fragment } from "react";
import { Box } from "../Box/Box.mjs";
import { Field } from "../private/Field/Field.mjs";
import { FieldButtonIcon } from "../private/FieldButtonIcon/FieldButtonIcon.mjs";
import { IconVisibility } from "../icons/IconVisibility/IconVisibility.mjs";
const PasswordField = forwardRef(
({
value,
onChange,
onBlur,
onFocus,
placeholder,
disabled,
onVisibilityToggle,
visibilityToggleLabel = "Toggle password visibility",
tabIndex,
...restProps
}, forwardedRef) => {
const defaultRef = useRef(null);
const inputRef = forwardedRef || defaultRef;
const [visible, setVisibile] = useState(false);
const visibilityHandler = useCallback(
(event) => {
if (event.button !== 0) {
return;
}
const newState = !visible;
setVisibile(newState);
if (typeof onVisibilityToggle === "function") {
onVisibilityToggle(newState);
}
if (inputRef && typeof inputRef === "object" && inputRef.current) {
inputRef.current.focus();
}
},
[visible, onVisibilityToggle, inputRef]
);
return /* @__PURE__ */ jsx(
Field,
{
...restProps,
componentName: "PasswordField",
value,
tabIndex,
icon: void 0,
prefix: void 0,
disabled,
secondaryMessage: null,
alwaysShowSecondaryIcon: !disabled,
secondaryIcon: disabled ? null : /* @__PURE__ */ jsx(
FieldButtonIcon,
{
label: visibilityToggleLabel,
onMouseDown: visibilityHandler,
icon: /* @__PURE__ */ jsx(IconVisibility, { hidden: visible })
}
),
children: (overlays, fieldProps, _, secondaryIcon) => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Box,
{
component: "input",
type: visible ? "text" : "password",
value,
onChange,
onFocus,
onBlur,
placeholder: !disabled ? placeholder : void 0,
...fieldProps,
ref: inputRef
}
),
overlays,
secondaryIcon
] })
}
);
}
);
PasswordField.displayName = "PasswordField";
export {
PasswordField
};