@agg-build/ui 1.2.11 → 1.2.12

package/dist/{chunk-3ZSNHGAB.mjs → chunk-4WBQTUPW.mjs}

@@ -23,7 +23,7 @@ import {
   selectOutcomePrice,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-54PCEK6G.mjs";
+} from "./chunk-IBOE7DRY.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -33,8 +33,10 @@ import {
   LineChart,
   MOBILE_TABS_MEDIA_QUERY,
   MarketDetailsOderbookSkeleton,
+  Modal,
   RemoteImage,
   SearchEmptyIcon,
+  Select,
   Skeleton,
   StateMessage,
   SwitchButton,
@@ -70,7 +72,7 @@ import {
   sortMarketsByYesOddsDesc,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-SJLHOAKK.mjs";
+} from "./chunk-X3KCFWXN.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -4530,8 +4532,16 @@ var MarketDetailsList = ({
 MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
-import { MarketStatus as MarketStatus2, useAppConfig as useAppConfig2, useLabels as useLabels8, useVenueEvents } from "@agg-build/hooks";
+import {
+  MarketStatus as MarketStatus2,
+  useAppConfig as useAppConfig2,
+  useCategories,
+  useLabels as useLabels8,
+  useSdkUiConfig as useSdkUiConfig4,
+  useVenueEvents
+} from "@agg-build/hooks";
 import { VENUES } from "@agg-build/sdk";
+import * as Dialog from "@radix-ui/react-dialog";
 import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef7, useState as useState6 } from "react";
 
 // src/events/list/event-list-tabs.tsx
@@ -4670,12 +4680,13 @@ var EventListTabs = ({
   );
 };
 EventListTabs.displayName = "EventListTabs";
-var useEventListTabsHeaderOverflow = (recomputeOn) => {
+var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
   const headerRef = useRef6(null);
   const titleRef = useRef6(null);
   const requiredTabsWidthRef = useRef6(0);
   const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState5(false);
   const updateTabsOverflowBehavior = useCallback3(() => {
+    var _a;
     if (typeof window === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -4688,6 +4699,16 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
       setShouldUseSelectOverflow(true);
       return;
     }
+    const minTabsInlineWidthForSelect = options == null ? void 0 : options.minTabsInlineWidthForSelect;
+    if (typeof minTabsInlineWidthForSelect === "number" && availableTabsWidth < minTabsInlineWidthForSelect) {
+      setShouldUseSelectOverflow(true);
+      return;
+    }
+    const preferSelectOnOverflow = (_a = options == null ? void 0 : options.preferSelectOnOverflow) != null ? _a : true;
+    if (!preferSelectOnOverflow) {
+      setShouldUseSelectOverflow(false);
+      return;
+    }
     const tabListElement = headerElement.querySelector(".agg-tab-list");
     if (tabListElement) {
       const currentRequiredWidth = tabListElement.scrollWidth;
@@ -4700,7 +4721,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
     }
     if (requiredTabsWidthRef.current <= 0) return;
     setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
-  }, []);
+  }, [options == null ? void 0 : options.minTabsInlineWidthForSelect, options == null ? void 0 : options.preferSelectOnOverflow]);
   useEffect5(() => {
     updateTabsOverflowBehavior();
   }, [recomputeOn, updateTabsOverflowBehavior]);
@@ -4732,7 +4753,25 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
 };
 
 // src/events/list/index.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var SORT_ICON_BY_VALUE = {
+  volume24hr: "sort-volume-24hr",
+  topArbitrage: "sort-top-arbitrage",
+  volume: "sort-volume",
+  endDate: "sort-end-date"
+};
+var resolveSortQueryParams = (value) => {
+  if (value === "volume") {
+    return { sortBy: "volume", sortDir: "desc" };
+  }
+  if (value === "endDate") {
+    return { sortBy: "endDate", sortDir: "asc" };
+  }
+  if (value === "topArbitrage") {
+    return {};
+  }
+  return { sortBy: "volume24hr", sortDir: "desc" };
+};
 var EventList = ({
   title,
   limit = DEFAULT_EVENTS_LIMIT,
@@ -4747,9 +4786,13 @@ var EventList = ({
   initialLoadedPageCount,
   stateRef
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const labels = useLabels8();
   const { disabledVenues } = useAppConfig2();
+  const {
+    features: { enableVenueEventDiscoveryFilters }
+  } = useSdkUiConfig4();
+  const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
   const visibleVenues = useMemo8(
     () => disabledVenues.length === 0 ? void 0 : VENUES.filter(
@@ -4760,7 +4803,90 @@ var EventList = ({
   const [activeTabValue, setActiveTabValue] = useState6(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
-  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs);
+  const [selectedSort, setSelectedSort] = useState6("volume24hr");
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState6(false);
+  const [selectedParentCategoryId, setSelectedParentCategoryId] = useState6(null);
+  const [selectedSubcategoryId, setSelectedSubcategoryId] = useState6(null);
+  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs, { minTabsInlineWidthForSelect: 400, preferSelectOnOverflow: false });
+  const sortItems = useMemo8(() => {
+    return [
+      {
+        value: "volume24hr",
+        label: labels.eventList.sortBy24hVolume,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+      },
+      {
+        value: "topArbitrage",
+        label: labels.eventList.sortByTopArbitrage,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" }),
+        disabled: true,
+        hidden: true
+      },
+      {
+        value: "volume",
+        label: labels.eventList.sortByTotalVolume,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+      },
+      {
+        value: "endDate",
+        label: labels.eventList.sortByEndingSoon,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+      }
+    ];
+  }, [
+    labels.eventList.sortBy24hVolume,
+    labels.eventList.sortByEndingSoon,
+    labels.eventList.sortByTopArbitrage,
+    labels.eventList.sortByTotalVolume
+  ]);
+  const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
+  useEffect6(() => {
+    if (!isDiscoveryFiltersEnabled) return;
+    setSelectedParentCategoryId(baseCategoryId);
+    setSelectedSubcategoryId(null);
+  }, [baseCategoryId, isDiscoveryFiltersEnabled]);
+  const { categories: topLevelCategories } = useCategories({
+    queryKeyScope: "event-list-top-categories",
+    enabled: isDiscoveryFiltersEnabled,
+    limit: 100
+  });
+  const { categories: subcategories } = useCategories({
+    queryKeyScope: "event-list-subcategories",
+    enabled: isDiscoveryFiltersEnabled && Boolean(baseCategoryId),
+    parentId: baseCategoryId,
+    limit: 100
+  });
+  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && Boolean(baseCategoryId) && subcategories.length > 0;
+  console.log({
+    enableVenueEventDiscoveryFilters,
+    shouldRenderSubcategoryFilters,
+    isDiscoveryFiltersEnabled,
+    baseCategoryId,
+    subcategories
+  });
+  const totalTopLevelEventCount = useMemo8(() => {
+    return topLevelCategories.reduce((accumulator, category) => {
+      var _a2;
+      return accumulator + ((_a2 = category.eventCount) != null ? _a2 : 0);
+    }, 0);
+  }, [topLevelCategories]);
+  const selectedParentEventCount = useMemo8(() => {
+    var _a2;
+    if (!baseCategoryId) return totalTopLevelEventCount;
+    const selectedParentCategory = topLevelCategories.find(
+      (category) => category.id === baseCategoryId
+    );
+    return (_a2 = selectedParentCategory == null ? void 0 : selectedParentCategory.eventCount) != null ? _a2 : totalTopLevelEventCount;
+  }, [baseCategoryId, topLevelCategories, totalTopLevelEventCount]);
+  const resolvedCategoryIds = useMemo8(() => {
+    if (!isDiscoveryFiltersEnabled) return categoryIds;
+    if (selectedSubcategoryId) return [selectedSubcategoryId];
+    if (selectedParentCategoryId) return [selectedParentCategoryId];
+    return categoryIds;
+  }, [categoryIds, isDiscoveryFiltersEnabled, selectedParentCategoryId, selectedSubcategoryId]);
+  const sortQueryParams = useMemo8(() => {
+    return resolveSortQueryParams(selectedSort);
+  }, [selectedSort]);
   const activeTab = useMemo8(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
@@ -4796,12 +4922,12 @@ var EventList = ({
     queryKeyScope: "event-list",
     venues,
     search,
-    categoryIds,
+    categoryIds: resolvedCategoryIds,
     matchStatus,
     limit: requestLimit,
     status: [MarketStatus2.open],
-    sortBy: "volume24hr",
-    sortDir: "desc",
+    sortBy: sortQueryParams.sortBy,
+    sortDir: sortQueryParams.sortDir,
     endDateFrom,
     initialPages: initialLoadedPageCount
   });
@@ -4853,6 +4979,54 @@ var EventList = ({
   const gridClassName = cn(
     "grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4"
   );
+  const isAllSubcategoriesSelected = shouldRenderSubcategoryFilters && !selectedSubcategoryId;
+  const handleSelectAllCategories = () => {
+    setSelectedParentCategoryId(baseCategoryId);
+    setSelectedSubcategoryId(null);
+    setIsSubcategoriesModalOpen(false);
+  };
+  const handleSelectSubcategory = (subcategoryId) => {
+    setSelectedSubcategoryId(subcategoryId);
+    setIsSubcategoriesModalOpen(false);
+  };
+  const subcategoriesListContent = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex w-full items-center justify-between rounded-[6px] px-3 py-3 text-left text-agg-sm leading-agg-5",
+          isAllSubcategoriesSelected ? "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground"
+        ),
+        onClick: handleSelectAllCategories,
+        children: [
+          /* @__PURE__ */ jsx11("span", { children: labels.eventList.subcategoriesAll }),
+          /* @__PURE__ */ jsx11("span", { className: "text-agg-muted-foreground", children: selectedParentEventCount })
+        ]
+      }
+    ),
+    subcategories.map((subcategory) => {
+      var _a2;
+      const isSubcategorySelected = selectedSubcategoryId === subcategory.id;
+      return /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "flex w-full items-center justify-between rounded-[6px] px-3 py-3 text-left text-agg-sm leading-agg-5",
+            "cursor-pointer",
+            isSubcategorySelected ? "bg-agg-secondary-hover font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-foreground"
+          ),
+          onClick: () => handleSelectSubcategory(subcategory.id),
+          children: [
+            /* @__PURE__ */ jsx11("span", { className: "truncate first-letter:uppercase", children: subcategory.name }),
+            /* @__PURE__ */ jsx11("span", { className: "text-agg-muted-foreground", children: (_a2 = subcategory.eventCount) != null ? _a2 : 0 })
+          ]
+        },
+        subcategory.id
+      );
+    })
+  ] });
   if (shouldRenderLoadingState) {
     return /* @__PURE__ */ jsx11(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
   }
@@ -4868,62 +5042,144 @@ var EventList = ({
         ),
         children: [
           /* @__PURE__ */ jsx11("div", { ref: titleRef, className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx11(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
-          /* @__PURE__ */ jsx11(
-            EventListTabs,
-            {
-              ariaLabel: labels.eventList.tabsAria(title),
-              className: "agg-event-list-tabs min-w-0 max-w-full",
-              activeTab: activeTabValue,
-              onTabChange: setActiveTabValue,
-              overflowBehavior: shouldUseSelectOverflow ? "select" : void 0
-            }
-          )
+          /* @__PURE__ */ jsxs8("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ jsx11(
+              EventListTabs,
+              {
+                ariaLabel: labels.eventList.tabsAria(title),
+                className: cn(
+                  "agg-event-list-tabs w-fit max-w-full flex-1",
+                  shouldUseSelectOverflow ? "min-w-[220px]" : "min-w-[400px]"
+                ),
+                activeTab: activeTabValue,
+                onTabChange: setActiveTabValue,
+                overflowBehavior: shouldUseSelectOverflow ? "select" : "scroll"
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              Select,
+              {
+                ariaLabel: labels.eventList.sortByLabel,
+                className: "min-w-[160px] w-auto! shrink-0 min-h-10.5",
+                value: selectedSort,
+                onChange: setSelectedSort,
+                items: sortItems,
+                contentClassName: "py-2"
+              }
+            )
+          ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: cn("agg-event-list-grid", isPlaceholderData && "opacity-60", gridClassName), children: [
-      tileEvents.map((event) => /* @__PURE__ */ jsx11(
-        EventListItem,
-        {
-          event,
-          classNames: {
-            root: "agg-event-list-item w-full min-w-0 max-w-none"
-          },
-          onEventClick,
-          onMarketClick,
-          getMarketHref,
-          href: getEventHref == null ? void 0 : getEventHref(event),
-          marketStatus: MarketStatus2.open
-        },
-        event.id
-      )),
-      shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx11(
-        EventListItem,
+    /* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-2 md:hidden", children: [
+      /* @__PURE__ */ jsx11(
+        EventListTabs,
         {
-          isLoading: true,
-          classNames: {
-            root: "agg-event-list-item w-full min-w-0 max-w-none"
-          }
-        },
-        `loading-${index}`
-      )) : null,
-      shouldRenderEmptyState ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
-        StateMessage,
+          ariaLabel: labels.eventList.tabsAria(title),
+          className: "agg-event-list-tabs min-w-0 flex-1",
+          activeTab: activeTabValue,
+          onTabChange: setActiveTabValue,
+          overflowBehavior: "select"
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Select,
         {
-          title: labels.eventList.emptyTitle,
-          description: labels.eventList.emptyDescription,
-          icon: /* @__PURE__ */ jsx11(Icon, { name: "search-empty" })
+          ariaLabel: labels.eventList.sortByLabel,
+          className: "min-w-0 flex-1 md:min-w-[144px]",
+          value: selectedSort,
+          onChange: setSelectedSort,
+          items: sortItems,
+          contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
-      ) }) : null,
-      isError ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
-        StateMessage,
+      ),
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11(
+        "button",
         {
-          title: labels.eventList.errorTitle,
-          description: labels.eventList.errorDescription,
-          icon: /* @__PURE__ */ jsx11(Icon, { name: "warning" })
+          type: "button",
+          className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px] border-2 border-agg-primary bg-agg-secondary text-agg-foreground cursor-pointer",
+          "aria-label": labels.eventList.subcategoriesOpenAria,
+          onClick: () => setIsSubcategoriesModalOpen(true),
+          children: /* @__PURE__ */ jsx11(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
-      ) }) : null
+      ) : null
     ] }),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
+        children: [
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11("aside", { className: "hidden w-[200px] shrink-0 md:block", children: /* @__PURE__ */ jsx11("div", { className: "flex w-full flex-col gap-1 rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: subcategoriesListContent }) }) : null,
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: cn(
+                "agg-event-list-grid",
+                "w-full",
+                isPlaceholderData && "opacity-60",
+                gridClassName
+              ),
+              children: [
+                tileEvents.map((event) => /* @__PURE__ */ jsx11(
+                  EventListItem,
+                  {
+                    event,
+                    classNames: {
+                      root: "agg-event-list-item w-full min-w-0 max-w-none"
+                    },
+                    onEventClick,
+                    onMarketClick,
+                    getMarketHref,
+                    href: getEventHref == null ? void 0 : getEventHref(event),
+                    marketStatus: MarketStatus2.open
+                  },
+                  event.id
+                )),
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx11(
+                  EventListItem,
+                  {
+                    isLoading: true,
+                    classNames: {
+                      root: "agg-event-list-item w-full min-w-0 max-w-none"
+                    }
+                  },
+                  `loading-${index}`
+                )) : null,
+                shouldRenderEmptyState ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
+                  StateMessage,
+                  {
+                    title: labels.eventList.emptyTitle,
+                    description: labels.eventList.emptyDescription,
+                    icon: /* @__PURE__ */ jsx11(Icon, { name: "search-empty" })
+                  }
+                ) }) : null,
+                isError ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
+                  StateMessage,
+                  {
+                    title: labels.eventList.errorTitle,
+                    description: labels.eventList.errorDescription,
+                    icon: /* @__PURE__ */ jsx11(Icon, { name: "warning" })
+                  }
+                ) }) : null
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsxs8(
+      Modal.Container,
+      {
+        classNames: {
+          content: "items-end p-0",
+          container: "w-full max-w-none border-0 bg-transparent shadow-none"
+        },
+        children: [
+          /* @__PURE__ */ jsx11(Dialog.Title, { className: "sr-only", children: labels.eventList.subcategoriesLabel }),
+          /* @__PURE__ */ jsx11("div", { className: "w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-1", children: subcategoriesListContent }) })
+        ]
+      }
+    ) }) : null,
     shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx11("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };

package/dist/{chunk-54PCEK6G.mjs → chunk-IBOE7DRY.mjs}

@@ -17,7 +17,7 @@ import {
   selectPrimaryVenueMarket,
   skeletonViews,
   sortOutcomes
-} from "./chunk-SJLHOAKK.mjs";
+} from "./chunk-X3KCFWXN.mjs";
 
 // src/trading/trading-context/index.tsx
 import { useEventTradingContext } from "@agg-build/hooks";

package/dist/{chunk-YP75TIY6.mjs → chunk-J6WELNCX.mjs}

@@ -10,13 +10,13 @@ import {
   isErrorWithStatus,
   useEventListTabs,
   useEventListTabsHeaderOverflow
-} from "./chunk-3ZSNHGAB.mjs";
+} from "./chunk-4WBQTUPW.mjs";
 import {
   DEPOSIT_MODAL_OPEN_EVENT,
   PlaceOrder,
   SettlementDetails,
   WITHDRAW_MODAL_OPEN_EVENT
-} from "./chunk-J7K2U44E.mjs";
+} from "./chunk-3JXBOU24.mjs";
 import {
   AggErrorBoundary,
   Button,
@@ -45,7 +45,7 @@ import {
   filterOpenEvents,
   resolveTabVenus,
   shortenAddress
-} from "./chunk-SJLHOAKK.mjs";
+} from "./chunk-X3KCFWXN.mjs";
 
 // src/pages/home/index.tsx
 import {