@carbon/ibm-products 2.43.2-canary.174 → 2.43.2-canary.176
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -4,7 +4,7 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
|
|
|
4
4
|
lastElement: any;
|
|
5
5
|
allElements: any;
|
|
6
6
|
specifiedElement: any;
|
|
7
|
-
keyDownListener: (event: any) => void
|
|
7
|
+
keyDownListener: (event: any) => Promise<void>;
|
|
8
8
|
getFocusable: () => {
|
|
9
9
|
first: any;
|
|
10
10
|
last: any;
|
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
8
9
|
import { usePrefix } from '@carbon/react';
|
|
9
10
|
import { pkg } from '../../../settings.js';
|
|
10
11
|
import { useCallback, useEffect } from 'react';
|
|
12
|
+
import wait from '../utils/wait.js';
|
|
11
13
|
|
|
12
14
|
var getSpecificElement = function getSpecificElement(parentEl, elementId) {
|
|
13
15
|
var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
|
|
@@ -16,6 +18,7 @@ var getSpecificElement = function getSpecificElement(parentEl, elementId) {
|
|
|
16
18
|
var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
17
19
|
var carbonPrefix = usePrefix();
|
|
18
20
|
var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
|
|
21
|
+
var sidePanelBaseClass = "".concat(pkg.prefix, "--side-panel");
|
|
19
22
|
// Querying focusable element in the modal
|
|
20
23
|
// Query to exclude hidden elements in the modal from querySelectorAll() method
|
|
21
24
|
// feel free to include more if needed :)
|
|
@@ -27,8 +30,9 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
|
27
30
|
var queryTextarea = "textarea".concat(notQuery);
|
|
28
31
|
var queryLink = "[href]".concat(notQuery);
|
|
29
32
|
var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
|
|
33
|
+
var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
|
|
30
34
|
// Final query
|
|
31
|
-
var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",
|
|
35
|
+
var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
|
|
32
36
|
var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
|
|
33
37
|
var getFocusable = useCallback(function () {
|
|
34
38
|
var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
|
|
@@ -54,30 +58,42 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
|
54
58
|
useEffect(function () {
|
|
55
59
|
getFocusable();
|
|
56
60
|
}, [getFocusable]);
|
|
57
|
-
var handleKeyDown = function
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
61
|
+
var handleKeyDown = /*#__PURE__*/function () {
|
|
62
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
|
|
63
|
+
var _document, _document2, _getFocusable, first, last, all;
|
|
64
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
65
|
+
while (1) switch (_context.prev = _context.next) {
|
|
66
|
+
case 0:
|
|
67
|
+
if (!(event.key === 'Tab')) {
|
|
68
|
+
_context.next = 5;
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
// updating the focusable elements list
|
|
72
|
+
_getFocusable = getFocusable(), first = _getFocusable.first, last = _getFocusable.last, all = _getFocusable.all;
|
|
73
|
+
_context.next = 4;
|
|
74
|
+
return wait(1);
|
|
75
|
+
case 4:
|
|
76
|
+
if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
|
|
77
|
+
// Prevents the default "Tab" behavior
|
|
78
|
+
event.preventDefault();
|
|
79
|
+
// if the user press shift+tab and the current element not in focusable items
|
|
80
|
+
last === null || last === void 0 || last.focus();
|
|
81
|
+
} else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
// user pressing tab key only then
|
|
84
|
+
// focusing the first element if the current element is not in focusable items
|
|
85
|
+
first === null || first === void 0 || first.focus();
|
|
86
|
+
}
|
|
87
|
+
case 5:
|
|
88
|
+
case "end":
|
|
89
|
+
return _context.stop();
|
|
77
90
|
}
|
|
78
|
-
},
|
|
79
|
-
}
|
|
80
|
-
|
|
91
|
+
}, _callee);
|
|
92
|
+
}));
|
|
93
|
+
return function handleKeyDown(_x) {
|
|
94
|
+
return _ref.apply(this, arguments);
|
|
95
|
+
};
|
|
96
|
+
}();
|
|
81
97
|
return {
|
|
82
98
|
firstElement: getFocusable().first,
|
|
83
99
|
lastElement: getFocusable().last,
|
|
@@ -4,7 +4,7 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
|
|
|
4
4
|
lastElement: any;
|
|
5
5
|
allElements: any;
|
|
6
6
|
specifiedElement: any;
|
|
7
|
-
keyDownListener: (event: any) => void
|
|
7
|
+
keyDownListener: (event: any) => Promise<void>;
|
|
8
8
|
getFocusable: () => {
|
|
9
9
|
first: any;
|
|
10
10
|
last: any;
|
|
@@ -9,9 +9,11 @@
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
|
+
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
12
13
|
var react = require('@carbon/react');
|
|
13
14
|
var settings = require('../../../settings.js');
|
|
14
15
|
var React = require('react');
|
|
16
|
+
var wait = require('../utils/wait.js');
|
|
15
17
|
|
|
16
18
|
var getSpecificElement = function getSpecificElement(parentEl, elementId) {
|
|
17
19
|
var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
|
|
@@ -20,6 +22,7 @@ var getSpecificElement = function getSpecificElement(parentEl, elementId) {
|
|
|
20
22
|
var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
21
23
|
var carbonPrefix = react.usePrefix();
|
|
22
24
|
var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
|
|
25
|
+
var sidePanelBaseClass = "".concat(settings.pkg.prefix, "--side-panel");
|
|
23
26
|
// Querying focusable element in the modal
|
|
24
27
|
// Query to exclude hidden elements in the modal from querySelectorAll() method
|
|
25
28
|
// feel free to include more if needed :)
|
|
@@ -31,8 +34,9 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
|
31
34
|
var queryTextarea = "textarea".concat(notQuery);
|
|
32
35
|
var queryLink = "[href]".concat(notQuery);
|
|
33
36
|
var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
|
|
37
|
+
var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
|
|
34
38
|
// Final query
|
|
35
|
-
var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",
|
|
39
|
+
var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
|
|
36
40
|
var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
|
|
37
41
|
var getFocusable = React.useCallback(function () {
|
|
38
42
|
var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
|
|
@@ -58,30 +62,42 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
|
58
62
|
React.useEffect(function () {
|
|
59
63
|
getFocusable();
|
|
60
64
|
}, [getFocusable]);
|
|
61
|
-
var handleKeyDown = function
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
65
|
+
var handleKeyDown = /*#__PURE__*/function () {
|
|
66
|
+
var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
|
|
67
|
+
var _document, _document2, _getFocusable, first, last, all;
|
|
68
|
+
return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
|
|
69
|
+
while (1) switch (_context.prev = _context.next) {
|
|
70
|
+
case 0:
|
|
71
|
+
if (!(event.key === 'Tab')) {
|
|
72
|
+
_context.next = 5;
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
// updating the focusable elements list
|
|
76
|
+
_getFocusable = getFocusable(), first = _getFocusable.first, last = _getFocusable.last, all = _getFocusable.all;
|
|
77
|
+
_context.next = 4;
|
|
78
|
+
return wait["default"](1);
|
|
79
|
+
case 4:
|
|
80
|
+
if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
|
|
81
|
+
// Prevents the default "Tab" behavior
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
// if the user press shift+tab and the current element not in focusable items
|
|
84
|
+
last === null || last === void 0 || last.focus();
|
|
85
|
+
} else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
|
|
86
|
+
event.preventDefault();
|
|
87
|
+
// user pressing tab key only then
|
|
88
|
+
// focusing the first element if the current element is not in focusable items
|
|
89
|
+
first === null || first === void 0 || first.focus();
|
|
90
|
+
}
|
|
91
|
+
case 5:
|
|
92
|
+
case "end":
|
|
93
|
+
return _context.stop();
|
|
81
94
|
}
|
|
82
|
-
},
|
|
83
|
-
}
|
|
84
|
-
|
|
95
|
+
}, _callee);
|
|
96
|
+
}));
|
|
97
|
+
return function handleKeyDown(_x) {
|
|
98
|
+
return _ref.apply(this, arguments);
|
|
99
|
+
};
|
|
100
|
+
}();
|
|
85
101
|
return {
|
|
86
102
|
firstElement: getFocusable().first,
|
|
87
103
|
lastElement: getFocusable().last,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/ibm-products",
|
|
3
3
|
"description": "Carbon for IBM Products",
|
|
4
|
-
"version": "2.43.2-canary.
|
|
4
|
+
"version": "2.43.2-canary.176+0df908523",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"dependencies": {
|
|
97
97
|
"@babel/runtime": "^7.23.9",
|
|
98
98
|
"@carbon/feature-flags": "^0.20.0",
|
|
99
|
-
"@carbon/ibm-products-styles": "^2.
|
|
99
|
+
"@carbon/ibm-products-styles": "^2.44.0-rc.0",
|
|
100
100
|
"@carbon/telemetry": "^0.1.0",
|
|
101
101
|
"@dnd-kit/core": "^6.0.8",
|
|
102
102
|
"@dnd-kit/modifiers": "^7.0.0",
|
|
@@ -120,5 +120,5 @@
|
|
|
120
120
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
|
121
121
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
|
122
122
|
},
|
|
123
|
-
"gitHead": "
|
|
123
|
+
"gitHead": "0df908523eab166b8bb63731f60a727ef846e41f"
|
|
124
124
|
}
|