fix(side-panel): close with esc key

packages/ibm-products/src/components/SidePanel/SidePanel.tsx

@@ -290,6 +290,12 @@ export let SidePanel = React.forwardRef(
     // Title animation on scroll related state
     const [labelTextHeight, setLabelTextHeight] = useState<any>(0);
 
+    const handleEscapeKey = (event) => {
+      if (event.key === 'Escape' && open) {
+        onRequestClose?.();
+      }
+    };
+
     useEffect(() => {
       if (open && !titleRef?.current) {
         setDoAnimateTitle(false);
@@ -728,6 +734,7 @@ export let SidePanel = React.forwardRef(
               className={`${blockClass}__close-button`}
               label={closeIconDescription}
               onClick={onRequestClose}
+              onKeyDown={slideIn ? undefined : handleEscapeKey}
               title={closeIconDescription}
               aria-label={closeIconDescription}
               ref={closeRef}
@@ -825,6 +832,13 @@ export let SidePanel = React.forwardRef(
       );
     };
 
+    const handleKeyDown = (event) => {
+      if (!slideIn) {
+        handleEscapeKey(event);
+        keyDownListener(event);
+      }
+    };
+
     return (
       <AnimatePresence>
         {open && (
@@ -844,7 +858,7 @@ export let SidePanel = React.forwardRef(
               animate="visible"
               exit="exit"
               custom={{ placement, shouldReduceMotion }}
-              onKeyDown={slideIn ? undefined : keyDownListener}
+              onKeyDown={handleKeyDown}
             >
               <>
                 {/* header */}