Close datagrid modal by esc key (#2507)

src/components/Datagrid/FullScreenContainer.tsx

@@ -50,12 +50,14 @@ const useAnimationStyles = (isOpen: boolean, duration: number) => {
   };
 };
 
-interface FullScreenContainerProps {
+type FullScreenContainerProps = FC<
-  open?: boolean;
+  PropsWithChildren<{
-  className?: string;
+    open?: boolean;
-}
+    className?: string;
+  }>
+>;
 
-const Portal = ({ className, children, open }) => {
+const Portal: FullScreenContainerProps = ({ className, children, open }) => {
   const { delayedState: delayedOpen, duration } = useDelayedState(open);
   const styles = useAnimationStyles(open, duration);
 
@@ -67,13 +69,12 @@ const Portal = ({ className, children, open }) => {
   );
 };
 
-export const FullScreenContainer: FC<PropsWithChildren<
+export const FullScreenContainer: FullScreenContainerProps = ({
-  FullScreenContainerProps
+  children,
->> = ({ children, open, className }) => (
+  ...rest
+}) => (
   <>
-    <Portal className={className} open={open}>
+    <Portal {...rest}>{children}</Portal>
-      {children}
-    </Portal>
     {children}
   </>
 );

src/components/Datagrid/useFullScreenMode.ts

@@ -2,6 +2,7 @@ import { usePreventHistoryBack } from "@saleor/hooks/usePreventHistoryBack";
 import { useEffect, useState } from "react";
 
 import { useDelayedState } from "./useDelayedState";
+import { usePressEscKey } from "./usePressEscKey";
 
 export const useFullScreenMode = () => {
   const { enable, disable } = usePreventHistoryBack(document.body, {
@@ -11,6 +12,10 @@ export const useFullScreenMode = () => {
   const { delayedState: delayedOpen } = useDelayedState(!open);
   const togglePreventHistory = open ? disable : enable;
 
+  usePressEscKey(() => {
+    setOpen(false);
+  });
+
   const toggle = () => {
     setOpen(p => !p);
     togglePreventHistory();

src/components/Datagrid/usePressEscKey.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+
+export const usePressEscKey = (callback?: () => void) => {
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.code === "Escape") {
+        callback();
+      }
+    };
+
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [callback]);
+};