@avenue-ticketing/ui 0.9.0 → 0.11.0

package/dist/react/table-view/index.js

@@ -200,6 +200,85 @@ var Button = React5.forwardRef(
   }
 );
 Button.displayName = "Button";
+
+// src/lib/typeahead.ts
+var TYPEAHEAD_TIMEOUT_MS = 500;
+function createTypeaheadState() {
+  return { search: "", timer: null };
+}
+function resetTypeahead(state) {
+  state.search = "";
+  if (state.timer) {
+    clearTimeout(state.timer);
+    state.timer = null;
+  }
+}
+function getItemLabel(item) {
+  const aria = item.getAttribute("aria-label")?.trim();
+  if (aria) return aria;
+  const marked = item.querySelector("[data-menu-label]");
+  if (marked?.textContent) return marked.textContent.replace(/\s+/g, " ").trim();
+  return (item.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+function normalizeSearch(value) {
+  return value.trim().toLocaleLowerCase();
+}
+function isTypeaheadTarget(target) {
+  if (!(target instanceof HTMLElement)) return true;
+  if (target.isContentEditable) return false;
+  const tag = target.tagName;
+  return tag !== "INPUT" && tag !== "TEXTAREA" && tag !== "SELECT";
+}
+function handleTypeaheadKeyDown(event, items, state, options) {
+  if (options?.enabled === false || items.length === 0) return false;
+  if (event.ctrlKey || event.metaKey || event.altKey) return false;
+  if (event.key.length !== 1 || !isTypeaheadTarget(event.target)) return false;
+  event.preventDefault();
+  const timeoutMs = options?.timeoutMs ?? TYPEAHEAD_TIMEOUT_MS;
+  const char = event.key;
+  const prevSearch = state.search;
+  const repeatSingleChar = prevSearch.length === 1 && prevSearch === char;
+  if (repeatSingleChar) {
+    state.search = prevSearch;
+  } else {
+    state.search = prevSearch + char;
+  }
+  if (state.timer) clearTimeout(state.timer);
+  state.timer = setTimeout(() => {
+    state.search = "";
+    state.timer = null;
+  }, timeoutMs);
+  const labels = items.map((item) => normalizeSearch(getItemLabel(item)));
+  let needle = normalizeSearch(state.search);
+  let matches = items.map((item, index) => ({ item, index, label: labels[index] })).filter(({ label }) => label.startsWith(needle));
+  if (matches.length === 0 && state.search.length > 1) {
+    state.search = char;
+    needle = normalizeSearch(char);
+    matches = items.map((item, index) => ({ item, index, label: labels[index] })).filter(({ label }) => label.startsWith(needle));
+  }
+  if (matches.length === 0) return true;
+  const focused = document.activeElement;
+  const focusedIndex = focused ? items.indexOf(focused) : -1;
+  if (repeatSingleChar && focusedIndex !== -1) {
+    const currentMatch = matches.findIndex(
+      ({ index }) => index === focusedIndex
+    );
+    if (currentMatch !== -1) {
+      const next = matches[(currentMatch + 1) % matches.length];
+      next?.item.focus();
+      return true;
+    }
+  }
+  if (focusedIndex !== -1) {
+    const nextAfterFocus = matches.find(({ index }) => index > focusedIndex);
+    if (nextAfterFocus) {
+      nextAfterFocus.item.focus();
+      return true;
+    }
+  }
+  matches[0]?.item.focus();
+  return true;
+}
 var DROPDOWN_PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
 var DROPDOWN_PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
 var DROPDOWN_MENU_MIN_WIDTH_PX = 192;
@@ -491,7 +570,7 @@ function DropdownMobileBottomSheetPortal({
             "div",
             {
               className: cn(
-                "fixed inset-0 bg-black/40 dark:bg-black/60",
+                "fixed inset-0 bg-black/40 dark:bg-primary/4",
                 isAnimating ? "opacity-100" : "opacity-0"
               ),
               style: {
@@ -573,6 +652,7 @@ var DropdownContent = ({
   closeOnEscape = true,
   minWidth = "trigger",
   loop = true,
+  typeahead = true,
   mobileOptions,
   slideEntrance = true,
   slideEntranceOffsetPx: slideEntranceOffsetPxProp,
@@ -587,6 +667,7 @@ var DropdownContent = ({
   const [pos, setPos] = useState({ top: -9999, left: -9999, side });
   const [triggerW, setTriggerW] = useState(0);
   const menuRef = useRef(null);
+  const typeaheadStateRef = useRef(createTypeaheadState());
   const resolvedMobile = resolveDropdownMobileSheet(mobileOptions);
   const isMobileSheet = isMobile && resolvedMobile.sheet;
   const slideOffsetPx = slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX;
@@ -661,6 +742,9 @@ var DropdownContent = ({
       menuRef.current.focus();
     }
   }, [isAnimating]);
+  useEffect(() => {
+    if (!open) resetTypeahead(typeaheadStateRef.current);
+  }, [open]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -715,11 +799,16 @@ var DropdownContent = ({
         case "Tab":
           setOpen(false);
           break;
+        default:
+          handleTypeaheadKeyDown(e, items, typeaheadStateRef.current, {
+            enabled: typeahead
+          });
+          break;
       }
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [open, closeOnEscape, loop, setOpen, triggerRef]);
+  }, [open, closeOnEscape, loop, typeahead, setOpen, triggerRef]);
   useEffect(() => {
     if (!open || !isMobileSheet) return;
     document.body.style.overflow = "hidden";
@@ -843,7 +932,7 @@ var DropdownItem = ({
       ),
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
         shortcut ? /* @__PURE__ */ jsx(
           "span",
           {