import {
  ShowHideButton
} from "./chunk-WC3D5GNN.js";
import {
  TextField
} from "./chunk-6RDK3FM2.js";
import {
  mergeRefs
} from "./chunk-QGGILW3D.js";

// src/components/PasswordField/PasswordField.tsx
import classNames from "classnames/dedupe";
import { useRef, useState } from "react";
import "@simplybusiness/mobius/src/components/PasswordField/PasswordField.css";
import { jsx } from "react/jsx-runtime";
var PasswordField = ({
  ref,
  className,
  autoComplete = "current-password",
  ...props
}) => {
  const [show, setShow] = useState(false);
  const type = show ? "text" : "password";
  const classes = classNames("mobius-password-field", className);
  const localRef = useRef(null);
  const handleShowHideButtonClick = () => {
    const selectionStart = localRef.current?.selectionStart;
    const selectionEnd = localRef.current?.selectionEnd;
    setShow((oldShow) => !oldShow);
    requestAnimationFrame(() => {
      localRef.current?.focus();
      if (selectionStart != null && selectionEnd != null) {
        localRef.current?.setSelectionRange(selectionStart, selectionEnd);
      }
    });
  };
  return /* @__PURE__ */ jsx(
    TextField,
    {
      ref: mergeRefs([localRef, ref]),
      className: classes,
      ...props,
      autoComplete,
      type,
      suffixInside: /* @__PURE__ */ jsx(ShowHideButton, { onClick: handleShowHideButtonClick, show })
    }
  );
};
PasswordField.displayName = "PasswordField";

export {
  PasswordField
};
//# sourceMappingURL=chunk-WSQWMVA2.js.map
