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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _clsx = require("clsx");
var _Context = _interopRequireDefault(require("../../../../shared/Context.js"));
var _index = _interopRequireDefault(require("../String/index.js"));
var _useId = _interopRequireDefault(require("../../../../shared/helpers/useId.js"));
var _Input = require("../../../../components/Input.js");
var _Icon = _interopRequireDefault(require("../../../../components/icon/Icon.js"));
var _IconPrimary = _interopRequireDefault(require("../../../../components/icon-primary/IconPrimary.js"));
var _index2 = require("../../../../icons/index.js");
var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const passwordIcon = _Icon.default.transition({
  view: _index2.view,
  hide: _index2.hide
});
const passwordIconLarge = _Icon.default.transition({
  view: _index2.view_medium,
  hide: _index2.hide_medium
});
function Password({
  id,
  className,
  ref: refProp,
  value,
  label,
  disabled,
  size,
  ...props
}) {
  var _refProp$current;
  const generatedId = (0, _useId.default)();
  const idToUse = id || generatedId;
  const [hidden, setHidden] = (0, _react.useState)(true);
  const sharedContext = (0, _react.useContext)(_Context.default);
  const translations = (0, _useTranslation.default)().Password;
  const ref = (0, _react.useRef)((_refProp$current = refProp?.current) !== null && _refProp$current !== void 0 ? _refProp$current : null);
  const errorMessages = (0, _react.useMemo)(() => {
    return {
      'Field.errorRequired': translations.errorRequired,
      ...props.errorMessages
    };
  }, [translations.errorRequired, props.errorMessages]);
  const toggleVisibility = (0, _react.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 = (0, _react.useCallback)(event => {
    event.preventDefault();
  }, []);
  const toggleVisibilityButton = (0, _react.useMemo)(() => {
    return (0, _jsxRuntime.jsx)(_Input.SubmitButton, {
      id: idToUse + '-submit-button',
      type: "button",
      variant: "secondary",
      "aria-controls": idToUse,
      "aria-label": hidden ? translations.ariaLabelShow : translations.ariaLabelHide,
      icon: (0, _jsxRuntime.jsx)(_IconPrimary.default, {
        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 (0, _jsxRuntime.jsx)(_index.default, {
    id: idToUse,
    className: (0, _clsx.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
  });
}
var _default = exports.default = Password;
(0, _withComponentMarkers.default)(Password, {
  _supportsSpacingProps: true
});
//# sourceMappingURL=Password.js.map