@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

package/lib/cjs/components/PasswordField/PasswordField.js

@@ -0,0 +1,338 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _EyeOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOutlineIcon"));
+
+var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
+
+var _overlays = require("@react-aria/overlays");
+
+var _utils = require("@react-aria/utils");
+
+var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+
+var _useProgressiveState3 = _interopRequireDefault(require("../../hooks/useProgressiveState"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _hooks = require("../../hooks");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+
+var _Input = _interopRequireDefault(require("../Input"));
+
+var _Label = _interopRequireDefault(require("../Label"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
+
+var _RequirementsList = _interopRequireDefault(require("../RequirementsList"));
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+  * Combines a text input, label, IconButton and helper text for a complete, form-ready solution.
+ */
+var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var helperText = props.helperText,
+      isVisibleProp = props.isVisible,
+      onVisibleChangeProp = props.onVisibleChange,
+      slots = props.slots,
+      status = props.status,
+      viewHiddenIconTestId = props.viewHiddenIconTestId,
+      viewIconTestId = props.viewIconTestId,
+      requirements = props.requirements,
+      others = (0, _objectWithoutProperties2["default"])(props, ["helperText", "isVisible", "onVisibleChange", "slots", "status", "viewHiddenIconTestId", "viewIconTestId", "requirements"]);
+
+  var checkRequirements = function checkRequirements() {
+    return !(0, _filter["default"])(requirements).call(requirements, function (req) {
+      return req.status === 'default';
+    }).length > 0;
+  };
+
+  var _useField = (0, _useField2["default"])(_objectSpread({
+    status: status
+  }, others)),
+      fieldContainerProps = _useField.fieldContainerProps,
+      fieldControlProps = _useField.fieldControlProps,
+      fieldLabelProps = _useField.fieldLabelProps;
+
+  var isFocused = fieldControlProps.isFocused;
+  var inputRef = (0, _react.useRef)();
+  var popoverRef = (0, _react.useRef)();
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputRef.current;
+  });
+
+  var _useProgressiveState = (0, _useProgressiveState3["default"])(isVisibleProp, onVisibleChangeProp),
+      _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
+      isVisible = _useProgressiveState2[0],
+      setIsShown = _useProgressiveState2[1];
+
+  var onVisibleChange = function onVisibleChange() {
+    setIsShown(!isVisible);
+
+    if (onVisibleChangeProp) {
+      var _context;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      onVisibleChangeProp.apply(void 0, (0, _concat["default"])(_context = [!isVisible]).call(_context, args));
+    }
+  }; // Measure the width of the input to inform the width of the menu (below).
+
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      menuWidth = _useState2[0],
+      setMenuWidth = _useState2[1];
+
+  var onResize = (0, _react.useCallback)(function () {
+    /* istanbul ignore next */
+    if (inputRef.current) {
+      setMenuWidth(inputRef.current.offsetWidth);
+    }
+  }, [inputRef, setMenuWidth]);
+  (0, _utils.useResizeObserver)({
+    ref: inputRef,
+    onResize: onResize
+  });
+  (0, _utils.useLayoutEffect)(onResize, [onResize]);
+
+  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+    targetRef: inputRef,
+    overlayRef: popoverRef,
+    placement: 'bottom end',
+    isOpen: true
+  }),
+      overlayProps = _useOverlayPosition.overlayProps,
+      placement = _useOverlayPosition.placement,
+      updatePosition = _useOverlayPosition.updatePosition;
+
+  (0, _utils.useLayoutEffect)(function () {
+    if (isFocused) {
+      requestAnimationFrame(function () {
+        updatePosition();
+      });
+    }
+  }, [isFocused, updatePosition]);
+
+  var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
+    width: menuWidth,
+    minWidth: menuWidth
+  });
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(fieldControlProps.className, {
+    'is-success': status === _statuses["default"].SUCCESS || checkRequirements() && requirements.length > 0
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "forms.input.wrapper"
+  }, fieldContainerProps), (0, _react2.jsx)(_Label["default"], fieldLabelProps), (0, _react2.jsx)(_Box["default"], {
+    variant: "forms.input.container",
+    isRow: true,
+    className: classNames
+  }, (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({
+    ref: inputRef
+  }, fieldControlProps, {
+    type: isVisible ? 'text' : 'password',
+    sx: {
+      pr: '43px'
+    },
+    role: "textbox"
+  })), (0, _react2.jsx)(_Box["default"], {
+    variant: "forms.input.containedIcon"
+  }, (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "visible-icon",
+    isDisabled: fieldControlProps.disabled,
+    size: 28,
+    onPress: onVisibleChange
+  }, (0, _react2.jsx)(_Icon["default"], {
+    "data-testid": isVisible ? viewIconTestId : viewHiddenIconTestId,
+    icon: isVisible ? _EyeOutlineIcon["default"] : _EyeOffOutlineIcon["default"]
+  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status
+  }, helperText)), (0, _react2.jsx)(_PopoverContainer["default"], {
+    isOpen: isFocused && requirements && (0, _isArray["default"])(requirements) && !checkRequirements(),
+    ref: popoverRef,
+    placement: placement,
+    style: style,
+    hasNoArrow: true,
+    isNonModal: true,
+    isDismissable: false
+  }, (0, _react2.jsx)(_RequirementsList["default"], {
+    requirements: requirements
+  })));
+});
+PasswordField.propTypes = {
+  /** The rendered label for the field. */
+  label: _propTypes["default"].node,
+
+  /** Whether or not the password is visible. */
+  isVisible: _propTypes["default"].bool,
+
+  /** Function that is passed into the IconButton within this component. */
+  onVisibleChange: _propTypes["default"].func,
+
+  /** Text rendered below the input. */
+  helperText: _propTypes["default"].node,
+
+  /** The unique identifier for the input element. */
+  id: _propTypes["default"].string,
+
+  /** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
+  name: _propTypes["default"].string,
+
+  /**
+   * Callback fired when the value is changed on the input element.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: _propTypes["default"].func,
+
+  /** The value for the input element (controlled). */
+  value: _propTypes["default"].string,
+
+  /** How the input element should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  autocomplete: _propTypes["default"].string,
+
+  /** A list of class names to apply to the input element. */
+  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+
+  /** The default value for the input element. */
+  defaultValue: _propTypes["default"].string,
+
+  /** Whether the input element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus). */
+  hasAutoFocus: _propTypes["default"].bool,
+
+  /** Whether the field is disabled. */
+  isDisabled: _propTypes["default"].bool,
+
+  /** Whether the input can be selected, but not changed by the user. */
+  isReadOnly: _propTypes["default"].bool,
+
+  /** Whether the field is required. */
+  isRequired: _propTypes["default"].bool,
+
+  /** Add max Length to input value */
+  maxLength: _propTypes["default"].number,
+
+  /**
+   * Callback fired when focus is lost on the input element.
+   */
+  onBlur: _propTypes["default"].func,
+
+  /**
+   * Callback fired when focus is lost on the input element.
+   */
+  onFocus: _propTypes["default"].func,
+
+  /** The placeholder text to display in the input element. */
+  placeholder: _propTypes["default"].string,
+
+  /** Provides a way to insert markup in specified places. */
+  slots: _propTypes["default"].shape({
+    /** The given node will be inserted into the field container. */
+    inContainer: _propTypes["default"].node
+  }),
+
+  /** Determines the input status indicator and helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+
+  /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
+  type: _propTypes["default"].string,
+
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread directly into the input element. */
+  controlProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread directly into the label element. */
+  labelProps: _propTypes["default"].shape({}),
+
+  /** @ignore Prop that allows testing of the icon button. */
+  viewHiddenIconTestId: _propTypes["default"].string,
+
+  /** @ignore Prop that allows testing of the icon button. */
+  viewIconTestId: _propTypes["default"].string,
+
+  /** Array of Requirements and their status. */
+  requirements: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    name: _propTypes["default"].string.isRequired,
+    status: _propTypes["default"].oneOf(['default', 'success', 'warning', 'error'])
+  }))
+};
+PasswordField.defaultProps = {
+  hasAutoFocus: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  type: 'password',
+  status: _statuses["default"].DEFAULT,
+  requirements: []
+};
+PasswordField.displayName = 'PasswordField';
+var _default = PasswordField;
+exports["default"] = _default;