@stapel/search-react 0.16.0 → 0.18.0

package/src/default/FilterChips.tsx

@@ -133,6 +133,7 @@ import type { FacetLabelResolver } from "../headless/useFacetLabels.js";
 import { useSearchState } from "../headless/SearchStateProvider.js";
 import { buildRangeGroups } from "../state/ranges.js";
 import type { RangeGroup } from "../state/ranges.js";
+import { facetCoverage } from "../state/facets.js";
 import type { FacetGroup } from "../state/facets.js";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 import { FacetGroupControl } from "./FacetGroupControl.js";
@@ -242,10 +243,48 @@ export function orderChipFilters(
   return [...specs].sort((a, b) => {
     const applied = Number(specApplied(b)) - Number(specApplied(a));
     if (applied !== 0) return applied;
-    return CHIP_BAND_ORDER.indexOf(a.band) - CHIP_BAND_ORDER.indexOf(b.band);
+    const band = CHIP_BAND_ORDER.indexOf(a.band) - CHIP_BAND_ORDER.indexOf(b.band);
+    if (band !== 0) return band;
+    // WITHIN the counted-facet band: coverage — the answer's own evidence of
+    // which axes this corpus actually fills (D16 reopen: an imported
+    // catalogue gave the phones leaf option tables for its wholesale
+    // plumbing, and schema order put them ahead of the brand). A group the
+    // server did not count sums to zero and trails every counted one; ties
+    // keep the authored order because the sort is stable.
+    if (a.band === "facet" && b.band === "facet") {
+      return facetCoverage(b.facet) - facetCoverage(a.facet);
+    }
+    return 0;
   });
 }
 
+/**
+ * How many banded chips the row draws before the "more" door — enough for the
+ * axes with real evidence behind them, small enough that the tail of a
+ * 44-axis cars leaf lives in the panel instead of in four flicks. A host
+ * passes `maxRowChips` to move it, or `null` to disable the door.
+ */
+export const CHIP_ROW_CAP = 8;
+
+/**
+ * The visible row and what the door owes: the first `max` specs — and EVERY
+ * applied one, however many, because a constraint on screen must keep the
+ * control that removes it (the same rule the barren filter follows). The
+ * overflow count is what the door chip prints; the chips behind it are not
+ * deleted, they are the panel's — one tap behind the door itself.
+ */
+export function capChipRow(
+  specs: readonly ChipSpec[],
+  max: number | null
+): { readonly visible: readonly ChipSpec[]; readonly overflow: number } {
+  if (max === null || specs.length <= max) {
+    return { visible: specs, overflow: 0 };
+  }
+  const applied = specs.filter(specApplied).length;
+  const cut = Math.max(max, applied);
+  return { visible: specs.slice(0, cut), overflow: specs.length - cut };
+}
+
 export interface FilterChipsProps {
   /** The category's feature schema — the source of option labels, of which
    * slugs get a range chip, of which slugs are choosable at all, and of how
@@ -295,6 +334,13 @@ export interface FilterChipsProps {
   /** Open the whole panel — the leading chip's action. The page owns that
    * sheet, because the page is the surface it covers. */
   readonly onOpenAll: () => void;
+  /**
+   * The row's chip budget before the "more" door — see {@link CHIP_ROW_CAP}
+   * (the default). `null` draws every chip, door-less, as the row did before
+   * it was capped. Applied filters never count against the budget's loss:
+   * they are always drawn.
+   */
+  readonly maxRowChips?: number | null;
   /**
    * Draw the location chip. Default `true`.
    *
@@ -437,7 +483,11 @@ export function FilterChips(props: FilterChipsProps): ReactElement | null {
   // need. Applied ones stay: a constraint always keeps the control that
   // removes it.
   const barren = bag.counted.length > 0 && bag.candidates === 0;
-  const ordered = orderChipFilters(ranges, groups, { barren });
+  const orderedAll = orderChipFilters(ranges, groups, { barren });
+  const { visible: ordered, overflow } = capChipRow(
+    orderedAll,
+    props.maxRowChips === undefined ? CHIP_ROW_CAP : props.maxRowChips
+  );
 
   const geo = state.geo;
   const showGeoChip =
@@ -569,6 +619,23 @@ export function FilterChips(props: FilterChipsProps): ReactElement | null {
             </Button>
           )
         )}
+
+        {/* The "more" door (D16): the capped tail is not deleted, it is one
+            tap away — this opens the SAME full panel the leading circle
+            does, where every cut control lives whole. The count keeps the
+            door honest about how much it is standing in front of. */}
+        {overflow > 0 && (
+          <Button
+            style={CHIP}
+            shape="round"
+            data-testid="search-chips-overflow"
+            data-analytics="none"
+            data-analytics-reason="opening the filter sheet is a read, not a flow step"
+            onClick={props.onOpenAll}
+          >
+            {t(SEARCH_I18N_KEYS.filtersChipOverflow, { count: overflow })}
+          </Button>
+        )}
       </div>
 
       {/* One sheet per chip, rendered only for the open one: a dozen mounted

package/src/default/SearchPage.tsx

@@ -139,6 +139,15 @@ const RAIL: CSSProperties = {
   maxHeight: "100dvh",
   overflowY: "auto",
   overscrollBehavior: "contain",
+  // The inner scroll must be VISIBLE. On overlay-scrollbar platforms (every
+  // Mac by default, most phones) an `overflow-y: auto` column shows no
+  // scrollbar until a pointer happens to scroll INSIDE it — so a rail taller
+  // than the window is indistinguishable from a rail that ends at the fold,
+  // and the walker measured 5717px of panel whose tail nothing signposted.
+  // A thin, always-there scrollbar is the sign there is more; the stable
+  // gutter keeps the panel's right edge from jumping when it appears.
+  scrollbarWidth: "thin",
+  scrollbarGutter: "stable",
   // Room for the focus ring of the last control against the scroll edge.
   paddingBlockEnd: spacing[2],
 };
@@ -424,9 +433,14 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
           a hole, just a smaller one. */}
       {/* In the sheet the dialog's own title already says "Filters"; the panel
           repeating it printed the word twice, one line apart. */}
+      {/* Per layout: the sheet gets no second "Filters" title (the dialog owns
+          one) and no footer bar — its own "Show N results" footer is already
+          the count AND the exit. The rail gets the sticky footer bar: desktop
+          filters apply instantly, and without it the only feedback was a
+          result count scrolled out of sight above the fold. */}
       {filtersEmpty ? null : (
         <FacetPanelPane
-          {...(layout === "sheet" ? { heading: null } : {})}
+          {...(layout === "sheet" ? { heading: null } : { footerBar: true })}
           {...(categoryFeatures !== undefined ? { categoryFeatures } : {})}
           {...(props.renderEmptyExits !== undefined
             ? { renderEmptyExits: props.renderEmptyExits }

package/src/default/SearchResultsPane.tsx

@@ -70,20 +70,33 @@ export type SearchResultsRenderer = (
  * width of whatever it was dropped into — the visual pass measured a 2560px
  * pane with four cards floating at the top of it and a status row 1350px from
  * the buttons that act on it (class C-NOMAXW).
+ *
+ * 1400 and not the 1120 it started at: a card GRID is not prose — its rows
+ * have no line to lose the thread of — so its measure is the fleet's widest
+ * content column, not a paragraph's. At 1120 the cap quietly overrode the
+ * grid's own 260px floor (a 1440px desktop drew three 363px cards inside a
+ * 1392px content column, the very hole the floor was lowered to fill); at
+ * 1400 the floor decides — five columns open, four beside the filter rail —
+ * and the 2560px pane the constant was written against is still capped.
  */
-export const RESULTS_MAX_WIDTH = 1120;
+export const RESULTS_MAX_WIDTH = 1400;
 
 /**
- * The results grid. `auto-fill` + `minmax(280px, 1fr)`: as many columns as fit,
- * each at least a readable card and never wider than its share — a catalogue
- * on a 1400px desktop is four columns, not four full-bleed rows, and the same
+ * The results grid. `auto-fill` + `minmax(260px, 1fr)`: as many columns as fit,
+ * each at least a readable card and never wider than its share — and the same
  * declaration collapses to one column on a phone with no breakpoint to
- * maintain. 280px is the width below which the default card's title, price and
- * location stop fitting on their own lines.
+ * maintain.
+ *
+ * The floor was 280px and is 260 deliberately: at a 1400px content measure the
+ * grid now draws five columns instead of three wide ones, and beside the 280px
+ * filter rail, four. The default card's own minimum — title, price and
+ * location each on their own line — still fits at 260; the 20px the old floor
+ * bought went into card whitespace, not into legibility, and cost a whole
+ * column of listings on the reference desktop.
  */
 const RESULTS_GRID: CSSProperties = {
   display: "grid",
-  gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+  gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
   gap: spacing[3],
   alignItems: "stretch",
 };

package/src/default/index.ts

@@ -51,8 +51,10 @@ export type {
 export {
   FilterChips,
   CHIP_BAND_ORDER,
+  CHIP_ROW_CAP,
   CHIP_ROW_CLASS,
   CHIP_ROW_STYLE_HREF,
+  capChipRow,
   categoryLeaf,
   chipRowCss,
   orderChipFilters,

package/src/i18n/es.ts

@@ -87,6 +87,10 @@ export const searchI18nBundleEs: I18nDictionary = {
   "search.facets.range_to_aria": "{feature}, hasta",
   "search.facets.show_all": "Ver todos ({count})",
   "search.facets.show_less": "Ver menos",
+  "search.facets.search": "Buscar un filtro",
+  "search.facets.search_empty": "Ningún filtro coincide con esto",
+  "search.facets.match_count.one": "{count} anuncio coincide",
+  "search.facets.match_count.other": "{count} anuncios coinciden",
   "search.facets.range_invalid":
     "«Desde» es mayor que «hasta», así que nada podría coincidir. Intercámbialos para aplicar el rango.",
 
@@ -101,6 +105,7 @@ export const searchI18nBundleEs: I18nDictionary = {
   "search.filters.all": "Todos los filtros",
   "search.filters.short": "Filtros",
   "search.filters.chip_more": ", +{count}",
+  "search.filters.chips_overflow": "Más · {count}",
 
   "search.empty.exits_title": "Prueba a ampliar la búsqueda",
   "search.empty.up_a_level": "Subir un nivel",

package/src/i18n/keys.ts

@@ -138,6 +138,22 @@ export const SEARCH_I18N_KEYS = {
    * tail is longer than one row. */
   facetsShowAll: "search.facets.show_all",
   facetsShowLess: "search.facets.show_less",
+  /** The box that searches the FILTER PANEL itself — drawn from six groups
+   * up, because a panel a person can no longer scan is a panel they have to
+   * query. It narrows presentation only and never touches the URL. */
+  facetsSearch: "search.facets.search",
+  /** Said where the groups were when the panel-search matches none of them.
+   * Distinct from `facetsEmpty`, which says the SEARCH offers no filters —
+   * here the filters exist and the query missed. */
+  facetsSearchEmpty: "search.facets.search_empty",
+  /**
+   * The rail's sticky footer: what the applied filters LEFT — "N listings
+   * match". A PLURAL FAMILY: it counts a noun in words. Desktop filters
+   * apply instantly, so this is feedback, not an apply button; the floor
+   * case (`at_least`) reuses `resultsCountAtLeast` rather than growing a
+   * second family for the same number.
+   */
+  facetsMatchCount: "search.facets.match_count",
 
   // ── the filter panel as a whole (phone sheet + host slots) ───────────────
   filtersOpen: "search.filters.open",
@@ -161,6 +177,9 @@ export const SEARCH_I18N_KEYS = {
   /** A chip filtering on more than one value: "Bosch, +2". Not a plural
    * family — nothing is being counted in words. */
   filtersChipMore: "search.filters.chip_more",
+  /** The chip standing in for the row's capped tail — opens the full panel.
+   * `{count}` is how many chips it hides (D16). */
+  filtersChipOverflow: "search.filters.chips_overflow",
 
   // ── the way OUT of a search that found nothing ───────────────────────────
   /** Caption above the exit buttons. Not a second "nothing found" — that
@@ -308,6 +327,7 @@ export const SEARCH_I18N_PLURAL_KEYS: readonly SearchI18nKey[] = [
   SEARCH_I18N_KEYS.filtersShowCount,
   SEARCH_I18N_KEYS.filtersShowCountAtLeast,
   SEARCH_I18N_KEYS.boxCategoryCount,
+  SEARCH_I18N_KEYS.facetsMatchCount,
 ];
 
 /**
@@ -392,6 +412,10 @@ export const searchI18nBundleEn: Record<string, string> = {
   "search.facets.range_to_aria": "{feature}, up to",
   "search.facets.show_all": "Show all ({count})",
   "search.facets.show_less": "Show fewer",
+  "search.facets.search": "Find a filter",
+  "search.facets.search_empty": "No filter matches this",
+  "search.facets.match_count.one": "{count} listing matches",
+  "search.facets.match_count.other": "{count} listings match",
   "search.facets.range_invalid":
     "“From” is larger than “to”, so nothing could match. Swap them to apply this range.",
 
@@ -406,6 +430,7 @@ export const searchI18nBundleEn: Record<string, string> = {
   "search.filters.all": "All filters",
   "search.filters.short": "Filters",
   "search.filters.chip_more": ", +{count}",
+  "search.filters.chips_overflow": "More · {count}",
 
   "search.empty.exits_title": "Try widening the search",
   "search.empty.up_a_level": "Go up a level",

package/src/i18n/ru.ts

@@ -112,6 +112,12 @@ export const searchI18nBundleRu: I18nDictionary = {
   "search.facets.range_to_aria": "{feature}, до",
   "search.facets.show_all": "Показать все ({count})",
   "search.facets.show_less": "Свернуть",
+  "search.facets.search": "Найти фильтр",
+  "search.facets.search_empty": "Среди фильтров такого нет",
+  "search.facets.match_count.one": "Найдено {count} объявление",
+  "search.facets.match_count.few": "Найдено {count} объявления",
+  "search.facets.match_count.many": "Найдено {count} объявлений",
+  "search.facets.match_count.other": "Найдено {count} объявления",
   "search.facets.range_invalid":
     "«От» больше, чем «до», — под такой диапазон ничего не подойдёт. Поменяйте значения местами.",
 
@@ -130,6 +136,7 @@ export const searchI18nBundleRu: I18nDictionary = {
   "search.filters.all": "Все фильтры",
   "search.filters.short": "Фильтры",
   "search.filters.chip_more": ", +{count}",
+  "search.filters.chips_overflow": "Ещё {count}",
 
   "search.empty.exits_title": "Попробуйте расширить поиск",
   "search.empty.up_a_level": "Подняться на уровень выше",

package/src/state/facets.ts

@@ -128,6 +128,25 @@ export interface FacetGroup {
   readonly selected: readonly string[];
 }
 
+/**
+ * How many candidate documents carry ANY value of this axis — the evidence
+ * that people actually fill this field in. Uncounted options are `null`
+ * (never `0` — different sentences) and contribute nothing, so a group the
+ * server did not count sums to zero.
+ *
+ * Two surfaces rank by it, for the same reason: the chip row orders its
+ * counted band by coverage (D16 reopen — an imported catalogue gave the
+ * phones leaf option tables for its wholesale plumbing, and schema order put
+ * them ahead of the brand), and the filter panel opens its top-coverage
+ * groups and collapses the rest (the 5717px rail). One definition, or the
+ * two surfaces drift into two opinions about which axes matter.
+ */
+export function facetCoverage(group: FacetGroup): number {
+  let total = 0;
+  for (const option of group.options) total += option.count ?? 0;
+  return total;
+}
+
 export interface BuildFacetGroupsInput {
   /** The envelope's `facets`: `{slug: {value: count}}`. */
   readonly facets: Readonly<Record<string, Readonly<Record<string, number>>>>;