contain-css-svelte 1.1.11 → 1.1.12

package/dist/controls/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import DropdownMenu from "../dropdowns/DropdownMenu.svelte";
 import { onMount, tick } from "svelte";
-let { value = $bindable(), children, "data-audit-action": dropdownAuditAction = null, ...restProps } = $props();
+let { value = $bindable(), children, "data-audit-action": dropdownAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", ...restProps } = $props();
 let selectElement = $state();
 let observer;
 let resizeObserver;
@@ -95,7 +95,11 @@ $effect(() => {
   {@render children?.()}
 </select>
 <div class="dropdown-wrapper" style:--target-width={targetWidth}>
-  <DropdownMenu triggerAuditAction={dropdownAuditAction}>
+  <DropdownMenu
+    triggerAuditAction={dropdownAuditAction}
+    {matchMode}
+    {typeaheadMode}
+  >
     {#snippet label()}
       <span
         class="select-dropdown"

package/dist/controls/Select.svelte.d.ts

@@ -1,8 +1,13 @@
 import type { HTMLSelectAttributes } from "svelte/elements";
+import type { MatchMode, TypeaheadMode } from "../dropdowns/DropdownMenu.svelte";
 type Props = {
     value?: any;
     children?: import("svelte").Snippet;
     "data-audit-action"?: string | null;
+    /** See {@link MatchMode} on DropdownMenu -- how type-ahead text is compared. */
+    matchMode?: MatchMode;
+    /** See {@link TypeaheadMode} on DropdownMenu -- focus a match or filter the list. */
+    typeaheadMode?: TypeaheadMode;
 } & HTMLSelectAttributes;
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/dropdowns/DropdownMenu.svelte

@@ -1,12 +1,12 @@
-<script module lang="ts">"use strict";
-var idPostfix = 1;
+<script module lang="ts">var idPostfix = 1;
+export {};
 </script>
 
 <script lang="ts">import { cssProperties } from "../cssprops";
 import MenuList from "../layout/MenuList.svelte";
 import { injectVars } from "../util";
 import { onMount } from "svelte";
-let { label, children, triggerAuditAction = null, ...props } = $props();
+let { label, children, triggerAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", ...props } = $props();
 idPostfix++;
 let id = "contain-dropdown-menu-" + idPostfix;
 let buttonElement = $state();
@@ -65,48 +65,133 @@ function clearSearch() {
     clearTimeout(clearTimer);
     clearTimer = undefined;
     searchString = "";
+    clearFilter();
 }
 const timeoutAfterMS = 2500; // 2.5 seconds seems more humane
 function scheduleSearchClear() {
+    // In filter mode the buffer is a live filter, not a transient jump target --
+    // auto-clearing it mid-scroll would make the list flicker back to full
+    // length. It persists until Escape, close, or Backspace to empty.
+    if (typeaheadMode === "filter")
+        return;
     clearTimeout(clearTimer);
     clearTimer = setTimeout(clearSearch, timeoutAfterMS);
 }
 function handleKeystroke(event) {
     if (event.key == "Backspace" && searchString) {
         searchString = searchString.slice(0, -1);
+        applySearch();
         scheduleSearchClear();
     }
     else if (event.key.length == 1) {
         if (searchString || event.key != " ") {
             searchString += event.key;
-            maybeFocusMatch(searchString);
+            applySearch();
             scheduleSearchClear();
         }
     }
-    else {
+    else if (event.key === "Escape") {
+        clearSearch();
+        popoverDiv?.hidePopover();
+    }
+    else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault(); // Prevent default to stop scrolling the page
+        // In filter mode the buffer stays live so arrow keys (and Tab) cycle
+        // through the *filtered* rows -- type a few letters, then arrow down to
+        // the one you saw. In focus mode a navigation key ends the type-ahead.
+        if (typeaheadMode !== "filter")
+            clearSearch();
+        navigateMenu(event.key);
+    }
+    else if (typeaheadMode !== "filter") {
+        // Tab, Enter, Home/End, etc. -- end a focus-mode type-ahead session.
+        // Filter mode keeps the filter until Escape, close, or Backspace-to-empty.
         clearSearch();
-        if (event.key === "Escape") {
-            popoverDiv?.hidePopover();
+    }
+}
+/** Route the current buffer to whichever behavior this menu is configured for. */
+function applySearch() {
+    if (typeaheadMode === "filter") {
+        applyFilter(searchString);
+    }
+    if (!searchString)
+        return;
+    const matched = maybeFocusMatch(searchString);
+    // In filter mode a filtered-out item may have been holding focus; if nothing
+    // matched, park focus on the trigger so keystrokes still reach this <nav>
+    // (Backspace to recover, Escape to close).
+    if (!matched && typeaheadMode === "filter")
+        buttonElement?.focus();
+}
+/** Does `text` satisfy `query` under the active {@link matchMode}? */
+function textMatches(text, query) {
+    if (!query)
+        return true;
+    const haystack = text.toLowerCase();
+    const needle = query.toLowerCase();
+    if (matchMode === "substring")
+        return haystack.includes(needle);
+    if (matchMode === "word")
+        return haystack.split(/\s+/).some((word) => word.startsWith(needle));
+    return haystack.startsWith(needle); // "prefix"
+}
+function getFocusableItems(visibleOnly = false) {
+    if (!dropdownContentElement)
+        return [];
+    let items = Array.from(dropdownContentElement.querySelectorAll("button, a, [tabindex]:not([tabindex='-1'])"));
+    if (visibleOnly)
+        items = items.filter((el) => el.closest("[hidden]") === null);
+    return items;
+}
+/** The row we hide/show for a given item -- its wrapping <li>, or the item. */
+function itemRow(el) {
+    return el.closest("li") ?? el;
+}
+function applyFilter(query) {
+    if (!dropdownContentElement)
+        return;
+    if (!query) {
+        clearFilter();
+        return;
+    }
+    for (const el of getFocusableItems()) {
+        const row = itemRow(el);
+        if (textMatches(el.textContent ?? "", query)) {
+            if (row.dataset.typeaheadFiltered) {
+                delete row.dataset.typeaheadFiltered;
+                row.hidden = false;
+            }
         }
-        else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault(); // Prevent default to stop scrolling the page
-            navigateMenu(event.key);
+        else if (!row.hidden) {
+            row.hidden = true;
+            row.dataset.typeaheadFiltered = "true";
         }
     }
+    // The popover just changed height; keep it anchored under the trigger.
+    computePosition();
 }
-function maybeFocusMatch(searchString) {
+/** Undo {@link applyFilter}, leaving any consumer-set `hidden` rows alone. */
+function clearFilter() {
     if (!dropdownContentElement)
         return;
-    let focusableItems = dropdownContentElement.querySelectorAll("a,button,[tabindex]");
-    for (let element of focusableItems) {
-        if (element.textContent &&
-            element.textContent.toLowerCase().startsWith(searchString.toLowerCase())) {
+    const hiddenRows = dropdownContentElement.querySelectorAll("[data-typeahead-filtered]");
+    for (const row of hiddenRows) {
+        delete row.dataset.typeaheadFiltered;
+        row.hidden = false;
+    }
+    if (hiddenRows.length)
+        computePosition();
+}
+function maybeFocusMatch(searchString) {
+    for (const element of getFocusableItems(true)) {
+        if (element.textContent && textMatches(element.textContent, searchString)) {
             if (element.focus) {
                 element.focus();
-                return;
+                return true;
             }
         }
     }
+    return false;
 }
 function navigateMenu(direction) {
     if (!popoverDiv?.matches(":popover-open") && buttonElement) {
@@ -115,7 +200,7 @@ function navigateMenu(direction) {
     }
     if (!dropdownContentElement)
         return;
-    const focusableItems = Array.from(dropdownContentElement.querySelectorAll("button, a, [tabindex]:not([tabindex='-1'])"));
+    const focusableItems = getFocusableItems(true);
     let currentIndex = focusableItems.findIndex((item) => item === document.activeElement);
     if (direction === "ArrowDown") {
         currentIndex = (currentIndex + 1) % focusableItems.length;
@@ -172,7 +257,9 @@ let popoverDiv = $state();
     style:max-height="{dropdownMaxHeight}px"
   >
     {#if searchString}
-      <div class="search-hint" aria-hidden="true">{searchString}</div>
+      <div class="search-hint-wrapper">
+        <div class="search-hint" aria-hidden="true">{searchString}</div>
+      </div>
     {/if}
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
@@ -434,12 +521,19 @@ button {
   overflow: hidden;
 }
 
+.search-hint-wrapper {
+  position: sticky;
+  top: 0;
+  right: 0;
+  height: 0;
+}
+
 .search-hint {
-  position: absolute;
-  top: var(--search-hint-offset, 4px);
-  right: var(--search-hint-offset, 4px);
   z-index: 2;
+  position: absolute;
+  right: 0;
   pointer-events: none;
+  width: fit-content;
   max-width: calc(100% - 2 * var(--search-hint-offset, 4px));
   --link-bg: var(--search-hint-link-bg, var(--tag-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--search-hint-link-fg, var(--tag-link-fg, var(--secondary-link-fg, inherit)));

package/dist/dropdowns/DropdownMenu.svelte.d.ts

@@ -1,3 +1,19 @@
+/**
+ * How the type-ahead search buffer is compared against each item's text.
+ *  - "prefix"    : item text must start with the query (default, classic
+ *                  <select> behavior)
+ *  - "word"      : any whitespace-delimited word in the item must start with
+ *                  the query -- typing "Boo" matches "Foo Boo Baz"
+ *  - "substring" : query may appear anywhere in the item text
+ */
+export type MatchMode = "prefix" | "word" | "substring";
+/**
+ * What a type-ahead match does:
+ *  - "focus"  : move focus to the first matching item (default)
+ *  - "filter" : hide non-matching items so the list shrinks as you type;
+ *               focus follows the first remaining match
+ */
+export type TypeaheadMode = "focus" | "filter";
 import type { Snippet } from "svelte";
 import type { DropdownMenuStyleProps } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
@@ -5,6 +21,8 @@ type Props = {
     label?: Snippet;
     children?: Snippet;
     triggerAuditAction?: string | null;
+    matchMode?: MatchMode;
+    typeaheadMode?: TypeaheadMode;
 } & DropdownMenuStyleProps & HTMLAttributes<HTMLDivElement>;
 declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/layout/MenuList.svelte

@@ -154,7 +154,7 @@ const style = $derived(injectVars(restProps, "menu", [
 
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
   display: flex;
-  justify-content: var(--menu-item-justify, center);
+  justify-content: var(--menu-item-justify, start);
   align-items: var(--menu-item-align, center);
   width: var(--menu-item-width, 100%);
   height: var(--menu-item-height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "license": "MIT",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",