braid-design-system
Version:
Themeable design system for the SEEK Group
84 lines (83 loc) • 2.85 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_private_Field_Field_cjs = require("../private/Field/Field.cjs");
const lib_components_private_FieldButtonIcon_FieldButtonIcon_cjs = require("../private/FieldButtonIcon/FieldButtonIcon.cjs");
const lib_components_icons_IconVisibility_IconVisibility_cjs = require("../icons/IconVisibility/IconVisibility.cjs");
const PasswordField = react.forwardRef(
({
value,
onChange,
onBlur,
onFocus,
placeholder,
disabled,
onVisibilityToggle,
visibilityToggleLabel = "Toggle password visibility",
tabIndex,
...restProps
}, forwardedRef) => {
const defaultRef = react.useRef(null);
const inputRef = forwardedRef || defaultRef;
const [visible, setVisibile] = react.useState(false);
const visibilityHandler = react.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__ */ jsxRuntime.jsx(
lib_components_private_Field_Field_cjs.Field,
{
...restProps,
componentName: "PasswordField",
value,
tabIndex,
icon: void 0,
prefix: void 0,
disabled,
secondaryMessage: null,
alwaysShowSecondaryIcon: !disabled,
secondaryIcon: disabled ? null : /* @__PURE__ */ jsxRuntime.jsx(
lib_components_private_FieldButtonIcon_FieldButtonIcon_cjs.FieldButtonIcon,
{
label: visibilityToggleLabel,
onMouseDown: visibilityHandler,
icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconVisibility_IconVisibility_cjs.IconVisibility, { hidden: visible })
}
),
children: (overlays, fieldProps, _, secondaryIcon) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "input",
type: visible ? "text" : "password",
value,
onChange,
onFocus,
onBlur,
placeholder: !disabled ? placeholder : void 0,
...fieldProps,
ref: inputRef
}
),
overlays,
secondaryIcon
] })
}
);
}
);
PasswordField.displayName = "PasswordField";
exports.PasswordField = PasswordField;