@agg-build/ui 2.7.2 → 2.8.0

package/dist/{chunk-FMYYPNZZ.mjs → chunk-KO6VTRV6.mjs}

@@ -8528,7 +8528,13 @@ NumberValue.displayName = "NumberValue";
 
 // src/primitives/select/index.tsx
 import { useLabels as useLabels14, useSdkUiConfig as useSdkUiConfig14 } from "@agg-build/hooks";
-import { useCallback as useCallback4, useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState8 } from "react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef7,
+  useState as useState8
+} from "react";
 import { createPortal } from "react-dom";
 
 // src/primitives/select/select.constants.ts
@@ -8565,7 +8571,11 @@ var Select = ({
   triggerClassName,
   contentClassName,
   itemClassName,
-  disabled = SELECT_DEFAULT_IS_DISABLED
+  disabled = SELECT_DEFAULT_IS_DISABLED,
+  variant = "default",
+  openOnHover = false,
+  contentAlign = "start",
+  contentSideOffset = 8
 }) => {
   var _a;
   const labels = useLabels14();
@@ -8576,17 +8586,30 @@ var Select = ({
   const isDisabled = resolveIsSelectDisabled({ disabled, items });
   const selectedItem = resolveSelectedItem(items, value);
   const [isOpen, setIsOpen] = useState8(false);
-  const [menuRect, setMenuRect] = useState8(
-    null
-  );
+  const [menuRect, setMenuRect] = useState8(null);
   const containerRef = useRef7(null);
   const portalRef = useRef7(null);
-  const handleClose = useCallback4(() => setIsOpen(false), []);
+  const closeTimerRef = useRef7(null);
+  const openedByHoverRef = useRef7(false);
+  const handleClose = useCallback4(() => {
+    setIsOpen(false);
+    openedByHoverRef.current = false;
+  }, []);
   const updateMenuRect = useCallback4(() => {
     const el = containerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
-    setMenuRect({ top: r.bottom + 8, left: r.left, width: r.width });
+    setMenuRect({
+      top: r.bottom + contentSideOffset,
+      left: r.left,
+      right: r.right,
+      width: r.width
+    });
+  }, [contentSideOffset]);
+  useEffect7(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
   }, []);
   useLayoutEffect2(() => {
     if (!isOpen) {
@@ -8624,7 +8647,33 @@ var Select = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, handleClose]);
-  const triggerRadiusClass = triggerClassName != null ? triggerClassName : "rounded-agg-md";
+  const handlePointerEnter = (event) => {
+    if (!openOnHover || isDisabled || event.pointerType === "touch") return;
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (isOpen) return;
+    openedByHoverRef.current = true;
+    setIsOpen(true);
+  };
+  const handlePointerLeave = (event) => {
+    if (!openOnHover || event.pointerType === "touch") return;
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = setTimeout(() => {
+      handleClose();
+      closeTimerRef.current = null;
+    }, 120);
+  };
+  const handleTriggerClick = () => {
+    if (openedByHoverRef.current && isOpen) {
+      openedByHoverRef.current = false;
+      return;
+    }
+    setIsOpen((previousValue) => !previousValue);
+  };
+  const isInline = variant === "inline";
+  const triggerRadiusClass = triggerClassName != null ? triggerClassName : isInline ? "rounded-agg-sm" : "rounded-agg-md";
   const listbox = menuRect ? /* @__PURE__ */ jsx129(
     "div",
     {
@@ -8635,16 +8684,20 @@ var Select = ({
       style: {
         position: "fixed",
         top: menuRect.top,
-        left: menuRect.left,
+        left: contentAlign === "start" ? menuRect.left : void 0,
+        right: contentAlign === "end" ? window.innerWidth - menuRect.right : void 0,
         width: menuRect.width,
         zIndex: SELECT_DROPDOWN_Z
       },
       className: cn(
         AGG_ROOT_CLASS_NAME,
         rootClassName,
-        "agg-select-content pointer-events-auto max-h-[min(20rem,calc(100vh-4rem))] overflow-y-auto rounded-[12px] border border-agg-separator bg-agg-secondary p-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)] flex flex-col gap-1",
+        "agg-select-content pointer-events-auto max-h-[min(20rem,calc(100vh-4rem))] overflow-y-auto border border-agg-separator bg-agg-secondary flex flex-col",
+        isInline ? "min-w-[120px] gap-0 rounded-agg-lg py-1 shadow-[0_8px_16px_rgba(0,0,0,0.12)]" : "gap-1 rounded-[12px] p-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]",
         contentClassName
       ),
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
       children: items.map((item) => {
         const isSelected = item.value === value;
         const isHidden = item.hidden === true;
@@ -8658,9 +8711,10 @@ var Select = ({
             disabled: item.disabled,
             className: cn(
               "agg-select-item",
-              "relative flex w-full items-center gap-3 rounded-[6px] pl-3 pr-5 py-3 text-left text-agg-sm leading-agg-5 outline-none",
+              "relative flex w-full items-center text-left text-agg-sm leading-agg-5 outline-none",
+              isInline ? "gap-2 px-4 py-2" : "gap-3 rounded-[6px] py-3 pl-3 pr-5",
               "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
-              isSelected ? "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground",
+              isSelected ? isInline ? "font-agg-bold text-agg-foreground" : "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground",
               item.disabled && "cursor-not-allowed opacity-60",
               itemClassName
             ),
@@ -8672,6 +8726,13 @@ var Select = ({
               handleClose();
             },
             children: [
+              isInline && isSelected ? /* @__PURE__ */ jsx129(
+                "span",
+                {
+                  className: "agg-select-item-indicator absolute bottom-2 left-0 top-2 w-1 bg-agg-primary",
+                  "aria-hidden": true
+                }
+              ) : null,
               item.icon ? /* @__PURE__ */ jsx129(
                 "span",
                 {
@@ -8701,7 +8762,11 @@ var Select = ({
     "div",
     {
       ref: containerRef,
-      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      className: cn(
+        "group/agg-select relative inline-flex",
+        isInline ? "w-auto" : "w-full",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs122(
           "button",
@@ -8713,19 +8778,19 @@ var Select = ({
             disabled: isDisabled,
             className: cn(
               "agg-select-trigger",
-              "flex h-10 w-full items-center gap-2 rounded-[8px] border border-agg-separator bg-agg-secondary px-3 py-[9px] pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
-              "flex items-center gap-2 text-left",
+              "flex cursor-pointer items-center gap-2 font-agg-sans text-agg-foreground outline-none disabled:cursor-not-allowed disabled:opacity-60",
+              isInline ? "h-auto w-auto bg-transparent px-2 py-1 pr-8 text-left text-agg-base leading-agg-6" : "h-10 w-full border border-agg-separator bg-agg-secondary px-3 py-[9px] pr-10 text-left text-agg-sm leading-agg-5",
               triggerRadiusClass,
-              getMotionClassName(
+              !isInline && getMotionClassName(
                 enableAnimations,
                 "transition-[border-color,box-shadow] duration-200 ease-in-out"
               ),
-              isOpen && "border-2 border-agg-primary px-[11px] py-2 ring-0",
-              "hover:border-agg-primary",
-              "focus:border-agg-primary focus:ring-0",
-              "disabled:cursor-not-allowed disabled:opacity-60"
+              !isInline && isOpen && "border-2 border-agg-primary px-[11px] py-2 ring-0",
+              !isInline && "hover:border-agg-primary focus:border-agg-primary focus:ring-0"
             ),
-            onClick: () => setIsOpen((previousValue) => !previousValue),
+            onClick: handleTriggerClick,
+            onPointerEnter: handlePointerEnter,
+            onPointerLeave: handlePointerLeave,
             children: [
               (selectedItem == null ? void 0 : selectedItem.icon) ? /* @__PURE__ */ jsx129("span", { className: "h-4 w-4 shrink-0 [&_svg]:h-full [&_svg]:w-full", children: selectedItem.icon }) : (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ jsx129(
                 RemoteImage,
@@ -8739,14 +8804,23 @@ var Select = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx129("span", { className: "agg-select-chevron pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ jsx129(
-          Icon,
+        /* @__PURE__ */ jsx129(
+          "span",
           {
-            name: isOpen ? "chevron-up" : "chevron-down-thin",
-            size: "small",
-            color: "currentColor"
+            className: cn(
+              "agg-select-chevron pointer-events-none absolute inset-y-0 inline-flex items-center justify-center",
+              isInline ? "right-2 text-agg-foreground" : "right-3 text-agg-muted-foreground"
+            ),
+            children: /* @__PURE__ */ jsx129(
+              Icon,
+              {
+                name: isOpen ? "chevron-up" : "chevron-down-thin",
+                size: "small",
+                color: "currentColor"
+              }
+            )
           }
-        ) }),
+        ),
         isOpen && typeof document !== "undefined" && listbox ? createPortal(listbox, resolveSelectPortalContainer(containerRef.current)) : null
       ]
     }

package/dist/{chunk-AHQA3B7D.mjs → chunk-KX3TQ7WC.mjs}

@@ -18,7 +18,7 @@ import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-FMYYPNZZ.mjs";
+} from "./chunk-KO6VTRV6.mjs";
 
 // src/geo-block-banner/index.tsx
 import { useLabels } from "@agg-build/hooks";

package/dist/{chunk-EKUH3265.mjs → chunk-MKU5Q6PN.mjs}

@@ -24,7 +24,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-JQKJDSTW.mjs";
+} from "./chunk-VR5ZRDQT.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -76,7 +76,7 @@ import {
   sortCategoriesForNavigation,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-FMYYPNZZ.mjs";
+} from "./chunk-KO6VTRV6.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -1068,6 +1068,17 @@ var matchesSelectedOutcomeLabel = (outcome, selectedOutcomeLabel) => {
     return normalizedCandidate === normalizedSelectedLabel || toSemanticOutcomeLabel(candidate) === semanticSelectedLabel;
   });
 };
+var isTeamFramedMarket = (market) => {
+  var _a;
+  const outcomes = (_a = market.venueMarketOutcomes) != null ? _a : [];
+  if (outcomes.length < 2) return false;
+  return outcomes.every(
+    (outcome) => getOutcomeLabelCandidates(outcome).some((candidate) => {
+      const semanticCandidate = toSemanticOutcomeLabel(candidate);
+      return semanticCandidate !== "" && semanticCandidate !== "yes" && semanticCandidate !== "no";
+    })
+  );
+};
 var isValidLevel = (level) => {
   return level != null && Number.isFinite(level.price) && Number.isFinite(level.size) && level.price >= 0 && level.price <= 1 && level.size > 0;
 };
@@ -1212,6 +1223,7 @@ var collectEligibleVenueOutcomes = ({
   const seenMarketIds = /* @__PURE__ */ new Set();
   const seenOutcomeIds = /* @__PURE__ */ new Set();
   const result = [];
+  let selectedAnchorMarket = null;
   if (selectedOutcomeId) {
     for (const market of venueMarkets) {
       const outcome = market.venueMarketOutcomes.find((o) => o.id === selectedOutcomeId);
@@ -1265,6 +1277,16 @@ var collectEligibleVenueOutcomes = ({
         });
         return result;
       }
+      selectedAnchorMarket = market;
+      seenMarketIds.add(market.id);
+      seenOutcomeIds.add(outcome.id);
+      result.push({
+        venue: market.venue,
+        market,
+        outcome,
+        outcomeId: outcome.id,
+        semanticLabel
+      });
       break;
     }
   }
@@ -1307,10 +1329,18 @@ var collectEligibleVenueOutcomes = ({
   }
   for (const market of venueMarkets) {
     if (seenMarketIds.has(market.id)) continue;
+    if (selectedAnchorMarket && result.some(
+      (entry) => entry.venue === market.venue && entry.market.question.trim() !== market.question.trim()
+    )) {
+      continue;
+    }
     const matchedOutcome = sortOutcomes(market.venueMarketOutcomes).find(
       (outcome) => matchesSelectedOutcomeLabel(outcome, selectedOutcomeLabel)
     );
     if (!matchedOutcome || seenOutcomeIds.has(matchedOutcome.id)) continue;
+    if (selectedAnchorMarket && isTeamFramedMarket(market) !== isTeamFramedMarket(selectedAnchorMarket)) {
+      continue;
+    }
     const candidateRefs = (_c = matchedOutcome.matchedVenueMarketOutcomes) != null ? _c : [];
     if (candidateRefs.length > 0) {
       const sharesAnchor = candidateRefs.some(
@@ -2319,7 +2349,7 @@ var EventListItemDetailsGraphSection = ({
   }, [chartOutcomeLabel, (_d = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _d.label]);
   const {
     chart: { selectedChartTimeRange },
-    formatting: { formatPercent },
+    formatting: { formatPercent, formatPrice },
     general: { theme }
   } = useSdkUiConfig2();
   const isDarkTheme = theme === "dark";
@@ -2594,8 +2624,8 @@ var EventListItemDetailsGraphSection = ({
                     });
                     return {
                       value: outcome.id,
-                      label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price)}`,
-                      ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price)}`
+                      label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`,
+                      ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`
                     };
                   })
                 }
@@ -3195,6 +3225,7 @@ var OrderbookRow = ({
   entry,
   formatNumber,
   formatCurrency,
+  formatPrice,
   enableAnimations,
   showBadge,
   badgeLabel
@@ -3263,7 +3294,7 @@ var OrderbookRow = ({
             "w-9 min-w-9 md:min-w-10 md:w-10 text-agg-sm font-agg-bold leading-agg-5",
             priceClassName
           ),
-          children: formatProbabilityCents(entry.row.price)
+          children: formatProbabilityCents(entry.row.price, formatPrice)
         }
       ),
       /* @__PURE__ */ jsx6(OrderbookVenueLogos, { venues })
@@ -3285,7 +3316,10 @@ var Orderbook = ({
   className
 }) => {
   var _a, _b, _c, _d, _e;
-  const { enableWebsocketsLogs } = useAggUiConfig();
+  const {
+    enableWebsocketsLogs,
+    formatting: { formatPrice }
+  } = useAggUiConfig();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
   const scrollContainerRef = useRef5(null);
   const spreadRowRef = useRef5(null);
@@ -3350,6 +3384,7 @@ var Orderbook = ({
                 entry,
                 formatNumber,
                 formatCurrency,
+                formatPrice,
                 enableAnimations,
                 showBadge: index === askEntries.length - 1,
                 badgeLabel: labels.asks
@@ -3362,7 +3397,7 @@ var Orderbook = ({
                 ref: spreadRowRef,
                 className: "agg-orderbook-spread flex items-center border-y border-agg-separator h-9 px-5 py-2 gap-3 md:gap-10",
                 role: "separator",
-                "aria-label": `${labels.midPrice}: ${formatProbabilityCents((_b = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _b : null)}, ${labels.spread}: ${formatProbabilityCents((_c = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _c : null)}`,
+                "aria-label": `${labels.midPrice}: ${formatProbabilityCents((_b = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _b : null, formatPrice)}, ${labels.spread}: ${formatProbabilityCents((_c = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _c : null)}`,
                 children: [
                   /* @__PURE__ */ jsxs5(
                     Typography,
@@ -3372,7 +3407,7 @@ var Orderbook = ({
                       children: [
                         "Last: ",
                         labels.lastOutcome ? `${labels.lastOutcome} ` : "",
-                        formatProbabilityCents((_d = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _d : null)
+                        formatProbabilityCents((_d = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _d : null, formatPrice)
                       ]
                     }
                   ),
@@ -3399,6 +3434,7 @@ var Orderbook = ({
                 entry,
                 formatNumber,
                 formatCurrency,
+                formatPrice,
                 enableAnimations,
                 showBadge: index === 0,
                 badgeLabel: labels.bids
@@ -3569,6 +3605,7 @@ var buildVenueMarketIdByVenue = (venueMarkets) => {
 };
 
 // src/events/market-details/market-details-outcome-button.tsx
+import { useAggUiConfig as useAggUiConfig2 } from "@agg-build/hooks";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var marketDetailsOutcomeButtonToneClasses = {
   positive: {
@@ -3619,6 +3656,7 @@ var OutcomePriceContent = ({
   value,
   textClassName
 }) => {
+  const { formatPrice } = useAggUiConfig2().formatting;
   if (isLoading) {
     return /* @__PURE__ */ jsx8(
       "span",
@@ -3637,7 +3675,7 @@ var OutcomePriceContent = ({
       as: "span",
       variant: isSelected ? "body-strong" : "body",
       className: cn("shrink-0 whitespace-nowrap", textClassName),
-      children: formatProbabilityCents(value)
+      children: formatProbabilityCents(value, formatPrice)
     }
   );
 };
@@ -3756,7 +3794,7 @@ var MarketDetailsGraphPanel = ({
   var _a, _b, _c;
   const config = useSdkUiConfig3();
   const {
-    formatting: { formatPercent, formatCompactCurrency },
+    formatting: { formatPercent, formatCompactCurrency, formatPrice },
     general: { theme }
   } = config;
   const isDarkTheme = theme === "dark";
@@ -3970,8 +4008,8 @@ var MarketDetailsGraphPanel = ({
                   const price = outcome.probability;
                   return {
                     value: outcome.id,
-                    label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price)}`,
-                    ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`
+                    label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`,
+                    ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`
                   };
                 })
               }