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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext, useRef, useState, useCallback, useMemo } from 'react';
import classnames from 'classnames';
import SharedContext from "../../../../shared/Context.js";
import StringField from "../String/index.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 { convertSnakeCaseProps } from "../../../../shared/helpers/withSnakeCaseProps.js";
import useTranslation from "../../hooks/useTranslation.js";
function Password({
  id,
  className,
  innerRef,
  value,
  label,
  disabled,
  size,
  ...externalProps
}) {
  var _innerRef$current;
  const props = convertSnakeCaseProps(Object.freeze(externalProps));
  const [hidden, setHidden] = useState(true);
  const sharedContext = useContext(SharedContext);
  const translations = useTranslation().Password;
  const ref = useRef((_innerRef$current = innerRef?.current) !== null && _innerRef$current !== void 0 ? _innerRef$current : null);
  const errorMessages = useMemo(() => {
    return {
      'Field.errorRequired': translations.errorRequired,
      ...props.errorMessages
    };
  }, [translations.errorRequired, props.errorMessages]);
  const toggleVisibility = useCallback(event => {
    const {
      onShowPassword,
      onHidePassword
    } = convertSnakeCaseProps(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 getAriaLabel = useCallback(() => {
    const ariaLabels = {
      showPassword: translations.ariaLabelShow,
      hidePassword: translations.ariaLabelHide
    };
    if (externalProps.show_password) {
      ariaLabels['showPassword'] = externalProps.show_password;
    }
    if (externalProps.hide_password) {
      ariaLabels['hidePassword'] = externalProps.hide_password;
    }
    return ariaLabels;
  }, [externalProps.show_password, externalProps.hide_password, translations]);
  const ariaLabels = getAriaLabel();
  const ToggleVisibilityButton = useCallback(() => {
    return React.createElement(SubmitButton, {
      id: id + '-submit-button',
      type: "button",
      variant: "secondary",
      "aria-controls": id,
      "aria-label": hidden ? ariaLabels.showPassword : ariaLabels.hidePassword,
      icon: size === 'large' ? hidden ? IconViewMedium : IconViewOffMedium : hidden ? IconView : IconViewOff,
      disabled: disabled,
      skeleton: sharedContext.skeleton,
      onClick: toggleVisibility
    });
  }, [id, hidden, sharedContext.skeleton, disabled, size, toggleVisibility, ariaLabels]);
  return React.createElement(StringField, _extends({
    id: id,
    className: classnames('dnb-forms-field-password', className),
    label: label !== null && label !== void 0 ? label : translations.label,
    type: hidden ? 'password' : 'text',
    value: value,
    innerRef: ref,
    "aria-describedby": id + '-submit-button',
    submitElement: React.createElement(ToggleVisibilityButton, null),
    disabled: disabled,
    size: size,
    autoComplete: "current-password",
    errorMessages: errorMessages
  }, props));
}
export default Password;
Password._supportsSpacingProps = true;
//# sourceMappingURL=Password.js.map