@agg-build/ui 2.0.0 → 2.1.1

package/dist/{chunk-RWOF44TC.mjs → chunk-NK57KMYN.mjs}

@@ -22,12 +22,13 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-4CM4F4S6.mjs";
+} from "./chunk-TERG43WW.mjs";
 import {
   AutocompleteSelect,
   Badge,
   Button,
   Card,
+  CloseIcon,
   Icon,
   LineChart,
   MOBILE_TABS_MEDIA_QUERY,
@@ -71,7 +72,7 @@ import {
   sortCategoriesForNavigation,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-2ZS3BPSF.mjs";
+} from "./chunk-YJO6LMRT.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -4692,11 +4693,128 @@ import {
 } 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";
+import { useEffect as useEffect6, useMemo as useMemo9, useRef as useRef7, useState as useState6 } from "react";
+
+// src/events/list/category-sidebar.tsx
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var rowBase = cn(
+  "flex min-h-11 w-full items-center gap-3 rounded-[6px] px-3 py-3",
+  "text-left text-agg-sm font-agg-normal leading-agg-5",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-1 focus-visible:ring-offset-agg-secondary"
+);
+var idleRowClassName = cn(
+  rowBase,
+  "cursor-pointer text-agg-foreground hover:bg-agg-secondary-hover"
+);
+var selectedRowClassName = cn(rowBase, "cursor-pointer bg-agg-primary/10 text-agg-primary");
+var CategorySidebar = ({
+  baseCategoryId,
+  childrenByParentId,
+  categoryPath,
+  collapsedCategoryIds,
+  totalEventCount,
+  labels,
+  onSelectAll,
+  onToggleCategory
+}) => {
+  const isDrilledIn = categoryPath.length > 0;
+  const sortedBaseChildren = useMemo7(() => {
+    var _a;
+    if (!baseCategoryId) return [];
+    const children = [...(_a = childrenByParentId.get(baseCategoryId)) != null ? _a : []];
+    return children.sort((a, b) => {
+      var _a2, _b, _c, _d;
+      const aHasChildren = ((_b = (_a2 = childrenByParentId.get(a.id)) == null ? void 0 : _a2.length) != null ? _b : 0) > 0;
+      const bHasChildren = ((_d = (_c = childrenByParentId.get(b.id)) == null ? void 0 : _c.length) != null ? _d : 0) > 0;
+      if (aHasChildren === bHasChildren) return 0;
+      return aHasChildren ? -1 : 1;
+    });
+  }, [baseCategoryId, childrenByParentId]);
+  const renderRow = ({
+    entry,
+    isExpanded,
+    isSelected,
+    onClick
+  }) => {
+    var _a, _b;
+    const hasKnownChildren = ((_b = (_a = childrenByParentId.get(entry.id)) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
+    return /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        "aria-current": isSelected ? "true" : void 0,
+        className: isSelected ? selectedRowClassName : idleRowClassName,
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
+          hasKnownChildren ? /* @__PURE__ */ jsx10(
+            Icon,
+            {
+              name: isExpanded ? "chevron-up" : "chevron-down",
+              size: "small",
+              color: "currentColor",
+              className: "shrink-0 text-agg-muted-foreground"
+            }
+          ) : /* @__PURE__ */ jsx10("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
+        ]
+      },
+      entry.id
+    );
+  };
+  const renderBranch = (category, depth) => {
+    var _a, _b, _c, _d, _e;
+    const label = (_a = category.displayName) != null ? _a : category.name;
+    const entry = {
+      id: category.id,
+      label,
+      eventCount: (_b = category.eventCount) != null ? _b : 0
+    };
+    const childCategories = (_c = childrenByParentId.get(category.id)) != null ? _c : [];
+    const hasKnownChildren = childCategories.length > 0;
+    const isExpanded = ((_d = categoryPath[depth]) == null ? void 0 : _d.id) === category.id && !collapsedCategoryIds.has(category.id);
+    const isSelected = ((_e = categoryPath[depth]) == null ? void 0 : _e.id) === category.id && categoryPath.length === depth + 1;
+    return /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col", children: [
+      renderRow({
+        entry,
+        isExpanded,
+        isSelected,
+        onClick: () => onToggleCategory({ entry, depth, hasKnownChildren, isExpanded, isSelected })
+      }),
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: cn(
+            "grid transition-[grid-template-rows] duration-150 ease-in-out motion-reduce:transition-none",
+            isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ jsx10("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "flex w-full flex-col gap-1 pl-4 pt-1", children: childCategories.map((child) => renderBranch(child, depth + 1)) }) })
+        }
+      )
+    ] }, category.id);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        "aria-current": !isDrilledIn ? "true" : void 0,
+        className: !isDrilledIn ? selectedRowClassName : idleRowClassName,
+        onClick: onSelectAll,
+        children: [
+          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
+          /* @__PURE__ */ jsx10("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
+        ]
+      }
+    ),
+    sortedBaseChildren.map((category) => renderBranch(category, 0))
+  ] });
+};
+CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
 import { getVenueAvailabilityState, useAppConfig, useGeoBlock, useLabels as useLabels7 } from "@agg-build/hooks";
-import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo8, useRef as useRef6, useState as useState5 } from "react";
 
 // src/events/list/event-list.constants.ts
 import { MatchStatus, Venue as Venue2 } from "@agg-build/sdk";
@@ -4763,16 +4881,16 @@ var getDefaultEventListTabs = (labels) => {
 };
 
 // src/events/list/event-list-tabs.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
   if (tab.iconName === "warning-filled") {
-    return /* @__PURE__ */ jsx10(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
+    return /* @__PURE__ */ jsx11(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
   }
   if (tab.venueLogo) {
-    return /* @__PURE__ */ jsx10(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ jsx11(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName) return null;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Icon,
     {
       name: tab.iconName,
@@ -4785,7 +4903,7 @@ var useEventListTabs = (tabs) => {
   const labels = useLabels7();
   const { disabledVenues } = useAppConfig();
   const { isLocationBlocked } = useGeoBlock();
-  return useMemo7(() => {
+  return useMemo8(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
@@ -4820,7 +4938,7 @@ var EventListTabs = ({
     if (resolvedTabs.some((tab) => tab.value === activeTab && !tab.disabled)) return;
     onTabChange(fallbackTab.value);
   }, [activeTab, onTabChange, resolvedTabs]);
-  const items = useMemo7(() => {
+  const items = useMemo8(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -4832,7 +4950,7 @@ var EventListTabs = ({
       };
     });
   }, [activeTab, resolvedTabs]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Tabs,
     {
       ariaLabel,
@@ -4918,20 +5036,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
 };
 
 // src/events/list/index.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var subcategoryMenuRowClassName = cn(
-  "flex min-h-11 w-full items-center justify-between rounded-[6px] px-3 py-3",
-  "text-left text-agg-sm font-agg-normal leading-agg-5",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-1 focus-visible:ring-offset-agg-secondary"
-);
-var subcategoryMenuIdleRowClassName = cn(
-  subcategoryMenuRowClassName,
-  "cursor-pointer text-agg-foreground hover:bg-agg-secondary-hover"
-);
-var subcategoryMenuSelectedRowClassName = cn(
-  subcategoryMenuRowClassName,
-  "cursor-pointer bg-agg-primary/10 text-agg-primary"
-);
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -4968,7 +5073,7 @@ var EventList = ({
   initialLoadedPageCount,
   stateRef
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const labels = useLabels8();
   const { disabledVenues } = useAppConfig2();
   const {
@@ -4976,7 +5081,7 @@ var EventList = ({
   } = useSdkUiConfig4();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = useMemo8(
+  const visibleVenues = useMemo9(
     () => disabledVenues.length === 0 ? void 0 : getVisibleVenueIdsByConfig(VENUES, disabledVenues),
     [disabledVenues]
   );
@@ -4987,28 +5092,27 @@ var EventList = ({
   const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState6(false);
   const [categoryPath, setCategoryPath] = useState6([]);
   const [collapsedCategoryIds, setCollapsedCategoryIds] = useState6(() => /* @__PURE__ */ new Set());
-  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs, { minTabsInlineWidthForSelect: 400, preferSelectOnOverflow: false });
-  const sortItems = useMemo8(() => {
+  const sortItems = useMemo9(() => {
     return [
       {
         value: "volume24hr",
         label: labels.eventList.sortBy24hVolume,
-        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx12(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" })
+        icon: /* @__PURE__ */ jsx12(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
         label: labels.eventList.sortByTotalVolume,
-        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx12(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" })
+        icon: /* @__PURE__ */ jsx12(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
       }
     ];
   }, [
@@ -5020,12 +5124,7 @@ var EventList = ({
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
   useEffect6(() => {
     if (!isDiscoveryFiltersEnabled) return;
-    if (!baseCategoryId) {
-      setCategoryPath([]);
-      setCollapsedCategoryIds(/* @__PURE__ */ new Set());
-      return;
-    }
-    setCategoryPath([{ id: baseCategoryId, label: baseCategoryId, eventCount: 0 }]);
+    setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
   }, [baseCategoryId, isDiscoveryFiltersEnabled]);
   const { categories: topLevelCategories } = useCategories({
@@ -5033,10 +5132,10 @@ var EventList = ({
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
   });
-  const sortedTopLevelCategories = useMemo8(() => {
+  const sortedTopLevelCategories = useMemo9(() => {
     return sortCategoriesForNavigation(topLevelCategories);
   }, [topLevelCategories]);
-  const baseCategoryChildPrefetchIds = useMemo8(() => {
+  const baseCategoryChildPrefetchIds = useMemo9(() => {
     return Array.from(
       /* @__PURE__ */ new Set([
         ...sortedTopLevelCategories.map((category) => category.id),
@@ -5050,23 +5149,28 @@ var EventList = ({
     parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const visibleChildPrefetchIds = useMemo8(() => {
-    var _a2;
+  const visibleChildPrefetchIds = useMemo9(() => {
+    var _a2, _b2;
     const ids = /* @__PURE__ */ new Set();
+    if (baseCategoryId) {
+      for (const child of (_a2 = baseChildrenByParentId.get(baseCategoryId)) != null ? _a2 : []) {
+        ids.add(child.id);
+      }
+    }
     for (const expandedCategory of categoryPath) {
-      for (const childCategory of (_a2 = baseChildrenByParentId.get(expandedCategory.id)) != null ? _a2 : []) {
+      for (const childCategory of (_b2 = baseChildrenByParentId.get(expandedCategory.id)) != null ? _b2 : []) {
         ids.add(childCategory.id);
       }
     }
     return Array.from(ids);
-  }, [baseChildrenByParentId, categoryPath]);
+  }, [baseCategoryId, baseChildrenByParentId, categoryPath]);
   const { childrenByParentId: visibleChildrenByParentId } = useCategoryChildren({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleChildPrefetchIds,
     limit: 100
   });
-  const visibleGrandchildPrefetchIds = useMemo8(() => {
+  const visibleGrandchildPrefetchIds = useMemo9(() => {
     var _a2;
     const ids = /* @__PURE__ */ new Set();
     for (const expandedCategory of categoryPath) {
@@ -5082,43 +5186,41 @@ var EventList = ({
     parentIds: visibleGrandchildPrefetchIds,
     limit: 100
   });
-  const childrenByParentId = useMemo8(() => {
+  const childrenByParentId = useMemo9(() => {
     return new Map([
       ...baseChildrenByParentId,
       ...visibleChildrenByParentId,
       ...visibleGrandchildrenByParentId
     ]);
   }, [baseChildrenByParentId, visibleChildrenByParentId, visibleGrandchildrenByParentId]);
-  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && (sortedTopLevelCategories.length > 0 || categoryPath.length > 0);
-  const totalTopLevelEventCount = useMemo8(() => {
-    return sortedTopLevelCategories.reduce((accumulator, category) => {
-      var _a2;
-      return accumulator + ((_a2 = category.eventCount) != null ? _a2 : 0);
-    }, 0);
-  }, [sortedTopLevelCategories]);
-  const resolvedCategoryIds = useMemo8(() => {
+  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && baseCategoryId !== null && (((_e = (_d = childrenByParentId.get(baseCategoryId)) == null ? void 0 : _d.length) != null ? _e : 0) > 0 || categoryPath.length > 0);
+  const baseCategoryEventCount = useMemo9(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = sortedTopLevelCategories.find((c) => c.id === baseCategoryId)) == null ? void 0 : _a2.eventCount) != null ? _b2 : 0;
+  }, [baseCategoryId, sortedTopLevelCategories]);
+  const resolvedCategoryIds = useMemo9(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
-    return resolveCategoryIdsFromPath(categoryPath, void 0);
-  }, [categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
-  const sortQueryParams = useMemo8(() => {
+    return resolveCategoryIdsFromPath(categoryPath, baseCategoryId ? [baseCategoryId] : void 0);
+  }, [baseCategoryId, categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
+  const sortQueryParams = useMemo9(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
-  const activeTab = useMemo8(() => {
+  const activeTab = useMemo9(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = useMemo8(() => {
+  const venues = useMemo9(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = useMemo8(() => {
+  const matchStatus = useMemo9(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = useMemo8(() => {
+  const resolvedMaxVisibleItems = useMemo9(() => {
     if (!Number.isFinite(maxVisibleItems)) return void 0;
     return Math.max(1, Math.floor(maxVisibleItems));
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const endDateFrom = useMemo8(() => {
+  const endDateFrom = useMemo9(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -5152,16 +5254,16 @@ var EventList = ({
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = useMemo8(() => {
+  const filteredEvents = useMemo9(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = useMemo8(() => {
+  const groupedEvents = useMemo9(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = useMemo8(() => {
+  const orderedEvents = useMemo9(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = useMemo8(() => {
+  const tileEvents = useMemo9(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
@@ -5195,11 +5297,10 @@ 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 isDrilledIn = categoryPath.length > 0;
   const handleSelectAllCategories = () => {
     setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
-    onCategoryRootChange == null ? void 0 : onCategoryRootChange(void 0);
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
     setIsSubcategoriesModalOpen(false);
   };
   const handleToggleSubcategory = ({
@@ -5209,7 +5310,6 @@ var EventList = ({
     isExpanded,
     isSelected
   }) => {
-    var _a2;
     setCategoryPath((prev) => [...prev.slice(0, depth), entry]);
     setCollapsedCategoryIds((prev) => {
       const next = new Set(prev);
@@ -5220,122 +5320,41 @@ var EventList = ({
       next.delete(entry.id);
       return next;
     });
-    onCategoryRootChange == null ? void 0 : onCategoryRootChange(depth === 0 ? entry.id : (_a2 = categoryPath[0]) == null ? void 0 : _a2.id);
-  };
-  const renderSubcategoryTreeRow = ({
-    entry,
-    isExpanded,
-    isSelected,
-    onClick
-  }) => {
-    var _a2, _b2;
-    const hasKnownChildren = ((_b2 = (_a2 = childrenByParentId.get(entry.id)) == null ? void 0 : _a2.length) != null ? _b2 : 0) > 0;
-    return /* @__PURE__ */ jsxs8(
-      "button",
-      {
-        type: "button",
-        "aria-current": isSelected ? "true" : void 0,
-        className: isSelected ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
-        onClick,
-        children: [
-          /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate first-letter:uppercase", children: entry.label }),
-          hasKnownChildren ? /* @__PURE__ */ jsx11(
-            Icon,
-            {
-              name: isExpanded ? "chevron-up" : "chevron-down",
-              size: "small",
-              color: "currentColor",
-              className: "shrink-0 text-agg-muted-foreground"
-            }
-          ) : /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
-        ]
-      },
-      entry.id
-    );
-  };
-  const renderSubcategoryBranch = (category, depth) => {
-    var _a2, _b2, _c2, _d, _e;
-    const label = (_a2 = category.displayName) != null ? _a2 : category.name;
-    const entry = {
-      id: category.id,
-      label,
-      eventCount: (_b2 = category.eventCount) != null ? _b2 : 0
-    };
-    const childCategories = (_c2 = childrenByParentId.get(category.id)) != null ? _c2 : [];
-    const hasKnownChildren = childCategories.length > 0;
-    const isExpanded = ((_d = categoryPath[depth]) == null ? void 0 : _d.id) === category.id && !collapsedCategoryIds.has(category.id);
-    const isSelected = ((_e = categoryPath[depth]) == null ? void 0 : _e.id) === category.id && categoryPath.length === depth + 1;
-    return /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
-      renderSubcategoryTreeRow({
-        entry,
-        isExpanded,
-        isSelected,
-        onClick: () => handleToggleSubcategory({
-          entry,
-          depth,
-          hasKnownChildren,
-          isExpanded,
-          isSelected
-        })
-      }),
-      isExpanded ? /* @__PURE__ */ jsx11("div", { className: "flex w-full flex-col gap-1 pl-4", children: childCategories.map(
-        (childCategory) => renderSubcategoryBranch(childCategory, depth + 1)
-      ) }) : null
-    ] }, category.id);
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
   };
-  const subcategoriesListContent = /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsxs8(
-      "button",
-      {
-        type: "button",
-        "aria-current": !isDrilledIn ? "true" : void 0,
-        className: !isDrilledIn ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
-        onClick: handleSelectAllCategories,
-        children: [
-          /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate", children: labels.eventList.subcategoriesAll }),
-          /* @__PURE__ */ jsx11("span", { className: "text-agg-muted-foreground", children: totalTopLevelEventCount })
-        ]
-      }
-    ),
-    sortedTopLevelCategories.map((category) => renderSubcategoryBranch(category, 0))
-  ] });
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       Skeleton,
       {
         view: "event-list",
         ariaLabel: labels.eventList.loading(title),
-        withSidebar: isDiscoveryFiltersEnabled
+        withSidebar: shouldRenderSubcategoryFilters
       }
     );
   }
-  return /* @__PURE__ */ jsxs8("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
+    /* @__PURE__ */ jsxs9(
       "header",
       {
-        ref: headerRef,
         className: cn(
           "agg-event-list-header",
           "flex flex-col w-full items-start justify-between",
           "gap-2 sm:flex-row sm:items-center sm:gap-4"
         ),
         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__ */ jsxs8("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
-            /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx12(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
+          /* @__PURE__ */ jsxs9("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ jsx12(
               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]"
-                ),
+                className: "agg-event-list-tabs min-w-0 flex-1 max-w-[600px]!",
                 activeTab: activeTabValue,
                 onTabChange: setActiveTabValue,
-                overflowBehavior: shouldUseSelectOverflow ? "select" : "scroll"
+                overflowBehavior: "scroll"
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -5351,8 +5370,8 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
-      /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsxs9("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
+      /* @__PURE__ */ jsx12(
         EventListTabs,
         {
           ariaLabel: labels.eventList.tabsAria(title),
@@ -5362,7 +5381,7 @@ var EventList = ({
           overflowBehavior: "select"
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -5373,24 +5392,36 @@ var EventList = ({
           contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
       ),
-      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11(
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx12(
         "button",
         {
           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" })
+          children: /* @__PURE__ */ jsx12(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       "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(
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx12("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ jsx12("div", { className: "agg-sidebar max-h-[calc(100vh-19rem)] overflow-y-auto rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: /* @__PURE__ */ jsx12(
+            CategorySidebar,
+            {
+              baseCategoryId,
+              childrenByParentId,
+              categoryPath,
+              collapsedCategoryIds,
+              totalEventCount: baseCategoryEventCount,
+              labels: { subcategoriesAll: labels.eventList.subcategoriesAll },
+              onSelectAll: handleSelectAllCategories,
+              onToggleCategory: handleToggleSubcategory
+            }
+          ) }) }) : null,
+          /* @__PURE__ */ jsxs9(
             "div",
             {
               className: cn(
@@ -5401,7 +5432,7 @@ var EventList = ({
                 gridClassName
               ),
               children: [
-                tileEvents.map((event) => /* @__PURE__ */ jsx11(
+                tileEvents.map((event) => /* @__PURE__ */ jsx12(
                   EventListItem,
                   {
                     event,
@@ -5416,7 +5447,7 @@ var EventList = ({
                   },
                   event.id
                 )),
-                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx11(
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx12(
                   EventListItem,
                   {
                     isLoading: true,
@@ -5426,20 +5457,20 @@ var EventList = ({
                   },
                   `loading-${index}`
                 )) : null,
-                shouldRenderEmptyState ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
+                shouldRenderEmptyState ? /* @__PURE__ */ jsx12("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx12(
                   StateMessage,
                   {
                     title: labels.eventList.emptyTitle,
                     description: labels.eventList.emptyDescription,
-                    icon: /* @__PURE__ */ jsx11(Icon, { name: "search-empty" })
+                    icon: /* @__PURE__ */ jsx12(Icon, { name: "search-empty" })
                   }
                 ) }) : null,
-                isError ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
+                isError ? /* @__PURE__ */ jsx12("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx12(
                   StateMessage,
                   {
                     title: labels.eventList.errorTitle,
                     description: labels.eventList.errorDescription,
-                    icon: /* @__PURE__ */ jsx11(Icon, { name: "warning" })
+                    icon: /* @__PURE__ */ jsx12(Icon, { name: "warning" })
                   }
                 ) }) : null
               ]
@@ -5448,20 +5479,45 @@ var EventList = ({
         ]
       }
     ),
-    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsxs8(
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx12(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsx12(
       Modal.Container,
       {
         classNames: {
-          content: "items-end p-0",
+          // pointer-events-none lets clicks on the empty area above the panel pass through
+          // to Dialog.Overlay, which triggers Radix's outside-click dismiss.
+          content: "items-end p-0 pointer-events-none",
           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 }) })
-        ]
+        children: /* @__PURE__ */ jsxs9("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
+          /* @__PURE__ */ jsx12("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ jsx12(Dialog.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
+            /* @__PURE__ */ jsx12(
+              Dialog.Close,
+              {
+                className: "flex cursor-pointer items-center justify-center rounded-full p-1 text-agg-muted-foreground hover:bg-agg-secondary-hover",
+                "aria-label": labels.common.close,
+                children: /* @__PURE__ */ jsx12(CloseIcon, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ jsx12(
+            CategorySidebar,
+            {
+              baseCategoryId,
+              childrenByParentId,
+              categoryPath,
+              collapsedCategoryIds,
+              totalEventCount: baseCategoryEventCount,
+              labels: { subcategoriesAll: labels.eventList.subcategoriesAll },
+              onSelectAll: handleSelectAllCategories,
+              onToggleCategory: handleToggleSubcategory
+            }
+          ) })
+        ] })
       }
     ) }) : null,
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx11("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx12("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";