@spark-web/password-input/dist/spark-web-password-input.cjs.dev.js

--- title: Password Input storybookPath: forms-passwordinput--default isExperimentalPackage: true ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var react$1 = require('@emotion/react');
var button = require('@spark-web/button');
var field = require('@spark-web/field');
var icon = require('@spark-web/icon');
var textInput = require('@spark-web/text-input');
var react = require('react');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function useIconButtonStyles() {
  var _useButtonStyles = button.useButtonStyles({
      iconOnly: false,
      prominence: 'none',
      size: 'medium',
      tone: 'neutral'
    }),
    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
    buttonStyles = _useButtonStyles2[1];
  return [{
    alignItems: 'center',
    borderRadius: 'full',
    cursor: 'pointer',
    display: 'inline-flex',
    gap: 'small',
    height: 'small',
    justifyContent: 'center',
    paddingX: 'xsmall',
    position: 'relative',
    width: 'small'
  }, buttonStyles];
}

var PasswordInput = /*#__PURE__*/react.forwardRef(function (props, forwardedRef) {
  var _useFieldContext = field.useFieldContext(),
    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
    disabled = _useFieldContext2[0].disabled;
  var _useState = react.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showPassword = _useState2[0],
    setShowPassword = _useState2[1];
  var toggleShowPassword = function toggleShowPassword() {
    return setShowPassword(!showPassword);
  };
  var _useIconButtonStyles = useIconButtonStyles(),
    _useIconButtonStyles2 = _slicedToArray(_useIconButtonStyles, 2),
    boxProps = _useIconButtonStyles2[0],
    buttonStyles = _useIconButtonStyles2[1];
  var Icon = showPassword ? icon.EyeOffIcon : icon.EyeIcon;
  return jsxRuntime.jsx(textInput.TextInput, _objectSpread(_objectSpread({}, props), {}, {
    ref: forwardedRef,
    inputMode: "text",
    type: showPassword ? 'text' : 'password',
    children: jsxRuntime.jsx(textInput.InputAdornment, {
      placement: "end",
      children: jsxRuntime.jsx(button.BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
        "aria-checked": showPassword,
        "aria-label": "".concat(showPassword ? 'Hide' : 'Show', " password"),
        css: react$1.css(buttonStyles),
        disabled: disabled,
        onClick: toggleShowPassword,
        role: "switch"
        // The input is not keyboard navigable when disabled and so we are
        // also removing the button from the tab index to make it less
        // confusing to keyboard and assitive technology users.
        ,
        tabIndex: disabled ? -1 : undefined,
        children: jsxRuntime.jsx(Icon, {
          tone: disabled ? 'disabled' : 'neutral'
        })
      }))
    })
  }));
});
PasswordInput.displayName = 'PasswordInput';

exports.PasswordInput = PasswordInput;