Close sticker picker on Escape keyup

ts/components/stickers/StickerButton.tsx

@@ -81,6 +81,13 @@ export const StickerButton = React.memo(
       [setOpen, onPickSticker]
     );
 
+    const handleClose = React.useCallback(
+      () => {
+        setOpen(false);
+      },
+      [setOpen]
+    );
+
     const handleClickAddPack = React.useCallback(
       () => {
         setOpen(false);
@@ -253,6 +260,7 @@ export const StickerButton = React.memo(
                     i18n={i18n}
                     style={style}
                     packs={installedPacks}
+                    onClose={handleClose}
                     onClickAddPack={handleClickAddPack}
                     onPickSticker={handlePickSticker}
                     recentStickers={recentStickers}

ts/components/stickers/StickerPicker.md

@@ -156,6 +156,7 @@ const packs = [
       sticker3,
       { ...sticker2, id: 9999 },
     ]}
+    onClose={() => console.log('onClose')}
     onClickAddPack={() => console.log('onClickAddPack')}
     onPickSticker={(packId, stickerId) =>
       console.log('onPickSticker', { packId, stickerId })
@@ -206,6 +207,7 @@ const packs = [
     i18n={util.i18n}
     packs={packs}
     recentStickers={[]}
+    onClose={() => console.log('onClose')}
     onClickAddPack={() => console.log('onClickAddPack')}
     onPickSticker={(packId, stickerId) =>
       console.log('onPickSticker', { packId, stickerId })
@@ -222,6 +224,7 @@ const packs = [
     i18n={util.i18n}
     packs={[]}
     recentStickers={[]}
+    onClose={() => console.log('onClose')}
     onClickAddPack={() => console.log('onClickAddPack')}
     onPickSticker={(packId, stickerId) =>
       console.log('onPickSticker', { packId, stickerId })
@@ -249,6 +252,7 @@ const packs = [
     i18n={util.i18n}
     packs={packs}
     recentStickers={[]}
+    onClose={() => console.log('onClose')}
     onClickAddPack={() => console.log('onClickAddPack')}
     onPickSticker={(packId, stickerId) =>
       console.log('onPickSticker', { packId, stickerId })
@@ -277,6 +281,7 @@ const packs = [
     i18n={util.i18n}
     packs={packs}
     recentStickers={[]}
+    onClose={() => console.log('onClose')}
     onClickAddPack={() => console.log('onClickAddPack')}
     onPickSticker={(packId, stickerId) =>
       console.log('onPickSticker', { packId, stickerId })
@@ -312,6 +317,7 @@ const packs = [
     i18n={util.i18n}
     packs={packs}
     recentStickers={[]}
+    onClose={() => console.log('onClose')}
     onClickAddPack={() => console.log('onClickAddPack')}
     onPickSticker={(packId, stickerId) =>
       console.log('onPickSticker', { packId, stickerId })

ts/components/stickers/StickerPicker.tsx

@@ -7,6 +7,7 @@ import { LocalizerType } from '../../types/Util';
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
+  readonly onClose: () => unknown;
   readonly onClickAddPack: () => unknown;
   readonly onPickSticker: (packId: string, stickerId: number) => unknown;
   readonly packs: ReadonlyArray<StickerPackType>;
@@ -59,6 +60,7 @@ export const StickerPicker = React.memo(
         i18n,
         packs,
         recentStickers,
+        onClose,
         onClickAddPack,
         onPickSticker,
         showPickerHint,
@@ -96,6 +98,24 @@ export const StickerPicker = React.memo(
         [setPacksPage]
       );
 
+      // Handle escape key
+      React.useEffect(
+        () => {
+          const handler = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+              onClose();
+            }
+          };
+
+          document.addEventListener('keyup', handler);
+
+          return () => {
+            document.removeEventListener('keyup', handler);
+          };
+        },
+        [onClose]
+      );
+
       const isEmpty = stickers.length === 0;
       const downloadError =
         selectedPack &&