@pingux/astro 2.21.0-alpha.4 → 2.22.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,21 +15,24 @@ _Object$defineProperty(exports, "__esModule", {
15
15
  value: true
16
16
  });
17
17
  exports["default"] = void 0;
18
- var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
19
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
20
- var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
21
18
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
22
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
23
19
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
20
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
24
21
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
22
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
23
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
24
+ var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
25
+ var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
26
+ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
25
27
  var _react = _interopRequireWildcard(require("react"));
26
28
  var _reactAria = require("react-aria");
27
29
  var _EyeOffOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EyeOffOutlineIcon"));
28
30
  var _EyeOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EyeOutlineIcon"));
29
31
  var _utils = require("@react-aria/utils");
32
+ var _visuallyHidden = require("@react-aria/visually-hidden");
30
33
  var _propTypes = _interopRequireDefault(require("prop-types"));
31
34
  var _ = require("../..");
32
- var hooks = _interopRequireWildcard(require("../../hooks"));
35
+ var _hooks = require("../../hooks");
33
36
  var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
34
37
  var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
35
38
  var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
@@ -39,11 +42,25 @@ var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "
39
42
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
40
43
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
44
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
42
- 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) { (0, _defineProperty2["default"])(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; }
45
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
43
46
  var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
44
47
  HIDE: 'hide password',
45
48
  SHOW: 'show password'
46
49
  };
50
+ var RequirementMessage = function RequirementMessage(_ref) {
51
+ var _context;
52
+ var requirement = _ref.requirement;
53
+ return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _hooks.useDebounce)({
54
+ value: (0, _concat["default"])(_context = "".concat(requirement.name, " ")).call(_context, requirement.status === _statuses["default"].SUCCESS ? 'success' : 'not met'),
55
+ delay: 100
56
+ }));
57
+ };
58
+ RequirementMessage.propTypes = {
59
+ requirement: _propTypes["default"].shape({
60
+ name: _propTypes["default"].string,
61
+ status: _propTypes["default"].string
62
+ })
63
+ };
47
64
  var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
48
65
  var helperText = props.helperText,
49
66
  isVisibleProp = props.isVisible,
@@ -55,36 +72,41 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
55
72
  viewHiddenIconTestId = props.viewHiddenIconTestId,
56
73
  viewIconTestId = props.viewIconTestId,
57
74
  others = (0, _objectWithoutProperties2["default"])(props, _excluded);
75
+ var _useState = (0, _react.useState)(false),
76
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
77
+ isTyping = _useState2[0],
78
+ setIsTyping = _useState2[1];
58
79
  var checkRequirements = function checkRequirements() {
59
80
  return !(0, _filter["default"])(requirements).call(requirements, function (req) {
60
81
  return req.status === 'default';
61
82
  }).length > 0;
62
83
  };
63
- var _hooks$useField = hooks.useField(_objectSpread({
84
+ var _useField = (0, _hooks.useField)(_objectSpread({
64
85
  status: status
65
86
  }, others)),
66
- fieldContainerProps = _hooks$useField.fieldContainerProps,
67
- fieldControlInputProps = _hooks$useField.fieldControlInputProps,
68
- fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
69
- fieldLabelProps = _hooks$useField.fieldLabelProps;
70
- var isFocused = fieldControlInputProps.isFocused;
87
+ fieldContainerProps = _useField.fieldContainerProps,
88
+ fieldControlInputProps = _useField.fieldControlInputProps,
89
+ fieldControlWrapperProps = _useField.fieldControlWrapperProps,
90
+ fieldLabelProps = _useField.fieldLabelProps;
91
+ var isFocused = fieldControlInputProps.isFocused,
92
+ onChange = fieldControlInputProps.onChange;
71
93
  var inputRef = (0, _react.useRef)();
72
94
  var popoverRef = (0, _react.useRef)();
73
- hooks.usePropWarning(props, 'disabled', 'isDisabled');
95
+ (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
74
96
  /* istanbul ignore next */
75
97
  (0, _react.useImperativeHandle)(ref, function () {
76
98
  return inputRef.current;
77
99
  });
78
- var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, isVisibleProp),
79
- _hooks$useProgressive2 = (0, _slicedToArray2["default"])(_hooks$useProgressive, 2),
80
- isVisible = _hooks$useProgressive2[0],
81
- setIsShown = _hooks$useProgressive2[1];
100
+ var _useProgressiveState = (0, _hooks.useProgressiveState)(isVisibleProp, isVisibleProp),
101
+ _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
102
+ isVisible = _useProgressiveState2[0],
103
+ setIsShown = _useProgressiveState2[1];
82
104
 
83
105
  // Measure the width of the input to inform the width of the menu (below).
84
- var _useState = (0, _react.useState)(null),
85
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
86
- menuWidth = _useState2[0],
87
- setMenuWidth = _useState2[1];
106
+ var _useState3 = (0, _react.useState)(null),
107
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
108
+ menuWidth = _useState4[0],
109
+ setMenuWidth = _useState4[1];
88
110
  var onResize = (0, _react.useCallback)(function () {
89
111
  /* istanbul ignore next */
90
112
  if (inputRef.current) {
@@ -117,21 +139,30 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
117
139
  minWidth: menuWidth,
118
140
  width: menuWidth
119
141
  }, overlayProps.style);
120
- var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlWrapperProps.className, {
142
+ var _useStatusClasses = (0, _hooks.useStatusClasses)(fieldControlWrapperProps.className, {
121
143
  'is-success': status === _statuses["default"].SUCCESS || checkRequirements() && requirements.length > 0
122
144
  }),
123
- classNames = _hooks$useStatusClass.classNames;
145
+ classNames = _useStatusClasses.classNames;
124
146
  var toggleShowPasswordAriaLabel = isVisible ? ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.HIDE : ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.SHOW;
125
147
  var handleToggleShowPassword = function handleToggleShowPassword() {
126
148
  setIsShown(!isVisible);
127
149
  if (onVisibleChangeProp) {
128
- var _context;
150
+ var _context2;
129
151
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
130
152
  args[_key] = arguments[_key];
131
153
  }
132
- onVisibleChangeProp.apply(void 0, (0, _concat["default"])(_context = [!isVisible]).call(_context, args));
154
+ onVisibleChangeProp.apply(void 0, (0, _concat["default"])(_context2 = [!isVisible]).call(_context2, args));
133
155
  }
134
156
  };
157
+ var handleInputChange = function handleInputChange(e) {
158
+ if (onChange) {
159
+ onChange(e);
160
+ }
161
+ setIsTyping(true);
162
+ (0, _setTimeout2["default"])(function () {
163
+ setIsTyping(false);
164
+ }, [300]);
165
+ };
135
166
  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
136
167
  variant: "forms.input.fieldContainer"
137
168
  }, fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
@@ -142,6 +173,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
142
173
  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
143
174
  ref: inputRef
144
175
  }, fieldControlInputProps, {
176
+ onChange: handleInputChange,
145
177
  type: isVisible ? 'text' : 'password',
146
178
  sx: {
147
179
  pr: '43px'
@@ -162,7 +194,10 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
162
194
  icon: isVisible ? _EyeOutlineIcon["default"] : _EyeOffOutlineIcon["default"]
163
195
  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && (0, _react2.jsx)(_.FieldHelperText, {
164
196
  status: status
165
- }, helperText)), (0, _react2.jsx)(_.PopoverContainer, {
197
+ }, helperText)), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
198
+ role: "alert",
199
+ "aria-live": "polite"
200
+ }, requirements.length > 0 && checkRequirements() ? 'All requirements are met' : ''), (0, _react2.jsx)(_.PopoverContainer, {
166
201
  hasNoArrow: true,
167
202
  isDismissable: false,
168
203
  isNonModal: true,
@@ -170,12 +205,18 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
170
205
  placement: placement,
171
206
  ref: popoverRef,
172
207
  style: style
173
- }, (0, _react2.jsx)(_.Box, {
174
- role: "alert",
175
- "aria-label": "requirements list"
176
208
  }, (0, _react2.jsx)(_.RequirementsList, (0, _extends2["default"])({
177
209
  requirements: requirements
178
- }, requirementsListProps)))));
210
+ }, requirementsListProps)), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
211
+ "aria-live": "polite",
212
+ "aria-busy": isTyping
213
+ }, "Password requirements:", (0, _map["default"])(requirements).call(requirements, function (req) {
214
+ return (0, _react2.jsx)(_react["default"].Fragment, {
215
+ key: req.name
216
+ }, (0, _react2.jsx)(RequirementMessage, {
217
+ requirement: req
218
+ }));
219
+ }))));
179
220
  });
180
221
  PasswordField.propTypes = _objectSpread(_objectSpread(_objectSpread({
181
222
  /** The rendered label for the field. */
@@ -14,6 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
14
14
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
15
15
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
16
16
  var _react = _interopRequireDefault(require("react"));
17
+ var _testUtils = require("react-dom/test-utils");
17
18
  var _cache = _interopRequireDefault(require("@emotion/cache"));
18
19
  var _react2 = require("@emotion/react");
19
20
  var _react3 = require("@testing-library/react");
@@ -78,6 +79,9 @@ var getComponent = function getComponent() {
78
79
 
79
80
  // Need to be added to each test file to test accessibility using axe.
80
81
  (0, _testAxe["default"])(getComponent);
82
+ afterEach(function () {
83
+ jest.resetAllMocks();
84
+ });
81
85
  test('default password field', function () {
82
86
  getComponent();
83
87
  var field = _react3.screen.getByTestId(testId);
@@ -204,4 +208,21 @@ test('password field with helper text', function () {
204
208
  });
205
209
  var helper = _react3.screen.getByText(helperText);
206
210
  expect(helper).toBeInTheDocument();
211
+ });
212
+ test('onChange function receives right text', function () {
213
+ var inputText = '';
214
+ (0, _testUtils.act)(function () {
215
+ global.setTimeout = jest.fn(function (cb) {
216
+ return cb();
217
+ });
218
+ });
219
+ var testOnChange = function testOnChange(e) {
220
+ inputText = e.target.value;
221
+ };
222
+ getComponent({
223
+ onChange: testOnChange
224
+ });
225
+ var input = _react3.screen.getByRole('textbox');
226
+ _userEvent["default"].type(input, '12345678');
227
+ expect(inputText).toBe('12345678');
207
228
  });
@@ -1,28 +1,31 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
4
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
5
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
6
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
7
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
8
1
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
9
- import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
10
2
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
3
+ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
11
4
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
12
5
  var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "requirementsListProps", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
13
6
  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; }
14
- 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; }
15
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
7
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
16
8
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
9
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
10
+ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
17
11
  import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
12
+ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
13
+ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
14
+ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
15
+ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
16
+ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
17
+ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
18
+ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
19
+ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
18
20
  import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
19
21
  import { useOverlayPosition } from 'react-aria';
20
22
  import EyeOffIcon from '@pingux/mdi-react/EyeOffOutlineIcon';
21
23
  import EyeIcon from '@pingux/mdi-react/EyeOutlineIcon';
22
24
  import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
25
+ import { VisuallyHidden } from '@react-aria/visually-hidden';
23
26
  import PropTypes from 'prop-types';
24
27
  import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../..';
25
- import * as hooks from '../../hooks';
28
+ import { useDebounce, useField, useProgressiveState, usePropWarning, useStatusClasses } from '../../hooks';
26
29
  import statuses from '../../utils/devUtils/constants/statuses';
27
30
  import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
28
31
  import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
@@ -32,6 +35,20 @@ var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
32
35
  HIDE: 'hide password',
33
36
  SHOW: 'show password'
34
37
  };
38
+ var RequirementMessage = function RequirementMessage(_ref) {
39
+ var _context;
40
+ var requirement = _ref.requirement;
41
+ return ___EmotionJSX(React.Fragment, null, useDebounce({
42
+ value: _concatInstanceProperty(_context = "".concat(requirement.name, " ")).call(_context, requirement.status === statuses.SUCCESS ? 'success' : 'not met'),
43
+ delay: 100
44
+ }));
45
+ };
46
+ RequirementMessage.propTypes = {
47
+ requirement: PropTypes.shape({
48
+ name: PropTypes.string,
49
+ status: PropTypes.string
50
+ })
51
+ };
35
52
  var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
36
53
  var helperText = props.helperText,
37
54
  isVisibleProp = props.isVisible,
@@ -43,36 +60,41 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
43
60
  viewHiddenIconTestId = props.viewHiddenIconTestId,
44
61
  viewIconTestId = props.viewIconTestId,
45
62
  others = _objectWithoutProperties(props, _excluded);
63
+ var _useState = useState(false),
64
+ _useState2 = _slicedToArray(_useState, 2),
65
+ isTyping = _useState2[0],
66
+ setIsTyping = _useState2[1];
46
67
  var checkRequirements = function checkRequirements() {
47
68
  return !_filterInstanceProperty(requirements).call(requirements, function (req) {
48
69
  return req.status === 'default';
49
70
  }).length > 0;
50
71
  };
51
- var _hooks$useField = hooks.useField(_objectSpread({
72
+ var _useField = useField(_objectSpread({
52
73
  status: status
53
74
  }, others)),
54
- fieldContainerProps = _hooks$useField.fieldContainerProps,
55
- fieldControlInputProps = _hooks$useField.fieldControlInputProps,
56
- fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
57
- fieldLabelProps = _hooks$useField.fieldLabelProps;
58
- var isFocused = fieldControlInputProps.isFocused;
75
+ fieldContainerProps = _useField.fieldContainerProps,
76
+ fieldControlInputProps = _useField.fieldControlInputProps,
77
+ fieldControlWrapperProps = _useField.fieldControlWrapperProps,
78
+ fieldLabelProps = _useField.fieldLabelProps;
79
+ var isFocused = fieldControlInputProps.isFocused,
80
+ onChange = fieldControlInputProps.onChange;
59
81
  var inputRef = useRef();
60
82
  var popoverRef = useRef();
61
- hooks.usePropWarning(props, 'disabled', 'isDisabled');
83
+ usePropWarning(props, 'disabled', 'isDisabled');
62
84
  /* istanbul ignore next */
63
85
  useImperativeHandle(ref, function () {
64
86
  return inputRef.current;
65
87
  });
66
- var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, isVisibleProp),
67
- _hooks$useProgressive2 = _slicedToArray(_hooks$useProgressive, 2),
68
- isVisible = _hooks$useProgressive2[0],
69
- setIsShown = _hooks$useProgressive2[1];
88
+ var _useProgressiveState = useProgressiveState(isVisibleProp, isVisibleProp),
89
+ _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
90
+ isVisible = _useProgressiveState2[0],
91
+ setIsShown = _useProgressiveState2[1];
70
92
 
71
93
  // Measure the width of the input to inform the width of the menu (below).
72
- var _useState = useState(null),
73
- _useState2 = _slicedToArray(_useState, 2),
74
- menuWidth = _useState2[0],
75
- setMenuWidth = _useState2[1];
94
+ var _useState3 = useState(null),
95
+ _useState4 = _slicedToArray(_useState3, 2),
96
+ menuWidth = _useState4[0],
97
+ setMenuWidth = _useState4[1];
76
98
  var onResize = useCallback(function () {
77
99
  /* istanbul ignore next */
78
100
  if (inputRef.current) {
@@ -105,20 +127,29 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
105
127
  minWidth: menuWidth,
106
128
  width: menuWidth
107
129
  }, overlayProps.style);
108
- var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlWrapperProps.className, {
130
+ var _useStatusClasses = useStatusClasses(fieldControlWrapperProps.className, {
109
131
  'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
110
132
  }),
111
- classNames = _hooks$useStatusClass.classNames;
133
+ classNames = _useStatusClasses.classNames;
112
134
  var toggleShowPasswordAriaLabel = isVisible ? ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.HIDE : ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.SHOW;
113
135
  var handleToggleShowPassword = function handleToggleShowPassword() {
114
136
  setIsShown(!isVisible);
115
137
  if (onVisibleChangeProp) {
116
- var _context;
138
+ var _context2;
117
139
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
118
140
  args[_key] = arguments[_key];
119
141
  }
120
- onVisibleChangeProp.apply(void 0, _concatInstanceProperty(_context = [!isVisible]).call(_context, args));
142
+ onVisibleChangeProp.apply(void 0, _concatInstanceProperty(_context2 = [!isVisible]).call(_context2, args));
143
+ }
144
+ };
145
+ var handleInputChange = function handleInputChange(e) {
146
+ if (onChange) {
147
+ onChange(e);
121
148
  }
149
+ setIsTyping(true);
150
+ _setTimeout(function () {
151
+ setIsTyping(false);
152
+ }, [300]);
122
153
  };
123
154
  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
124
155
  variant: "forms.input.fieldContainer"
@@ -130,6 +161,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
130
161
  }), ___EmotionJSX(Input, _extends({
131
162
  ref: inputRef
132
163
  }, fieldControlInputProps, {
164
+ onChange: handleInputChange,
133
165
  type: isVisible ? 'text' : 'password',
134
166
  sx: {
135
167
  pr: '43px'
@@ -150,7 +182,10 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
150
182
  icon: isVisible ? EyeIcon : EyeOffIcon
151
183
  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && ___EmotionJSX(FieldHelperText, {
152
184
  status: status
153
- }, helperText)), ___EmotionJSX(PopoverContainer, {
185
+ }, helperText)), ___EmotionJSX(VisuallyHidden, {
186
+ role: "alert",
187
+ "aria-live": "polite"
188
+ }, requirements.length > 0 && checkRequirements() ? 'All requirements are met' : ''), ___EmotionJSX(PopoverContainer, {
154
189
  hasNoArrow: true,
155
190
  isDismissable: false,
156
191
  isNonModal: true,
@@ -158,12 +193,18 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
158
193
  placement: placement,
159
194
  ref: popoverRef,
160
195
  style: style
161
- }, ___EmotionJSX(Box, {
162
- role: "alert",
163
- "aria-label": "requirements list"
164
196
  }, ___EmotionJSX(RequirementsList, _extends({
165
197
  requirements: requirements
166
- }, requirementsListProps)))));
198
+ }, requirementsListProps)), ___EmotionJSX(VisuallyHidden, {
199
+ "aria-live": "polite",
200
+ "aria-busy": isTyping
201
+ }, "Password requirements:", _mapInstanceProperty(requirements).call(requirements, function (req) {
202
+ return ___EmotionJSX(React.Fragment, {
203
+ key: req.name
204
+ }, ___EmotionJSX(RequirementMessage, {
205
+ requirement: req
206
+ }));
207
+ }))));
167
208
  });
168
209
  PasswordField.propTypes = _objectSpread(_objectSpread(_objectSpread({
169
210
  /** The rendered label for the field. */
@@ -12,6 +12,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
12
12
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
13
13
  function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context4; _forEachInstanceProperty(_context4 = ["next", "throw", "return"]).call(_context4, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context5; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context5 = this.tryEntries).call(_context5, resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
14
14
  import React from 'react';
15
+ import { act } from 'react-dom/test-utils';
15
16
  import createCache from '@emotion/cache';
16
17
  import { CacheProvider } from '@emotion/react';
17
18
  import { render, screen } from '@testing-library/react';
@@ -78,6 +79,9 @@ var getComponent = function getComponent() {
78
79
 
79
80
  // Need to be added to each test file to test accessibility using axe.
80
81
  axeTest(getComponent);
82
+ afterEach(function () {
83
+ jest.resetAllMocks();
84
+ });
81
85
  test('default password field', function () {
82
86
  getComponent();
83
87
  var field = screen.getByTestId(testId);
@@ -204,4 +208,21 @@ test('password field with helper text', function () {
204
208
  });
205
209
  var helper = screen.getByText(helperText);
206
210
  expect(helper).toBeInTheDocument();
211
+ });
212
+ test('onChange function receives right text', function () {
213
+ var inputText = '';
214
+ act(function () {
215
+ global.setTimeout = jest.fn(function (cb) {
216
+ return cb();
217
+ });
218
+ });
219
+ var testOnChange = function testOnChange(e) {
220
+ inputText = e.target.value;
221
+ };
222
+ getComponent({
223
+ onChange: testOnChange
224
+ });
225
+ var input = screen.getByRole('textbox');
226
+ userEvent.type(input, '12345678');
227
+ expect(inputText).toBe('12345678');
207
228
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.21.0-alpha.4",
3
+ "version": "2.22.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",