docs(keyboard-key): add documentation

.changeset/slow-jokes-matter.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/keyboard-key": patch
+"@twilio-paste/core": patch
+---
+
+[KeyboardKey] fixed issue with shift key being captured as capitals on subsequesnt key presses

cypress/integration/sitemap-vrt/constants.ts

@@ -132,6 +132,9 @@ export const SITEMAP = [
   "/components/input/",
   "/components/input/api",
   "/components/input/changelog",
+  "components/keyboard-key",
+  "components/keyboard-key/api",
+  "components/keyboard-key/changelog",
   "/components/label/",
   "/components/label/api",
   "/components/label/changelog",

packages/paste-core/components/keyboard-key/__tests__/hooks.spec.tsx

@@ -40,7 +40,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
@@ -49,11 +49,11 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control", "d", "v"]);
+        expect(result.current?.activeKeys).toEqual(["control", "d", "v"]);
       });
 
       await act(async () => {
-        fireEvent.keyUp(window, { key: "Control" });
+        fireEvent.keyUp(window, { key: "control" });
         fireEvent.keyUp(window, { key: "d" });
       });
 
@@ -73,15 +73,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress).toHaveBeenCalled();
       });
     });
@@ -97,15 +97,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "d" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control", "d"]);
+        expect(result.current?.activeKeys).toEqual(["control", "d"]);
         expect(onCombinationPress).not.toHaveBeenCalled();
       });
     });
@@ -121,7 +121,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
@@ -130,7 +130,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "v", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "v", "b"]));
         expect(onCombinationPress).not.toHaveBeenCalled();
       });
     });
@@ -148,15 +148,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress).not.toHaveBeenCalled();
       });
     });
@@ -180,7 +180,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
@@ -189,7 +189,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control", "d", "v"]);
+        expect(result.current?.activeKeys).toEqual(["control", "d", "v"]);
       });
 
       await act(async () => {
@@ -222,15 +222,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress1).toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -241,7 +241,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -251,7 +251,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).toHaveBeenCalled();
       });
@@ -277,15 +277,15 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(["Control"]);
+        expect(result.current?.activeKeys).toEqual(["control"]);
       });
 
       await act(async () => {
         fireEvent.keyDown(window, { key: "b" });
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b"]));
         expect(onCombinationPress1).toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -296,7 +296,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "b", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "b", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });
@@ -306,7 +306,7 @@ describe("Hooks", () => {
       });
 
       await waitFor(() => {
-        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["Control", "c"]));
+        expect(result.current?.activeKeys).toEqual(expect.arrayContaining(["control", "c"]));
         expect(onCombinationPress1).not.toHaveBeenCalled();
         expect(onCombinationPress2).not.toHaveBeenCalled();
       });

packages/paste-core/components/keyboard-key/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "category": "typography",
   "status": "production",
-  "description": "A keyboard key distinguishes a keyboard command or shortcut from other text.",
+  "description": "A Keyboard Key distinguishes a keyboard command or shortcut from other text.",
   "author": "Twilio Inc.",
   "license": "MIT",
   "main:dev": "src/index.tsx",

packages/paste-core/components/keyboard-key/src/hooks.ts

@@ -27,7 +27,7 @@ const useKeyEvents = (): { activeKeys: string[] } => {
   const handleKeyDown = (e: KeyboardEvent): void => {
     if (!e.repeat) {
       setActiveKeys((prev) => {
-        return Array.from(new Set([...prev, e.key]));
+        return Array.from(new Set([...prev, e.key.toLowerCase()]));
       });
     }
   };
@@ -41,7 +41,7 @@ const useKeyEvents = (): { activeKeys: string[] } => {
     if (e.key === "Meta") {
       setActiveKeys([]);
     } else {
-      setActiveKeys((prev) => [...prev].filter((k) => k !== e.key));
+      setActiveKeys((prev) => [...prev].filter((k) => k.toLowerCase() !== e.key.toLowerCase()));
     }
   };
 
@@ -59,7 +59,8 @@ const useKeyEvents = (): { activeKeys: string[] } => {
 };
 
 const stringArrayMatches = (arr1: string[], arr2: string[]): boolean =>
-  JSON.stringify(arr1.sort((a, b) => a.localeCompare(b))) === JSON.stringify(arr2.sort((a, b) => a.localeCompare(b)));
+  JSON.stringify(arr1.sort((a, b) => a.localeCompare(b)).map((s) => s.toLowerCase())) ===
+  JSON.stringify(arr2.sort((a, b) => a.localeCompare(b)));
 
 export const useKeyCombination = ({
   keys,

packages/paste-website/package.json

@@ -84,6 +84,7 @@
     "@twilio-paste/inline-control-group": "^13.0.2",
     "@twilio-paste/input": "^9.1.3",
     "@twilio-paste/input-box": "^10.1.1",
+    "@twilio-paste/keyboard-key": "^0.0.0",
     "@twilio-paste/label": "^13.1.1",
     "@twilio-paste/lexical-library": "^4.2.0",
     "@twilio-paste/list": "^8.2.1",