@dnb/eufemia/es/extensions/forms/Field/Password/Password.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useContext, useMemo, useRef, useState } from 'react';
import { clsx } from 'clsx';
import SharedContext from "../../../../shared/Context.js";
import StringField from "../String/index.js";
import useId from "../../../../shared/helpers/useId.js";
import { SubmitButton } from "../../../../components/Input.js";
import Icon from "../../../../components/icon/Icon.js";
import IconPrimary from "../../../../components/icon-primary/IconPrimary.js";
import { view, hide, view_medium, hide_medium } from "../../../../icons/index.js";
import useTranslation from "../../hooks/useTranslation.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx } from "react/jsx-runtime";
const passwordIcon = Icon.transition({
  view,
  hide
});
const passwordIconLarge = Icon.transition({
  view: view_medium,
  hide: hide_medium
});
function Password({
  id,
  className,
  ref: refProp,
  value,
  label,
  disabled,
  size,
  ...props
}) {
  var _refProp$current;
  const generatedId = useId();
  const idToUse = id || generatedId;
  const [hidden, setHidden] = useState(true);
  const sharedContext = useContext(SharedContext);
  const translations = useTranslation().Password;
  const ref = useRef((_refProp$current = refProp?.current) !== null && _refProp$current !== void 0 ? _refProp$current : null);
  const errorMessages = useMemo(() => {
    return {
      'Field.errorRequired': translations.errorRequired,
      ...props.errorMessages
    };
  }, [translations.errorRequired, props.errorMessages]);
  const toggleVisibility = useCallback(event => {
    const {
      onShowPassword,
      onHidePassword
    } = props;
    const value = ref.current.value;
    setHidden(hidden => {
      hidden ? onShowPassword?.({
        ...event,
        value
      }) : onHidePassword?.({
        ...event,
        value
      });
      return !hidden;
    });
    if (ref.current) {
      ref.current.focus();
    }
  }, [props]);
  const preventFocusChange = useCallback(event => {
    event.preventDefault();
  }, []);
  const toggleVisibilityButton = useMemo(() => {
    return _jsx(SubmitButton, {
      id: idToUse + '-submit-button',
      type: "button",
      variant: "secondary",
      "aria-controls": idToUse,
      "aria-label": hidden ? translations.ariaLabelShow : translations.ariaLabelHide,
      icon: _jsx(IconPrimary, {
        icon: size === 'large' ? passwordIconLarge : passwordIcon,
        transitionState: hidden ? 'view' : 'hide'
      }),
      disabled: disabled,
      skeleton: sharedContext.skeleton,
      onMouseDown: preventFocusChange,
      onClick: toggleVisibility
    });
  }, [idToUse, hidden, translations.ariaLabelShow, translations.ariaLabelHide, size, disabled, sharedContext.skeleton, preventFocusChange, toggleVisibility]);
  return _jsx(StringField, {
    id: idToUse,
    className: clsx('dnb-forms-field-password', className),
    label: label !== null && label !== void 0 ? label : translations.label,
    type: hidden ? 'password' : 'text',
    value: value,
    ref: ref,
    "aria-describedby": idToUse + '-submit-button',
    submitElement: toggleVisibilityButton,
    disabled: disabled,
    size: size,
    autoComplete: "current-password",
    errorMessages: errorMessages,
    ...props
  });
}
export default Password;
withComponentMarkers(Password, {
  _supportsSpacingProps: true
});
//# sourceMappingURL=Password.js.map