@stapel/search-react 0.41.1 → 0.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +63 -0
- package/README.md +13 -0
- package/dist/default/SearchPage.d.ts +50 -5
- package/dist/default/SearchPage.d.ts.map +1 -1
- package/dist/default/SearchPage.js +79 -12
- package/dist/default/SearchPage.js.map +1 -1
- package/dist/default/SortSelect.d.ts.map +1 -1
- package/dist/default/SortSelect.js +9 -1
- package/dist/default/SortSelect.js.map +1 -1
- package/dist/default/ViewSwitch.d.ts +19 -0
- package/dist/default/ViewSwitch.d.ts.map +1 -1
- package/dist/default/ViewSwitch.js +25 -5
- package/dist/default/ViewSwitch.js.map +1 -1
- package/dist/default/index.d.ts +2 -1
- package/dist/default/index.d.ts.map +1 -1
- package/dist/default/index.js +1 -0
- package/dist/default/index.js.map +1 -1
- package/dist/default/railFit.d.ts +14 -0
- package/dist/default/railFit.d.ts.map +1 -0
- package/dist/default/railFit.js +80 -0
- package/dist/default/railFit.js.map +1 -0
- package/llms.txt +1 -1
- package/manifest.json +1 -1
- package/nav-manifest.json +1 -1
- package/package.json +4 -4
- package/src/analytics/generated/events.json +1 -1
- package/src/default/SearchPage.tsx +136 -17
- package/src/default/SortSelect.tsx +9 -1
- package/src/default/ViewSwitch.tsx +53 -5
- package/src/default/index.ts +2 -0
- package/src/default/railFit.ts +90 -0
package/dist/default/index.d.ts
CHANGED
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
* a runtime `data-theme` flip actually repaints it.
|
|
40
40
|
*/
|
|
41
41
|
export { SearchPage, BLOCK_GAP_COMPACT_VAR, BLOCK_GAP_VAR, BLOCK_RHYTHM_CLASS, BLOCK_RHYTHM_STYLE_HREF, blockRhythmCss, RAIL_CLASS, RAIL_SCROLLBAR_CLASS, RAIL_STYLE_HREF, railScrollbarCss, railStyle, } from "./SearchPage.js";
|
|
42
|
-
export
|
|
42
|
+
export { RAIL_OFFSET_PROPERTY, useRailFits } from "./railFit.js";
|
|
43
|
+
export type { SearchPageProps, SearchFiltersLayout, SearchFiltersHeader, SearchFiltersHeaderSlotProps, SearchFiltersOpenReason, SearchBlockRhythm, SearchRailFrom, SearchRailScroll, SearchRailScrollbar, } from "./SearchPage.js";
|
|
43
44
|
export { OtherCategoriesLine, OTHER_CATEGORIES_CLASS, OTHER_CATEGORIES_PHONE_ROWS, OTHER_CATEGORIES_SLOT_MIN_HEIGHT, OTHER_CATEGORIES_STYLE_HREF, otherCategoriesCss, otherCategoriesSlotHeight, } from "./OtherCategoriesLine.js";
|
|
44
45
|
export type { OtherCategoriesLineProps, OtherCategoryHrefResolver, OtherCategoryNamer, } from "./OtherCategoriesLine.js";
|
|
45
46
|
export { SearchResultsPane, RESULTS_MAX_WIDTH, RESULTS_AUTO_FILL_COLUMNS, RESULTS_COLUMNS_CLASS, RESULTS_COLUMNS_STYLE_HREF, RESULTS_TOOLBAR_CLASS, RESULTS_TOOLBAR_STICKY_CLASS, RESULTS_TOOLBAR_STYLE_HREF, RESULTS_TOOLBAR_TOP_VAR, resultsColumnsCss, toolbarRowMinHeight, toolbarStickyCss, } from "./SearchResultsPane.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"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"}
|
package/dist/default/index.js
CHANGED
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
*/
|
|
41
41
|
// ── surfaces ────────────────────────────────────────────────────────────────
|
|
42
42
|
export { SearchPage, BLOCK_GAP_COMPACT_VAR, BLOCK_GAP_VAR, BLOCK_RHYTHM_CLASS, BLOCK_RHYTHM_STYLE_HREF, blockRhythmCss, RAIL_CLASS, RAIL_SCROLLBAR_CLASS, RAIL_STYLE_HREF, railScrollbarCss, railStyle, } from "./SearchPage.js";
|
|
43
|
+
export { RAIL_OFFSET_PROPERTY, useRailFits } from "./railFit.js";
|
|
43
44
|
export { OtherCategoriesLine, OTHER_CATEGORIES_CLASS, OTHER_CATEGORIES_PHONE_ROWS, OTHER_CATEGORIES_SLOT_MIN_HEIGHT, OTHER_CATEGORIES_STYLE_HREF, otherCategoriesCss, otherCategoriesSlotHeight, } from "./OtherCategoriesLine.js";
|
|
44
45
|
export { SearchResultsPane, RESULTS_MAX_WIDTH, RESULTS_AUTO_FILL_COLUMNS, RESULTS_COLUMNS_CLASS, RESULTS_COLUMNS_STYLE_HREF, RESULTS_TOOLBAR_CLASS, RESULTS_TOOLBAR_STICKY_CLASS, RESULTS_TOOLBAR_STYLE_HREF, RESULTS_TOOLBAR_TOP_VAR, resultsColumnsCss, toolbarRowMinHeight, toolbarStickyCss, } from "./SearchResultsPane.js";
|
|
45
46
|
export { FilterChips, CHIP_BAND_ORDER, CHIP_ROW_CAP, CHIP_ROW_CLASS, CHIP_ROW_STYLE_HREF, appliedChipTestId, appliedRowMinHeight, buildAppliedChips, capChipRow, categoryLeaf, chipRowCss, chipRowMinHeight, orderChipFilters, rangeChipText, rangeLabelSource, } from "./FilterChips.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,+EAA+E;AAC/E,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,SAAS,GACV,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { RefObject } from "react";
|
|
2
|
+
/** The CSS property the rail's top offset is carried in — see the note above.
|
|
3
|
+
* Exported so a test can assert the two halves read and write the same one. */
|
|
4
|
+
export declare const RAIL_OFFSET_PROPERTY = "scrollMarginTop";
|
|
5
|
+
/**
|
|
6
|
+
* Measure whether `ref`'s element is short enough to stand under the chrome
|
|
7
|
+
* its own `scroll-margin-top` names.
|
|
8
|
+
*
|
|
9
|
+
* `enabled` is the `railScroll === "page"` arm: under `"internal"` nothing is
|
|
10
|
+
* measured and nothing is listened to, so the default arm carries no observer
|
|
11
|
+
* and no listener at all.
|
|
12
|
+
*/
|
|
13
|
+
export declare function useRailFits(ref: RefObject<HTMLElement | null>, enabled: boolean): boolean;
|
|
14
|
+
//# sourceMappingURL=railFit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"railFit.d.ts","sourceRoot":"","sources":["../../src/default/railFit.ts"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;+EAC+E;AAC/E,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,OAAO,EAAE,OAAO,GACf,OAAO,CAuCT"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DOES THE FILTER RAIL FIT UNDER THE HOST'S HEADER?
|
|
3
|
+
*
|
|
4
|
+
* The question exists only for `railScroll="page"` — the arm where the rail is
|
|
5
|
+
* NOT a scroll container of its own and the page is the only thing that
|
|
6
|
+
* scrolls. There a rail taller than the window cannot be sticky: a stuck box
|
|
7
|
+
* is cut off at the foot of the screen and its last controls become
|
|
8
|
+
* unreachable, because the scroll that would reveal them is the page's and the
|
|
9
|
+
* page is not moving the rail. So the rail sticks while it fits and stands in
|
|
10
|
+
* flow while it does not, and "fits" is a measurement, not a breakpoint:
|
|
11
|
+
* the same catalogue draws four facet groups on one leaf and twenty on the
|
|
12
|
+
* next.
|
|
13
|
+
*
|
|
14
|
+
* Two numbers, and both are read from the browser rather than restated:
|
|
15
|
+
*
|
|
16
|
+
* - the rail's own height — `ResizeObserver`, because the rail changes height
|
|
17
|
+
* without the window changing at all (a facet group unfolds, an answer
|
|
18
|
+
* lands with more values, the schema arrives and reorders the panel);
|
|
19
|
+
* - the room under the host's chrome — `window.innerHeight` minus the offset
|
|
20
|
+
* the rail already carries as `scroll-margin-top`. That property is the
|
|
21
|
+
* same offset said in the one property that MEANS it (the header covers
|
|
22
|
+
* that much of the top of the scrollport), and the engine resolves it to
|
|
23
|
+
* pixels — a `var()`, a `calc()` or a `rem` included — so the fit test
|
|
24
|
+
* needs no CSS parser of its own to read what a host wrote.
|
|
25
|
+
*
|
|
26
|
+
* The house rule from `useElementWidth` holds here too: **zero is not a
|
|
27
|
+
* measurement**. A detached or `display: none` rail reports 0 and would
|
|
28
|
+
* otherwise be declared to fit forever. And the honest answer before the first
|
|
29
|
+
* measurement is "no": a static rail scrolls with the page under every
|
|
30
|
+
* circumstance, so an unmeasured frame degrades to the arm that cannot hide a
|
|
31
|
+
* control.
|
|
32
|
+
*/
|
|
33
|
+
import { useEffect, useState } from "react";
|
|
34
|
+
/** The CSS property the rail's top offset is carried in — see the note above.
|
|
35
|
+
* Exported so a test can assert the two halves read and write the same one. */
|
|
36
|
+
export const RAIL_OFFSET_PROPERTY = "scrollMarginTop";
|
|
37
|
+
/**
|
|
38
|
+
* Measure whether `ref`'s element is short enough to stand under the chrome
|
|
39
|
+
* its own `scroll-margin-top` names.
|
|
40
|
+
*
|
|
41
|
+
* `enabled` is the `railScroll === "page"` arm: under `"internal"` nothing is
|
|
42
|
+
* measured and nothing is listened to, so the default arm carries no observer
|
|
43
|
+
* and no listener at all.
|
|
44
|
+
*/
|
|
45
|
+
export function useRailFits(ref, enabled) {
|
|
46
|
+
const [fits, setFits] = useState(false);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (!enabled) {
|
|
49
|
+
// Leaving the arm resets the answer: a rail that stops being measured
|
|
50
|
+
// must not keep the last measurement's `position: sticky`.
|
|
51
|
+
setFits(false);
|
|
52
|
+
return undefined;
|
|
53
|
+
}
|
|
54
|
+
const element = ref.current;
|
|
55
|
+
if (element === null)
|
|
56
|
+
return undefined;
|
|
57
|
+
const measure = () => {
|
|
58
|
+
const height = element.getBoundingClientRect().height;
|
|
59
|
+
// Zero is not a measurement — see the note above.
|
|
60
|
+
if (height <= 0)
|
|
61
|
+
return;
|
|
62
|
+
const offset = Number.parseFloat(window.getComputedStyle(element)[RAIL_OFFSET_PROPERTY]);
|
|
63
|
+
const room = window.innerHeight - (Number.isFinite(offset) ? offset : 0);
|
|
64
|
+
const next = height <= room;
|
|
65
|
+
setFits((previous) => (previous === next ? previous : next));
|
|
66
|
+
};
|
|
67
|
+
measure();
|
|
68
|
+
// The window's own height is not the element's: a rotation, a devtools
|
|
69
|
+
// pane or a resized window changes the room without changing the rail.
|
|
70
|
+
window.addEventListener("resize", measure);
|
|
71
|
+
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
|
|
72
|
+
observer?.observe(element);
|
|
73
|
+
return () => {
|
|
74
|
+
window.removeEventListener("resize", measure);
|
|
75
|
+
observer?.disconnect();
|
|
76
|
+
};
|
|
77
|
+
}, [ref, enabled]);
|
|
78
|
+
return fits;
|
|
79
|
+
}
|
|
80
|
+
//# sourceMappingURL=railFit.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"railFit.js","sourceRoot":"","sources":["../../src/default/railFit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C;+EAC+E;AAC/E,MAAM,CAAC,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CACzB,GAAkC,EAClC,OAAgB;IAEhB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,sEAAsE;YACtE,2DAA2D;YAC3D,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO,SAAS,CAAC;QAEvC,MAAM,OAAO,GAAG,GAAS,EAAE;YACzB,MAAM,MAAM,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YACtD,kDAAkD;YAClD,IAAI,MAAM,IAAI,CAAC;gBAAE,OAAO;YACxB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAC9B,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,oBAAoB,CAAC,CACvD,CAAC;YACF,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzE,MAAM,IAAI,GAAG,MAAM,IAAI,IAAI,CAAC;YAC5B,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEF,OAAO,EAAE,CAAC;QACV,uEAAuE;QACvE,uEAAuE;QACvE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC3C,MAAM,QAAQ,GACZ,OAAO,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;QAC7E,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QAC3B,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC9C,QAAQ,EAAE,UAAU,EAAE,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnB,OAAO,IAAI,CAAC;AACd,CAAC"}
|
package/llms.txt
CHANGED
package/manifest.json
CHANGED
package/nav-manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stapel/search-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.42.0",
|
|
4
4
|
"description": "Headless React pair for stapel-search: a typed query client, TanStack Query hooks, and a URL-first state codec that makes a search shareable by construction (filters, ranges, geo, sort and the keyset cursor all live in the query string). Drill-down facets rendered with their remaining counts and with the server's own honesty flags — approximate, skipped, degraded — never swallowed; keyset pagination with the window refusal named; DSA Art. 26 `promoted` marking carried into every card slot and the P2B Art. 5 ranking disclosure exposed as data. Zero visual opinion in the main entry; an opt-in /default subpath ships the antd skin, and /router binds the codec to react-router's useSearchParams.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"limit": "14.5 KB"
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
|
-
"name": "default — the antd skin (query box + a typeahead that offers CATEGORY destinations with their live counts, filters incl. ranges/geo/category slots + the phone chip row with its leading category chip and the location summary row + the rail's evidence-ranked disclosure groups, panel search and sticky count/clear footer, results incl. the view switch, the card photo GALLERY as a SkinCarousel strip, the empty state's derived exits, ranking, the dictionary control for a vocabulary facet, the popular-values block, the partition row in both its chip and segmented variants, the select-style dictionary FIELD the desktop rail opens, the from/to pickers a bounded integer axis draws and the rail's own scrollbar sheet) must stay out of the main bundle. Raised 24.5 → 25.5 KB for those four controls, then 25.5 → 26.25 KB for the chip row's APPLIED mode — one chip per applied value and per numeric bound, each removing that one constraint beside a rail that is already on screen (a storefront was carrying its own copy of it), then 26.25 → 27 KB for the \"search in other categories\" LINE — which is a net deletion on the page that mounts it, replacing a full-width block of one row per section that arrived after the results and pushed them, then 27 → 27.75 KB for the two frames the page now tells apart: the dictionary FIELD reaching `<SearchPage>` at all (per-layout default, field in the rail and inline in the sheet) and the footer bar being static in a column and sticky in a sheet, where it used to be pinned over the last two groups everywhere, then 27.75 → 28.5 KB for `categoryHref` on the other-categories line — a real `<a href>` per row with a modifier-click left to the browser, instead of a `<button>` with no address a person could open in a new tab, then 28.5 → 29.25 KB for the phone's dictionary SHEET — a trigger row over the shared `SkinPickerSheet` with a recommended band, an alphabetical rest paged fifty at a time and a draft committed in one write, which is the control the composer's vocabulary picker already was while the buyer got a wall of checkboxes, then 29.25 → 30.5 KB for the panel that draws all of it: groups and ranges as one ordered sequence with one «Apply» for the panel rather than one per row, the empty-group heading rule, `categoryFilter={false}` and the `resultsLead` slot for a page reached by walking the catalogue, `PopularValues columns=\\\"responsive\\\"` on a container query, `SortSelect` annotating a blocked option at every width, a loading arm that covers the whole pane (0.34 CLS on a live host), and the chip row reserving its own box (a further 0.045). Measured with dependencies held constant, this package's src at the commit before that work and then at it: 29.05 -> 30.16 KB — 1.11 KB, and every part of it is a shift or a mislabelled control a host was living with, then 30.5 -> 31 KB for `<SearchResultsPane columns>` and its pass-through on `<SearchPage resultsColumns>`: a fixed track count or a per-breakpoint map, emitted as a hoisted container-query sheet (the results block is the window minus a 280px rail, so a media query would answer about a width the cards never have). Measured with dependencies held constant, this package's src before and after: 30.40 -> 30.65 KB — 250 B, and what it replaces is a host's `!important` rule against a grid declaration it could not read back, then 31 -> 31.25 KB for the segmented partition being antd's `Segmented` rather than a row of buttons wearing a border: the walker read `data-variant=\"segmented\"` with `role=\"radiogroup\"` and found `.ant-segmented` zero times and `input[type=radio]` zero times (D304), so the cells are the design system's now — real radios under one name, the browser's own arrow keys and Tab stop. Measured with dependencies held constant, this package's src before and after: 30.95 -> 31.05 KB — 100 B, against ~30 lines of hand-rolled joined-row geometry deleted, then 31.25 -> 31.5 KB for the two PINNING seams: `<SearchPage railTop>` (the rail's sticky offset and its height cap moved together, so a rail under a 64px header still ends at the foot of the window) and `<SearchResultsPane stickyToolbar>` with the toolbar's own element in both header shapes. Measured with dependencies held constant, this package's src before and after: 31.05 -> 31.2 KB — 150 B, and what it replaces in one deployment is an `!important` over the pair's own inline geometry, a `:has()`, a `display: contents` and this pair's rail breakpoint restated in the host's media query, then 31.5 -> 31.75 KB for the rail saying when its answer is IN FLIGHT: `FacetPanelBag.refreshing` off `loadStateFromQuery(…, { keepPrevious })`, `data-facets-refreshing` on the rail, and each facet group standing on its own last measured height (a `min-block-size` floor held in a ref) until the new answer lands. Measured with dependencies held constant, this package's src before and after: 31.43 -> 31.51 KB — 80 B, against 0.0586 CLS on a partition press (p43), where the groups survive and RESIZE, then 31.75 -> 32 KB for the FIRST MOUNT, which had none of that: `refreshing` is never true on a cold load, so nothing above reached the one pass a plain load is made of. Three parts. `<SearchPage categoryFeaturesPending>` / `<FacetPanelPane categoryFeaturesPending>` is the third state `categoryFeatures` never had — undefined means both \"no schema\" and \"not yet\", and on a category leaf the schema is a SECOND read, so the panel drew the rail from the answer alone and then drew it again when the schema landed: on the live cars leaf make and model went from three-row checkbox lists to one-row dictionary fields, condition and colour from checkboxes to pills, and `orderFacetGroupsBySchema` reordered all of them (p41, 0.0586 CLS on a plain load of `/c/transport-avtomobili`, make -152px and model -76px). Told the schema is coming, the panel keeps the box it already reserves and draws the rail ONCE. Second, every group now stands on a DECLARED box from the frame it mounts in (`facetGroupReservedHeight` — heading, rows and fold per shape), with its measured height preferred only while an answer is in flight. Third, `<SearchPage filtersHeaderReserve>` puts the host's own band above the rail in flow from the first frame, for the partition row that is two chained catalogue reads behind the answer. Measured with dependencies held constant, this package's src before and after: 30.77 -> 31.14 KB — 366 B, then 32 -> 32.25 KB for the filter sheet's open state becoming the HOST's: `<SearchPage filtersOpen>` / `onFiltersOpenChange(open, reason)` as React's usual controlled pair, and `filtersHeader` accepting a function handed `{ closeFilters, open }`. What it costs is the four call sites naming WHY the sheet moved (`open`, `apply`, `dismiss`, `consumer`) and the slot's function arm; what it buys is a header whose own control NAVIGATES being able to take the sheet down on the same press — the page published only `defaultFiltersOpen`, so a partition chip inside the sheet left the drawer standing over the page it had just opened. Measured with dependencies held constant, this package's src before and after: 31.14 -> 31.26 KB — 120 B, then 32.25 -> 32.5 KB for the two levers a storefront could not reach: `<SearchPage footerBar>` (the rail's footer bar writes its own `display` inline, so a consumer stylesheet could only suppress it with an `!important` its own gate forbids, and this page hard-coded the column's value) and `PartitionChild.count`, which the chip draws itself in the muted weight the facet rows use instead of a host welding the number onto the name. Measured with dependencies held constant, this package's src before and after: 32.01 -> 32.10 KB — 90 B, against a string-joining hack and an unreachable bar, then 32.5 -> 32.75 KB for THE THREE BOXES A STOREFRONT WAS HOLDING FOR THIS PAIR. The phone chip row's reserve is `chipRowMinHeight(token.controlHeight)` instead of a `44 + …` constant: the touch floor raises the chips to 44 only BELOW the tablet breakpoint, so from 768px up the reserve stood 12px taller than the 40px row and the results pane ROSE when the row landed (0.0725 CLS on a category leaf at 768, against 0.00016 at 390). `<SortSelect compact>` reserves the width of the longest label it can display, measured by the browser through an `aria-hidden` sizer stacked with the select in one grid cell, instead of `minWidth: 0` inline and a control that GREW 115px when the answer named the sort. And `<SearchResultsPane>` names its own root (`data-testid=\"search-results-pane\"`) and takes `reserve` — `<SearchPage resultsReserve>` — for the box the feed arrives into, which a host was holding with `#search-page > :last-child`. Measured with dependencies held constant, this package's src before and after: 32.10 -> 32.25 KB — 150 B, against a hand-guessed height, a sibling-count selector and two stylesheet rules a consumer can now delete. 32.75 KB HOLDS for the rail's own scrollbar and the block rhythm (owner's walk of the storefront, dark theme): measured 32539 B against the 32.75 KB line, 290 B over the 32249 B this note last recorded, and 211 B of room left. The rail stays its own scroll container — filters that stay put while the results move under them is the whole point of it — and `railScrollbar` names whose BAR draws in the gutter: `\"styled\"` (the new default) is a hoisted rule set in both vendor forms, a 6px track with no arrows and no track fill and a thumb that is transparent at rest and arrives from the tokens on hover or focus-within, standing always under `(pointer: coarse)` where neither fires; `\"system\"` hands the port back to the platform and mounts no sheet at all. The system bar was never a decision, which is why the default is the new arm. The rest is `blockRhythm`: one gap for every block on this page from `var(--stapel-block-gap)` / `var(--stapel-block-gap-compact)` with each block's outer margin reset, in place of the flat `spacing[4]` the root `<Flex>` wrote inline. A budget is not raised for a change that fits under the line it already has. 32.75 -> 33.25 KB for THE POINTER THAT WAS A PARTITION CHIP (owner's read of the stand at 0.38.0). Measured with dependencies held constant, this package's src before this change and then at it: 32539 -> 32779 B — 240 B, 29 of them over the old line, and a ceiling that fails on 29 B of a shipped defect fix is a gate proving nothing. `PartitionChild.linked`/`href` and `<PartitionChips linkedChildren>` split the row's items ONCE, above everything that reads them: the cells, the roving stop, the value lookup and the arrow keys see only the SECTIONS, so a pointer cannot be a radio, cannot carry a count and cannot be the chosen partition — the live row read `All | New 0 | Used 3 | Car rental 0`, where the last zero counted a category that is not a section of this template at all. The rest is the pointer's own chip: an outlined pill that is a real `<a href>` to the target, its inline arrow glyph (drawn here, like every other glyph in this skin — this package ships no icon set), and the row that carries them OUTSIDE the radiogroup, because a `role=\"radiogroup\"` containing a link announces a choice with an option nobody can choose. 33.25 KB leaves 471 B, then 33.25 -> 34 KB for THE TWO THINGS THE CLOSING-WAVE CENSUS FOUND ON THE FEED AND THE RAIL. Measured with dependencies held constant, this package's src before this change and then at it: 32779 -> 33584 B — 805 B, 334 of them over the old line. First, `<SearchPage toolbarSticky>` (default `true`): the results toolbar pins itself at `railTop` — the same edge the filter rail already clears, so there is no second number to keep in step — through a hoisted `@media (pointer: fine)` rule set, because the pin has to be gated on a pointer and a media query cannot be written in a `style` attribute. `stickyToolbar` shipped a release ago and no deployment turned it on, which is a feature nobody has; the reference pins its sort bar once a reader has scrolled into the results (REPORT §24, Surface 2) and this page now does too, on a desktop only — a pinned bar over a 390px viewport spends the fold on chrome. The row also states its own box from the first frame (`toolbarRowMinHeight(token.controlHeight)`, the discipline `chipRowMinHeight` is written under), so its height cannot change around the moment the rule engages. Second, the colour SWATCH: a facet whose axis is a colour (`isColorAxis` — the slug's head, the address key beside it, and `axis_role` the day the canon grows a colour one) draws a filled dot beside every value whose code it can resolve to an actual colour (`swatchColor` — a design-system colour role first, then CSS's own keyword vocabulary, then a hex code a catalogue spelled out itself), and NOTHING beside the rest. Most of the weight is that keyword list, and it is the whole point of the feature: it is the vocabulary in which \"this code names a colour\" is a fact rather than a guess, and without it the only alternatives are a hue table invented for one catalogue's transliterations or a grey placeholder saying every value is the same colour. 34 KB leaves 416 B. 34 KB HOLDS for the owner's tidiness probe on the stand (dark theme): measured 33661 B against the 34 KB line, 77 B over the 33584 B this note last recorded, and 339 B of room left. Three fills, all of them this pair drawing something the page had already decided. `<SearchPage railSurface>` / `<FacetPanelPane railSurface>` (default `\"flat\"`, `\"panel\"` restores the old arm): the filter panel's body painted the raised container ground and read as a 270 x 1539 filled slab with no radius and no border, standing on the page ground for the whole height of the feed — flat draws the controls and only the text colour a bare surface drops (`var(--stapel-text)`), the same answer `categories-react` gave for its grid, strip and breadcrumbs. The rail's footer bar stopped choosing a colour: it painted antd's `colorBgContainer` in both arms, and now paints the panel's OWN token and only in the pinned arm, which is the one with a scroll port under it — the static arm paints nothing and keeps its hairline. And `resultsHeader`'s wrapper is `display: contents`: it was mounted on the PROP rather than on what the prop rendered, so a host whose header said nothing still put a 1392 x 0 element in the block-rhythm column, which is charged a gap on BOTH sides — 64px between two real blocks where 32 is declared, on every feed page, plus a `:empty` stand-in rule in the consumer's stylesheet that can now be deleted. A budget is not raised for a change that fits under the line it already has",
|
|
60
|
+
"name": "default — the antd skin (query box + a typeahead that offers CATEGORY destinations with their live counts, filters incl. ranges/geo/category slots + the phone chip row with its leading category chip and the location summary row + the rail's evidence-ranked disclosure groups, panel search and sticky count/clear footer, results incl. the view switch, the card photo GALLERY as a SkinCarousel strip, the empty state's derived exits, ranking, the dictionary control for a vocabulary facet, the popular-values block, the partition row in both its chip and segmented variants, the select-style dictionary FIELD the desktop rail opens, the from/to pickers a bounded integer axis draws and the rail's own scrollbar sheet) must stay out of the main bundle. Raised 24.5 → 25.5 KB for those four controls, then 25.5 → 26.25 KB for the chip row's APPLIED mode — one chip per applied value and per numeric bound, each removing that one constraint beside a rail that is already on screen (a storefront was carrying its own copy of it), then 26.25 → 27 KB for the \"search in other categories\" LINE — which is a net deletion on the page that mounts it, replacing a full-width block of one row per section that arrived after the results and pushed them, then 27 → 27.75 KB for the two frames the page now tells apart: the dictionary FIELD reaching `<SearchPage>` at all (per-layout default, field in the rail and inline in the sheet) and the footer bar being static in a column and sticky in a sheet, where it used to be pinned over the last two groups everywhere, then 27.75 → 28.5 KB for `categoryHref` on the other-categories line — a real `<a href>` per row with a modifier-click left to the browser, instead of a `<button>` with no address a person could open in a new tab, then 28.5 → 29.25 KB for the phone's dictionary SHEET — a trigger row over the shared `SkinPickerSheet` with a recommended band, an alphabetical rest paged fifty at a time and a draft committed in one write, which is the control the composer's vocabulary picker already was while the buyer got a wall of checkboxes, then 29.25 → 30.5 KB for the panel that draws all of it: groups and ranges as one ordered sequence with one «Apply» for the panel rather than one per row, the empty-group heading rule, `categoryFilter={false}` and the `resultsLead` slot for a page reached by walking the catalogue, `PopularValues columns=\\\"responsive\\\"` on a container query, `SortSelect` annotating a blocked option at every width, a loading arm that covers the whole pane (0.34 CLS on a live host), and the chip row reserving its own box (a further 0.045). Measured with dependencies held constant, this package's src at the commit before that work and then at it: 29.05 -> 30.16 KB — 1.11 KB, and every part of it is a shift or a mislabelled control a host was living with, then 30.5 -> 31 KB for `<SearchResultsPane columns>` and its pass-through on `<SearchPage resultsColumns>`: a fixed track count or a per-breakpoint map, emitted as a hoisted container-query sheet (the results block is the window minus a 280px rail, so a media query would answer about a width the cards never have). Measured with dependencies held constant, this package's src before and after: 30.40 -> 30.65 KB — 250 B, and what it replaces is a host's `!important` rule against a grid declaration it could not read back, then 31 -> 31.25 KB for the segmented partition being antd's `Segmented` rather than a row of buttons wearing a border: the walker read `data-variant=\"segmented\"` with `role=\"radiogroup\"` and found `.ant-segmented` zero times and `input[type=radio]` zero times (D304), so the cells are the design system's now — real radios under one name, the browser's own arrow keys and Tab stop. Measured with dependencies held constant, this package's src before and after: 30.95 -> 31.05 KB — 100 B, against ~30 lines of hand-rolled joined-row geometry deleted, then 31.25 -> 31.5 KB for the two PINNING seams: `<SearchPage railTop>` (the rail's sticky offset and its height cap moved together, so a rail under a 64px header still ends at the foot of the window) and `<SearchResultsPane stickyToolbar>` with the toolbar's own element in both header shapes. Measured with dependencies held constant, this package's src before and after: 31.05 -> 31.2 KB — 150 B, and what it replaces in one deployment is an `!important` over the pair's own inline geometry, a `:has()`, a `display: contents` and this pair's rail breakpoint restated in the host's media query, then 31.5 -> 31.75 KB for the rail saying when its answer is IN FLIGHT: `FacetPanelBag.refreshing` off `loadStateFromQuery(…, { keepPrevious })`, `data-facets-refreshing` on the rail, and each facet group standing on its own last measured height (a `min-block-size` floor held in a ref) until the new answer lands. Measured with dependencies held constant, this package's src before and after: 31.43 -> 31.51 KB — 80 B, against 0.0586 CLS on a partition press (p43), where the groups survive and RESIZE, then 31.75 -> 32 KB for the FIRST MOUNT, which had none of that: `refreshing` is never true on a cold load, so nothing above reached the one pass a plain load is made of. Three parts. `<SearchPage categoryFeaturesPending>` / `<FacetPanelPane categoryFeaturesPending>` is the third state `categoryFeatures` never had — undefined means both \"no schema\" and \"not yet\", and on a category leaf the schema is a SECOND read, so the panel drew the rail from the answer alone and then drew it again when the schema landed: on the live cars leaf make and model went from three-row checkbox lists to one-row dictionary fields, condition and colour from checkboxes to pills, and `orderFacetGroupsBySchema` reordered all of them (p41, 0.0586 CLS on a plain load of `/c/transport-avtomobili`, make -152px and model -76px). Told the schema is coming, the panel keeps the box it already reserves and draws the rail ONCE. Second, every group now stands on a DECLARED box from the frame it mounts in (`facetGroupReservedHeight` — heading, rows and fold per shape), with its measured height preferred only while an answer is in flight. Third, `<SearchPage filtersHeaderReserve>` puts the host's own band above the rail in flow from the first frame, for the partition row that is two chained catalogue reads behind the answer. Measured with dependencies held constant, this package's src before and after: 30.77 -> 31.14 KB — 366 B, then 32 -> 32.25 KB for the filter sheet's open state becoming the HOST's: `<SearchPage filtersOpen>` / `onFiltersOpenChange(open, reason)` as React's usual controlled pair, and `filtersHeader` accepting a function handed `{ closeFilters, open }`. What it costs is the four call sites naming WHY the sheet moved (`open`, `apply`, `dismiss`, `consumer`) and the slot's function arm; what it buys is a header whose own control NAVIGATES being able to take the sheet down on the same press — the page published only `defaultFiltersOpen`, so a partition chip inside the sheet left the drawer standing over the page it had just opened. Measured with dependencies held constant, this package's src before and after: 31.14 -> 31.26 KB — 120 B, then 32.25 -> 32.5 KB for the two levers a storefront could not reach: `<SearchPage footerBar>` (the rail's footer bar writes its own `display` inline, so a consumer stylesheet could only suppress it with an `!important` its own gate forbids, and this page hard-coded the column's value) and `PartitionChild.count`, which the chip draws itself in the muted weight the facet rows use instead of a host welding the number onto the name. Measured with dependencies held constant, this package's src before and after: 32.01 -> 32.10 KB — 90 B, against a string-joining hack and an unreachable bar, then 32.5 -> 32.75 KB for THE THREE BOXES A STOREFRONT WAS HOLDING FOR THIS PAIR. The phone chip row's reserve is `chipRowMinHeight(token.controlHeight)` instead of a `44 + …` constant: the touch floor raises the chips to 44 only BELOW the tablet breakpoint, so from 768px up the reserve stood 12px taller than the 40px row and the results pane ROSE when the row landed (0.0725 CLS on a category leaf at 768, against 0.00016 at 390). `<SortSelect compact>` reserves the width of the longest label it can display, measured by the browser through an `aria-hidden` sizer stacked with the select in one grid cell, instead of `minWidth: 0` inline and a control that GREW 115px when the answer named the sort. And `<SearchResultsPane>` names its own root (`data-testid=\"search-results-pane\"`) and takes `reserve` — `<SearchPage resultsReserve>` — for the box the feed arrives into, which a host was holding with `#search-page > :last-child`. Measured with dependencies held constant, this package's src before and after: 32.10 -> 32.25 KB — 150 B, against a hand-guessed height, a sibling-count selector and two stylesheet rules a consumer can now delete. 32.75 KB HOLDS for the rail's own scrollbar and the block rhythm (owner's walk of the storefront, dark theme): measured 32539 B against the 32.75 KB line, 290 B over the 32249 B this note last recorded, and 211 B of room left. The rail stays its own scroll container — filters that stay put while the results move under them is the whole point of it — and `railScrollbar` names whose BAR draws in the gutter: `\"styled\"` (the new default) is a hoisted rule set in both vendor forms, a 6px track with no arrows and no track fill and a thumb that is transparent at rest and arrives from the tokens on hover or focus-within, standing always under `(pointer: coarse)` where neither fires; `\"system\"` hands the port back to the platform and mounts no sheet at all. The system bar was never a decision, which is why the default is the new arm. The rest is `blockRhythm`: one gap for every block on this page from `var(--stapel-block-gap)` / `var(--stapel-block-gap-compact)` with each block's outer margin reset, in place of the flat `spacing[4]` the root `<Flex>` wrote inline. A budget is not raised for a change that fits under the line it already has. 32.75 -> 33.25 KB for THE POINTER THAT WAS A PARTITION CHIP (owner's read of the stand at 0.38.0). Measured with dependencies held constant, this package's src before this change and then at it: 32539 -> 32779 B — 240 B, 29 of them over the old line, and a ceiling that fails on 29 B of a shipped defect fix is a gate proving nothing. `PartitionChild.linked`/`href` and `<PartitionChips linkedChildren>` split the row's items ONCE, above everything that reads them: the cells, the roving stop, the value lookup and the arrow keys see only the SECTIONS, so a pointer cannot be a radio, cannot carry a count and cannot be the chosen partition — the live row read `All | New 0 | Used 3 | Car rental 0`, where the last zero counted a category that is not a section of this template at all. The rest is the pointer's own chip: an outlined pill that is a real `<a href>` to the target, its inline arrow glyph (drawn here, like every other glyph in this skin — this package ships no icon set), and the row that carries them OUTSIDE the radiogroup, because a `role=\"radiogroup\"` containing a link announces a choice with an option nobody can choose. 33.25 KB leaves 471 B, then 33.25 -> 34 KB for THE TWO THINGS THE CLOSING-WAVE CENSUS FOUND ON THE FEED AND THE RAIL. Measured with dependencies held constant, this package's src before this change and then at it: 32779 -> 33584 B — 805 B, 334 of them over the old line. First, `<SearchPage toolbarSticky>` (default `true`): the results toolbar pins itself at `railTop` — the same edge the filter rail already clears, so there is no second number to keep in step — through a hoisted `@media (pointer: fine)` rule set, because the pin has to be gated on a pointer and a media query cannot be written in a `style` attribute. `stickyToolbar` shipped a release ago and no deployment turned it on, which is a feature nobody has; the reference pins its sort bar once a reader has scrolled into the results (REPORT §24, Surface 2) and this page now does too, on a desktop only — a pinned bar over a 390px viewport spends the fold on chrome. The row also states its own box from the first frame (`toolbarRowMinHeight(token.controlHeight)`, the discipline `chipRowMinHeight` is written under), so its height cannot change around the moment the rule engages. Second, the colour SWATCH: a facet whose axis is a colour (`isColorAxis` — the slug's head, the address key beside it, and `axis_role` the day the canon grows a colour one) draws a filled dot beside every value whose code it can resolve to an actual colour (`swatchColor` — a design-system colour role first, then CSS's own keyword vocabulary, then a hex code a catalogue spelled out itself), and NOTHING beside the rest. Most of the weight is that keyword list, and it is the whole point of the feature: it is the vocabulary in which \"this code names a colour\" is a fact rather than a guess, and without it the only alternatives are a hue table invented for one catalogue's transliterations or a grey placeholder saying every value is the same colour. 34 KB leaves 416 B. 34 KB HOLDS for the owner's tidiness probe on the stand (dark theme): measured 33661 B against the 34 KB line, 77 B over the 33584 B this note last recorded, and 339 B of room left. Three fills, all of them this pair drawing something the page had already decided. `<SearchPage railSurface>` / `<FacetPanelPane railSurface>` (default `\"flat\"`, `\"panel\"` restores the old arm): the filter panel's body painted the raised container ground and read as a 270 x 1539 filled slab with no radius and no border, standing on the page ground for the whole height of the feed — flat draws the controls and only the text colour a bare surface drops (`var(--stapel-text)`), the same answer `categories-react` gave for its grid, strip and breadcrumbs. The rail's footer bar stopped choosing a colour: it painted antd's `colorBgContainer` in both arms, and now paints the panel's OWN token and only in the pinned arm, which is the one with a scroll port under it — the static arm paints nothing and keeps its hairline. And `resultsHeader`'s wrapper is `display: contents`: it was mounted on the PROP rather than on what the prop rendered, so a host whose header said nothing still put a 1392 x 0 element in the block-rhythm column, which is charged a gap on BOTH sides — 64px between two real blocks where 32 is declared, on every feed page, plus a `:empty` stand-in rule in the consumer's stylesheet that can now be deleted. A budget is not raised for a change that fits under the line it already has, then 34 -> 34.5 KB for THE RAIL THAT SCROLLS WITH THE PAGE (`railScroll`, a founder's ruling on a client storefront). Measured with dependencies held constant, this package's src before this change and then at it: 33661 -> 34193 B — 532 B, 193 of them over the old line. The rail has been its own scroll container since it became sticky and stays one by default; `railScroll=\"page\"` is the other answer, for a surface whose owner reads a second scrollbar standing beside the results as a second page: no `overflow-y`, no height cap, no gutter, no `overscroll-behavior`, and no bar to dress a port that is not there. The weight is the half that is NOT a deletion, because `\"page\"` is not \"sticky off\": a rail SHORTER than the room under the host's chrome still pins at `railTop`, and only a rail taller than the window goes static — a stuck box that tall is cut off at the foot of the screen, and the page scroll, now the only scroll on the surface, cannot reach its last controls. Which of the two a leaf gets is MEASURED and not guessed from a breakpoint (`useRailFits`: the rail's own height against `window.innerHeight` minus the offset it carries as `scroll-margin-top`, an observer for the element and a listener for the window, and zero refused as a measurement), because the same catalogue draws four facet groups on one section and twenty on the next. 34.5 KB leaves 307 B",
|
|
61
61
|
"path": "dist/default/index.js",
|
|
62
|
-
"limit": "34 KB"
|
|
62
|
+
"limit": "34.5 KB"
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"name": "router — the react-router binding is opt-in; the main entry must never pull a router",
|
|
@@ -116,9 +116,9 @@
|
|
|
116
116
|
"typescript": "^5.8.3",
|
|
117
117
|
"vitest": "^3.2.4",
|
|
118
118
|
"@stapel/attributes-react": "^0.17.0",
|
|
119
|
+
"@stapel/showcase": "^0.3.0",
|
|
119
120
|
"@stapel/core": "^0.26.1",
|
|
120
121
|
"@stapel/image": "^0.4.2",
|
|
121
|
-
"@stapel/showcase": "^0.3.0",
|
|
122
122
|
"@stapel/tokens": "^0.8.0",
|
|
123
123
|
"@stapel/tokens-antd": "^0.18.0"
|
|
124
124
|
},
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
* nothing in it, and a layout that reflowed underneath a person mid-load would
|
|
62
62
|
* be worse than the hole.
|
|
63
63
|
*/
|
|
64
|
-
import { useState, useSyncExternalStore } from "react";
|
|
64
|
+
import { useRef, useState, useSyncExternalStore } from "react";
|
|
65
65
|
import type { CSSProperties, ReactElement, ReactNode } from "react";
|
|
66
66
|
import { Button, Flex } from "antd";
|
|
67
67
|
import { SkinDialog, SkinTheme, useDialogSurface } from "@stapel/tokens-antd/skin";
|
|
@@ -77,6 +77,7 @@ import type { ParseSearchStateOptions } from "../state/urlState.js";
|
|
|
77
77
|
import type { SearchGeo } from "../api/types.js";
|
|
78
78
|
import { buildRangeGroups } from "../state/ranges.js";
|
|
79
79
|
import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
|
|
80
|
+
import { useRailFits } from "./railFit.js";
|
|
80
81
|
import { FacetPanelPane } from "./FacetPanelPane.js";
|
|
81
82
|
import type {
|
|
82
83
|
CategoryFilterSlotProps,
|
|
@@ -279,6 +280,10 @@ export const RAIL_STYLE_HREF = "stapel-search-rail";
|
|
|
279
280
|
* {@link SearchPageProps.railScrollbar}. */
|
|
280
281
|
export type SearchRailScrollbar = "styled" | "system";
|
|
281
282
|
|
|
283
|
+
/** WHAT SCROLLS when the filters are longer than the window — see
|
|
284
|
+
* {@link SearchPageProps.railScroll}. */
|
|
285
|
+
export type SearchRailScroll = "internal" | "page";
|
|
286
|
+
|
|
282
287
|
/**
|
|
283
288
|
* The scrollbar's track width, in CSS pixels.
|
|
284
289
|
*
|
|
@@ -373,19 +378,59 @@ const RAIL: CSSProperties = {
|
|
|
373
378
|
paddingBlockEnd: spacing[2],
|
|
374
379
|
};
|
|
375
380
|
|
|
381
|
+
/**
|
|
382
|
+
* The rail that is NOT a scroll port — `railScroll="page"`.
|
|
383
|
+
*
|
|
384
|
+
* The column, and nothing that makes it a container: no `overflow-y`, no
|
|
385
|
+
* height cap, no scroll gutter, no `overscroll-behavior`. What decides
|
|
386
|
+
* `position` is not written here but MEASURED — see {@link railStyle} and
|
|
387
|
+
* `useRailFits`.
|
|
388
|
+
*/
|
|
389
|
+
const RAIL_IN_PAGE: CSSProperties = {
|
|
390
|
+
flex: `0 0 ${String(FILTERS_RAIL_WIDTH)}px`,
|
|
391
|
+
minWidth: FILTERS_RAIL_WIDTH,
|
|
392
|
+
maxWidth: FILTERS_RAIL_WIDTH,
|
|
393
|
+
// Load-bearing in both arms: a flex child stretches to the row's height by
|
|
394
|
+
// default, and a stretched box has nothing to stick to.
|
|
395
|
+
alignSelf: "flex-start",
|
|
396
|
+
paddingBlockEnd: spacing[2],
|
|
397
|
+
};
|
|
398
|
+
|
|
376
399
|
/**
|
|
377
400
|
* The rail with a host's own offset under it.
|
|
378
401
|
*
|
|
379
|
-
* `top` and the height cap move TOGETHER,
|
|
380
|
-
* a function rather than one property: a
|
|
381
|
-
* cap is still `100dvh` ends 64px past
|
|
382
|
-
*
|
|
402
|
+
* Under the default `"internal"` arm, `top` and the height cap move TOGETHER,
|
|
403
|
+
* and that is the whole reason this is a function rather than one property: a
|
|
404
|
+
* rail pushed 64px down the window whose cap is still `100dvh` ends 64px past
|
|
405
|
+
* the foot of the screen, so its last control is unreachable — the internal
|
|
406
|
+
* scroll has scrolled past the window.
|
|
407
|
+
*
|
|
408
|
+
* Under `"page"` there is no cap and no port. The rail is sticky WHILE IT
|
|
409
|
+
* FITS (`fits`, measured by `useRailFits`) and static when it does not, since
|
|
410
|
+
* a stuck box taller than the window is cut off at the foot of the screen with
|
|
411
|
+
* no scroll of its own to reveal the rest. The offset is written twice on
|
|
412
|
+
* purpose: as `top`, which is what sticky uses, and as `scroll-margin-top`,
|
|
413
|
+
* which is the one property that MEANS "this much of the top of the scrollport
|
|
414
|
+
* is covered" and which the engine resolves to pixels for the fit test to read
|
|
415
|
+
* back.
|
|
383
416
|
*
|
|
384
417
|
* A number is pixels; a string is taken as written, so
|
|
385
418
|
* `railTop="var(--stapel-header-height)"` reads the height `<PublicShell>`
|
|
386
419
|
* publishes instead of restating it.
|
|
387
420
|
*/
|
|
388
|
-
export function railStyle(
|
|
421
|
+
export function railStyle(
|
|
422
|
+
top: number | string | undefined,
|
|
423
|
+
scroll: SearchRailScroll = "internal",
|
|
424
|
+
fits = false
|
|
425
|
+
): CSSProperties {
|
|
426
|
+
if (scroll === "page") {
|
|
427
|
+
const offset = top ?? 0;
|
|
428
|
+
return {
|
|
429
|
+
...RAIL_IN_PAGE,
|
|
430
|
+
scrollMarginTop: offset,
|
|
431
|
+
...(fits ? { position: "sticky", top: offset } : { position: "static" }),
|
|
432
|
+
};
|
|
433
|
+
}
|
|
389
434
|
if (top === undefined) return RAIL;
|
|
390
435
|
const offset = typeof top === "number" ? `${String(top)}px` : top;
|
|
391
436
|
return { ...RAIL, top, maxHeight: `calc(100dvh - ${offset})` };
|
|
@@ -787,8 +832,40 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
|
|
|
787
832
|
* The default is the NEW behaviour, deliberately: the system bar was never a
|
|
788
833
|
* design decision here — it was the absence of one, and it is the thing the
|
|
789
834
|
* page was measured on.
|
|
835
|
+
*
|
|
836
|
+
* Read under `railScroll="page"` by nothing: a rail that is not a scroll
|
|
837
|
+
* port has no bar to dress, so neither the class nor the rule set is
|
|
838
|
+
* mounted there.
|
|
790
839
|
*/
|
|
791
840
|
readonly railScrollbar?: SearchRailScrollbar;
|
|
841
|
+
/**
|
|
842
|
+
* WHAT SCROLLS when the filters are longer than the window.
|
|
843
|
+
* Default `"internal"` — no host changes behaviour by upgrading.
|
|
844
|
+
*
|
|
845
|
+
* - `"internal"` — the rail is its own scroll container: it stays put at
|
|
846
|
+
* {@link railTop} and the filters scroll INSIDE it, capped at the height
|
|
847
|
+
* of the window. A person who has scrolled the filters and ticked one
|
|
848
|
+
* does not find the page has moved under them;
|
|
849
|
+
* - `"page"` — the rail is a column of the page and the PAGE is the only
|
|
850
|
+
* thing that scrolls. No `overflow-y`, no height cap, no gutter, no
|
|
851
|
+
* `overscroll-behavior`, and no scrollbar of its own to dress.
|
|
852
|
+
*
|
|
853
|
+
* `"page"` is not "sticky off". A rail SHORTER than the room under the
|
|
854
|
+
* host's chrome still pins at {@link railTop}, exactly as it does in the
|
|
855
|
+
* other arm — it is only the rail TALLER than the window that goes static,
|
|
856
|
+
* because a stuck box that tall is cut off at the foot of the screen and the
|
|
857
|
+
* page scroll, which is now the only scroll, cannot reach its last controls.
|
|
858
|
+
* Which of the two a leaf gets is measured (the rail's own height against
|
|
859
|
+
* `window.innerHeight` minus the offset), not guessed from a breakpoint: the
|
|
860
|
+
* same catalogue draws four facet groups on one section and twenty on the
|
|
861
|
+
* next.
|
|
862
|
+
*
|
|
863
|
+
* For the surface whose owner reads a second scrollbar standing beside the
|
|
864
|
+
* results as a second page — a storefront's whole filter column in one
|
|
865
|
+
* gesture with the feed — and for any host whose own chrome already gives
|
|
866
|
+
* the window one scroll and wants no other.
|
|
867
|
+
*/
|
|
868
|
+
readonly railScroll?: SearchRailScroll;
|
|
792
869
|
/**
|
|
793
870
|
* WHAT THE FILTER PANEL'S OWN BODY PAINTS. Default `"flat"`.
|
|
794
871
|
*
|
|
@@ -1026,6 +1103,7 @@ interface SearchPageBodyProps {
|
|
|
1026
1103
|
readonly filtersLayout?: SearchFiltersLayout;
|
|
1027
1104
|
readonly railTop?: number | string;
|
|
1028
1105
|
readonly railScrollbar?: SearchRailScrollbar;
|
|
1106
|
+
readonly railScroll?: SearchRailScroll;
|
|
1029
1107
|
readonly railSurface?: SearchRailSurface;
|
|
1030
1108
|
readonly blockRhythm?: SearchBlockRhythm;
|
|
1031
1109
|
readonly stickyToolbar?: SearchToolbarPin;
|
|
@@ -1082,6 +1160,22 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
|
|
|
1082
1160
|
*/
|
|
1083
1161
|
const footerBar: FacetPanelPaneProps["footerBar"] =
|
|
1084
1162
|
props.footerBar ?? (layout === "sheet" ? undefined : "static");
|
|
1163
|
+
/*
|
|
1164
|
+
* THE RAIL'S OWN GEOMETRY, under `railScroll` — one element, one ref, and a
|
|
1165
|
+
* measurement that only runs in the arm that needs it.
|
|
1166
|
+
*
|
|
1167
|
+
* The ref is on the rail for the whole life of the page: the fit answer must
|
|
1168
|
+
* not arrive by REMOUNTING the column. Ticking a facet re-renders the panel
|
|
1169
|
+
* inside this box; if the box itself were replaced, the browser would put
|
|
1170
|
+
* the new one at the top of its flow and a person three screens down the
|
|
1171
|
+
* results would be thrown back up the page — which is the very thing this
|
|
1172
|
+
* arm exists to prevent.
|
|
1173
|
+
*/
|
|
1174
|
+
const railRef = useRef<HTMLDivElement | null>(null);
|
|
1175
|
+
const railFits = useRailFits(railRef, props.railScroll === "page");
|
|
1176
|
+
/* The skin's bar dresses a scroll port, and under `"page"` there is none. */
|
|
1177
|
+
const railStyled =
|
|
1178
|
+
props.railScroll !== "page" && props.railScrollbar !== "system";
|
|
1085
1179
|
// Controlled or not, decided by the PRESENCE of `filtersOpen` and read once
|
|
1086
1180
|
// per render — the state the page keeps is only ever the uncontrolled half,
|
|
1087
1181
|
// and a controlled host's value is never copied into it (copying it is how
|
|
@@ -1270,14 +1364,30 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
|
|
|
1270
1364
|
*/
|
|
1271
1365
|
const phoneToolbar = layout === "sheet";
|
|
1272
1366
|
const toolbar = phoneToolbar ? (
|
|
1367
|
+
/* `wrap` at BOTH levels, and it is the whole fix for what a 360px row did
|
|
1368
|
+
to this pair of controls. The view switch and the sort select are one
|
|
1369
|
+
unit — "how they are arranged, in what order" — and each holds the width
|
|
1370
|
+
it needs (the switch its glyphs, the select its longest label). A line
|
|
1371
|
+
too short for the pair therefore breaks BETWEEN the unit and the
|
|
1372
|
+
surface's action, and, failing that, between the two controls — rather
|
|
1373
|
+
than cutting the trailing one mid-word, which is what a shrinking
|
|
1374
|
+
segmented control did: "Grid" arrived as "Gri" behind the select's
|
|
1375
|
+
leading edge, with nothing on screen to say a control had been cut. */
|
|
1273
1376
|
<Flex
|
|
1274
1377
|
align="center"
|
|
1275
1378
|
justify="space-between"
|
|
1276
1379
|
gap={spacing[2]}
|
|
1380
|
+
wrap
|
|
1277
1381
|
style={{ width: "100%" }}
|
|
1278
1382
|
>
|
|
1279
|
-
<Flex
|
|
1280
|
-
|
|
1383
|
+
<Flex
|
|
1384
|
+
align="center"
|
|
1385
|
+
gap={spacing[2]}
|
|
1386
|
+
wrap
|
|
1387
|
+
style={{ minWidth: 0, flex: "0 1 auto" }}
|
|
1388
|
+
data-testid="search-toolbar-arrangement"
|
|
1389
|
+
>
|
|
1390
|
+
<ViewSwitch views={views} value={view.id} onChange={changeView} compact />
|
|
1281
1391
|
<SortSelect compact />
|
|
1282
1392
|
</Flex>
|
|
1283
1393
|
{props.resultsAction}
|
|
@@ -1503,18 +1613,25 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
|
|
|
1503
1613
|
) : showFilters ? (
|
|
1504
1614
|
<Flex align="flex-start" gap={spacing[5]} data-testid="search-page-columns">
|
|
1505
1615
|
<div
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1616
|
+
ref={railRef}
|
|
1617
|
+
className={railStyled ? `${RAIL_CLASS} ${RAIL_SCROLLBAR_CLASS}` : RAIL_CLASS}
|
|
1618
|
+
style={railStyle(props.railTop, props.railScroll, railFits)}
|
|
1619
|
+
{...(props.railScroll === "page"
|
|
1620
|
+
? {
|
|
1621
|
+
/* What the column IS doing, on the element that is doing it:
|
|
1622
|
+
a stand reads the arm and the measured answer instead of
|
|
1623
|
+
inferring both from a computed style. */
|
|
1624
|
+
"data-rail-scroll": "page",
|
|
1625
|
+
"data-rail-sticky": String(railFits),
|
|
1626
|
+
}
|
|
1627
|
+
: {})}
|
|
1512
1628
|
>
|
|
1513
1629
|
{/* The rail's scrollbar, in the gutter and in the token palette —
|
|
1514
1630
|
see `railScrollbarCss`. Hoisted, deduped by `href`. Not mounted
|
|
1515
|
-
at all under `"system"
|
|
1516
|
-
|
|
1517
|
-
|
|
1631
|
+
at all under `"system"` — nor under `railScroll="page"`, where
|
|
1632
|
+
there is no scroll port to dress: a sheet whose only selector is
|
|
1633
|
+
a class nothing carries is dead weight in the document. */}
|
|
1634
|
+
{railStyled && (
|
|
1518
1635
|
<style href={RAIL_STYLE_HREF} precedence="default">
|
|
1519
1636
|
{railScrollbarCss()}
|
|
1520
1637
|
</style>
|
|
@@ -1569,6 +1686,7 @@ export function SearchPage(props: SearchPageProps): ReactElement {
|
|
|
1569
1686
|
filtersLayout,
|
|
1570
1687
|
railTop,
|
|
1571
1688
|
railScrollbar,
|
|
1689
|
+
railScroll,
|
|
1572
1690
|
railSurface,
|
|
1573
1691
|
blockRhythm,
|
|
1574
1692
|
stickyToolbar,
|
|
@@ -1637,6 +1755,7 @@ export function SearchPage(props: SearchPageProps): ReactElement {
|
|
|
1637
1755
|
{...(filtersLayout !== undefined ? { filtersLayout } : {})}
|
|
1638
1756
|
{...(railTop !== undefined ? { railTop } : {})}
|
|
1639
1757
|
{...(railScrollbar !== undefined ? { railScrollbar } : {})}
|
|
1758
|
+
{...(railScroll !== undefined ? { railScroll } : {})}
|
|
1640
1759
|
{...(railSurface !== undefined ? { railSurface } : {})}
|
|
1641
1760
|
{...(blockRhythm !== undefined ? { blockRhythm } : {})}
|
|
1642
1761
|
{...(stickyToolbar !== undefined ? { stickyToolbar } : {})}
|
|
@@ -66,7 +66,15 @@ export const SORT_SELECT_CHROME = 40;
|
|
|
66
66
|
*/
|
|
67
67
|
const COMPACT_WRAP: CSSProperties = {
|
|
68
68
|
display: "inline-grid",
|
|
69
|
-
|
|
69
|
+
// `0 0 auto`, not `0 1 auto`: the cell is already the width of the longest
|
|
70
|
+
// label, and letting it SHRINK below that is how a sort select ends up
|
|
71
|
+
// narrower than its own longest option — and, on a two-control phone
|
|
72
|
+
// toolbar, how it takes that width off the control beside it instead. The
|
|
73
|
+
// group wraps as a unit when the line is too short for both; it does not
|
|
74
|
+
// squeeze. `max-content` states the same floor for a consumer stylesheet
|
|
75
|
+
// that resets `flex`.
|
|
76
|
+
flex: "0 0 auto",
|
|
77
|
+
minInlineSize: "max-content",
|
|
70
78
|
};
|
|
71
79
|
|
|
72
80
|
const COMPACT_SIZER: CSSProperties = {
|