@eifi1/ui-kit 0.8.0 → 0.9.0

package/src/hooks/use-overlay-history.ts

@@ -81,9 +81,48 @@ interface PushedEntry {
   href: string;
   /** Its overlay is gone but the entry is not — someone above owes this pop. */
   dead: boolean;
+  /** The router's `idx` on this entry when the marker went on — see {@link locate}. */
+  idx: number | undefined;
+  /** The router's `key` copied from the page entry beneath ours. */
+  key: string | undefined;
+  /** {@link routeOf} the address the marker was placed at. */
+  route: string;
 }
 const pushed: PushedEntry[] = [];
 
+/**
+ * Entries of ours that a ROUTER NAVIGATION made from inside the overlay has left
+ * behind — ours, still in the history, but no longer on top and no longer anyone's.
+ *
+ * Nothing can take an entry out from under a newer one, so they cannot be unwound;
+ * what can be done is to not let the user land on one. A traversal that comes to
+ * rest on a buried entry is carried straight on over the whole run of them, in the
+ * direction it was going (see `skipBuried`): Back from the new page lands on the page
+ * the overlay was opened from, Forward from there lands on the new page, and no press
+ * is spent on an entry with nothing on screen for it.
+ *
+ * `below` / `above` count the buried entries of the same run on either side. The
+ * router's `idx` tells the direction apart — except after a REPLACE navigation, when
+ * the page above the run shares the run's `idx`; the two keys decide there.
+ */
+interface BuriedEntry {
+  idx: number;
+  /** The `idx` of the router entry that buried the run: higher after a push, the
+   *  same after a replace. */
+  aboveIdx: number;
+  /** The key of the page entry directly beneath the run. */
+  belowKey: string | undefined;
+  /** The key of the router entry that buried the run, when it did. */
+  aboveKey: string | undefined;
+  below: number;
+  above: number;
+}
+const buried = new Map<string, BuriedEntry>();
+
+/** The router `{idx, key}` of the entry the last traversal (or burial) left us on —
+ *  what `skipBuried` compares against to know which way the user was going. */
+let lastSeen: { idx: number | undefined; key: string | undefined } | null = null;
+
 /** Entries a real Back press already consumed. Their overlay's cleanup still has to
  *  run, and it must not mistake "my entry is not current" for "my entry is buried"
  *  — it has no entry left at all. */
@@ -140,7 +179,12 @@ function runUnwind(): void {
   const job = unwind;
   unwind = null;
   if (!job) return;
-  if (currentSentinel() !== job.id || currentHref() !== job.href) return;
+  if (currentSentinel() !== job.id || currentHref() !== job.href) {
+    // A router navigation landed between the cleanup and this task: the entries
+    // are under it (or were replaced by it) rather than simply forgotten.
+    if (taggedSentinel() === null) buryUnder(job.entries);
+    return;
+  }
   pendingProgrammatic += 1;
   window.history.go(-job.entries.length);
 }
@@ -149,6 +193,120 @@ function currentHref(): string {
   return typeof window === "undefined" ? "" : window.location.href;
 }
 
+/** The router's own `{idx, key}` on the current entry, where a router has put them. */
+function routerMark(): { idx: number | undefined; key: string | undefined } {
+  const state = typeof window !== "undefined" ? (window.history.state as unknown) : null;
+  if (!state || typeof state !== "object") return { idx: undefined, key: undefined };
+  const { idx, key } = state as Record<string, unknown>;
+  return { idx: typeof idx === "number" ? idx : undefined, key: typeof key === "string" ? key : undefined };
+}
+
+/**
+ * The part of an address that names the PAGE — the query string left out.
+ *
+ * A `setSearchParams(…, { replace: true })` rewrites the query on the entry the
+ * overlay is standing on; that is a wipe to repair, not a move. Anything else changing
+ * is a navigation. Under a hash router the page lives in the hash (`#/table?f.q=x`), so
+ * a hash that starts with `#/` counts up to its own `?`; an ordinary `#fragment` does
+ * not name a page and is left out.
+ */
+function routeOf(href: string): string {
+  try {
+    const url = new URL(href);
+    const hashRoute = url.hash.startsWith("#/") ? url.hash.split("?")[0] : "";
+    return url.origin + url.pathname + hashRoute;
+  } catch {
+    return href;
+  }
+}
+
+/**
+ * Is the untagged entry we are standing on still `p`'s — merely wiped by the router —
+ * or an entry the router NAVIGATED to from inside the overlay?
+ *
+ * The router's `idx` is the one per-entry fact that separates the two, because it is
+ * the one the router itself keeps straight: a replace leaves it as it was, a push adds
+ * one. Our own push copies the page's state, so our entry carries the page's `idx` and
+ * a router push on top of it carries one more. The key would not do — every replace
+ * mints a new one, so the wipe this repair exists for would already fail it. Neither
+ * would the address alone: a push to the address we are already at is still a push.
+ *
+ * `idx` does not see one move, the router REPLACING our entry with a different page
+ * (same `idx`), so the page named by the address must also be unchanged. Where there is
+ * no `idx` to compare (no router, or one that keeps none) the address is all there is.
+ */
+function isStillOn(p: PushedEntry): boolean {
+  if (routeOf(currentHref()) !== p.route) return false;
+  const { idx } = routerMark();
+  return idx === undefined || p.idx === undefined || idx === p.idx;
+}
+
+/**
+ * The router has navigated while our entries were on top: record which of `records`
+ * (ours, oldest first, ending with the top one) it buried and which it replaced, and
+ * drop them from `pushed` — none of them can be unwound any more. Returns whether it
+ * recognised a navigation at all; when it cannot tell (no router `idx` to go by), it
+ * leaves everything as it was and the caller falls back to marking the entry dead.
+ */
+function buryUnder(records: PushedEntry[]): boolean {
+  const top = records[records.length - 1];
+  const here = routerMark();
+  if (!top || top.idx === undefined || here.idx === undefined) return false;
+  let run: PushedEntry[];
+  if (here.idx > top.idx) {
+    run = [];
+    for (let i = records.length - 1; i >= 0 && records[i].idx === top.idx; i -= 1) run.unshift(records[i]);
+  } else if (here.idx === top.idx && !isStillOn(top)) {
+    // Replaced: the top entry IS the new page now, and gone as ours. Those beneath it
+    // are buried under it.
+    run = [];
+    for (let i = records.length - 2; i >= 0 && records[i].idx === top.idx; i -= 1) run.unshift(records[i]);
+  } else {
+    return false;
+  }
+  run.forEach((r, i) => {
+    buried.set(r.id, {
+      idx: top.idx as number,
+      aboveIdx: here.idx as number,
+      belowKey: run[0].key,
+      aboveKey: here.key,
+      below: i,
+      above: run.length - 1 - i,
+    });
+  });
+  for (const r of records) forgetPushed(r.id);
+  lastSeen = here;
+  return true;
+}
+
+/**
+ * A traversal came to rest on one of our buried entries: carry it on over the run, the
+ * way it was going. Back from above (a higher `idx`, or the very entry that buried us)
+ * continues down to the page beneath; Forward from that page continues up. A landing
+ * from anywhere this cannot place is left alone — one idle press is the price of not
+ * guessing, and a wrong guess would move the user somewhere they did not ask to go.
+ */
+function skipBuried(from: typeof lastSeen): void {
+  const tag = taggedSentinel();
+  const rec = tag !== null ? buried.get(tag) : undefined;
+  if (!rec || !from || stack.some((e) => e.id === tag)) return;
+  let steps = 0;
+  if ((from.idx !== undefined && from.idx > rec.idx) || (from.key !== undefined && from.key === rec.aboveKey)) {
+    steps = -(rec.below + 1);
+  } else if (
+    from.idx !== undefined &&
+    // Below the run, or level with it when nothing above it is (a push buried it),
+    // or level with it and provably the page beneath (a replace buried it). The
+    // router's first entry has no key at all, so an absent key is a key here.
+    (from.idx < rec.idx || (from.idx === rec.idx && (rec.aboveIdx > rec.idx || from.key === rec.belowKey)))
+  ) {
+    steps = rec.above + 1;
+  }
+  if (steps === 0) return;
+  pendingProgrammatic += 1;
+  window.history.go(steps);
+}
+
 function forgetPushed(id: string): void {
   const at = pushed.findIndex((p) => p.id === id);
   if (at >= 0) pushed.splice(at, 1);
@@ -210,7 +368,14 @@ function currentSentinel(): string | null {
   // belief left over from an overlay that is long gone — a tab that has since
   // navigated, a test file that ran another case — would be stamped onto a
   // stranger's entry, and the next cleanup would traverse off it.
-  if (!pushed.some((p) => p.id === standing)) {
+  //
+  // And only an entry that is still the one the marker was placed on. A row that
+  // NAVIGATES (a palette result, a dialog's link) has the router push the new page
+  // before the overlay's cleanup runs; that entry carries no tag either, and
+  // re-stamping it made the cleanup "unwind" the navigation itself — the page
+  // changed and changed straight back. See `isStillOn` for how the two are told apart.
+  const record = pushed.find((p) => p.id === standing);
+  if (!record || !isStillOn(record)) {
     standing = null;
     return null;
   }
@@ -223,10 +388,17 @@ function handlePop() {
   // entry we have landed on before anything below consults it, or the repair in
   // `currentSentinel` would stamp the entry we just left onto the one we are on.
   standing = taggedSentinel();
+  const from = lastSeen;
+  lastSeen = routerMark();
   if (pendingProgrammatic > 0) {
     pendingProgrammatic -= 1;
     return;
   }
+  closeOnPop();
+  skipBuried(from);
+}
+
+function closeOnPop() {
   // Nothing open → an ordinary navigation, which is none of our business.
   const top = stack[stack.length - 1];
   if (!top) return;
@@ -290,7 +462,8 @@ export function useOverlayHistory(open: boolean, onClose: () => void): void {
       window.history.replaceState(marked, "");
       // The abandoned ones beneath come back owed; ours takes the top slot.
       for (const owed of inherited.slice(0, -1)) pushed.push({ ...owed, dead: true });
-      pushed.push({ id, href: currentHref(), dead: false });
+      const was = inherited[inherited.length - 1];
+      pushed.push({ id, href: currentHref(), dead: false, idx: was.idx, key: was.key, route: was.route });
       standing = id;
     } else {
       // A push DESTROYS every entry ahead of the one we are on, so anything we
@@ -304,7 +477,8 @@ export function useOverlayHistory(open: boolean, onClose: () => void): void {
       // Preserve react-router's own `{usr,key,idx}` — we only tack a marker on, and
       // the URL is unchanged, so the router treats popping this as a no-op re-render.
       window.history.pushState(marked, "");
-      pushed.push({ id, href: currentHref(), dead: false });
+      const page = routerMark();
+      pushed.push({ id, href: currentHref(), dead: false, idx: page.idx, key: page.key, route: routeOf(currentHref()) });
       standing = id;
     }
     return () => {
@@ -320,6 +494,9 @@ export function useOverlayHistory(open: boolean, onClose: () => void): void {
       // a SIBLING overlay's sentinel landed on top, that overlay is about to unwind
       // and is the one that can take ours with it.
       if (currentSentinel() !== id) {
+        // A router navigation from inside the overlay: nothing to unwind — the
+        // entries it left beneath the new page are skipped over instead.
+        if (mine >= 0 && taggedSentinel() === null && buryUnder(pushed.slice(0, pushed.length))) return;
         if (mine >= 0) pushed[mine].dead = true;
         return;
       }

package/src/i18n/defaults.ts

@@ -9,6 +9,7 @@ import { DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS } from "../componen
 import { DEFAULT_WIZARD_LABELS } from "../wizard/types";
 import { DEFAULT_TOUR_LABELS } from "../tour/tour";
 import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette";
+import { DEFAULT_GLOBAL_SEARCH_LABELS } from "../search/global-search";
 import { DEFAULT_SERIES_CHART_LABELS } from "../components/series-chart-labels";
 import { DEFAULT_SPARKLINE_LABELS } from "../components/sparkline";
 import { DEFAULT_STAT_TILE_LABELS } from "../components/stat-tile";
@@ -71,6 +72,7 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   wizard: DEFAULT_WIZARD_LABELS,
   tour: DEFAULT_TOUR_LABELS,
   commandPalette: DEFAULT_COMMAND_PALETTE_LABELS,
+  globalSearch: DEFAULT_GLOBAL_SEARCH_LABELS,
   seriesChart: DEFAULT_SERIES_CHART_LABELS,
   sparkline: DEFAULT_SPARKLINE_LABELS,
   statTile: DEFAULT_STAT_TILE_LABELS,

package/src/i18n/kit-labels.tsx

@@ -9,6 +9,7 @@ import type { PasswordRevealLabels, TabsLabels } from "../components/ui";
 import type { WizardLabels } from "../wizard/types";
 import type { TourLabels } from "../tour/tour";
 import type { CommandPaletteLabels } from "../search/command-palette";
+import type { GlobalSearchLabels } from "../search/global-search";
 import type { MonthPickerLabels } from "../components/month-picker";
 import type { PageContentsLabels } from "../components/page-contents";
 import type { SeriesChartLabels } from "../components/series-chart-labels";
@@ -212,6 +213,7 @@ export interface UiKitLabels {
   wizard: WizardLabels;
   tour: TourLabels;
   commandPalette: CommandPaletteLabels;
+  globalSearch: GlobalSearchLabels;
   seriesChart: SeriesChartLabels;
   sparkline: SparklineLabels;
   statTile: StatTileLabels;

package/src/i18n/locales/de.ts

@@ -302,12 +302,22 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
     commandPalette: {
+      clear: "Suche löschen",
+      submit: "Suchen",
+      close: "Schließen",
       placeholder: "Suchen…",
       empty: "Keine Ergebnisse",
       loading: "Wird gesucht…",
       dialog: "Suche",
       error: "Die Suche ist fehlgeschlagen. Bitte erneut versuchen.",
     },
+    globalSearch: {
+      trigger: "Suche",
+      placeholder: "Suchen oder springen zu…",
+      shortcut: (keys) => `Suche (${keys})`,
+      suggestions: "Vorschläge",
+      results: "Ergebnisse",
+    },
     sparkline: {
       rising: (first, last) => `Steigend von ${first} auf ${last}`,
       falling: (first, last) => `Fallend von ${first} auf ${last}`,

package/src/i18n/locales/es.ts

@@ -295,12 +295,22 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
     commandPalette: {
+      clear: "Borrar búsqueda",
+      submit: "Buscar",
+      close: "Cerrar",
       placeholder: "Buscar…",
       empty: "Sin resultados",
       loading: "Buscando…",
       dialog: "Búsqueda",
       error: "La búsqueda ha fallado. Inténtelo de nuevo.",
     },
+    globalSearch: {
+      trigger: "Buscar",
+      placeholder: "Buscar o ir a…",
+      shortcut: (keys) => `Buscar (${keys})`,
+      suggestions: "Pruebe",
+      results: "Resultados",
+    },
     sparkline: {
       rising: (first, last) => `Sube de ${first} a ${last}`,
       falling: (first, last) => `Baja de ${first} a ${last}`,

package/src/i18n/locales/fr.ts

@@ -307,12 +307,22 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
     commandPalette: {
+      clear: "Effacer la recherche",
+      submit: "Rechercher",
+      close: "Fermer",
       placeholder: "Rechercher…",
       empty: "Aucun résultat",
       loading: "Recherche…",
       dialog: "Recherche",
       error: "La recherche a échoué. Réessayez.",
     },
+    globalSearch: {
+      trigger: "Rechercher",
+      placeholder: "Rechercher ou aller à…",
+      shortcut: (keys) => `Rechercher (${keys})`,
+      suggestions: "Essayez",
+      results: "Résultats",
+    },
     sparkline: {
       // "En hausse de 12 à 40" would read as "up BY 12", hence the colon.
       rising: (first, last) => `En hausse\u00a0: de ${first} à ${last}`,

package/src/i18n/locales/hu.ts

@@ -297,12 +297,22 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
     commandPalette: {
+      clear: "Keresés törlése",
+      submit: "Keresés",
+      close: "Bezárás",
       placeholder: "Keresés…",
       empty: "Nincs találat",
       loading: "Keresés folyamatban…",
       dialog: "Keresés",
       error: "A keresés nem sikerült. Próbálja újra.",
     },
+    globalSearch: {
+      trigger: "Keresés",
+      placeholder: "Keresés vagy ugrás…",
+      shortcut: (keys) => `Keresés (${keys})`,
+      suggestions: "Próbálja ki",
+      results: "Találatok",
+    },
     sparkline: {
       // Numerals stay bare (see 3. above): "12-ről 40-re" would need vowel harmony.
       rising: (first, last) => `Emelkedik (első érték: ${first}, utolsó: ${last})`,

package/src/i18n/locales/it.ts

@@ -297,12 +297,22 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
     commandPalette: {
+      clear: "Cancella ricerca",
+      submit: "Cerca",
+      close: "Chiudi",
       placeholder: "Cerca…",
       empty: "Nessun risultato",
       loading: "Ricerca in corso…",
       dialog: "Ricerca",
       error: "Ricerca non riuscita. Riprova.",
     },
+    globalSearch: {
+      trigger: "Cerca",
+      placeholder: "Cerca o vai a…",
+      shortcut: (keys) => `Cerca (${keys})`,
+      suggestions: "Prova",
+      results: "Risultati",
+    },
     sparkline: {
       rising: (first, last) => `In aumento da ${first} a ${last}`,
       falling: (first, last) => `In calo da ${first} a ${last}`,

package/src/i18n/locales/zh.ts

@@ -287,12 +287,22 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
     commandPalette: {
+      clear: "清除搜索",
+      submit: "搜索",
+      close: "关闭",
       placeholder: "搜索…",
       empty: "无结果",
       loading: "搜索中…",
       dialog: "搜索",
       error: "搜索失败，请重试。",
     },
+    globalSearch: {
+      trigger: "搜索",
+      placeholder: "搜索或跳转到…",
+      shortcut: (keys) => `搜索（${keys}）`,
+      suggestions: "试试",
+      results: "结果",
+    },
     sparkline: {
       rising: (first, last) => `从 ${first} 上升到 ${last}`,
       falling: (first, last) => `从 ${first} 下降到 ${last}`,

package/src/index.ts

@@ -163,6 +163,8 @@ export { FilterPopover } from "./components/data-table-filter-popover";
 export { DataTable } from "./components/data-table";
 export type {
   DataTableColumn,
+  DataTableCellProps,
+  DataTableHeadProps,
   DataTableProps,
   ServerPagination,
   FilterState,
@@ -217,6 +219,8 @@ export * from "./tour/tour";
 
 // ── command palette / global search ──────────────────────────────────────────
 export * from "./search/command-palette";
+export * from "./search/search-index";
+export * from "./search/global-search";
 
 // ── i18n: one label tree, one optional provider ──────────────────────────────
 // `UiKitLabels` names every string the kit renders; `<UiKitProvider labels locale>`