@stapel/search-react 0.24.0 → 0.26.0

package/src/default/OtherCategoriesLine.tsx

@@ -0,0 +1,238 @@
+/**
+ * `<OtherCategoriesLine>` — "Search in other categories: Cars 12 · Buses 3 ·
+ * Motorhomes 1 · …", on ONE line, drawn from the answer that drew the cards.
+ *
+ * ## What it replaces
+ *
+ * A full-width block under the results with one row per category, fetched
+ * separately and arriving after the page had settled. Two defects in one
+ * control:
+ *
+ *  - **it was tall.** Fourteen sections became fourteen rows — a screen and a
+ *    half of navigation under a list of listings, for information that fits
+ *    in a sentence.
+ *  - **it was late.** A second request meant the block appeared a beat after
+ *    the cards and PUSHED them, on the one screen where a person has already
+ *    started reading. The information was not even new: `/query` had already
+ *    answered with `facet_meta.categories`, and the type-ahead had shown the
+ *    same sections a keystroke earlier.
+ *
+ * This line renders in the SAME frame as the results, out of the same
+ * response ({@link useOtherCategories}), so there is nothing to arrive late.
+ * The single case that still needs a request — an empty result set, whose
+ * candidate list is empty by definition — draws into a slot whose height is
+ * reserved from the first frame, so the answer lands without moving anything.
+ *
+ * ## Pressing an entry narrows the search; it does not leave it
+ *
+ * The count beside a name is the count for THIS QUERY in that section — the
+ * server's `facet_meta.categories`. A link to the bare category feed would
+ * show a different, larger number, so the caption would be a lie one click
+ * later. Each entry therefore writes the `category` parameter of the search
+ * already on screen, keeping the query: press "Cars 12" and twelve results
+ * follow. That is a state change, so each entry is a real `<button>` and not
+ * an anchor.
+ *
+ * ## Two rows on a phone, at most
+ *
+ * The cap is halved on the sheet surface ({@link OTHER_CATEGORIES_PHONE_LIMIT}),
+ * and the collapsed line is clamped to two rows besides — a cap counts
+ * entries, and it is name LENGTH that turns a line into a paragraph. Expanding
+ * is the person's own press, and an expanded line is allowed to be as tall as
+ * what they asked for.
+ */
+import { Fragment, useState } from "react";
+import type { CSSProperties, ReactElement } from "react";
+import { Button, Typography } from "antd";
+import { useDialogSurface } from "@stapel/tokens-antd/skin";
+import { useT } from "@stapel/core";
+import { cssVar } from "@stapel/tokens";
+import { useSearchState } from "../headless/SearchStateProvider.js";
+import {
+  OTHER_CATEGORIES_LIMIT,
+  OTHER_CATEGORIES_PHONE_LIMIT,
+  otherCategoryLeaf,
+  useOtherCategories,
+} from "../headless/useOtherCategories.js";
+import type { OtherCategoryRow } from "../headless/useOtherCategories.js";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+
+/**
+ * The height the empty-result slot holds before its answer arrives.
+ *
+ * One text line. Reserving it is the whole difference between "the sections
+ * appeared" and "the sections pushed the page", and it is reserved whether the
+ * request ends with rows or with none.
+ */
+export const OTHER_CATEGORIES_SLOT_MIN_HEIGHT = 24;
+
+/** Names an id path the pair cannot name on its own. Returning `undefined`
+ * drops the row rather than printing a number at a person. */
+export type OtherCategoryNamer = (category: string) => string | undefined;
+
+export interface OtherCategoriesLineProps {
+  /** How many entries before the fold (default {@link OTHER_CATEGORIES_LIMIT}). */
+  readonly limit?: number;
+  /** The same, on the phone surface (default
+   * {@link OTHER_CATEGORIES_PHONE_LIMIT}). */
+  readonly phoneLimit?: number;
+  /**
+   * What a category id path is CALLED.
+   *
+   * The pair holds `"140/145"` and has no catalogue: naming it is the host's,
+   * exactly as `categoryLabel` is for the chip. Without this the line still
+   * draws every row the server named (a `/suggest` answer already in the
+   * cache, or the empty-result path) and every path whose last segment is a
+   * slug — and drops the rest, because "163 · 149" is not a sentence.
+   */
+  readonly categoryName?: OtherCategoryNamer;
+  /** Skip the read entirely — mirrors `<SearchResultsPane enabled>`. */
+  readonly enabled?: boolean;
+}
+
+const ENTRY: CSSProperties = {
+  padding: 0,
+  height: "auto",
+  // The line is text: an entry has to sit ON the baseline of the words around
+  // it rather than in a button-shaped box of its own.
+  verticalAlign: "baseline",
+  fontSize: "inherit",
+};
+
+const COUNT: CSSProperties = { color: cssVar("text-subtle") };
+
+/** How many rows the collapsed phone line may occupy. */
+export const OTHER_CATEGORIES_PHONE_ROWS = 2;
+
+/** The class the clamp is hung on. */
+export const OTHER_CATEGORIES_CLASS = "stapel-search-other-categories";
+
+/** The `href` the hoisted sheet is deduplicated by. */
+export const OTHER_CATEGORIES_STYLE_HREF = "stapel-search-other-categories";
+
+/**
+ * The clamp — two rows, collapsed, on the phone.
+ *
+ * A SHEET rather than an inline style, for the same reason the rail's
+ * scrollbar is one: `-webkit-line-clamp` needs `display:-webkit-box` and
+ * `-webkit-box-orient` together, and a vendor property set through the DOM
+ * style object is dropped by anything that does not already know it — which
+ * is how a clamp silently stops clamping.
+ */
+export function otherCategoriesCss(): string {
+  const clamped = `.${OTHER_CATEGORIES_CLASS}--clamped`;
+  return [
+    `${clamped}{display:-webkit-box;-webkit-box-orient:vertical;`,
+    `-webkit-line-clamp:${String(OTHER_CATEGORIES_PHONE_ROWS)};overflow:hidden}`,
+  ].join("");
+}
+
+interface Entry {
+  readonly row: OtherCategoryRow;
+  readonly name: string;
+}
+
+export function OtherCategoriesLine(
+  props: OtherCategoriesLineProps
+): ReactElement | null {
+  const t = useT();
+  const { setCategory } = useSearchState();
+  const bag = useOtherCategories(
+    props.enabled !== undefined ? { enabled: props.enabled } : {}
+  );
+  const surface = useDialogSurface();
+  const phone = surface === "sheet";
+  const [expanded, setExpanded] = useState(false);
+
+  const limit = phone
+    ? (props.phoneLimit ?? OTHER_CATEGORIES_PHONE_LIMIT)
+    : (props.limit ?? OTHER_CATEGORIES_LIMIT);
+
+  const entries: Entry[] = [];
+  for (const row of bag.rows) {
+    const name =
+      props.categoryName?.(row.category) ?? row.name ?? otherCategoryLeaf(row.category);
+    if (name !== undefined) entries.push({ row, name });
+  }
+
+  const shown = expanded ? entries : entries.slice(0, limit);
+  const hidden = entries.length - shown.length;
+
+  if (entries.length === 0) {
+    // Nothing to say, and nothing coming: say nothing. A reserved band under a
+    // page that will never fill it is the same hole an empty filter column was.
+    if (!bag.reserving) return null;
+    return (
+      <div
+        data-testid="search-other-categories"
+        data-reserved="on"
+        data-source={bag.source}
+        style={{ minBlockSize: OTHER_CATEGORIES_SLOT_MIN_HEIGHT }}
+      />
+    );
+  }
+
+  return (
+    <Typography.Text
+      type="secondary"
+      data-testid="search-other-categories"
+      data-source={bag.source}
+      data-shown={shown.length}
+      {...(bag.reserving ? { "data-reserved": "on" } : {})}
+      className={
+        phone && !expanded
+          ? `${OTHER_CATEGORIES_CLASS} ${OTHER_CATEGORIES_CLASS}--clamped`
+          : OTHER_CATEGORIES_CLASS
+      }
+      style={
+        bag.reserving ? { minBlockSize: OTHER_CATEGORIES_SLOT_MIN_HEIGHT } : {}
+      }
+    >
+      <style href={OTHER_CATEGORIES_STYLE_HREF} precedence="default">
+        {otherCategoriesCss()}
+      </style>
+      {t(SEARCH_I18N_KEYS.otherCategoriesLabel)}{" "}
+      {shown.map((entry, index) => (
+        <Fragment key={entry.row.category}>
+          {index > 0 && <span aria-hidden="true"> · </span>}
+          <Button
+            type="link"
+            size="small"
+            style={ENTRY}
+            data-testid="search-other-category"
+            data-category={entry.row.category}
+            data-analytics="none"
+            data-analytics-reason="narrowing a search is a read, not a flow step"
+            aria-label={t(SEARCH_I18N_KEYS.otherCategoriesNarrow, {
+              name: entry.name,
+            })}
+            onClick={() => {
+              setCategory(entry.row.category);
+            }}
+          >
+            {entry.name} <span style={COUNT}>{entry.row.count}</span>
+          </Button>
+        </Fragment>
+      ))}
+      {hidden > 0 && (
+        <>
+          <span aria-hidden="true"> · </span>
+          <Button
+            type="link"
+            size="small"
+            style={ENTRY}
+            data-testid="search-other-categories-more"
+            data-analytics="none"
+            data-analytics-reason="unfolding a line is a read, not a flow step"
+            aria-expanded={false}
+            onClick={() => {
+              setExpanded(true);
+            }}
+          >
+            {t(SEARCH_I18N_KEYS.otherCategoriesMore, { count: hidden })}
+          </Button>
+        </>
+      )}
+    </Typography.Text>
+  );
+}

package/src/default/SearchPage.tsx

@@ -86,6 +86,7 @@ import { FilterChips } from "./FilterChips.js";
 import { LocationSummaryLine } from "./LocationSummaryLine.js";
 import { PageSizeSelect } from "./PageSizeSelect.js";
 import { SearchBox } from "./SearchBox.js";
+import type { OtherCategoryNamer } from "./OtherCategoriesLine.js";
 import { SearchResultsPane } from "./SearchResultsPane.js";
 import type { SearchResultsWrapper } from "./SearchResultsPane.js";
 import { SortSelect } from "./SortSelect.js";
@@ -260,6 +261,22 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
   /** Facet slugs pinned above every other group — see
    * {@link FacetPanelPaneProps.pinnedFacets}. */
   readonly pinnedFacets?: readonly string[];
+  /**
+   * How a DICTIONARY group is drawn — see
+   * {@link FacetPanelPaneProps.dictionaryMode}.
+   *
+   * Defaulted PER LAYOUT rather than left to the panel's own default, because
+   * the two frames want opposite shapes and only this component knows which
+   * one it is drawing: the desktop rail gets `"field"` (a select-style «Any»
+   * that opens the searchable list — a 418-value vocabulary held open in a
+   * 280px column is the whole column), the phone sheet gets `"inline"`
+   * (the sheet is already the disclosure). Set it to override both.
+   *
+   * It was unreachable through this component until now: the panel had the
+   * prop, `<SearchPage>` forwarded nothing, and a storefront that mounts the
+   * page rather than the pane could not get the field at all.
+   */
+  readonly dictionaryMode?: "field" | "inline";
   /** Print the engine's list of uncounted facet slugs in the filter panel.
    * Default `false` — see {@link FacetPanelPaneProps.skippedNotice}. */
   readonly skippedNotice?: boolean;
@@ -320,6 +337,25 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
    * ask.
    */
   readonly appliedChips?: boolean | "desktop";
+  /**
+   * Draw "Search in other categories: Cars 12 · Buses 3 · …" above the
+   * results — one line, from the SAME response the cards came from.
+   *
+   * It replaces the shape a storefront had built by hand: a full-width block
+   * of one row per category, fetched from `/suggest` after the page had
+   * settled and pushing everything below it when it landed. Here the rows are
+   * `facet_meta.categories`, which the answer already carried, so with results
+   * on screen the line costs no request and cannot arrive late. Only an EMPTY
+   * result set asks `/suggest`, into a slot whose height is reserved from the
+   * first frame.
+   *
+   * Opt-in, and `categoryName` is what makes it useful: the pair holds id
+   * paths and no catalogue — see {@link OtherCategoriesLineProps.categoryName}.
+   */
+  readonly otherCategories?: boolean;
+  /** What a category id path is CALLED, for the line above. The same question
+   * `categoryLabel` answers for the chip, asked once per row. */
+  readonly categoryName?: OtherCategoryNamer;
   /** What this surface calls its result list. See
    * {@link SearchResultsPaneProps.heading}. */
   readonly resultsHeading?: ReactNode;
@@ -402,6 +438,7 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
 
 interface SearchPageBodyProps {
   readonly renderCard?: SearchCardRenderer;
+  readonly dictionaryMode?: "field" | "inline";
   readonly categoryFeatures?: readonly FeatureDef[];
   readonly renderEmptyExits?: () => ReactNode;
   readonly locale?: string;
@@ -417,6 +454,8 @@ interface SearchPageBodyProps {
   readonly filtersHeader?: ReactNode;
   readonly resultsHeader?: ReactNode;
   readonly appliedChips?: boolean | "desktop";
+  readonly otherCategories?: boolean;
+  readonly categoryName?: OtherCategoryNamer;
   readonly resultsHeading?: ReactNode;
   readonly degradationNotice?: DegradationNoticeVariant;
   readonly filtersLayout?: SearchFiltersLayout;
@@ -523,7 +562,12 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
           result count scrolled out of sight above the fold. */}
       {filtersEmpty ? null : (
         <FacetPanelPane
-          {...(layout === "sheet" ? { heading: null } : { footerBar: true })}
+          {...(layout === "sheet"
+            ? { heading: null }
+            : // STATIC, not sticky: the rail scrolls with the page, and a bar
+              // pinned to the port's floor sat on top of the last groups.
+              { footerBar: "static" as const })}
+          dictionaryMode={props.dictionaryMode ?? (layout === "sheet" ? "inline" : "field")}
           {...(categoryFeatures !== undefined ? { categoryFeatures } : {})}
           {...(props.renderEmptyExits !== undefined
             ? { renderEmptyExits: props.renderEmptyExits }
@@ -586,6 +630,12 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
       {...(view.layout !== undefined ? { layout: view.layout } : {})}
       {...(props.renderCard !== undefined ? { renderCard: props.renderCard } : {})}
       {...(props.footer !== undefined ? { footer: props.footer } : {})}
+      {...(props.otherCategories !== undefined
+        ? { otherCategories: props.otherCategories }
+        : {})}
+      {...(props.categoryName !== undefined
+        ? { categoryName: props.categoryName }
+        : {})}
       {...(props.resultsHeading !== undefined
         ? { heading: props.resultsHeading }
         : {})}
@@ -763,6 +813,8 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     filtersHeader,
     resultsHeader,
     appliedChips,
+    otherCategories,
+    categoryName,
     resultsHeading,
     degradationNotice,
     filtersLayout,
@@ -775,6 +827,7 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     onViewChange,
     resultsAction,
     resultsHeadingLevel,
+    dictionaryMode,
     mode,
     ...parseOptions
   } = props;
@@ -784,6 +837,7 @@ export function SearchPage(props: SearchPageProps): ReactElement {
       <SearchStateProvider adapter={adapter} geoOffer={geoOffer} {...parseOptions}>
         <SearchPageBody
           {...(renderCard !== undefined ? { renderCard } : {})}
+          {...(dictionaryMode !== undefined ? { dictionaryMode } : {})}
           {...(categoryFeatures !== undefined ? { categoryFeatures } : {})}
           {...(locale !== undefined ? { locale } : {})}
           {...(resolveFacetLabels !== undefined ? { resolveFacetLabels } : {})}
@@ -798,6 +852,8 @@ export function SearchPage(props: SearchPageProps): ReactElement {
           {...(filtersHeader !== undefined ? { filtersHeader } : {})}
           {...(resultsHeader !== undefined ? { resultsHeader } : {})}
           {...(appliedChips !== undefined ? { appliedChips } : {})}
+          {...(otherCategories !== undefined ? { otherCategories } : {})}
+          {...(categoryName !== undefined ? { categoryName } : {})}
           {...(resultsHeading !== undefined ? { resultsHeading } : {})}
           {...(degradationNotice !== undefined ? { degradationNotice } : {})}
           {...(filtersLayout !== undefined ? { filtersLayout } : {})}

package/src/default/SearchResultsPane.tsx

@@ -46,6 +46,8 @@ import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 import { DegradationNotice } from "./DegradationNotice.js";
 import { EmptyExits } from "./EmptyExits.js";
 import type { DegradationNoticeVariant } from "./DegradationNotice.js";
+import { OtherCategoriesLine } from "./OtherCategoriesLine.js";
+import type { OtherCategoryNamer } from "./OtherCategoriesLine.js";
 import { SearchResultCard } from "./SearchResultCard.js";
 import type { SearchCardRenderer } from "./SearchResultCard.js";
 import type { SearchResultsLayout } from "./ViewSwitch.js";
@@ -261,6 +263,20 @@ export interface SearchResultsPaneProps extends ThemeModeProp {
    * this pair offers the slot and never the tree.
    */
   readonly renderEmptyExits?: () => ReactNode;
+  /**
+   * Draw "Search in other categories: Cars 12 · Buses 3 · …" above the
+   * results — the sections THIS answer is made of, one line, from the same
+   * response (`<OtherCategoriesLine>`).
+   *
+   * Opt-in, because the rows are id PATHS and naming them is the host's
+   * (`categoryName`): a deployment that passes neither gets the line only for
+   * the paths the server itself named, which on a slug-less catalogue is
+   * none. Where it is on, it costs no request while there are results.
+   */
+  readonly otherCategories?: boolean;
+  /** What a category id path is CALLED, for the line above — see
+   * {@link OtherCategoriesLineProps.categoryName}. */
+  readonly categoryName?: OtherCategoryNamer;
 }
 
 function Count(props: { bag: SearchResultsBag }): ReactElement | null {
@@ -375,6 +391,18 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
               scorerName={scorerName}
             />
 
+            {/* ABOVE the results and in the SAME frame as them. Under them
+                and asynchronously is where it was, and both halves of that
+                pushed a page a person had started reading. */}
+            {props.otherCategories === true && (
+              <OtherCategoriesLine
+                {...(props.enabled !== undefined ? { enabled: props.enabled } : {})}
+                {...(props.categoryName !== undefined
+                  ? { categoryName: props.categoryName }
+                  : {})}
+              />
+            )}
+
             <LoadList
               state={bag.state}
               testId="search"

package/src/default/index.ts

@@ -48,6 +48,19 @@ export {
 } from "./SearchPage.js";
 export type { SearchPageProps, SearchFiltersLayout } from "./SearchPage.js";
 
+export {
+  OtherCategoriesLine,
+  OTHER_CATEGORIES_CLASS,
+  OTHER_CATEGORIES_PHONE_ROWS,
+  OTHER_CATEGORIES_SLOT_MIN_HEIGHT,
+  OTHER_CATEGORIES_STYLE_HREF,
+  otherCategoriesCss,
+} from "./OtherCategoriesLine.js";
+export type {
+  OtherCategoriesLineProps,
+  OtherCategoryNamer,
+} from "./OtherCategoriesLine.js";
+
 export { SearchResultsPane, RESULTS_MAX_WIDTH } from "./SearchResultsPane.js";
 export type {
   SearchResultsPaneProps,

package/src/headless/SearchStateProvider.tsx

@@ -2,17 +2,22 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
+  useState,
 } from "react";
 import type { ReactElement, ReactNode } from "react";
 import type {
+  FacetLabelsMap,
   SearchGeo,
   SearchQueryState,
   SearchRange,
 } from "../api/types.js";
 import {
+  EMPTY_FACET_KEYS,
   activeFilterCount,
   clearFilters,
+  facetKeyMapFromLabels,
   parseSearchState,
   patchSearchState,
   setFilterValues,
@@ -21,6 +26,7 @@ import {
   writeSearchState,
 } from "../state/urlState.js";
 import type {
+  FacetKeyMap,
   ParseSearchStateOptions,
   SearchStateIssue,
   SearchStatePatch,
@@ -132,6 +138,56 @@ function sameCenter(
 
 const StateContext = createContext<SearchStateBag | null>(null);
 
+/**
+ * WHERE THE SHORT KEYS COME FROM.
+ *
+ * `f.make` is a fact of the ANSWER (`facet_labels[slug].url_key`, resolved by
+ * the server inside the queried category's scope), and the codec that writes
+ * the address runs above the query that produces it. So the map is published
+ * upwards: whoever holds an answer hands it to this provider, which re-parses
+ * the URL with it and writes every subsequent address through it.
+ *
+ * Late by construction and correct at every moment in between: before the
+ * first answer the state holds whatever key the link carried, the request
+ * carries the same key, and the server resolves both forms. Nothing waits and
+ * nothing is rewritten behind the reader.
+ */
+interface FacetKeyRegistry {
+  readonly keys: FacetKeyMap;
+  publish(next: FacetKeyMap): void;
+}
+
+const FacetKeysContext = createContext<FacetKeyRegistry | null>(null);
+
+/** Two maps are the same map when they write the same keys — the read side is
+ * derived from the write side, so comparing one compares both. */
+function sameKeys(a: FacetKeyMap, b: FacetKeyMap): boolean {
+  const left = Object.keys(a.write);
+  const right = Object.keys(b.write);
+  if (left.length !== right.length) return false;
+  return left.every((slug) => a.write[slug] === b.write[slug]);
+}
+
+/**
+ * Publish an answer's short keys to the state provider above.
+ *
+ * A no-op outside `<SearchStateProvider>` and a no-op on a server that sends
+ * no `url_key`: both leave the address spelled in slugs, which is what it was
+ * spelled in before this existed.
+ */
+export function usePublishFacetKeys(labels: FacetLabelsMap | undefined): void {
+  const registry = useContext(FacetKeysContext);
+  useEffect(() => {
+    if (registry === null || labels === undefined) return;
+    registry.publish(facetKeyMapFromLabels(labels));
+  }, [registry, labels]);
+}
+
+/** The short-key map this search is currently writing its address with. */
+export function useFacetKeys(): FacetKeyMap {
+  return useContext(FacetKeysContext)?.keys ?? EMPTY_FACET_KEYS;
+}
+
 export interface SearchStateProviderProps extends ParseSearchStateOptions {
   readonly adapter: SearchParamsAdapter;
   /**
@@ -193,9 +249,27 @@ export function SearchStateProvider(
 
   const search = params.toString();
 
+  // The answer's short keys (`f.make`), published from below — see
+  // `FacetKeysContext`. Held here because this is where both directions of
+  // the codec run.
+  const [facetKeys, setFacetKeys] = useState<FacetKeyMap>(EMPTY_FACET_KEYS);
+  const registry = useMemo<FacetKeyRegistry>(
+    () => ({
+      keys: facetKeys,
+      publish: (next) => {
+        // Idempotent on purpose: this is called from an effect under a query
+        // whose data identity is stable, and a setState that always produced
+        // a new object would re-render the whole page per answer.
+        setFacetKeys((was) => (sameKeys(was, next) ? was : next));
+      },
+    }),
+    [facetKeys]
+  );
+
   const parsed = useMemo(
     () =>
       parseSearchState(new URLSearchParams(search), {
+        facetKeys,
         defaultType,
         ...(defaultQ !== undefined ? { defaultQ } : {}),
         ...(defaultSort !== undefined ? { defaultSort } : {}),
@@ -203,14 +277,26 @@ export function SearchStateProvider(
         ...(defaultCategory !== undefined ? { defaultCategory } : {}),
         ...(defaultLang !== undefined ? { defaultLang } : {}),
       }),
-    [search, defaultType, defaultQ, defaultSort, defaultLimit, defaultCategory, defaultLang]
+    [
+      search,
+      facetKeys,
+      defaultType,
+      defaultQ,
+      defaultSort,
+      defaultLimit,
+      defaultCategory,
+      defaultLang,
+    ]
   );
 
   const commit = useCallback(
     (next: SearchQueryState, options?: { readonly replace?: boolean }): void => {
-      setParams(writeSearchState(next, new URLSearchParams(search)), options);
+      setParams(
+        writeSearchState(next, new URLSearchParams(search), facetKeys),
+        options
+      );
     },
-    [setParams, search]
+    [setParams, search, facetKeys]
   );
 
 
@@ -280,7 +366,11 @@ export function SearchStateProvider(
   }, [parsed, commit, geoOffer]);
 
 
-  return <StateContext.Provider value={bag}>{children}</StateContext.Provider>;
+  return (
+    <FacetKeysContext.Provider value={registry}>
+      <StateContext.Provider value={bag}>{children}</StateContext.Provider>
+    </FacetKeysContext.Provider>
+  );
 }
 
 /**