@carbon/ibm-products 2.43.2-canary.129 → 2.43.2-canary.131

package/es/components/SidePanel/SidePanel.js

@@ -118,6 +118,11 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     labelTextHeight = _useState8[0],
     setLabelTextHeight = _useState8[1];
+  var handleEscapeKey = function handleEscapeKey(event) {
+    if (event.key === 'Escape' && open) {
+      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+    }
+  };
   useEffect(function () {
     if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
       setDoAnimateTitle(false);
@@ -378,6 +383,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
+      onKeyDown: slideIn ? undefined : handleEscapeKey,
       title: closeIconDescription,
       "aria-label": closeIconDescription,
       ref: closeRef,
@@ -430,6 +436,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!slideIn) {
+      handleEscapeKey(event);
+      keyDownListener(event);
+    }
+  };
   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, {
     id: id,
     className: mainPanelClassNames,
@@ -446,7 +458,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: slideIn ? undefined : keyDownListener
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,

package/es/global/js/hooks/useFocus.d.ts

@@ -9,6 +9,6 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         first: any;
         last: any;
         all: any;
-        specifiedElement: any;
+        specified: any;
     };
 };

package/es/global/js/hooks/useFocus.js

@@ -42,12 +42,12 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
-    var specifiedElement = getSpecificElement(modalEl, selectorPrimaryFocus);
+    var specified = getSpecificElement(modalEl, selectorPrimaryFocus);
     return {
       first: first,
       last: last,
       all: all,
-      specifiedElement: specifiedElement
+      specified: specified
     };
   }, [modalEl, query, selectorPrimaryFocus]);
   useEffect(function () {

package/lib/components/SidePanel/SidePanel.js

@@ -127,6 +127,11 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
     labelTextHeight = _useState8[0],
     setLabelTextHeight = _useState8[1];
+  var handleEscapeKey = function handleEscapeKey(event) {
+    if (event.key === 'Escape' && open) {
+      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+    }
+  };
   React.useEffect(function () {
     if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
       setDoAnimateTitle(false);
@@ -387,6 +392,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
+      onKeyDown: slideIn ? undefined : handleEscapeKey,
       title: closeIconDescription,
       "aria-label": closeIconDescription,
       ref: closeRef,
@@ -439,6 +445,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       className: cx__default["default"]("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!slideIn) {
+      handleEscapeKey(event);
+      keyDownListener(event);
+    }
+  };
   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, {
     id: id,
     className: mainPanelClassNames,
@@ -455,7 +467,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: slideIn ? undefined : keyDownListener
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,

package/lib/global/js/hooks/useFocus.d.ts

@@ -9,6 +9,6 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         first: any;
         last: any;
         all: any;
-        specifiedElement: any;
+        specified: any;
     };
 };

package/lib/global/js/hooks/useFocus.js

@@ -46,12 +46,12 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
-    var specifiedElement = getSpecificElement(modalEl, selectorPrimaryFocus);
+    var specified = getSpecificElement(modalEl, selectorPrimaryFocus);
     return {
       first: first,
       last: last,
       all: all,
-      specifiedElement: specifiedElement
+      specified: specified
     };
   }, [modalEl, query, selectorPrimaryFocus]);
   React.useEffect(function () {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.129+5fdb47a91",
+  "version": "2.43.2-canary.131+49b02278f",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "5fdb47a91e8c7f151f4ef29bc86f7b8bd2fe96d0"
+  "gitHead": "49b02278f864e85f31a363491cbba7b8d1a0a4f7"
 }