@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
|
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
|
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
|
84
|
+
var _useField = (0, _hooks.useField)(_objectSpread({
|
64
85
|
status: status
|
65
86
|
}, others)),
|
66
|
-
fieldContainerProps =
|
67
|
-
fieldControlInputProps =
|
68
|
-
fieldControlWrapperProps =
|
69
|
-
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
|
-
|
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
|
79
|
-
|
80
|
-
isVisible =
|
81
|
-
setIsShown =
|
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
|
85
|
-
|
86
|
-
menuWidth =
|
87
|
-
setMenuWidth =
|
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
|
142
|
+
var _useStatusClasses = (0, _hooks.useStatusClasses)(fieldControlWrapperProps.className, {
|
121
143
|
'is-success': status === _statuses["default"].SUCCESS || checkRequirements() && requirements.length > 0
|
122
144
|
}),
|
123
|
-
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
|
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"])(
|
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)(
|
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
|
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
|
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
|
72
|
+
var _useField = useField(_objectSpread({
|
52
73
|
status: status
|
53
74
|
}, others)),
|
54
|
-
fieldContainerProps =
|
55
|
-
fieldControlInputProps =
|
56
|
-
fieldControlWrapperProps =
|
57
|
-
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
|
-
|
83
|
+
usePropWarning(props, 'disabled', 'isDisabled');
|
62
84
|
/* istanbul ignore next */
|
63
85
|
useImperativeHandle(ref, function () {
|
64
86
|
return inputRef.current;
|
65
87
|
});
|
66
|
-
var
|
67
|
-
|
68
|
-
isVisible =
|
69
|
-
setIsShown =
|
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
|
73
|
-
|
74
|
-
menuWidth =
|
75
|
-
setMenuWidth =
|
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
|
130
|
+
var _useStatusClasses = useStatusClasses(fieldControlWrapperProps.className, {
|
109
131
|
'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
|
110
132
|
}),
|
111
|
-
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
|
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(
|
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(
|
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
|
});
|