@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
188 lines (187 loc) • 6.09 kB
JavaScript
"use client";
import { getSize } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { ActionIcon } from "../ActionIcon/ActionIcon.mjs";
import { Input } from "../Input/Input.mjs";
import { InputBase } from "../InputBase/InputBase.mjs";
import { PasswordToggleIcon } from "./PasswordToggleIcon.mjs";
import PasswordInput_module_default from "./PasswordInput.module.mjs";
import { useId, useUncontrolled } from "@mantine/hooks";
import cx from "clsx";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/PasswordInput/PasswordInput.tsx
const defaultProps = {
visibilityToggleIcon: PasswordToggleIcon,
size: "sm"
};
const varsResolver = createVarsResolver((_, { size }) => ({ root: {
"--psi-icon-size": getSize(size, "psi-icon-size"),
"--psi-button-size": getSize(size, "psi-button-size")
} }));
const PasswordInput = factory((_props) => {
const props = useProps([
"Input",
"InputWrapper",
"PasswordInput"
], defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, required, error, success, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, successProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, withSuccessStyles, mod, attributes, dir, ...others } = props;
const uuid = useId(id);
const [_visible, setVisibility] = useUncontrolled({
value: visible,
defaultValue: defaultVisible,
finalValue: false,
onChange: onVisibilityChange
});
const toggleVisibility = () => setVisibility(!_visible);
const getStyles = useStyles({
name: "PasswordInput",
classes: PasswordInput_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
classNames,
styles,
props
});
const { styleProps, rest } = extractStyleProps(others);
const errorId = errorProps?.id || `${uuid}-error`;
const successId = successProps?.id || `${uuid}-success`;
const descriptionId = descriptionProps?.id || `${uuid}-description`;
const hasError = !!error && typeof error !== "boolean";
const _describedBy = `${hasError ? errorId : ""} ${!!success && typeof success !== "boolean" && !hasError ? successId : ""} ${!!description ? descriptionId : ""}`;
const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : void 0;
const visibilityToggleButton = /* @__PURE__ */ jsx(ActionIcon, {
...getStyles("visibilityToggle"),
disabled,
radius,
"aria-pressed": _visible,
tabIndex: -1,
"aria-label": "Toggle password visibility",
...visibilityToggleButtonProps,
variant: visibilityToggleButtonProps?.variant ?? "subtle",
color: "gray",
unstyled,
onTouchEnd: (event) => {
event.preventDefault();
visibilityToggleButtonProps?.onTouchEnd?.(event);
toggleVisibility();
},
onMouseDown: (event) => {
event.preventDefault();
visibilityToggleButtonProps?.onMouseDown?.(event);
toggleVisibility();
},
onKeyDown: (event) => {
visibilityToggleButtonProps?.onKeyDown?.(event);
if (event.key === " ") {
event.preventDefault();
toggleVisibility();
}
},
children: /* @__PURE__ */ jsx(VisibilityToggleIcon, { reveal: _visible })
});
return /* @__PURE__ */ jsx(Input.Wrapper, {
required,
id: uuid,
label,
error,
success,
description,
size,
classNames: resolvedClassNames,
styles: resolvedStyles,
__staticSelector: "PasswordInput",
__stylesApiProps: props,
unstyled,
withAsterisk,
inputWrapperOrder,
inputContainer,
variant,
labelProps: {
...labelProps,
htmlFor: uuid
},
descriptionProps: {
...descriptionProps,
id: descriptionId
},
errorProps: {
...errorProps,
id: errorId
},
successProps: {
...successProps,
id: successId
},
mod,
attributes,
...getStyles("root"),
...styleProps,
...wrapperProps,
children: /* @__PURE__ */ jsx(Input, {
component: "div",
dir,
error,
success,
leftSection,
size,
classNames: {
...resolvedClassNames,
input: cx(PasswordInput_module_default.input, resolvedClassNames?.input)
},
styles: resolvedStyles,
radius,
disabled,
__staticSelector: "PasswordInput",
__stylesApiProps: props,
rightSectionWidth,
rightSection: rightSection ?? visibilityToggleButton,
variant,
unstyled,
leftSectionWidth,
rightSectionPointerEvents: rightSectionPointerEvents || "all",
rightSectionProps,
leftSectionProps,
leftSectionPointerEvents,
withAria: false,
withErrorStyles,
withSuccessStyles,
attributes,
children: /* @__PURE__ */ jsx("input", {
required,
"data-invalid": !!error || void 0,
"data-with-left-section": !!leftSection || void 0,
...getStyles("innerInput"),
disabled,
id: uuid,
dir,
...rest,
"aria-describedby": describedBy,
autoComplete: rest.autoComplete || "off",
type: _visible ? "text" : "password"
})
})
});
});
PasswordInput.classes = {
...InputBase.classes,
...PasswordInput_module_default
};
PasswordInput.varsResolver = varsResolver;
PasswordInput.displayName = "@mantine/core/PasswordInput";
//#endregion
export { PasswordInput };
//# sourceMappingURL=PasswordInput.mjs.map