@carbon/ibm-products 2.43.2-canary.129 → 2.43.2-canary.131
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/SidePanel/SidePanel.js +13 -1
- package/es/global/js/hooks/useFocus.d.ts +1 -1
- package/es/global/js/hooks/useFocus.js +2 -2
- package/lib/components/SidePanel/SidePanel.js +13 -1
- package/lib/global/js/hooks/useFocus.d.ts +1 -1
- package/lib/global/js/hooks/useFocus.js +2 -2
- package/package.json +2 -2
@@ -118,6 +118,11 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
118
118
|
_useState8 = _slicedToArray(_useState7, 2),
|
119
119
|
labelTextHeight = _useState8[0],
|
120
120
|
setLabelTextHeight = _useState8[1];
|
121
|
+
var handleEscapeKey = function handleEscapeKey(event) {
|
122
|
+
if (event.key === 'Escape' && open) {
|
123
|
+
onRequestClose === null || onRequestClose === void 0 || onRequestClose();
|
124
|
+
}
|
125
|
+
};
|
121
126
|
useEffect(function () {
|
122
127
|
if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
|
123
128
|
setDoAnimateTitle(false);
|
@@ -378,6 +383,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
378
383
|
className: "".concat(blockClass, "__close-button"),
|
379
384
|
label: closeIconDescription,
|
380
385
|
onClick: onRequestClose,
|
386
|
+
onKeyDown: slideIn ? undefined : handleEscapeKey,
|
381
387
|
title: closeIconDescription,
|
382
388
|
"aria-label": closeIconDescription,
|
383
389
|
ref: closeRef,
|
@@ -430,6 +436,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
430
436
|
className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
|
431
437
|
}, children);
|
432
438
|
};
|
439
|
+
var handleKeyDown = function handleKeyDown(event) {
|
440
|
+
if (!slideIn) {
|
441
|
+
handleEscapeKey(event);
|
442
|
+
keyDownListener(event);
|
443
|
+
}
|
444
|
+
};
|
433
445
|
return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
|
434
446
|
id: id,
|
435
447
|
className: mainPanelClassNames,
|
@@ -446,7 +458,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
446
458
|
placement: placement,
|
447
459
|
shouldReduceMotion: shouldReduceMotion
|
448
460
|
},
|
449
|
-
onKeyDown:
|
461
|
+
onKeyDown: handleKeyDown
|
450
462
|
}), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
|
451
463
|
actions: actions !== null && actions !== void 0 ? actions : [],
|
452
464
|
className: primaryActionContainerClassNames,
|
@@ -42,12 +42,12 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
42
42
|
var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
|
43
43
|
var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
|
44
44
|
var all = focusableElements;
|
45
|
-
var
|
45
|
+
var specified = getSpecificElement(modalEl, selectorPrimaryFocus);
|
46
46
|
return {
|
47
47
|
first: first,
|
48
48
|
last: last,
|
49
49
|
all: all,
|
50
|
-
|
50
|
+
specified: specified
|
51
51
|
};
|
52
52
|
}, [modalEl, query, selectorPrimaryFocus]);
|
53
53
|
useEffect(function () {
|
@@ -127,6 +127,11 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
127
127
|
_useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
|
128
128
|
labelTextHeight = _useState8[0],
|
129
129
|
setLabelTextHeight = _useState8[1];
|
130
|
+
var handleEscapeKey = function handleEscapeKey(event) {
|
131
|
+
if (event.key === 'Escape' && open) {
|
132
|
+
onRequestClose === null || onRequestClose === void 0 || onRequestClose();
|
133
|
+
}
|
134
|
+
};
|
130
135
|
React.useEffect(function () {
|
131
136
|
if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
|
132
137
|
setDoAnimateTitle(false);
|
@@ -387,6 +392,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
387
392
|
className: "".concat(blockClass, "__close-button"),
|
388
393
|
label: closeIconDescription,
|
389
394
|
onClick: onRequestClose,
|
395
|
+
onKeyDown: slideIn ? undefined : handleEscapeKey,
|
390
396
|
title: closeIconDescription,
|
391
397
|
"aria-label": closeIconDescription,
|
392
398
|
ref: closeRef,
|
@@ -439,6 +445,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
439
445
|
className: cx__default["default"]("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
|
440
446
|
}, children);
|
441
447
|
};
|
448
|
+
var handleKeyDown = function handleKeyDown(event) {
|
449
|
+
if (!slideIn) {
|
450
|
+
handleEscapeKey(event);
|
451
|
+
keyDownListener(event);
|
452
|
+
}
|
453
|
+
};
|
442
454
|
return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
|
443
455
|
id: id,
|
444
456
|
className: mainPanelClassNames,
|
@@ -455,7 +467,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
455
467
|
placement: placement,
|
456
468
|
shouldReduceMotion: shouldReduceMotion
|
457
469
|
},
|
458
|
-
onKeyDown:
|
470
|
+
onKeyDown: handleKeyDown
|
459
471
|
}), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
|
460
472
|
actions: actions !== null && actions !== void 0 ? actions : [],
|
461
473
|
className: primaryActionContainerClassNames,
|
@@ -46,12 +46,12 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
|
|
46
46
|
var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
|
47
47
|
var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
|
48
48
|
var all = focusableElements;
|
49
|
-
var
|
49
|
+
var specified = getSpecificElement(modalEl, selectorPrimaryFocus);
|
50
50
|
return {
|
51
51
|
first: first,
|
52
52
|
last: last,
|
53
53
|
all: all,
|
54
|
-
|
54
|
+
specified: specified
|
55
55
|
};
|
56
56
|
}, [modalEl, query, selectorPrimaryFocus]);
|
57
57
|
React.useEffect(function () {
|
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.131+49b02278f",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -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": "49b02278f864e85f31a363491cbba7b8d1a0a4f7"
|
124
124
|
}
|