@domicile-desktop/component-library 0.0.0-alpha-c079b224b5da → 0.0.0-alpha-7aa450be0ffd

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-c079b224b5da",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-c079b224b5da",
+    "@domicile-desktop/sdk": "0.0.0-alpha-7aa450be0ffd",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-7aa450be0ffd",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -162,5 +162,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-c079b224b5da"
+  "version": "0.0.0-alpha-7aa450be0ffd"
 }

package/src/AppChooser/AppChooser.tsx

@@ -5,7 +5,7 @@ import { useId, useState } from "react";
 import { css } from "../../styled-system/css";
 import { flex, hstack } from "../../styled-system/patterns";
 import { Button } from "../Button/Button";
-import { keepInView, stepOf, steppedTo } from "../list-walk";
+import { keepInView, pageOf, stepOf, steppedTo } from "../list-walk";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
 import { preselected } from "./app-choices";
 import { useDescribedChoices } from "./useDescribedChoices";
@@ -124,7 +124,8 @@ export const AppChooser = ({
           aria-label="Applications"
           className={listStyles}
           onKeyDown={(event) => {
-            const step = stepOf(event);
+            // The listbox is its own scroller.
+            const step = stepOf(event, pageOf(event.currentTarget));
             const next = apps[steppedTo(at, step ?? 0, apps.length)];
             if (event.key === "Enter") {
               event.preventDefault();

package/src/FilePicker/FilePicker.tsx

@@ -33,7 +33,7 @@ import { PencilSimpleIcon } from "@phosphor-icons/react/dist/ssr/PencilSimple";
 import { UsersIcon } from "@phosphor-icons/react/dist/ssr/Users";
 import { WarningIcon } from "@phosphor-icons/react/dist/ssr/Warning";
 import type { FocusEvent, KeyboardEvent, ReactNode, Ref } from "react";
-import { useId, useState } from "react";
+import { useId, useRef, useState } from "react";
 
 import { css } from "../../styled-system/css";
 import { flex, grid, hstack, vstack } from "../../styled-system/patterns";
@@ -41,7 +41,13 @@ import { focusOnAttach } from "../_control/focusOnAttach";
 import { useStableRef } from "../_control/useStableRef";
 import { Button } from "../Button/Button";
 import { Input } from "../Input/Input";
-import { highlightIn, keepInView, stepOf, steppedTo } from "../list-walk";
+import {
+  highlightIn,
+  keepInView,
+  pageOf,
+  stepOf,
+  steppedTo,
+} from "../list-walk";
 import { Select } from "../Select/Select";
 import { Clash, clashOf } from "./clash";
 import { FileKind, fileKindOf, kindLabel } from "./file-kind";
@@ -114,6 +120,7 @@ type NewFolder = { failure: string | undefined; name: string };
 export const FilePicker = ({ ref, request }: Props) => {
   const titleId = useId();
   const listId = useId();
+  const results = useRef<HTMLDivElement>(null);
   const replaceTitleId = useId();
   const replaceNoteId = useId();
   const failureId = useId();
@@ -475,7 +482,7 @@ export const FilePicker = ({ ref, request }: Props) => {
             }}
             onFocus={saving ? selectStem : undefined}
             onKeyDown={(event) => {
-              const step = stepOf(event);
+              const step = stepOf(event, pageOf(results.current));
               const up = parentOf(directory);
               if (step !== undefined) {
                 event.preventDefault();
@@ -569,7 +576,7 @@ export const FilePicker = ({ ref, request }: Props) => {
               )}
             </div>
           )}
-          <div className={resultsStyles}>
+          <div className={resultsStyles} ref={results}>
             <div aria-hidden className={columnsStyles}>
               <span>Name</span>
               <span>Kind</span>

package/src/list-walk.ts

@@ -1,18 +1,37 @@
 // Keyboard movement of a highlight through a list, while focus stays in the
-// input above it. Used by the launcher and the file picker.
+// input above it. Used by the launcher, the clipboard history and the
+// pickers.
 
 /**
  * How far a key press moves the highlight, or `undefined` if it does not move
- * it. Handles the arrows and Emacs-style `ctrl+n` / `ctrl+p`.
+ * it. Handles the arrows, Emacs-style `ctrl+n` / `ctrl+p`, Page Up / Page Down
+ * by `page` rows, and Vim-style `ctrl+d` / `ctrl+u` by half that.
+ *
+ * `ctrl+u` takes the key from the box, which would otherwise clear the line.
  */
-export const stepOf = ({
-  ctrlKey,
-  key,
-}: {
-  ctrlKey: boolean;
-  key: string;
-}): number | undefined => {
+export const stepOf = (
+  {
+    ctrlKey,
+    key,
+  }: {
+    ctrlKey: boolean;
+    key: string;
+  },
+  page: number,
+): number | undefined => {
   switch (key) {
+    case "PageDown": {
+      return page;
+    }
+    case "PageUp": {
+      return -page;
+    }
+    case "d": {
+      return ctrlKey ? halfOf(page) : undefined;
+    }
+    case "u": {
+      return ctrlKey ? -halfOf(page) : undefined;
+    }
     case "ArrowDown": {
       return 1;
     }
@@ -31,6 +50,30 @@ export const stepOf = ({
   }
 };
 
+/** Half a page, rounded down, but at least one row so the key always moves. */
+const halfOf = (page: number): number => Math.max(Math.floor(page / 2), 1);
+
+/**
+ * How many rows Page Down moves in `scroller`: the rows that fit in it whole.
+ *
+ * At least one, so the keys still move a list that isn't laid out, or whose
+ * scroller is shorter than a row. Takes a ref's `current`, which is `null`
+ * only before the list mounts, when no key can reach it.
+ */
+export const pageOf = (scroller: Scroller | null): number => {
+  if (scroller === null) {
+    throw new Error("Paged a list that is not mounted");
+  } else {
+    const row = scroller.querySelector('[role="option"]')?.offsetHeight ?? 0;
+    return row === 0 ? 1 : Math.max(Math.floor(scroller.clientHeight / row), 1);
+  }
+};
+
+/** The parts of a scrolling list element that `pageOf` measures. */
+type Scroller = Pick<HTMLElement, "clientHeight"> & {
+  querySelector: (selector: string) => Pick<HTMLElement, "offsetHeight"> | null;
+};
+
 /**
  * The highlighted row index, kept within the list, or none for an empty list.
  * With no key pressed it is the first row, so Enter picks it.