feat: recent

packages/react-grab/e2e/fixtures.ts

@@ -32,6 +32,7 @@ interface ToolbarInfo {
   isCollapsed: boolean;
   position: { x: number; y: number } | null;
   snapEdge: string | null;
+  orientation: "horizontal" | "vertical" | null;
 }
 
 interface AgentSessionInfo {
@@ -135,7 +136,6 @@ export interface ReactGrabPageObject {
   getRecentDropdownInfo: () => Promise<RecentDropdownInfo>;
   clickRecentItem: (index: number) => Promise<void>;
   clickRecentCopyAll: () => Promise<void>;
-  clickRecentClear: () => Promise<void>;
   hoverRecentItem: (index: number) => Promise<void>;
 
   getSelectionLabelInfo: () => Promise<SelectionLabelInfo>;
@@ -699,6 +699,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
           isCollapsed: false,
           position: null,
           snapEdge: null,
+          orientation: null,
         };
       const root = shadowRoot.querySelector(`[${attrName}]`);
       if (!root)
@@ -707,6 +708,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
           isCollapsed: false,
           position: null,
           snapEdge: null,
+          orientation: null,
         };
 
       const toolbar = root.querySelector<HTMLElement>(
@@ -718,6 +720,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
           isCollapsed: false,
           position: null,
           snapEdge: null,
+          orientation: null,
         };
 
       const computedStyle = window.getComputedStyle(toolbar);
@@ -734,7 +737,31 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
       const rect = toolbar.getBoundingClientRect();
 
       let snapEdge: string | null = null;
-      if (position) {
+      const serializedToolbarState = localStorage.getItem(
+        "react-grab-toolbar-state",
+      );
+      if (serializedToolbarState) {
+        try {
+          const parsedToolbarState = JSON.parse(serializedToolbarState);
+          if (
+            parsedToolbarState &&
+            typeof parsedToolbarState === "object" &&
+            "edge" in parsedToolbarState
+          ) {
+            const edgeValue = parsedToolbarState.edge;
+            if (
+              edgeValue === "top" ||
+              edgeValue === "bottom" ||
+              edgeValue === "left" ||
+              edgeValue === "right"
+            ) {
+              snapEdge = edgeValue;
+            }
+          }
+        } catch {}
+      }
+
+      if (!snapEdge && position) {
         const SNAP_THRESHOLD = 30;
         if (position.y <= SNAP_THRESHOLD) snapEdge = "top";
         else if (position.y + rect.height >= viewportHeight - SNAP_THRESHOLD)
@@ -745,12 +772,21 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
       }
 
       const isCollapsed = computedStyle.cursor === "pointer";
+      const orientationAttribute = toolbar.getAttribute(
+        "data-react-grab-toolbar-orientation",
+      );
+      const orientation =
+        orientationAttribute === "vertical" ||
+        orientationAttribute === "horizontal"
+          ? orientationAttribute
+          : null;
 
       return {
         isVisible: computedStyle.opacity !== "0",
         isCollapsed,
         position,
         snapEdge,
+        orientation,
       };
     }, ATTRIBUTE_NAME);
   };
@@ -879,7 +915,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
         "[data-react-grab-toolbar-recent]",
       );
       if (!recentButton) return false;
-      const unreadDot = recentButton.querySelector('path[fill="#404040"]');
+      const unreadDot = recentButton.querySelector('path[fill="currentColor"]');
       return unreadDot !== null;
     }, ATTRIBUTE_NAME);
   };
@@ -2070,7 +2106,6 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
     getRecentDropdownInfo,
     clickRecentItem,
     clickRecentCopyAll,
-    clickRecentClear,
     hoverRecentItem,
 
     getSelectionLabelInfo,

packages/react-grab/e2e/recent-items.spec.ts

@@ -16,6 +16,51 @@ const copyElement = async (
   await reactGrab.page.waitForTimeout(300);
 };
 
+interface CopiedListItemContents {
+  firstCopiedContent: string;
+  secondCopiedContent: string;
+}
+
+const copyThreeListItems = async (
+  reactGrab: ReactGrabPageObject,
+): Promise<CopiedListItemContents> => {
+  await copyElement(reactGrab, "li:first-child");
+  const firstCopiedContent = await reactGrab.getClipboardContent();
+
+  await copyElement(reactGrab, "li:nth-child(2)");
+  const secondCopiedContent = await reactGrab.getClipboardContent();
+
+  await copyElement(reactGrab, "li:last-child");
+
+  return {
+    firstCopiedContent,
+    secondCopiedContent,
+  };
+};
+
+const getHighlightedRecentItemIndex = async (
+  reactGrab: ReactGrabPageObject,
+): Promise<number | null> => {
+  return reactGrab.page.evaluate(() => {
+    const host = document.querySelector("[data-react-grab]");
+    const shadowRoot = host?.shadowRoot;
+    const root = shadowRoot?.querySelector("[data-react-grab]");
+    const dropdown = root?.querySelector("[data-react-grab-recent-dropdown]");
+    if (!dropdown) return null;
+
+    const recentItemButtons = Array.from(
+      dropdown.querySelectorAll<HTMLButtonElement>(
+        "[data-react-grab-recent-item]",
+      ),
+    );
+    const highlightedIndex = recentItemButtons.findIndex((recentItemButton) =>
+      recentItemButton.hasAttribute("data-react-grab-recent-item-highlighted"),
+    );
+
+    return highlightedIndex >= 0 ? highlightedIndex : null;
+  });
+};
+
 test.describe("Recent Items", () => {
   test.describe("Toolbar Recent Button", () => {
     test("should not be visible before any elements are copied", async ({
@@ -83,6 +128,16 @@ test.describe("Recent Items", () => {
   });
 
   test.describe("Dropdown Open/Close", () => {
+    test("should not open when pressing R with no recent items", async ({
+      reactGrab,
+    }) => {
+      await reactGrab.activate();
+      await reactGrab.pressKey("r");
+      await reactGrab.page.waitForTimeout(100);
+
+      expect(await reactGrab.isRecentDropdownVisible()).toBe(false);
+    });
+
     test("should open when clicking the recent button", async ({
       reactGrab,
     }) => {
@@ -93,6 +148,16 @@ test.describe("Recent Items", () => {
       expect(isDropdownVisible).toBe(true);
     });
 
+    test("should open when pressing R while active", async ({ reactGrab }) => {
+      await copyElement(reactGrab, "li:first-child");
+      await reactGrab.activate();
+      await reactGrab.pressKey("r");
+
+      await expect
+        .poll(() => reactGrab.isRecentDropdownVisible(), { timeout: 2000 })
+        .toBe(true);
+    });
+
     test("should close when clicking the recent button again", async ({
       reactGrab,
     }) => {
@@ -157,20 +222,6 @@ test.describe("Recent Items", () => {
       const dropdownInfo = await reactGrab.getRecentDropdownInfo();
       expect(dropdownInfo.itemCount).toBe(2);
     });
-
-    test("should hide recent button after clearing all items", async ({
-      reactGrab,
-    }) => {
-      await copyElement(reactGrab, "li:first-child");
-      await reactGrab.clickRecentButton();
-      await reactGrab.clickRecentClear();
-
-      await expect
-        .poll(() => reactGrab.isRecentButtonVisible(), { timeout: 2000 })
-        .toBe(false);
-
-      expect(await reactGrab.isRecentDropdownVisible()).toBe(false);
-    });
   });
 
   test.describe("Item Selection", () => {
@@ -207,6 +258,76 @@ test.describe("Recent Items", () => {
 
       expect(await reactGrab.isRecentDropdownVisible()).toBe(false);
     });
+
+    test("should select the next item with ArrowDown then Enter", async ({
+      reactGrab,
+    }) => {
+      const copiedListItemContents = await copyThreeListItems(reactGrab);
+
+      await reactGrab.activate();
+      await reactGrab.pressKey("r");
+      await expect
+        .poll(() => reactGrab.isRecentDropdownVisible(), { timeout: 2000 })
+        .toBe(true);
+
+      await reactGrab.pressArrowDown();
+      await reactGrab.pressEnter();
+
+      await expect
+        .poll(() => reactGrab.isRecentDropdownVisible(), { timeout: 2000 })
+        .toBe(false);
+      await expect
+        .poll(() => reactGrab.getClipboardContent(), { timeout: 3000 })
+        .toBe(copiedListItemContents.secondCopiedContent);
+    });
+
+    test("should show highlighted state while cycling with arrow keys", async ({
+      reactGrab,
+    }) => {
+      await copyThreeListItems(reactGrab);
+
+      await reactGrab.activate();
+      await reactGrab.pressKey("r");
+      await expect
+        .poll(() => reactGrab.isRecentDropdownVisible(), { timeout: 2000 })
+        .toBe(true);
+
+      await expect
+        .poll(() => getHighlightedRecentItemIndex(reactGrab), { timeout: 2000 })
+        .toBe(0);
+
+      await reactGrab.pressArrowDown();
+      await expect
+        .poll(() => getHighlightedRecentItemIndex(reactGrab), { timeout: 2000 })
+        .toBe(1);
+
+      await reactGrab.pressArrowUp();
+      await expect
+        .poll(() => getHighlightedRecentItemIndex(reactGrab), { timeout: 2000 })
+        .toBe(0);
+    });
+
+    test("should select the previous item with ArrowUp then Enter", async ({
+      reactGrab,
+    }) => {
+      const copiedListItemContents = await copyThreeListItems(reactGrab);
+
+      await reactGrab.activate();
+      await reactGrab.pressKey("r");
+      await expect
+        .poll(() => reactGrab.isRecentDropdownVisible(), { timeout: 2000 })
+        .toBe(true);
+
+      await reactGrab.pressArrowUp();
+      await reactGrab.pressEnter();
+
+      await expect
+        .poll(() => reactGrab.isRecentDropdownVisible(), { timeout: 2000 })
+        .toBe(false);
+      await expect
+        .poll(() => reactGrab.getClipboardContent(), { timeout: 3000 })
+        .toBe(copiedListItemContents.firstCopiedContent);
+    });
   });
 
   test.describe("Copy All", () => {
@@ -237,7 +358,9 @@ test.describe("Recent Items", () => {
       expect(await reactGrab.isRecentDropdownVisible()).toBe(false);
     });
 
-    test("should trigger copy all via Enter key", async ({ reactGrab }) => {
+    test("should select highlighted item via Enter key", async ({
+      reactGrab,
+    }) => {
       await copyElement(reactGrab, "li:first-child");
 
       await reactGrab.page.evaluate(() => navigator.clipboard.writeText(""));
@@ -248,49 +371,6 @@ test.describe("Recent Items", () => {
 
       const clipboardContent = await reactGrab.getClipboardContent();
       expect(clipboardContent).toBeTruthy();
-    });
-  });
-
-  test.describe("Clear All", () => {
-    test("should remove all recent items", async ({ reactGrab }) => {
-      await copyElement(reactGrab, "li:first-child");
-      await copyElement(reactGrab, "li:last-child");
-
-      await reactGrab.clickRecentButton();
-      expect((await reactGrab.getRecentDropdownInfo()).itemCount).toBe(2);
-
-      await reactGrab.clickRecentClear();
-
-      await expect
-        .poll(() => reactGrab.isRecentButtonVisible(), { timeout: 2000 })
-        .toBe(false);
-    });
-
-    test("should hide the recent button in toolbar after clearing", async ({
-      reactGrab,
-    }) => {
-      await copyElement(reactGrab, "li:first-child");
-
-      await expect
-        .poll(() => reactGrab.isRecentButtonVisible(), { timeout: 2000 })
-        .toBe(true);
-
-      await reactGrab.clickRecentButton();
-      await reactGrab.clickRecentClear();
-
-      await expect
-        .poll(() => reactGrab.isRecentButtonVisible(), { timeout: 2000 })
-        .toBe(false);
-    });
-
-    test("should close the dropdown after clearing", async ({ reactGrab }) => {
-      await copyElement(reactGrab, "li:first-child");
-      await reactGrab.clickRecentButton();
-
-      expect(await reactGrab.isRecentDropdownVisible()).toBe(true);
-
-      await reactGrab.clickRecentClear();
-
       expect(await reactGrab.isRecentDropdownVisible()).toBe(false);
     });
   });