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

DNB Eufemia Design System UI Library

"use client";

import React, { useContext, useRef, useState, useCallback, useMemo } 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 IconView from "../../../../icons/view.js";
import IconViewOff from "../../../../icons/hide.js";
import IconViewMedium from "../../../../icons/view_medium.js";
import IconViewOffMedium from "../../../../icons/hide_medium.js";
import useTranslation from "../../hooks/useTranslation.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx } from "react/jsx-runtime";
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 === null || refProp === void 0 ? void 0 : 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 === null || onShowPassword === void 0 ? void 0 : onShowPassword({
        ...event,
        value
      }) : onHidePassword === null || onHidePassword === void 0 ? void 0 : 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: size === 'large' ? hidden ? IconViewMedium : IconViewOffMedium : hidden ? IconView : IconViewOff,
      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