@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/PasswordField/PasswordField.js

@@ -10,79 +10,72 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import React, { forwardRef, useRef, useImperativeHandle, useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import EyeIcon from 'mdi-react/EyeOutlineIcon';
-import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
-import { useOverlayPosition } from '@react-aria/overlays';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useOverlayPosition } from 'react-aria';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import statuses from '../../utils/devUtils/constants/statuses';
+import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import PropTypes from 'prop-types';
+import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../..';
 import * as hooks from '../../hooks';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
   HIDE: 'hide password',
   SHOW: 'show password'
 };
+
 /**
   * Combines a text input, label, IconButton and helper text for a complete, form-ready solution.
  */
-
 var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-      isVisibleProp = props.isVisible,
-      onVisibleChangeProp = props.onVisibleChange,
-      requirements = props.requirements,
-      slots = props.slots,
-      status = props.status,
-      viewHiddenIconTestId = props.viewHiddenIconTestId,
-      viewIconTestId = props.viewIconTestId,
-      others = _objectWithoutProperties(props, _excluded);
-
+    isVisibleProp = props.isVisible,
+    onVisibleChangeProp = props.onVisibleChange,
+    requirements = props.requirements,
+    slots = props.slots,
+    status = props.status,
+    viewHiddenIconTestId = props.viewHiddenIconTestId,
+    viewIconTestId = props.viewIconTestId,
+    others = _objectWithoutProperties(props, _excluded);
   var checkRequirements = function checkRequirements() {
     return !_filterInstanceProperty(requirements).call(requirements, function (req) {
       return req.status === 'default';
     }).length > 0;
   };
-
   var _hooks$useField = hooks.useField(_objectSpread({
-    status: status
-  }, others)),
-      fieldContainerProps = _hooks$useField.fieldContainerProps,
-      fieldControlProps = _hooks$useField.fieldControlProps,
-      fieldLabelProps = _hooks$useField.fieldLabelProps;
-
-  var isFocused = fieldControlProps.isFocused;
+      status: status
+    }, others)),
+    fieldContainerProps = _hooks$useField.fieldContainerProps,
+    fieldControlInputProps = _hooks$useField.fieldControlInputProps,
+    fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
+    fieldLabelProps = _hooks$useField.fieldLabelProps;
+  var isFocused = fieldControlInputProps.isFocused;
   var inputRef = useRef();
   var popoverRef = useRef();
   hooks.usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, isVisibleProp),
-      _hooks$useProgressive2 = _slicedToArray(_hooks$useProgressive, 2),
-      isVisible = _hooks$useProgressive2[0],
-      setIsShown = _hooks$useProgressive2[1]; // Measure the width of the input to inform the width of the menu (below).
-
+    _hooks$useProgressive2 = _slicedToArray(_hooks$useProgressive, 2),
+    isVisible = _hooks$useProgressive2[0],
+    setIsShown = _hooks$useProgressive2[1];
 
+  // Measure the width of the input to inform the width of the menu (below).
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      menuWidth = _useState2[0],
-      setMenuWidth = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    menuWidth = _useState2[0],
+    setMenuWidth = _useState2[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputRef.current) {
@@ -94,17 +87,15 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-
   var _useOverlayPosition = useOverlayPosition({
-    isOpen: true,
-    overlayRef: popoverRef,
-    placement: 'bottom end',
-    targetRef: inputRef
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition;
-
+      isOpen: true,
+      overlayRef: popoverRef,
+      placement: 'bottom end',
+      targetRef: inputRef
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
   useLayoutEffect(function () {
     if (isFocused) {
       requestAnimationFrame(function () {
@@ -112,42 +103,35 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
   }, [isFocused, updatePosition]);
-
   var style = _objectSpread({
     minWidth: menuWidth,
     width: menuWidth
   }, overlayProps.style);
-
-  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlProps.className, {
-    'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
-  }),
-      classNames = _hooks$useStatusClass.classNames;
-
+  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlWrapperProps.className, {
+      'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
+    }),
+    classNames = _hooks$useStatusClass.classNames;
   var toggleShowPasswordAriaLabel = isVisible ? ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.HIDE : ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.SHOW;
-
   var handleToggleShowPassword = function handleToggleShowPassword() {
     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, _concatInstanceProperty(_context = [!isVisible]).call(_context, args));
     }
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
-    variant: "forms.input.wrapper"
-  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
-    variant: "forms.input.container",
-    isRow: true,
+    variant: "forms.input.fieldContainer"
+  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.input.fieldControlWrapper",
+    isRow: true
+  }, fieldControlWrapperProps, {
     className: classNames
-  }, ___EmotionJSX(Input, _extends({
+  }), ___EmotionJSX(Input, _extends({
     ref: inputRef
-  }, fieldControlProps, {
+  }, fieldControlInputProps, {
     type: isVisible ? 'text' : 'password',
     sx: {
       pr: '43px'
@@ -157,7 +141,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.input.containedIcon"
   }, ___EmotionJSX(IconButton, {
     "aria-label": toggleShowPasswordAriaLabel,
-    isDisabled: fieldControlProps.disabled,
+    isDisabled: fieldControlInputProps.disabled,
     onPress: handleToggleShowPassword,
     size: 28
   }, ___EmotionJSX(Icon, {
@@ -177,25 +161,19 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     requirements: requirements
   })));
 });
-PasswordField.propTypes = _objectSpread({
+PasswordField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Whether or not the password is visible. */
   isVisible: PropTypes.bool,
-
   /** Function that is passed into the IconButton within this component. */
   onVisibleChange: PropTypes.func,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** The unique identifier for the input element. */
   id: PropTypes.string,
-
   /** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: PropTypes.string,
-
   /**
    * Callback fired when the value is changed on the input element.
    *
@@ -203,83 +181,55 @@ PasswordField.propTypes = _objectSpread({
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /** The value for the input element (controlled). */
   value: PropTypes.string,
-
   /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
   autoComplete: PropTypes.string,
-
   /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
-
   /** A list of class names to apply to the input element. */
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** The default value for the input element. */
   defaultValue: PropTypes.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.bool,
-
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected, but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether the field is required. */
   isRequired: PropTypes.bool,
-
   /** Add max Length to input value */
   maxLength: PropTypes.number,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onFocus: PropTypes.func,
-
   /** The placeholder text to display in the input element. */
   placeholder: PropTypes.string,
-
   /** Provides a way to insert markup in specified places. */
   slots: PropTypes.shape({
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   }),
-
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: PropTypes.string,
-
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({}),
-
   /** @ignore Prop that allows testing of the icon button. */
   viewHiddenIconTestId: PropTypes.string,
-
   /** @ignore Prop that allows testing of the icon button. */
   viewIconTestId: PropTypes.string,
-
   /** Array of Requirements and their status. */
   requirements: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
   }))
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,