@pingux/astro 2.14.1-alpha.2 → 2.14.1-alpha.3
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.
- package/lib/cjs/components/NumberField/NumberField.js +21 -50
- package/lib/cjs/components/NumberField/NumberField.test.js +8 -8
- package/lib/components/NumberField/NumberField.js +23 -52
- package/lib/components/NumberField/NumberField.test.js +8 -8
- package/package.json +1 -1
- package/lib/cjs/hooks/useHiddenNumberFieldValue/index.js +0 -14
- package/lib/cjs/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.js +0 -23
- package/lib/cjs/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.test.js +0 -35
- package/lib/hooks/useHiddenNumberFieldValue/index.js +0 -1
- package/lib/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.js +0 -16
- package/lib/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.test.js +0 -32
@@ -15,7 +15,6 @@ _Object$defineProperty(exports, "__esModule", {
|
|
15
15
|
value: true
|
16
16
|
});
|
17
17
|
exports["default"] = void 0;
|
18
|
-
var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
|
19
18
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
20
19
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
21
20
|
var _react = _interopRequireWildcard(require("react"));
|
@@ -29,7 +28,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
29
28
|
var _uuid = require("uuid");
|
30
29
|
var _ = require("../..");
|
31
30
|
var _hooks = require("../../hooks");
|
32
|
-
var _useHiddenNumberFieldValue = _interopRequireDefault(require("../../hooks/useHiddenNumberFieldValue"));
|
33
31
|
var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
|
34
32
|
var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
|
35
33
|
var _statusProp = require("../../utils/docUtils/statusProp");
|
@@ -37,11 +35,10 @@ var _react2 = require("@emotion/react");
|
|
37
35
|
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); }
|
38
36
|
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; }
|
39
37
|
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; }
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
38
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
41
39
|
var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
42
40
|
var helperText = props.helperText,
|
43
|
-
status = props.status
|
44
|
-
formatOptions = props.formatOptions;
|
41
|
+
status = props.status;
|
45
42
|
var _useLocale = (0, _i18n.useLocale)(),
|
46
43
|
locale = _useLocale.locale;
|
47
44
|
var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
|
@@ -92,66 +89,40 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
92
89
|
|
93
90
|
// this needed to remove console warning in React 16
|
94
91
|
// I believe once we update to 17 - we can remove this
|
95
|
-
var onInputFocus =
|
92
|
+
var onInputFocus = function onInputFocus(e) {
|
96
93
|
e.persist();
|
97
94
|
fieldControlInputProps.onFocus(e);
|
98
95
|
inputProps.onFocus(e);
|
99
|
-
}
|
100
|
-
var onInputBlur =
|
96
|
+
};
|
97
|
+
var onInputBlur = function onInputBlur(e) {
|
101
98
|
e.persist();
|
102
99
|
fieldControlInputProps.onBlur(e);
|
103
100
|
inputProps.onBlur(e);
|
104
|
-
}, [fieldControlInputProps, inputProps]);
|
105
|
-
var updatedFieldControlInputProps = (0, _react.useMemo)(function () {
|
106
|
-
return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
|
107
|
-
onFocus: onInputFocus,
|
108
|
-
onBlur: onInputBlur
|
109
|
-
});
|
110
|
-
}, [fieldControlInputProps, onInputBlur, onInputFocus]);
|
111
|
-
var onInputChange = function onInputChange(e) {
|
112
|
-
var _context;
|
113
|
-
var minValue = props.minValue;
|
114
|
-
var trimmedInputValue = (0, _trim["default"])(_context = e.target.value).call(_context);
|
115
|
-
var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
|
116
|
-
target: _objectSpread(_objectSpread({}, e.target), {}, {
|
117
|
-
value: trimmedInputValue
|
118
|
-
})
|
119
|
-
});
|
120
|
-
if (!trimmedInputValue && typeof minValue !== 'undefined') {
|
121
|
-
var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
|
122
|
-
target: _objectSpread(_objectSpread({}, e.target), {}, {
|
123
|
-
value: minValue.toString()
|
124
|
-
})
|
125
|
-
});
|
126
|
-
inputProps.onChange(minValueEvent);
|
127
|
-
} else {
|
128
|
-
inputProps.onChange(trimmedValueEvent);
|
129
|
-
}
|
130
101
|
};
|
131
|
-
var
|
132
|
-
|
133
|
-
|
102
|
+
var updatedFieldControlInputProps = _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
|
103
|
+
onFocus: onInputFocus,
|
104
|
+
onBlur: onInputBlur
|
134
105
|
});
|
135
|
-
|
136
|
-
var
|
137
|
-
|
138
|
-
|
139
|
-
return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _reactAria.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
|
106
|
+
var helperTextId = (0, _uuid.v4)();
|
107
|
+
var updatedLabelProps = _objectSpread({}, (0, _reactAria.mergeProps)(fieldLabelProps, labelProps));
|
108
|
+
var inputPropsValue = inputProps.value || 0;
|
109
|
+
return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, updatedLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
|
140
110
|
variant: "forms.numberField.noDefaultArrows"
|
141
111
|
}, groupProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
|
142
112
|
variant: "forms.numberField.arrowsWrapper"
|
143
|
-
}, fieldControlWrapperProps
|
113
|
+
}, fieldControlWrapperProps, {
|
114
|
+
role: "spinbutton",
|
115
|
+
"aria-valuetext": inputPropsValue,
|
116
|
+
"aria-valuenow": inputPropsValue,
|
117
|
+
"aria-labelledby": updatedLabelProps.id
|
118
|
+
}), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
|
144
119
|
variant: "forms.input.numberField",
|
145
120
|
ref: inputRef
|
146
121
|
// we don't want to merge this props, we want to
|
147
122
|
// overwrite them like defaultValue, value, ect.
|
148
|
-
}, updatedFieldControlInputProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
|
149
|
-
|
150
|
-
|
151
|
-
role: "textbox"
|
152
|
-
})), ControlArrows), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
|
153
|
-
"aria-live": "assertive"
|
154
|
-
}, hiddenInputValue), helperText && (0, _react2.jsx)(_.FieldHelperText, {
|
123
|
+
}, updatedFieldControlInputProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur', 'aria-roledescription']), {
|
124
|
+
"aria-describedby": helperText && helperTextId
|
125
|
+
})), ControlArrows), helperText && (0, _react2.jsx)(_.FieldHelperText, {
|
155
126
|
status: status,
|
156
127
|
id: helperTextId
|
157
128
|
}, helperText)));
|
@@ -41,7 +41,7 @@ var getComponent = function getComponent() {
|
|
41
41
|
});
|
42
42
|
test('renders NumberField component', function () {
|
43
43
|
getComponent();
|
44
|
-
expect(_testWrapper.screen.
|
44
|
+
expect(_testWrapper.screen.queryAllByLabelText(testLabel)[0]).toBeInTheDocument();
|
45
45
|
});
|
46
46
|
test('arrow up is adding step to the number value', function () {
|
47
47
|
var mockOnChange = jest.fn();
|
@@ -68,7 +68,7 @@ test('value can be set from outside (controlled state)', function () {
|
|
68
68
|
getComponent({
|
69
69
|
value: controlledValue
|
70
70
|
});
|
71
|
-
expect(_testWrapper.screen.
|
71
|
+
expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveValue('11');
|
72
72
|
});
|
73
73
|
test('calling onChange with integer when input value changed (controlled state)', function () {
|
74
74
|
var mockOnChange = jest.fn();
|
@@ -76,7 +76,7 @@ test('calling onChange with integer when input value changed (controlled state)'
|
|
76
76
|
getComponent({
|
77
77
|
onChange: mockOnChange
|
78
78
|
});
|
79
|
-
var numberInput = _testWrapper.screen.
|
79
|
+
var numberInput = _testWrapper.screen.queryAllByLabelText(testLabel)[1];
|
80
80
|
_userEvent["default"].clear(numberInput);
|
81
81
|
_userEvent["default"].type(numberInput, newTestValue.toString());
|
82
82
|
numberInput.blur();
|
@@ -101,12 +101,12 @@ test('should show helper text if appropriate prop passed', function () {
|
|
101
101
|
test('should be able to be focused via keyboard', function () {
|
102
102
|
getComponent();
|
103
103
|
_userEvent["default"].tab();
|
104
|
-
expect(_testWrapper.screen.
|
104
|
+
expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
|
105
105
|
});
|
106
106
|
test('should be able to interact with the keyboard', function () {
|
107
107
|
getComponent();
|
108
108
|
_userEvent["default"].tab();
|
109
|
-
var numberInput = _testWrapper.screen.
|
109
|
+
var numberInput = _testWrapper.screen.queryAllByLabelText(testLabel)[1];
|
110
110
|
_userEvent["default"].type(numberInput, '{arrowup}');
|
111
111
|
expect(numberInput).toHaveValue((testValue + 1).toString());
|
112
112
|
_userEvent["default"].type(numberInput, '{arrowdown}{arrowdown}');
|
@@ -125,7 +125,7 @@ test('should show hintText text if prop is passed', function () {
|
|
125
125
|
test('increment and decrement buttons should be able to be focused via keyboard', function () {
|
126
126
|
getComponent();
|
127
127
|
_userEvent["default"].tab();
|
128
|
-
expect(_testWrapper.screen.
|
128
|
+
expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
|
129
129
|
_userEvent["default"].tab();
|
130
130
|
expect(_testWrapper.screen.getByLabelText('arrow-up')).toHaveFocus();
|
131
131
|
_userEvent["default"].tab();
|
@@ -136,12 +136,12 @@ test('number field input receiving name attribute', function () {
|
|
136
136
|
getComponent({
|
137
137
|
name: testName
|
138
138
|
});
|
139
|
-
expect(_testWrapper.screen.
|
139
|
+
expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveAttribute('name', testName);
|
140
140
|
});
|
141
141
|
test('number field can be focused', function () {
|
142
142
|
getComponent();
|
143
143
|
_userEvent["default"].tab();
|
144
|
-
expect(_testWrapper.screen.
|
144
|
+
expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveClass('is-focused');
|
145
145
|
});
|
146
146
|
test('passing helper text should display it and correct aria attributes on input', function () {
|
147
147
|
var testHelperText = 'testHelperText';
|
@@ -8,11 +8,10 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
|
|
8
8
|
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
9
9
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
10
10
|
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
11
|
-
import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
|
12
11
|
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; }
|
13
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
14
|
-
import React, { forwardRef,
|
15
|
-
import { mergeProps, useNumberField
|
12
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
13
|
+
import React, { forwardRef, useImperativeHandle } from 'react';
|
14
|
+
import { mergeProps, useNumberField } from 'react-aria';
|
16
15
|
import { useNumberFieldState } from 'react-stately';
|
17
16
|
import MenuDown from '@pingux/mdi-react/MenuDownIcon';
|
18
17
|
import MenuUp from '@pingux/mdi-react/MenuUpIcon';
|
@@ -22,15 +21,13 @@ import PropTypes from 'prop-types';
|
|
22
21
|
import { v4 as uuid } from 'uuid';
|
23
22
|
import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
|
24
23
|
import { useField, usePropWarning } from '../../hooks';
|
25
|
-
import useHiddenNumberFieldValue from '../../hooks/useHiddenNumberFieldValue';
|
26
24
|
import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
|
27
25
|
import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
|
28
26
|
import { statusPropTypes } from '../../utils/docUtils/statusProp';
|
29
27
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
30
28
|
var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
|
31
29
|
var helperText = props.helperText,
|
32
|
-
status = props.status
|
33
|
-
formatOptions = props.formatOptions;
|
30
|
+
status = props.status;
|
34
31
|
var _useLocale = useLocale(),
|
35
32
|
locale = _useLocale.locale;
|
36
33
|
var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
|
@@ -81,66 +78,40 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
81
78
|
|
82
79
|
// this needed to remove console warning in React 16
|
83
80
|
// I believe once we update to 17 - we can remove this
|
84
|
-
var onInputFocus =
|
81
|
+
var onInputFocus = function onInputFocus(e) {
|
85
82
|
e.persist();
|
86
83
|
fieldControlInputProps.onFocus(e);
|
87
84
|
inputProps.onFocus(e);
|
88
|
-
}
|
89
|
-
var onInputBlur =
|
85
|
+
};
|
86
|
+
var onInputBlur = function onInputBlur(e) {
|
90
87
|
e.persist();
|
91
88
|
fieldControlInputProps.onBlur(e);
|
92
89
|
inputProps.onBlur(e);
|
93
|
-
}, [fieldControlInputProps, inputProps]);
|
94
|
-
var updatedFieldControlInputProps = useMemo(function () {
|
95
|
-
return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
|
96
|
-
onFocus: onInputFocus,
|
97
|
-
onBlur: onInputBlur
|
98
|
-
});
|
99
|
-
}, [fieldControlInputProps, onInputBlur, onInputFocus]);
|
100
|
-
var onInputChange = function onInputChange(e) {
|
101
|
-
var _context;
|
102
|
-
var minValue = props.minValue;
|
103
|
-
var trimmedInputValue = _trimInstanceProperty(_context = e.target.value).call(_context);
|
104
|
-
var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
|
105
|
-
target: _objectSpread(_objectSpread({}, e.target), {}, {
|
106
|
-
value: trimmedInputValue
|
107
|
-
})
|
108
|
-
});
|
109
|
-
if (!trimmedInputValue && typeof minValue !== 'undefined') {
|
110
|
-
var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
|
111
|
-
target: _objectSpread(_objectSpread({}, e.target), {}, {
|
112
|
-
value: minValue.toString()
|
113
|
-
})
|
114
|
-
});
|
115
|
-
inputProps.onChange(minValueEvent);
|
116
|
-
} else {
|
117
|
-
inputProps.onChange(trimmedValueEvent);
|
118
|
-
}
|
119
90
|
};
|
120
|
-
var
|
121
|
-
|
122
|
-
|
91
|
+
var updatedFieldControlInputProps = _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
|
92
|
+
onFocus: onInputFocus,
|
93
|
+
onBlur: onInputBlur
|
123
94
|
});
|
124
|
-
|
125
|
-
var
|
126
|
-
|
127
|
-
|
128
|
-
return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
|
95
|
+
var helperTextId = uuid();
|
96
|
+
var updatedLabelProps = _objectSpread({}, mergeProps(fieldLabelProps, labelProps));
|
97
|
+
var inputPropsValue = inputProps.value || 0;
|
98
|
+
return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
|
129
99
|
variant: "forms.numberField.noDefaultArrows"
|
130
100
|
}, groupProps), ___EmotionJSX(Box, _extends({
|
131
101
|
variant: "forms.numberField.arrowsWrapper"
|
132
|
-
}, fieldControlWrapperProps
|
102
|
+
}, fieldControlWrapperProps, {
|
103
|
+
role: "spinbutton",
|
104
|
+
"aria-valuetext": inputPropsValue,
|
105
|
+
"aria-valuenow": inputPropsValue,
|
106
|
+
"aria-labelledby": updatedLabelProps.id
|
107
|
+
}), ___EmotionJSX(Input, _extends({
|
133
108
|
variant: "forms.input.numberField",
|
134
109
|
ref: inputRef
|
135
110
|
// we don't want to merge this props, we want to
|
136
111
|
// overwrite them like defaultValue, value, ect.
|
137
|
-
}, updatedFieldControlInputProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
|
138
|
-
|
139
|
-
|
140
|
-
role: "textbox"
|
141
|
-
})), ControlArrows), ___EmotionJSX(VisuallyHidden, {
|
142
|
-
"aria-live": "assertive"
|
143
|
-
}, hiddenInputValue), helperText && ___EmotionJSX(FieldHelperText, {
|
112
|
+
}, updatedFieldControlInputProps, omit(inputProps, ['name', 'onFocus', 'onBlur', 'aria-roledescription']), {
|
113
|
+
"aria-describedby": helperText && helperTextId
|
114
|
+
})), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
|
144
115
|
status: status,
|
145
116
|
id: helperTextId
|
146
117
|
}, helperText)));
|
@@ -38,7 +38,7 @@ axeTest(getComponent, {
|
|
38
38
|
});
|
39
39
|
test('renders NumberField component', function () {
|
40
40
|
getComponent();
|
41
|
-
expect(screen.
|
41
|
+
expect(screen.queryAllByLabelText(testLabel)[0]).toBeInTheDocument();
|
42
42
|
});
|
43
43
|
test('arrow up is adding step to the number value', function () {
|
44
44
|
var mockOnChange = jest.fn();
|
@@ -65,7 +65,7 @@ test('value can be set from outside (controlled state)', function () {
|
|
65
65
|
getComponent({
|
66
66
|
value: controlledValue
|
67
67
|
});
|
68
|
-
expect(screen.
|
68
|
+
expect(screen.queryAllByLabelText(testLabel)[1]).toHaveValue('11');
|
69
69
|
});
|
70
70
|
test('calling onChange with integer when input value changed (controlled state)', function () {
|
71
71
|
var mockOnChange = jest.fn();
|
@@ -73,7 +73,7 @@ test('calling onChange with integer when input value changed (controlled state)'
|
|
73
73
|
getComponent({
|
74
74
|
onChange: mockOnChange
|
75
75
|
});
|
76
|
-
var numberInput = screen.
|
76
|
+
var numberInput = screen.queryAllByLabelText(testLabel)[1];
|
77
77
|
userEvent.clear(numberInput);
|
78
78
|
userEvent.type(numberInput, newTestValue.toString());
|
79
79
|
numberInput.blur();
|
@@ -98,12 +98,12 @@ test('should show helper text if appropriate prop passed', function () {
|
|
98
98
|
test('should be able to be focused via keyboard', function () {
|
99
99
|
getComponent();
|
100
100
|
userEvent.tab();
|
101
|
-
expect(screen.
|
101
|
+
expect(screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
|
102
102
|
});
|
103
103
|
test('should be able to interact with the keyboard', function () {
|
104
104
|
getComponent();
|
105
105
|
userEvent.tab();
|
106
|
-
var numberInput = screen.
|
106
|
+
var numberInput = screen.queryAllByLabelText(testLabel)[1];
|
107
107
|
userEvent.type(numberInput, '{arrowup}');
|
108
108
|
expect(numberInput).toHaveValue((testValue + 1).toString());
|
109
109
|
userEvent.type(numberInput, '{arrowdown}{arrowdown}');
|
@@ -122,7 +122,7 @@ test('should show hintText text if prop is passed', function () {
|
|
122
122
|
test('increment and decrement buttons should be able to be focused via keyboard', function () {
|
123
123
|
getComponent();
|
124
124
|
userEvent.tab();
|
125
|
-
expect(screen.
|
125
|
+
expect(screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
|
126
126
|
userEvent.tab();
|
127
127
|
expect(screen.getByLabelText('arrow-up')).toHaveFocus();
|
128
128
|
userEvent.tab();
|
@@ -133,12 +133,12 @@ test('number field input receiving name attribute', function () {
|
|
133
133
|
getComponent({
|
134
134
|
name: testName
|
135
135
|
});
|
136
|
-
expect(screen.
|
136
|
+
expect(screen.queryAllByLabelText(testLabel)[1]).toHaveAttribute('name', testName);
|
137
137
|
});
|
138
138
|
test('number field can be focused', function () {
|
139
139
|
getComponent();
|
140
140
|
userEvent.tab();
|
141
|
-
expect(screen.
|
141
|
+
expect(screen.queryAllByLabelText(testLabel)[1]).toHaveClass('is-focused');
|
142
142
|
});
|
143
143
|
test('passing helper text should display it and correct aria attributes on input', function () {
|
144
144
|
var testHelperText = 'testHelperText';
|
package/package.json
CHANGED
@@ -1,14 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
_Object$defineProperty(exports, "default", {
|
9
|
-
enumerable: true,
|
10
|
-
get: function get() {
|
11
|
-
return _useHiddenNumberFieldValue["default"];
|
12
|
-
}
|
13
|
-
});
|
14
|
-
var _useHiddenNumberFieldValue = _interopRequireDefault(require("./useHiddenNumberFieldValue"));
|
@@ -1,23 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
_Object$defineProperty(exports, "__esModule", {
|
5
|
-
value: true
|
6
|
-
});
|
7
|
-
exports["default"] = void 0;
|
8
|
-
var _react = require("react");
|
9
|
-
/**
|
10
|
-
* Returns integer or absolute value for screen reader announcement.
|
11
|
-
*/
|
12
|
-
|
13
|
-
var useHiddenNumberFieldValue = function useHiddenNumberFieldValue(_ref) {
|
14
|
-
var numberValue = _ref.numberValue,
|
15
|
-
isCurrency = _ref.isCurrency;
|
16
|
-
return (0, _react.useMemo)(function () {
|
17
|
-
if (!numberValue) return '';
|
18
|
-
if (!isCurrency) return numberValue;
|
19
|
-
return Math.abs(numberValue);
|
20
|
-
}, [numberValue, isCurrency]);
|
21
|
-
};
|
22
|
-
var _default = useHiddenNumberFieldValue;
|
23
|
-
exports["default"] = _default;
|
@@ -1,35 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
-
var _reactHooks = require("@testing-library/react-hooks");
|
5
|
-
var _useHiddenNumberFieldValue = _interopRequireDefault(require("./useHiddenNumberFieldValue"));
|
6
|
-
test('When number is not currency, negative values return negative values', function () {
|
7
|
-
var _renderHook = (0, _reactHooks.renderHook)(function () {
|
8
|
-
return (0, _useHiddenNumberFieldValue["default"])({
|
9
|
-
isCurrency: false,
|
10
|
-
numberValue: -1
|
11
|
-
});
|
12
|
-
}),
|
13
|
-
result = _renderHook.result;
|
14
|
-
expect(result.current).toBe(-1);
|
15
|
-
});
|
16
|
-
test('When number is currency, it always returns the absolute value', function () {
|
17
|
-
var _renderHook2 = (0, _reactHooks.renderHook)(function () {
|
18
|
-
return (0, _useHiddenNumberFieldValue["default"])({
|
19
|
-
isCurrency: true,
|
20
|
-
numberValue: -1
|
21
|
-
});
|
22
|
-
}),
|
23
|
-
result = _renderHook2.result;
|
24
|
-
expect(result.current).toBe(1);
|
25
|
-
});
|
26
|
-
test('When number is not currency, positive values return positive numbers', function () {
|
27
|
-
var _renderHook3 = (0, _reactHooks.renderHook)(function () {
|
28
|
-
return (0, _useHiddenNumberFieldValue["default"])({
|
29
|
-
isCurrency: false,
|
30
|
-
numberValue: 2
|
31
|
-
});
|
32
|
-
}),
|
33
|
-
result = _renderHook3.result;
|
34
|
-
expect(result.current).toBe(2);
|
35
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './useHiddenNumberFieldValue';
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import { useMemo } from 'react';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Returns integer or absolute value for screen reader announcement.
|
5
|
-
*/
|
6
|
-
|
7
|
-
var useHiddenNumberFieldValue = function useHiddenNumberFieldValue(_ref) {
|
8
|
-
var numberValue = _ref.numberValue,
|
9
|
-
isCurrency = _ref.isCurrency;
|
10
|
-
return useMemo(function () {
|
11
|
-
if (!numberValue) return '';
|
12
|
-
if (!isCurrency) return numberValue;
|
13
|
-
return Math.abs(numberValue);
|
14
|
-
}, [numberValue, isCurrency]);
|
15
|
-
};
|
16
|
-
export default useHiddenNumberFieldValue;
|
@@ -1,32 +0,0 @@
|
|
1
|
-
import { renderHook } from '@testing-library/react-hooks';
|
2
|
-
import useHiddenNumberFieldValue from './useHiddenNumberFieldValue';
|
3
|
-
test('When number is not currency, negative values return negative values', function () {
|
4
|
-
var _renderHook = renderHook(function () {
|
5
|
-
return useHiddenNumberFieldValue({
|
6
|
-
isCurrency: false,
|
7
|
-
numberValue: -1
|
8
|
-
});
|
9
|
-
}),
|
10
|
-
result = _renderHook.result;
|
11
|
-
expect(result.current).toBe(-1);
|
12
|
-
});
|
13
|
-
test('When number is currency, it always returns the absolute value', function () {
|
14
|
-
var _renderHook2 = renderHook(function () {
|
15
|
-
return useHiddenNumberFieldValue({
|
16
|
-
isCurrency: true,
|
17
|
-
numberValue: -1
|
18
|
-
});
|
19
|
-
}),
|
20
|
-
result = _renderHook2.result;
|
21
|
-
expect(result.current).toBe(1);
|
22
|
-
});
|
23
|
-
test('When number is not currency, positive values return positive numbers', function () {
|
24
|
-
var _renderHook3 = renderHook(function () {
|
25
|
-
return useHiddenNumberFieldValue({
|
26
|
-
isCurrency: false,
|
27
|
-
numberValue: 2
|
28
|
-
});
|
29
|
-
}),
|
30
|
-
result = _renderHook3.result;
|
31
|
-
expect(result.current).toBe(2);
|
32
|
-
});
|