@thecb/components 6.0.9 → 6.1.0-beta.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/dist/index.cjs.js +19 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +19 -1
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/.DS_Store +0 -0
- package/src/components/atoms/form-layouts/FormInput.js +8 -0
- package/src/util/focusFirstInvalidInputHook.js +17 -0
- package/src/util/index.js +2 -1
package/dist/index.cjs.js
CHANGED
|
@@ -22693,6 +22693,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
22693
22693
|
}, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
|
|
22694
22694
|
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
22695
22695
|
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
22696
|
+
"aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
|
|
22696
22697
|
onChange: function onChange(e) {
|
|
22697
22698
|
return fieldActions.set(e);
|
|
22698
22699
|
},
|
|
@@ -22710,6 +22711,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
22710
22711
|
}, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
|
|
22711
22712
|
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
22712
22713
|
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
22714
|
+
"aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
|
|
22713
22715
|
onChange: function onChange(e) {
|
|
22714
22716
|
return fieldActions.set(e.target.value);
|
|
22715
22717
|
},
|
|
@@ -43653,13 +43655,29 @@ var index$4 = /*#__PURE__*/Object.freeze({
|
|
|
43653
43655
|
fontWeights: style_constants
|
|
43654
43656
|
});
|
|
43655
43657
|
|
|
43658
|
+
var useFocusInvalidInput = function useFocusInvalidInput() {
|
|
43659
|
+
var showErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
43660
|
+
// Only move focus when "showErrors" is true
|
|
43661
|
+
// "showErrors" is managed by container page of form
|
|
43662
|
+
// typically set to "true" on attempted form submission, if errors exist
|
|
43663
|
+
React.useEffect(function () {
|
|
43664
|
+
if (showErrors) {
|
|
43665
|
+
var _inputsWithErrors$;
|
|
43666
|
+
|
|
43667
|
+
var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
|
|
43668
|
+
inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : (_inputsWithErrors$ = inputsWithErrors[0]) === null || _inputsWithErrors$ === void 0 ? void 0 : _inputsWithErrors$.focus();
|
|
43669
|
+
}
|
|
43670
|
+
}, [showErrors]);
|
|
43671
|
+
};
|
|
43672
|
+
|
|
43656
43673
|
|
|
43657
43674
|
|
|
43658
43675
|
var index$5 = /*#__PURE__*/Object.freeze({
|
|
43659
43676
|
__proto__: null,
|
|
43660
43677
|
formats: formats,
|
|
43661
43678
|
general: general,
|
|
43662
|
-
theme: themeUtils
|
|
43679
|
+
theme: themeUtils,
|
|
43680
|
+
useFocusInvalidInput: useFocusInvalidInput
|
|
43663
43681
|
});
|
|
43664
43682
|
|
|
43665
43683
|
exports.AccountNumberImage = AccountNumberImage;
|