@yamada-ui/react/dist/esm/components/password-input/use-password-input.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
import { useFieldProps } from "../field/use-field-props.js";
import { useCallback } from "react";

//#region src/components/password-input/use-password-input.tsx
const usePasswordInput = (props = {}) => {
	const { props: { defaultVisible, disabled, visible: visibleProp, onVisibleChange,...rest }, ariaProps, dataProps, eventProps } = useFieldProps(props);
	const [visible, setVisible] = useControllableState({
		defaultValue: defaultVisible,
		value: visibleProp,
		onChange: onVisibleChange
	});
	const { t } = useI18n("passwordInput");
	const onChangeVisibility = useCallback((ev) => {
		if (disabled || ev.button !== 0) return;
		ev.preventDefault();
		setVisible((prev) => !prev);
	}, [disabled, setVisible]);
	const getInputProps = useCallback(({ ref,...props$1 } = {}) => ({
		type: visible ? "text" : "password",
		disabled,
		...ariaProps,
		...dataProps,
		...rest,
		...props$1,
		ref: mergeRefs(ref, rest.ref),
		onBlur: (0, utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
		onFocus: (0, utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus)
	}), [
		visible,
		rest,
		disabled,
		dataProps,
		eventProps,
		ariaProps
	]);
	return {
		setVisible,
		visible,
		getButtonProps: useCallback((props$1 = {}) => ({
			type: "button",
			"aria-label": t("Toggle password visibility"),
			disabled,
			...dataProps,
			...props$1,
			onClick: (0, utils_exports.handlerAll)(props$1.onClick, onChangeVisibility)
		}), [
			onChangeVisibility,
			dataProps,
			disabled,
			t
		]),
		getInputProps
	};
};

//#endregion
export { usePasswordInput };
//# sourceMappingURL=use-password-input.js.map