blue-react 8.0.0-next.1 → 8.0.0-next.2
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/components/Modal.js +16 -2
- package/dist/style.css +2 -2
- package/dist/style.min.css +2 -2
- package/dist/style.scss +1 -1
- package/dist/types/components/Modal.d.ts +1 -1
- package/package.json +3 -3
package/dist/components/Modal.js
CHANGED
|
@@ -33,7 +33,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
33
33
|
* Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.
|
|
34
34
|
* It uses Bootstrap's Modal components.
|
|
35
35
|
*
|
|
36
|
-
* For easy use, you should use the hook `useModal` together with `ModalProvider`. See the example
|
|
36
|
+
* For easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.
|
|
37
37
|
*/
|
|
38
38
|
function Modal(_ref) {
|
|
39
39
|
var modalContent = _ref.modalContent,
|
|
@@ -75,6 +75,17 @@ function Modal(_ref) {
|
|
|
75
75
|
var btnStyle = {
|
|
76
76
|
maxWidth: "10rem"
|
|
77
77
|
};
|
|
78
|
+
|
|
79
|
+
var focusFirstControl = function focusFirstControl() {
|
|
80
|
+
var myModal = modalRef.current;
|
|
81
|
+
myModal.removeEventListener("shown.bs.modal", focusFirstControl);
|
|
82
|
+
var firstControl = myModal.querySelector(".btn, .form-control");
|
|
83
|
+
|
|
84
|
+
if (firstControl) {
|
|
85
|
+
firstControl.focus();
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
|
|
78
89
|
(0, _react.useEffect)(function () {
|
|
79
90
|
setInput(defaultInput || "");
|
|
80
91
|
}, [defaultInput]);
|
|
@@ -91,7 +102,10 @@ function Modal(_ref) {
|
|
|
91
102
|
cancel();
|
|
92
103
|
});
|
|
93
104
|
} else {
|
|
94
|
-
modalContent !== undefined ? bsModal.show() : bsModal.hide();
|
|
105
|
+
modalContent !== undefined ? bsModal.show() : bsModal.hide(); // Will focus first button or text field inside of modal when it is shown.
|
|
106
|
+
// For accessibility: This way you can control the modal actions with a keyboard.
|
|
107
|
+
|
|
108
|
+
myModal.addEventListener("shown.bs.modal", focusFirstControl);
|
|
95
109
|
}
|
|
96
110
|
}, [modalContent]);
|
|
97
111
|
return /*#__PURE__*/_react.default.createElement("div", {
|