@sensiblestats/widget-react 0.66.0 → 0.67.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sensiblestats/widget-react
 
+## 0.67.0
+
+### Minor Changes
+
+- Match odds card, stage 3: a price card the server sends for the market the user bets on carries `tag: "your_market"`, and the card shows a "Your market" / "İlgilendiğin bahis" label on its market line. A card with no tag or an unknown tag shows no label.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.42.0
+
+## 0.66.1
+
+### Patch Changes
+
+- Match odds card polish: a compact list price with Add to slip off has a name screen readers read, and the 1 X 2 heads are hidden from them; "Show more" moves focus to the first new row; a list price already in the slip shows a tick; the Odds tab never draws a card stat.
+
 ## 0.66.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -72,6 +72,7 @@ var STRINGS = {
     showMore: (n) => `Show ${n} more`,
     oddsLabel: "Odds",
     liveLabel: "Live",
+    yourMarketTag: "Your market",
     marketFloorLabel: "Market price \xB7 not a value pick",
     addToSlip: "Add to slip",
     marketPrices: "Market prices",
@@ -371,6 +372,7 @@ var STRINGS = {
     showMore: (n) => `${n} tane daha g\xF6ster`,
     oddsLabel: "Oran",
     liveLabel: "Canl\u0131",
+    yourMarketTag: "\u0130lgilendi\u011Fin bahis",
     marketFloorLabel: "Piyasa oran\u0131 \xB7 de\u011Fer bahsi de\u011Fil",
     addToSlip: "Kupona ekle",
     marketPrices: "Piyasa fiyatlar\u0131",
@@ -698,6 +700,7 @@ function normalizeUi(cfg) {
     showMore: strings.showMore,
     oddsLabel: strings.oddsLabel,
     liveLabel: strings.liveLabel,
+    yourMarketTag: strings.yourMarketTag,
     marketFloorLabel: strings.marketFloorLabel,
     marketPrices: strings.marketPrices,
     moreLines: strings.moreLines,
@@ -1333,7 +1336,8 @@ function toMarketOddsVM(card) {
     marketDeveloperName: str(card.marketDeveloperName),
     mainLine: str(card.mainLine),
     pinEnabled: card.pinEnabled === true,
-    statText: card.insight && typeof card.insight === "object" ? str(card.insight.text) : void 0
+    statText: card.insight && typeof card.insight === "object" ? str(card.insight.text) : void 0,
+    tag: card.tag === "your_market" ? "your_market" : void 0
   };
 }
 function toOddsMovementVM(card) {
@@ -1480,8 +1484,9 @@ function SlipButton({ selection, shownOdds, marketDeveloperName, selectionLabel,
         disabled: pending || settled,
         onClick,
         children: [
+          settled ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-mol-tick", "aria-hidden": "true", children: "\u2713" }) : null,
           price.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-mol-lab", children: price.label }) : null,
-          shownOdds
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: shownOdds })
         ]
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1948,10 +1953,13 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-bi-team", children: vm.awayTeamName }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Crest2, { kind: "team", url: vm.awayCrest, name: vm.awayTeamName })
         ] }) : vm.fixture ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-mo-teams", children: vm.fixture }) : null,
-        vm.market ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mo-market-row", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-mo-market", children: vm.market }) }) : null
+        vm.market ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ss-w-mo-market-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-mo-market", children: vm.market }),
+          vm.tag === "your_market" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-mo-tag", children: ui?.yourMarketTag ?? "Your market" }) : null
+        ] }) : null
       ] }) : null
     ] }),
-    vm.statText && !hideHeader ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mo-stat", children: vm.statText }) : null,
+    vm.statText && !hideHeader && !pinRef ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mo-stat", children: vm.statText }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ss-w-mo-rows", children: [
       vm.mainRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OddsRow, { vm, row, ui, slip, inSlipIds, history }, row.key)),
       open ? vm.moreRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OddsRow, { vm, row, ui, slip, inSlipIds, history }, row.key)) : null
@@ -2032,6 +2040,7 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 function Cell({ row, cell, ui, slip }) {
   const vm = row.card;
   const selection = vm.addToSlipEnabled ? marketOddsRowToSlipSelection(vm, cell.row, slip.conversationId) : null;
+  const name = `${vm.homeTeamName ?? ""} ${vm.awayTeamName ?? ""}, ${cell.row.selection} ${cell.row.odds}`;
   const button = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     SlipButton,
     {
@@ -2042,7 +2051,7 @@ function Cell({ row, cell, ui, slip }) {
       line: cell.row.line,
       slip,
       ui,
-      price: { label: cell.label, ariaLabel: `${vm.homeTeamName ?? ""} ${vm.awayTeamName ?? ""}, ${cell.row.selection} ${cell.row.odds}` }
+      price: { label: cell.label, ariaLabel: name }
     }
   );
   return (
@@ -2050,18 +2059,19 @@ function Cell({ row, cell, ui, slip }) {
     // and 101.00 two.
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: ["ss-w-mol-cell", cell.row.odds.length >= 5 && "ss-w-mol-cell--wide", cell.row.odds.length >= 6 && "ss-w-mol-cell--wider"].filter(Boolean).join(" "), children: [
       selection && slip.onAddToSlip && ui ? button : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ss-w-mol-price", children: [
-        cell.label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-lab", children: cell.label }) : null,
-        cell.row.odds
+        cell.label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-lab", "aria-hidden": "true", children: cell.label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: cell.row.odds }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-vh", children: name })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(OddsMovementBadge, { previous: cell.row.previousOdds, current: cell.row.odds, direction: cell.row.movementDirection, ui })
     ] })
   );
 }
-function Row({ row, columns, ui, slip, monitor }) {
+function Row({ row, columns, ui, slip, monitor, rowRef }) {
   const vm = row.card;
   const kickoffFallback = vm.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(vm.kickoffUtc) : void 0;
   const when = vm.isLive ? ui?.liveLabel ?? "Live" : vm.kickoffLabel ?? (kickoffFallback ? `${kickoffFallback.dayLabel} ${kickoffFallback.time}` : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol-row", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol-row", ref: rowRef, tabIndex: rowRef ? -1 : void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(MatchLink, { as: "div", matchId: vm.matchId, home: vm.homeTeamName, away: vm.awayTeamName, className: "ss-w-mol-fx", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ss-w-mol-team", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Crest2, { kind: "team", url: vm.homeCrest, name: vm.homeTeamName ?? "" }),
@@ -2083,11 +2093,17 @@ function Row({ row, columns, ui, slip, monitor }) {
 function CompactOddsList({ list, ui, slip, monitor }) {
   const [shown, setShown] = (0, import_react13.useState)(COMPACT_PAGE);
   const hidden = list.rowCount - shown;
+  const [focusIndex, setFocusIndex] = (0, import_react13.useState)(null);
+  const focusRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    if (focusIndex !== null) focusRef.current?.focus();
+  }, [focusIndex]);
   let left = shown;
+  let index = 0;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-market", children: list.market }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-cols", style: { gridTemplateColumns: `repeat(${list.columns.length}, minmax(0, 1fr))` }, children: list.columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-col", children: c }, `${c}:${i}`)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-cols", "aria-hidden": "true", style: { gridTemplateColumns: `repeat(${list.columns.length}, minmax(0, 1fr))` }, children: list.columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-col", children: c }, `${c}:${i}`)) }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-side", "aria-hidden": "true" })
     ] }),
     list.groups.map((group, gi) => {
@@ -2099,10 +2115,16 @@ function CompactOddsList({ list, ui, slip, monitor }) {
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Crest2, { kind: "comp", url: group.competitionCrest, name: group.competition }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: group.competition })
         ] }) : null,
-        rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Row, { row, columns: list.columns.length, ui, slip, monitor }, row.card.id))
+        rows.map((row) => {
+          const at = index++;
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Row, { row, columns: list.columns.length, ui, slip, monitor, rowRef: at === focusIndex ? focusRef : void 0 }, row.card.id);
+        })
       ] }, `${group.competition ?? ""}:${gi}`);
     }),
-    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "ss-w-mo-more", onClick: () => setShown((n) => n + COMPACT_PAGE), children: [
+    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "ss-w-mo-more", onClick: () => {
+      setFocusIndex(shown);
+      setShown((n) => n + COMPACT_PAGE);
+    }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: ui?.showMore ? ui.showMore(Math.min(COMPACT_PAGE, hidden)) : `Show ${Math.min(COMPACT_PAGE, hidden)} more` }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mo-more-chev", "aria-hidden": "true" })
     ] }) : null,
@@ -8569,6 +8591,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mo-teams { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-w-mo-market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
 .ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-mo-tag { flex: none; font-size: 10.5px; font-weight: 700; line-height: 1.4; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
 .ss-w-mo-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }
 .ss-w-mo-more:hover { text-decoration: underline; }
 .ss-w-mo-more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
@@ -8601,6 +8624,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mol-col { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); text-align: center; overflow-wrap: break-word; min-width: 0; }
 .ss-w-mol-comp { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding-top: 4px; }
 .ss-w-mol-row { padding: 6px 0; border-bottom: 1px dashed var(--ss-w-line); min-height: 48px; box-sizing: border-box; }
+.ss-w-mol-row:focus { outline: none; }
+.ss-w-mol-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; border-radius: 6px; }
+.ss-w-mol-tick { font-family: inherit; font-size: 9.5px; font-weight: 700; line-height: 1.1; }
+.ss-w-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 .ss-w-mol-group .ss-w-mol-row:last-child { border-bottom: none; }
 .ss-w-mol-fx { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: none; border: none; padding: 0; text-align: left; font: inherit; color: inherit; }
 .ss-w-mol-team { display: flex; align-items: center; gap: 5px; min-width: 0; }