feat: add keypress effect to DocSearchButton (#2087)

* feat: add keypress effect to DocSearchButton

* Bump expected bundle sizes

---------

Co-authored-by: Paul Jankowski <8BitTitan@gmail.com>
Co-authored-by: Paul Jankowski <33367713+8bittitan@users.noreply.github.com>

bundlesize.config.json

@@ -6,11 +6,11 @@
     },
     {
       "path": "packages/docsearch-react/dist/umd/index.js",
-      "maxSize": "22.63 kB"
+      "maxSize": "22.80 kB"
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "30.50 kB"
+      "maxSize": "30.70 kB"
     }
   ]
 }

packages/docsearch-css/src/_variables.css

@@ -38,7 +38,7 @@
   );
   --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
     inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
-
+  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,0.4);
   /* footer */
   --docsearch-footer-height: 44px;
   --docsearch-footer-background: #fff;
@@ -66,6 +66,7 @@ html[data-theme='dark'] {
   );
   --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85),
     inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 1px 1px 0 #0304094d;
   --docsearch-footer-background: rgb(30, 33, 54);
   --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
     0 -4px 8px 0 rgba(0, 0, 0, 0.2);

packages/docsearch-css/src/button.css

@@ -63,6 +63,11 @@
   width: 20px;
 }
 
+.DocSearch-Button-Key--pressed {
+  transform: translate3d(0, 1px, 0);
+  box-shadow: var(--docsearch-key-pressed-shadow);
+}
+
 @media (max-width: 768px) {
   .DocSearch-Button-Keys,
   .DocSearch-Button-Placeholder {

packages/docsearch-react/src/DocSearchButton.tsx

@@ -51,13 +51,72 @@ export const DocSearchButton = React.forwardRef<
       <span className="DocSearch-Button-Keys">
         {key !== null && (
           <>
-            <kbd className="DocSearch-Button-Key">
+            <DocSearchButtonKey
+              reactsToKey={
+                key === ACTION_KEY_DEFAULT ? ACTION_KEY_DEFAULT : 'Meta'
+              }
+            >
               {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-            </kbd>
-            <kbd className="DocSearch-Button-Key">K</kbd>
+            </DocSearchButtonKey>
+            <DocSearchButtonKey reactsToKey="k">K</DocSearchButtonKey>
           </>
         )}
       </span>
     </button>
   );
 });
+
+type DocSearchButtonKeyProps = {
+  reactsToKey?: string;
+};
+
+function DocSearchButtonKey({
+  reactsToKey,
+  children,
+}: React.PropsWithChildren<DocSearchButtonKeyProps>) {
+  const [isKeyDown, setIsKeyDown] = useState(false);
+
+  useEffect(() => {
+    if (!reactsToKey) {
+      return undefined;
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === reactsToKey) {
+        setIsKeyDown(true);
+      }
+    }
+
+    function handleKeyUp(e: KeyboardEvent) {
+      if (
+        e.key === reactsToKey ||
+        // keyup doesn't fire when Command is held down,
+        // workaround is to mark key as also released when Command is released
+        // See https://stackoverflow.com/a/73419500
+        e.key === 'Meta'
+      ) {
+        setIsKeyDown(false);
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [reactsToKey]);
+
+  return (
+    <kbd
+      className={
+        isKeyDown
+          ? 'DocSearch-Button-Key DocSearch-Button-Key--pressed'
+          : 'DocSearch-Button-Key'
+      }
+    >
+      {children}
+    </kbd>
+  );
+}