@stapel/search-react 0.32.7 → 0.33.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 +72 -0
- package/README.md +66 -3
- package/dist/default/PartitionChips.d.ts +7 -8
- package/dist/default/PartitionChips.d.ts.map +1 -1
- package/dist/default/PartitionChips.js +54 -32
- package/dist/default/PartitionChips.js.map +1 -1
- package/dist/default/SearchPage.d.ts +59 -2
- package/dist/default/SearchPage.d.ts.map +1 -1
- package/dist/default/SearchPage.js +24 -4
- package/dist/default/SearchPage.js.map +1 -1
- package/dist/default/SearchResultsPane.d.ts +55 -0
- package/dist/default/SearchResultsPane.d.ts.map +1 -1
- package/dist/default/SearchResultsPane.js +91 -2
- package/dist/default/SearchResultsPane.js.map +1 -1
- package/dist/default/index.d.ts +3 -3
- package/dist/default/index.d.ts.map +1 -1
- package/dist/default/index.js +2 -2
- package/dist/default/index.js.map +1 -1
- package/llms.txt +3 -3
- package/manifest.json +3 -1
- package/nav-manifest.json +1 -1
- package/package.json +4 -4
- package/src/analytics/generated/events.json +1 -1
- package/src/default/PartitionChips.tsx +84 -44
- package/src/default/SearchPage.tsx +73 -1
- package/src/default/SearchResultsPane.tsx +153 -6
- package/src/default/index.ts +3 -0
|
@@ -77,6 +77,34 @@ export type SearchResultsWrapper = (items: readonly SearchItem[], results: React
|
|
|
77
77
|
* and the 2560px pane the constant was written against is still capped.
|
|
78
78
|
*/
|
|
79
79
|
export declare const RESULTS_MAX_WIDTH = 1400;
|
|
80
|
+
/**
|
|
81
|
+
* The class on the row that carries the results toolbar — the sort control, the
|
|
82
|
+
* view switch, the page size, the count and the surface's own action.
|
|
83
|
+
*
|
|
84
|
+
* The row had no element of its own: no class, no `data-testid`, and in the
|
|
85
|
+
* compact header it was one child of a 112px vertical stack. A host that wanted
|
|
86
|
+
* it pinned under a fixed header therefore had to reach it with a `:has()` on
|
|
87
|
+
* the heading beside it, a `display: contents` to drop the stack's box, and the
|
|
88
|
+
* pane's own breakpoint restated in a media query — three rules aimed at a
|
|
89
|
+
* shape the pane could change under them at any release.
|
|
90
|
+
*
|
|
91
|
+
* It is the same class in BOTH header shapes, and in both it names the row that
|
|
92
|
+
* would pin: the WIDE header block (heading, count and toolbar on one line —
|
|
93
|
+
* the block IS the row) and, in `header="compact"`, the toolbar alone, because
|
|
94
|
+
* pinning the compact stack would put ~112px of chrome under a 56px header on a
|
|
95
|
+
* 390px screen.
|
|
96
|
+
*/
|
|
97
|
+
export declare const RESULTS_TOOLBAR_CLASS = "stapel-search-results-toolbar";
|
|
98
|
+
/**
|
|
99
|
+
* Where {@link SearchResultsPaneProps.stickyToolbar} pins the row.
|
|
100
|
+
*
|
|
101
|
+
* `top` is a CSS length — a number is pixels, a string is taken as written, so
|
|
102
|
+
* `top: "var(--stapel-header-height)"` reads the height `<PublicShell>`
|
|
103
|
+
* publishes rather than restating it. Default `0`.
|
|
104
|
+
*/
|
|
105
|
+
export interface SearchToolbarPin {
|
|
106
|
+
readonly top?: number | string;
|
|
107
|
+
}
|
|
80
108
|
/**
|
|
81
109
|
* The results grid. `auto-fill` + `minmax(260px, 1fr)`: as many columns as fit,
|
|
82
110
|
* each at least a readable card and never wider than its share — and the same
|
|
@@ -280,6 +308,33 @@ export interface SearchResultsPaneProps extends ThemeModeProp {
|
|
|
280
308
|
* viewport is not spent saying "Results" over a list of results.
|
|
281
309
|
*/
|
|
282
310
|
readonly header?: "banner" | "compact";
|
|
311
|
+
/**
|
|
312
|
+
* PIN the toolbar row under whatever chrome is above this pane.
|
|
313
|
+
*
|
|
314
|
+
* ```tsx
|
|
315
|
+
* // the height <PublicShell> publishes, read rather than restated
|
|
316
|
+
* <SearchResultsPane stickyToolbar={{ top: "var(--stapel-header-height)" }} />
|
|
317
|
+
* ```
|
|
318
|
+
*
|
|
319
|
+
* A catalogue page is thirty cards long and the control that reorders them is
|
|
320
|
+
* at the top of it, so by the fourth row the sort is a screenful above the
|
|
321
|
+
* list it sorts — the same argument that made the filter rail sticky, applied
|
|
322
|
+
* to the other column.
|
|
323
|
+
*
|
|
324
|
+
* It pins the row the pane ACTUALLY DREW, which is why this is a prop and not
|
|
325
|
+
* a host's stylesheet: the pane knows which of its two header shapes it is in
|
|
326
|
+
* and a sheet has to guess. In `"banner"` the whole header block pins (it is
|
|
327
|
+
* one line: heading, count, toolbar). In `"compact"` the toolbar alone pins —
|
|
328
|
+
* one row, the height of one phone control — because the stack it sits in is
|
|
329
|
+
* ~112px and that is not a bar anybody can pin under a 56px header.
|
|
330
|
+
*
|
|
331
|
+
* Two things it does NOT do, both deliberate: it adds no padding (see
|
|
332
|
+
* {@link toolbarPinStyle} — a pinned bar that grows to breathe has to give
|
|
333
|
+
* the room back, and which spacing that is belongs to the host), and it draws
|
|
334
|
+
* no second sort control. There is exactly one on a results page, and this
|
|
335
|
+
* pins it where it stands.
|
|
336
|
+
*/
|
|
337
|
+
readonly stickyToolbar?: SearchToolbarPin;
|
|
283
338
|
/**
|
|
284
339
|
* The category's feature schema, used ONLY to name an applied filter in the
|
|
285
340
|
* empty state's exits ("Without Brand" rather than "Without vendor").
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchResultsPane.d.ts","sourceRoot":"","sources":["../../src/default/SearchResultsPane.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"SearchResultsPane.d.ts","sourceRoot":"","sources":["../../src/default/SearchResultsPane.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { Flex, Typography } from "antd";
|
|
3
3
|
import { errorCode, useT, useTPlural } from "@stapel/core";
|
|
4
4
|
import { EmptyState, ErrorAlert, GatedButton, LoadList, SkinTheme, visuallyHidden, } from "@stapel/tokens-antd/skin";
|
|
5
|
-
import { breakpoints, spacing } from "@stapel/tokens";
|
|
5
|
+
import { breakpoints, cssVar, spacing } from "@stapel/tokens";
|
|
6
6
|
import { SearchResults } from "../headless/SearchResults.js";
|
|
7
7
|
import { useScorerNames } from "../headless/useScorerNames.js";
|
|
8
8
|
import { SEARCH_WINDOW_EXCEEDED } from "../i18n/errorsMap.js";
|
|
@@ -29,6 +29,86 @@ import { SearchResultCard } from "./SearchResultCard.js";
|
|
|
29
29
|
* and the 2560px pane the constant was written against is still capped.
|
|
30
30
|
*/
|
|
31
31
|
export const RESULTS_MAX_WIDTH = 1400;
|
|
32
|
+
/**
|
|
33
|
+
* The class on the row that carries the results toolbar — the sort control, the
|
|
34
|
+
* view switch, the page size, the count and the surface's own action.
|
|
35
|
+
*
|
|
36
|
+
* The row had no element of its own: no class, no `data-testid`, and in the
|
|
37
|
+
* compact header it was one child of a 112px vertical stack. A host that wanted
|
|
38
|
+
* it pinned under a fixed header therefore had to reach it with a `:has()` on
|
|
39
|
+
* the heading beside it, a `display: contents` to drop the stack's box, and the
|
|
40
|
+
* pane's own breakpoint restated in a media query — three rules aimed at a
|
|
41
|
+
* shape the pane could change under them at any release.
|
|
42
|
+
*
|
|
43
|
+
* It is the same class in BOTH header shapes, and in both it names the row that
|
|
44
|
+
* would pin: the WIDE header block (heading, count and toolbar on one line —
|
|
45
|
+
* the block IS the row) and, in `header="compact"`, the toolbar alone, because
|
|
46
|
+
* pinning the compact stack would put ~112px of chrome under a 56px header on a
|
|
47
|
+
* 390px screen.
|
|
48
|
+
*/
|
|
49
|
+
export const RESULTS_TOOLBAR_CLASS = "stapel-search-results-toolbar";
|
|
50
|
+
/**
|
|
51
|
+
* The controls' own line: it may not become two.
|
|
52
|
+
*
|
|
53
|
+
* A wrapping row changes height when the count lands — the count arrives with
|
|
54
|
+
* the answer, one render after the toolbar was already on screen — and a bar
|
|
55
|
+
* that grows while it is pinned pushes the first cards of the feed down under
|
|
56
|
+
* the reader's eye. `nowrap` makes the height a constant; `min-inline-size: 0`
|
|
57
|
+
* plus `overflow-x: auto` is what a row that cannot wrap does with the overflow
|
|
58
|
+
* instead, which on a phone is the scroll strip every sort row already is.
|
|
59
|
+
*/
|
|
60
|
+
const TOOLBAR_ROW = {
|
|
61
|
+
flexWrap: "nowrap",
|
|
62
|
+
minInlineSize: 0,
|
|
63
|
+
overflowX: "auto",
|
|
64
|
+
// Thin, and only when there is something to scroll to — the same reason the
|
|
65
|
+
// filter rail states its own: an invisible scroll port is indistinguishable
|
|
66
|
+
// from a row that ends where it was cut.
|
|
67
|
+
scrollbarWidth: "thin",
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* The compact header's stack, WITHOUT its box.
|
|
71
|
+
*
|
|
72
|
+
* `position: sticky` travels inside its parent, so a toolbar nested in a 112px
|
|
73
|
+
* stack can move 112px and no further — the parent has to be the results
|
|
74
|
+
* column, which is as tall as the feed. `display: contents` drops the stack's
|
|
75
|
+
* box and hands its three rows straight to that column, which is the same
|
|
76
|
+
* device the fleet's storefront was writing in its own sheet.
|
|
77
|
+
*
|
|
78
|
+
* The one visible consequence: the gap between heading, toolbar and count
|
|
79
|
+
* becomes the column's rather than the stack's.
|
|
80
|
+
*/
|
|
81
|
+
const COMPACT_STACK = { display: "contents" };
|
|
82
|
+
/** The compact shape's toolbar box — the row the pin acts on. */
|
|
83
|
+
const COMPACT_TOOLBAR = {
|
|
84
|
+
display: "flex",
|
|
85
|
+
alignItems: "center",
|
|
86
|
+
...TOOLBAR_ROW,
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* The pin itself, and it is NET-ZERO in flow: `position` and a layer and a
|
|
90
|
+
* background, and not one pixel of padding.
|
|
91
|
+
*
|
|
92
|
+
* A pinned bar that grows padding to breathe over the cards passing under it
|
|
93
|
+
* has to take the same padding back as negative margin or the column pays for
|
|
94
|
+
* it, and the pair does not know which of those two a host's spacing wants. A
|
|
95
|
+
* row that occupies exactly the box it already occupied cannot shift anything.
|
|
96
|
+
*/
|
|
97
|
+
function toolbarPinStyle(pin) {
|
|
98
|
+
if (pin === undefined)
|
|
99
|
+
return undefined;
|
|
100
|
+
return {
|
|
101
|
+
position: "sticky",
|
|
102
|
+
top: pin.top ?? 0,
|
|
103
|
+
// Over the cards, under the page's own chrome — and under antd's popups,
|
|
104
|
+
// so the sort select still opens over its own bar.
|
|
105
|
+
zIndex: 1,
|
|
106
|
+
// Opaque, or the cards scroll THROUGH the bar. The theme's own surface
|
|
107
|
+
// role, resolved at paint time, so it follows the brand and the dark side
|
|
108
|
+
// without a second colour being written here.
|
|
109
|
+
background: cssVar("surface"),
|
|
110
|
+
};
|
|
111
|
+
}
|
|
32
112
|
/**
|
|
33
113
|
* The results grid. `auto-fill` + `minmax(260px, 1fr)`: as many columns as fit,
|
|
34
114
|
* each at least a readable card and never wider than its share — and the same
|
|
@@ -174,6 +254,7 @@ export function SearchResultsPane(props) {
|
|
|
174
254
|
// The compact arm's caption: the host's word is drawn, the pair's own is
|
|
175
255
|
// not, and `headingVisible` overrides either way — see that prop.
|
|
176
256
|
const compactHeadingSeen = props.headingVisible ?? props.heading !== undefined;
|
|
257
|
+
const toolbarPin = toolbarPinStyle(props.stickyToolbar);
|
|
177
258
|
const columnRules = props.columns === undefined || props.layout === "list"
|
|
178
259
|
? null
|
|
179
260
|
: resultsColumnsCss(props.columns);
|
|
@@ -197,7 +278,15 @@ export function SearchResultsPane(props) {
|
|
|
197
278
|
return (_jsx(SkinTheme, { surface: "base", ...(props.mode !== undefined ? { mode: props.mode } : {}), style: {
|
|
198
279
|
width: "100%",
|
|
199
280
|
...(maxWidth !== null ? { maxWidth } : {}),
|
|
200
|
-
}, children: _jsx(SearchResults, { ...(props.enabled !== undefined ? { enabled: props.enabled } : {}), children: (bag) => (_jsxs(Flex, { vertical: true, gap: spacing[4], children: [props.lead !== undefined && (_jsx("div", { "data-testid": "search-results-lead", children: props.lead })), props.header === "compact" ? (
|
|
281
|
+
}, children: _jsx(SearchResults, { ...(props.enabled !== undefined ? { enabled: props.enabled } : {}), children: (bag) => (_jsxs(Flex, { vertical: true, gap: spacing[4], children: [props.lead !== undefined && (_jsx("div", { "data-testid": "search-results-lead", children: props.lead })), props.header === "compact" ? (
|
|
282
|
+
/* No box of its own — see `COMPACT_STACK`. The three rows are
|
|
283
|
+
items of the results COLUMN, so the toolbar between them has a
|
|
284
|
+
parent as tall as the feed to travel in. */
|
|
285
|
+
_jsxs(Flex, { vertical: true, gap: spacing[2], style: COMPACT_STACK, "data-testid": "search-results-header-compact", children: [_jsx(Typography.Title, { level: props.headingLevel ?? 4, style: compactHeadingSeen ? { margin: 0 } : visuallyHidden, "data-testid": "search-results-heading", "data-heading": compactHeadingSeen ? "seen" : "hidden", children: props.heading ?? t(SEARCH_I18N_KEYS.resultsTitle) }), _jsx("div", { className: RESULTS_TOOLBAR_CLASS, "data-testid": "search-results-toolbar", style: { ...COMPACT_TOOLBAR, ...toolbarPin }, children: props.toolbar }), _jsx(Count, { bag: bag })] })) : (
|
|
286
|
+
/* The wide shape's header block IS the toolbar row: one line,
|
|
287
|
+
heading at one end, count and controls at the other, and a
|
|
288
|
+
direct child of the results column — so it pins as it stands. */
|
|
289
|
+
_jsxs(Flex, { justify: "space-between", align: "center", gap: spacing[2], className: RESULTS_TOOLBAR_CLASS, "data-testid": "search-results-toolbar", ...(toolbarPin !== undefined ? { style: toolbarPin } : {}), children: [_jsx(Typography.Title, { level: props.headingLevel ?? 4, style: { margin: 0, minInlineSize: 0 }, "data-testid": "search-results-heading", children: props.heading ?? t(SEARCH_I18N_KEYS.resultsTitle) }), _jsxs(Flex, { align: "center", gap: spacing[3], style: TOOLBAR_ROW, children: [_jsx(Count, { bag: bag }), props.toolbar] })] })), _jsx(DegradationNotice, { degradations: bag.degradations, variant: props.degradationNotice ?? "banner", scorerName: scorerName }), props.otherCategories === true && (_jsx(OtherCategoriesLine, { ...(props.enabled !== undefined ? { enabled: props.enabled } : {}), ...(props.categoryName !== undefined
|
|
201
290
|
? { categoryName: props.categoryName }
|
|
202
291
|
: {}), ...(props.categoryHref !== undefined
|
|
203
292
|
? { categoryHref: props.categoryHref }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchResultsPane.js","sourceRoot":"","sources":["../../src/default/SearchResultsPane.tsx"],"names":[],"mappings":";AA2BA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EACL,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,cAAc,GACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchResultsPane.js","sourceRoot":"","sources":["../../src/default/SearchResultsPane.tsx"],"names":[],"mappings":"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"}
|
package/dist/default/index.d.ts
CHANGED
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
* `SkinTheme` from the substrate instead — same props, one implementation, and
|
|
39
39
|
* a runtime `data-theme` flip actually repaints it.
|
|
40
40
|
*/
|
|
41
|
-
export { SearchPage, RAIL_CLASS, RAIL_STYLE_HREF, railScrollbarCss, } from "./SearchPage.js";
|
|
41
|
+
export { SearchPage, RAIL_CLASS, RAIL_STYLE_HREF, railScrollbarCss, railStyle, } from "./SearchPage.js";
|
|
42
42
|
export type { SearchPageProps, SearchFiltersLayout, SearchRailFrom, } from "./SearchPage.js";
|
|
43
43
|
export { OtherCategoriesLine, OTHER_CATEGORIES_CLASS, OTHER_CATEGORIES_PHONE_ROWS, OTHER_CATEGORIES_SLOT_MIN_HEIGHT, OTHER_CATEGORIES_STYLE_HREF, otherCategoriesCss, otherCategoriesSlotHeight, } from "./OtherCategoriesLine.js";
|
|
44
44
|
export type { OtherCategoriesLineProps, OtherCategoryHrefResolver, OtherCategoryNamer, } from "./OtherCategoriesLine.js";
|
|
45
|
-
export { SearchResultsPane, RESULTS_MAX_WIDTH, RESULTS_AUTO_FILL_COLUMNS, RESULTS_COLUMNS_CLASS, RESULTS_COLUMNS_STYLE_HREF, resultsColumnsCss, } from "./SearchResultsPane.js";
|
|
46
|
-
export type { ResultsColumns, SearchResultsPaneProps, SearchResultsRenderer, SearchResultsWrapper, } from "./SearchResultsPane.js";
|
|
45
|
+
export { SearchResultsPane, RESULTS_MAX_WIDTH, RESULTS_AUTO_FILL_COLUMNS, RESULTS_COLUMNS_CLASS, RESULTS_COLUMNS_STYLE_HREF, RESULTS_TOOLBAR_CLASS, resultsColumnsCss, } from "./SearchResultsPane.js";
|
|
46
|
+
export type { ResultsColumns, SearchResultsPaneProps, SearchResultsRenderer, SearchResultsWrapper, SearchToolbarPin, } from "./SearchResultsPane.js";
|
|
47
47
|
export { FilterChips, CHIP_BAND_ORDER, CHIP_ROW_CAP, CHIP_ROW_CLASS, CHIP_ROW_MIN_HEIGHT, CHIP_ROW_STYLE_HREF, appliedChipTestId, appliedRowMinHeight, buildAppliedChips, capChipRow, categoryLeaf, chipRowCss, orderChipFilters, rangeChipText, rangeLabelSource, } from "./FilterChips.js";
|
|
48
48
|
export type { AppliedChip, AppliedChipTarget, ChipBand, ChipSpec, FilterChipsAppliedProps, FilterChipsCommonProps, FilterChipsMode, FilterChipsOpenerProps, FilterChipsProps, } from "./FilterChips.js";
|
|
49
49
|
export { EmptyExits, RADIUS_WIDEN_FACTOR, parentCategory } from "./EmptyExits.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,OAAO,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,
|
|
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
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
* a runtime `data-theme` flip actually repaints it.
|
|
40
40
|
*/
|
|
41
41
|
// ── surfaces ────────────────────────────────────────────────────────────────
|
|
42
|
-
export { SearchPage, RAIL_CLASS, RAIL_STYLE_HREF, railScrollbarCss, } from "./SearchPage.js";
|
|
42
|
+
export { SearchPage, RAIL_CLASS, RAIL_STYLE_HREF, railScrollbarCss, railStyle, } from "./SearchPage.js";
|
|
43
43
|
export { OtherCategoriesLine, OTHER_CATEGORIES_CLASS, OTHER_CATEGORIES_PHONE_ROWS, OTHER_CATEGORIES_SLOT_MIN_HEIGHT, OTHER_CATEGORIES_STYLE_HREF, otherCategoriesCss, otherCategoriesSlotHeight, } from "./OtherCategoriesLine.js";
|
|
44
|
-
export { SearchResultsPane, RESULTS_MAX_WIDTH, RESULTS_AUTO_FILL_COLUMNS, RESULTS_COLUMNS_CLASS, RESULTS_COLUMNS_STYLE_HREF, resultsColumnsCss, } from "./SearchResultsPane.js";
|
|
44
|
+
export { SearchResultsPane, RESULTS_MAX_WIDTH, RESULTS_AUTO_FILL_COLUMNS, RESULTS_COLUMNS_CLASS, RESULTS_COLUMNS_STYLE_HREF, RESULTS_TOOLBAR_CLASS, resultsColumnsCss, } from "./SearchResultsPane.js";
|
|
45
45
|
export { FilterChips, CHIP_BAND_ORDER, CHIP_ROW_CAP, CHIP_ROW_CLASS, CHIP_ROW_MIN_HEIGHT, CHIP_ROW_STYLE_HREF, appliedChipTestId, appliedRowMinHeight, buildAppliedChips, capChipRow, categoryLeaf, chipRowCss, orderChipFilters, rangeChipText, rangeLabelSource, } from "./FilterChips.js";
|
|
46
46
|
export { EmptyExits, RADIUS_WIDEN_FACTOR, parentCategory } from "./EmptyExits.js";
|
|
47
47
|
export { LocationSummaryLine } from "./LocationSummaryLine.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,UAAU,EACV,eAAe,EACf,gBAAgB,
|
|
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,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,SAAS,GACV,MAAM,iBAAiB,CAAC;AAOzB,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,EAC3B,gCAAgC,EAChC,2BAA2B,EAC3B,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,0BAA0B,CAAC;AAOlC,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,yBAAyB,EACzB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAShC,OAAO,EACL,WAAW,EACX,eAAe,EACf,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAY1B,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAOhC,0EAA0E;AAC1E,uEAAuE;AACvE,8EAA8E;AAC9E,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,0BAA0B,GAC3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAGtF,+EAA+E;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEhF,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD,+EAA+E;AAC/E,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAK3D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
|
package/llms.txt
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @stapel/search-react 0.
|
|
1
|
+
# @stapel/search-react 0.33.0
|
|
2
2
|
|
|
3
3
|
Headless React flow pair for stapel-search (contract >=0.16 <0.17) — business + state, zero visual opinion.
|
|
4
4
|
Built on @stapel/core: typed client + StapelApiError envelope, auth token refresh,
|
|
@@ -85,14 +85,14 @@ const { tracked } = useTracked();
|
|
|
85
85
|
- search.language-select → <LanguageSelect> [offered|from-a-link] demo/LanguageSelect.demo.tsx
|
|
86
86
|
- search.location-summary → <LocationSummaryLine> [everywhere|placed|narrowed|long-place|wide] demo/LocationSummaryLine.demo.tsx
|
|
87
87
|
- search.other-categories-line → <OtherCategoriesLine> [line|narrow|empty] demo/OtherCategoriesLine.demo.tsx
|
|
88
|
-
- search.page → <SearchPage> [desktop|phone|catalogue-leaf|unreadable-link] demo/SearchPage.demo.tsx
|
|
88
|
+
- search.page → <SearchPage> [desktop|phone|catalogue-leaf|under-a-header|unreadable-link] demo/SearchPage.demo.tsx
|
|
89
89
|
- search.page-size-select → <PageSizeSelect> [ladder|off-ladder] demo/PageSizeSelect.demo.tsx
|
|
90
90
|
- search.partition-chips → <PartitionChips> [parent|child] demo/PartitionChips.demo.tsx
|
|
91
91
|
- search.popular-values → <PopularValues> [desktop|responsive|narrow-column] demo/PopularValues.demo.tsx
|
|
92
92
|
- search.range-filter-row → <RangeFilterRow> [untouched|applied] demo/RangeFilterRow.demo.tsx
|
|
93
93
|
- search.ranking-pane → <RankingDisclosurePane> [desktop|phone] demo/RankingDisclosurePane.demo.tsx
|
|
94
94
|
- search.result-card → <SearchResultCard> [gallery|promoted|unresolved|plain] demo/SearchResultCard.demo.tsx
|
|
95
|
-
- search.results-pane → <SearchResultsPane> [desktop|phone|empty] demo/SearchResultsPane.demo.tsx
|
|
95
|
+
- search.results-pane → <SearchResultsPane> [desktop|phone|sticky-toolbar|empty] demo/SearchResultsPane.demo.tsx
|
|
96
96
|
- search.sort-select → <SortSelect> [no-centre|with-centre] demo/SortSelect.demo.tsx
|
|
97
97
|
- search.url-issue-notice → <UrlIssueNotice> [two-issues|one-issue] demo/UrlIssueNotice.demo.tsx
|
|
98
98
|
Each source file is the canonical usage snippet (open the default variant).
|
package/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$generated": "by scripts/gen-manifest.mjs — do not edit; drift-gated (pnpm gen:manifest:check)",
|
|
3
3
|
"package": "@stapel/search-react",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.33.0",
|
|
5
5
|
"backend": {
|
|
6
6
|
"module": "stapel-search",
|
|
7
7
|
"contract": ">=0.16 <0.17"
|
|
@@ -581,6 +581,7 @@
|
|
|
581
581
|
"desktop",
|
|
582
582
|
"phone",
|
|
583
583
|
"catalogue-leaf",
|
|
584
|
+
"under-a-header",
|
|
584
585
|
"unreadable-link"
|
|
585
586
|
],
|
|
586
587
|
"source": "demo/SearchPage.demo.tsx"
|
|
@@ -693,6 +694,7 @@
|
|
|
693
694
|
"variants": [
|
|
694
695
|
"desktop",
|
|
695
696
|
"phone",
|
|
697
|
+
"sticky-toolbar",
|
|
696
698
|
"empty"
|
|
697
699
|
],
|
|
698
700
|
"source": "demo/SearchResultsPane.demo.tsx"
|
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.33.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",
|
|
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",
|
|
61
61
|
"path": "dist/default/index.js",
|
|
62
|
-
"limit": "31 KB"
|
|
62
|
+
"limit": "31.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",
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
"size-limit": "^11.2.0",
|
|
116
116
|
"typescript": "^5.8.3",
|
|
117
117
|
"vitest": "^3.2.4",
|
|
118
|
-
"@stapel/attributes-react": "^0.16.
|
|
118
|
+
"@stapel/attributes-react": "^0.16.5",
|
|
119
119
|
"@stapel/core": "^0.25.4",
|
|
120
120
|
"@stapel/image": "^0.4.2",
|
|
121
121
|
"@stapel/showcase": "^0.3.0",
|
|
@@ -25,6 +25,28 @@
|
|
|
25
25
|
* with roving tabindex is the pattern for "one of these": Tab reaches the row
|
|
26
26
|
* once and lands on the chosen chip, the arrow keys move along it, and the
|
|
27
27
|
* group's own name says what is being chosen.
|
|
28
|
+
*
|
|
29
|
+
* ── The two variants are two CONTROLS, and each one is real ───────────────
|
|
30
|
+
*
|
|
31
|
+
* `chips` is this file's own row of `role="radio"` buttons — pills that wrap,
|
|
32
|
+
* the phone's shape.
|
|
33
|
+
*
|
|
34
|
+
* `segmented` is antd's `Segmented`, and it used to be this same row with a
|
|
35
|
+
* shared border drawn round it. That was a claim nothing backed: the walker
|
|
36
|
+
* read `data-variant="segmented"` with `role="radiogroup"` and found
|
|
37
|
+
* `.ant-segmented` zero times, `input[type=radio]` zero times, and plain
|
|
38
|
+
* `ant-btn` inside — on both axes of two categories (D304). A row that names
|
|
39
|
+
* a control it does not render sends the next reader looking for a bug in the
|
|
40
|
+
* wrong place, and hand-rolling the joined look was ~30 lines re-deciding
|
|
41
|
+
* geometry the design system already owns.
|
|
42
|
+
*
|
|
43
|
+
* So the segmented arm IS the design system's control now, and its radiogroup
|
|
44
|
+
* is the browser's rather than ours: real `input[type=radio]` sharing one
|
|
45
|
+
* `name`, so the selected state is the radio's own `checked` (`aria-checked`
|
|
46
|
+
* is how a BUTTON fakes what a radio has), the arrow keys are the control's,
|
|
47
|
+
* and one Tab stop is the platform's doing. The per-cell test ids stay where
|
|
48
|
+
* they were, plus `data-checked`, so a probe that reads a snapshot still has
|
|
49
|
+
* the chosen cell without asking the accessibility tree.
|
|
28
50
|
*/
|
|
29
51
|
import { useRef } from "react";
|
|
30
52
|
import type {
|
|
@@ -33,9 +55,9 @@ import type {
|
|
|
33
55
|
ReactElement,
|
|
34
56
|
ReactNode,
|
|
35
57
|
} from "react";
|
|
36
|
-
import { Button } from "antd";
|
|
58
|
+
import { Button, Segmented } from "antd";
|
|
37
59
|
import { useT } from "@stapel/core";
|
|
38
|
-
import {
|
|
60
|
+
import { radii, spacing } from "@stapel/tokens";
|
|
39
61
|
import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
|
|
40
62
|
|
|
41
63
|
/** One child of a partitioned category. `path` is the slash-joined id path
|
|
@@ -61,19 +83,26 @@ export interface PartitionChipsProps {
|
|
|
61
83
|
/**
|
|
62
84
|
* Which shape the row takes. `"chips"` (the default) is the phone's: a
|
|
63
85
|
* wrapping row of rounded pills above the feed. `"segmented"` is the
|
|
64
|
-
* desktop RAIL's — one joined control under the axis's
|
|
65
|
-
* how the reference classified draws the same choice (a
|
|
66
|
-
* all, used, new) and what a 280px column has room for.
|
|
86
|
+
* desktop RAIL's — antd's `Segmented`, one joined control under the axis's
|
|
87
|
+
* own label, which is how the reference classified draws the same choice (a
|
|
88
|
+
* car-type row: all, used, new) and what a 280px column has room for.
|
|
67
89
|
*
|
|
68
|
-
* The SEMANTICS do not vary with it
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
* accessible half of this control for the visible half.
|
|
90
|
+
* The SEMANTICS do not vary with it: both are a `radiogroup` naming itself,
|
|
91
|
+
* with one Tab stop and the arrow keys moving the choice. What varies is
|
|
92
|
+
* who provides them — this file's `role="radio"` buttons in `chips`, the
|
|
93
|
+
* browser's own `input[type=radio]` in `segmented`.
|
|
73
94
|
*/
|
|
74
95
|
readonly variant?: "chips" | "segmented";
|
|
75
96
|
}
|
|
76
97
|
|
|
98
|
+
/**
|
|
99
|
+
* The `value` of the parent cell inside the segmented control. `null` is this
|
|
100
|
+
* component's word for "the parent, unnarrowed" and a radio's value is a
|
|
101
|
+
* string, so the sentinel exists only between here and antd — it never
|
|
102
|
+
* reaches {@link PartitionChipsProps.onChange}, which still reports `null`.
|
|
103
|
+
*/
|
|
104
|
+
const ALL = "__all__";
|
|
105
|
+
|
|
77
106
|
const CHIP: CSSProperties = { borderRadius: radii.full };
|
|
78
107
|
|
|
79
108
|
const ROW: CSSProperties = {
|
|
@@ -82,33 +111,6 @@ const ROW: CSSProperties = {
|
|
|
82
111
|
gap: spacing[2],
|
|
83
112
|
};
|
|
84
113
|
|
|
85
|
-
/**
|
|
86
|
-
* The segmented row: one joined control, no gaps, the group's own outline.
|
|
87
|
-
*
|
|
88
|
-
* `gap: 0` plus a shared border is what makes three buttons read as one
|
|
89
|
-
* control — the thing a rail needs, because a wrapping pill row in a 280px
|
|
90
|
-
* column is two ragged lines. `overflow: hidden` clips the cells' own corners
|
|
91
|
-
* to the group's radius so the ends are round and the joins are square.
|
|
92
|
-
*/
|
|
93
|
-
const SEGMENTED_ROW: CSSProperties = {
|
|
94
|
-
display: "flex",
|
|
95
|
-
gap: 0,
|
|
96
|
-
inlineSize: "100%",
|
|
97
|
-
border: `1px solid ${cssVar("border")}`,
|
|
98
|
-
borderRadius: cssVar("radius-md"),
|
|
99
|
-
overflow: "hidden",
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
/** One cell of the segmented row: an equal share of the width, square joins,
|
|
103
|
-
* no border of its own — the group draws the outline. */
|
|
104
|
-
const SEGMENTED_CELL: CSSProperties = {
|
|
105
|
-
flex: "1 1 0",
|
|
106
|
-
minInlineSize: 0,
|
|
107
|
-
borderRadius: 0,
|
|
108
|
-
borderInline: "none",
|
|
109
|
-
borderBlock: "none",
|
|
110
|
-
};
|
|
111
|
-
|
|
112
114
|
/** The row's cells, as `[value, label]` — the parent first, then the
|
|
113
115
|
* children in catalogue order. */
|
|
114
116
|
function cells(
|
|
@@ -163,30 +165,68 @@ export function PartitionChips(props: PartitionChipsProps): ReactElement {
|
|
|
163
165
|
const active = options.findIndex(([value]) => value === props.value);
|
|
164
166
|
const stop = active >= 0 ? active : 0;
|
|
165
167
|
|
|
166
|
-
const
|
|
168
|
+
const name = props.label ?? t(SEARCH_I18N_KEYS.partitionLabel);
|
|
169
|
+
|
|
170
|
+
if (props.variant === "segmented") {
|
|
171
|
+
// antd's own control: `.ant-segmented`, one `input[type=radio]` per cell
|
|
172
|
+
// under a shared `name`, the selected cell's `checked`, and the arrow keys
|
|
173
|
+
// — the radiogroup this variant used to only claim to be. `role` and
|
|
174
|
+
// `aria-label` reach the root because the component spreads what it is
|
|
175
|
+
// given over its own defaults (which are `radiogroup` and the string
|
|
176
|
+
// "segmented control").
|
|
177
|
+
return (
|
|
178
|
+
<Segmented
|
|
179
|
+
block
|
|
180
|
+
size="small"
|
|
181
|
+
role="radiogroup"
|
|
182
|
+
aria-label={name}
|
|
183
|
+
data-variant="segmented"
|
|
184
|
+
data-testid="partition-chips"
|
|
185
|
+
value={props.value ?? ALL}
|
|
186
|
+
options={options.map(([value, label]) => ({
|
|
187
|
+
value: value ?? ALL,
|
|
188
|
+
label: (
|
|
189
|
+
// The cell's test id and its chosen state, on the one node inside
|
|
190
|
+
// a cell this component owns — antd names the cells itself, and a
|
|
191
|
+
// label a radio is bound to is what a click has to land on.
|
|
192
|
+
<span
|
|
193
|
+
data-testid={`partition-chip-${value ?? "all"}`}
|
|
194
|
+
data-checked={value === props.value ? "true" : "false"}
|
|
195
|
+
>
|
|
196
|
+
{label}
|
|
197
|
+
</span>
|
|
198
|
+
),
|
|
199
|
+
}))}
|
|
200
|
+
onChange={(next) => {
|
|
201
|
+
props.onChange(next === ALL ? null : String(next));
|
|
202
|
+
}}
|
|
203
|
+
/>
|
|
204
|
+
);
|
|
205
|
+
}
|
|
206
|
+
|
|
167
207
|
return (
|
|
168
208
|
<div
|
|
169
|
-
style={
|
|
170
|
-
data-variant=
|
|
209
|
+
style={ROW}
|
|
210
|
+
data-variant="chips"
|
|
171
211
|
ref={row}
|
|
172
212
|
role="radiogroup"
|
|
173
|
-
aria-label={
|
|
213
|
+
aria-label={name}
|
|
174
214
|
data-testid="partition-chips"
|
|
175
215
|
>
|
|
176
216
|
{options.map(([value, label], index) => {
|
|
177
217
|
const selected = value === props.value;
|
|
178
218
|
return (
|
|
179
219
|
<Button
|
|
180
|
-
key={value ??
|
|
220
|
+
key={value ?? ALL}
|
|
181
221
|
size="small"
|
|
182
|
-
|
|
222
|
+
shape="round"
|
|
183
223
|
type={selected ? "primary" : "default"}
|
|
184
224
|
role="radio"
|
|
185
225
|
aria-checked={selected}
|
|
186
226
|
// Roving tabindex: the row is ONE Tab stop and it lands on the
|
|
187
227
|
// chosen chip, not on the first of eight.
|
|
188
228
|
tabIndex={index === stop ? 0 : -1}
|
|
189
|
-
style={
|
|
229
|
+
style={CHIP}
|
|
190
230
|
data-testid={`partition-chip-${value ?? "all"}`}
|
|
191
231
|
data-analytics="none"
|
|
192
232
|
data-analytics-reason="choosing a section is a read, not a flow step"
|