@orderly.network/markets 3.0.4-alpha.2 → 3.0.4-alpha.3

package/dist/index.mjs

@@ -494,7 +494,7 @@ var init_marketsHeader_ui = __esm({
       } = props;
       const { onSymbolChange } = useMarketsContext();
       const { t } = useTranslation();
-      const cls3 = cn(
+      const cls2 = cn(
         "oui-min-w-0 oui-flex-[0_0_calc((100%_-_32px)_/_3)] 3xl:oui-flex-[0_0_calc((100%_-_48px)_/_4)]",
         enableScroll && "oui-cursor-pointer oui-select-none"
       );
@@ -516,7 +516,7 @@ var init_marketsHeader_ui = __esm({
                   total24Amount,
                   totalOpenInterest,
                   tvl,
-                  className: cls3
+                  className: cls2
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -524,7 +524,7 @@ var init_marketsHeader_ui = __esm({
                 {
                   data: news,
                   title: /* @__PURE__ */ jsx(Text.gradient, { color: "brand", children: t("markets.newListings") }),
-                  className: cls3,
+                  className: cls2,
                   onSymbol
                 }
               ),
@@ -533,7 +533,7 @@ var init_marketsHeader_ui = __esm({
                 {
                   data: gainers,
                   title: /* @__PURE__ */ jsx(Text, { className: "oui-text-success-light", children: t("markets.topGainers") }),
-                  className: cls3,
+                  className: cls2,
                   onSymbol
                 }
               ),
@@ -542,7 +542,7 @@ var init_marketsHeader_ui = __esm({
                 {
                   data: losers,
                   title: /* @__PURE__ */ jsx(Text, { className: "oui-text-danger-light", children: t("markets.topLosers") }),
-                  className: cls3,
+                  className: cls2,
                   onSymbol
                 }
               )
@@ -3583,7 +3583,7 @@ var init_marketsDataList = __esm({
     init_marketsDataList_ui();
   }
 });
-var LazySearchInput2, LazyMarketsListWidget, cls, ExpandMarkets;
+var LazySearchInput2, LazyMarketsListWidget, expandListTableClassNames, ExpandMarketsListPanel, ExpandMarkets;
 var init_expandMarkets_ui = __esm({
   "src/components/expandMarkets/expandMarkets.ui.tsx"() {
     init_useCommunityTabs();
@@ -3603,7 +3603,17 @@ var init_expandMarkets_ui = __esm({
         return { default: mod.MarketsListWidget };
       })
     );
-    cls = "oui-h-full";
+    expandListTableClassNames = {
+      root: cn(
+        "oui-expandMarkets-list",
+        /** min-w-0: flex/grid descendants may shrink so table-fixed + w-full respect parent width. */
+        "oui-flex oui-min-h-0 oui-w-full oui-min-w-0 oui-max-w-full oui-flex-1 oui-flex-col"
+      ),
+      scroll: cn("oui-min-h-0 oui-w-full oui-min-w-0 oui-max-w-full oui-flex-1")
+    };
+    ExpandMarketsListPanel = ({
+      children
+    }) => /* @__PURE__ */ jsx("div", { className: "oui-flex oui-size-full oui-min-h-0 oui-min-w-0 oui-flex-col", children: /* @__PURE__ */ jsx("div", { className: "oui-flex oui-min-h-0 oui-w-full oui-min-w-0 oui-flex-1 oui-flex-col oui-overflow-hidden", children }) });
     ExpandMarkets = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
       const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
@@ -3612,15 +3622,16 @@ var init_expandMarkets_ui = __esm({
       const tabDataFilters = useCustomTabDataFilters(tabs);
       const renderBuiltInContent = (type) => {
         const tabType = type;
-        return /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(ExpandMarketsListPanel, { children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyMarketsListWidget,
           {
             type: tabType,
             initialSort: tabSort[type],
             onSort: onTabSort(tabType),
             tableClassNames: {
-              root: "oui-expandMarkets-list",
+              root: expandListTableClassNames.root,
               scroll: cn(
+                expandListTableClassNames.scroll,
                 "oui-px-1",
                 tabType === "favorites" /* Favorites */ ? "oui-pb-9" : "oui-pb-2"
               )
@@ -3642,19 +3653,27 @@ var init_expandMarkets_ui = __esm({
             storageKey: "orderly_expand_markets_community_sel_sub_tab",
             classNames: {
               tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
-              tabsContent: "oui-h-full"
+              tabsListContainer: "oui-shrink-0",
+              tabsContent: "oui-min-h-0 oui-min-w-0 oui-w-full oui-flex-1 oui-overflow-hidden"
             },
-            className: cn("oui-expandMarkets-community-tabs", cls),
+            className: cn(
+              "oui-expandMarkets-community-tabs",
+              "oui-flex oui-size-full oui-min-h-0 oui-min-w-0 oui-flex-col"
+            ),
             showScrollIndicator: true,
-            renderPanel: (selected) => /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+            renderPanel: (selected) => /* @__PURE__ */ jsx(ExpandMarketsListPanel, { children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
               LazyMarketsListWidget,
               {
                 type: "all" /* All */,
                 initialSort: tabSort["community" /* Community */],
                 onSort: onTabSort("community" /* Community */),
                 tableClassNames: {
-                  root: "oui-expandMarkets-list",
-                  scroll: cn("oui-px-1", "oui-pb-2")
+                  root: expandListTableClassNames.root,
+                  scroll: cn(
+                    expandListTableClassNames.scroll,
+                    "oui-px-1",
+                    "oui-pb-2"
+                  )
                 },
                 dataFilter: createCommunityBrokerFilter(selected)
               }
@@ -3663,7 +3682,7 @@ var init_expandMarkets_ui = __esm({
         );
       };
       const renderCustomContent = (key) => {
-        return /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(ExpandMarketsListPanel, { children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyMarketsListWidget,
           {
             type: "all" /* All */,
@@ -3671,8 +3690,12 @@ var init_expandMarkets_ui = __esm({
             initialSort: tabSort[key],
             onSort: onTabSort(key),
             tableClassNames: {
-              root: "oui-expandMarkets-list",
-              scroll: cn("oui-px-1", "oui-pb-2")
+              root: expandListTableClassNames.root,
+              scroll: cn(
+                expandListTableClassNames.scroll,
+                "oui-px-1",
+                "oui-pb-2"
+              )
             }
           }
         ) }) });
@@ -3682,7 +3705,8 @@ var init_expandMarkets_ui = __esm({
         {
           className: cn(
             "oui-markets-expandMarkets",
-            "oui-overflow-hidden oui-font-semibold"
+            /** Search row + tabs/list: second row minmax(0,1fr) passes a bounded height into Tabs. */
+            "oui-grid oui-size-full oui-min-h-0 oui-min-w-0 oui-grid-rows-[auto_minmax(0,1fr)] oui-overflow-hidden oui-font-semibold"
           ),
           height: "100%",
           children: [
@@ -3700,11 +3724,17 @@ var init_expandMarkets_ui = __esm({
                 value: activeTab,
                 onValueChange: onTabChange,
                 classNames: {
+                  /** Keep tab row from shrinking when Tabs root is a column flex container. */
+                  tabsListContainer: "oui-shrink-0",
                   tabsList: cn("oui-my-[6px]"),
-                  tabsContent: "oui-h-full",
+                  /** Occupy remaining height under triggers; inner ExpandMarketsListPanel supplies flex column. */
+                  tabsContent: "oui-min-h-0 oui-min-w-0 oui-w-full oui-flex-1 oui-overflow-hidden",
                   scrollIndicator: "oui-mx-3"
                 },
-                className: cn("oui-expandMarkets-tabs", cls),
+                className: cn(
+                  "oui-expandMarkets-tabs",
+                  "oui-flex oui-size-full oui-min-h-0 oui-min-w-0 oui-flex-col"
+                ),
                 showScrollIndicator: true,
                 children: tabs?.map((tab, index) => {
                   const key = tabKey(tab, index);
@@ -4607,6 +4637,7 @@ var init_sideMarkets_ui = __esm({
         {
           width: "100%",
           height: "100%",
+          className: cn(className, "oui-min-h-0 oui-min-w-0 oui-max-w-full"),
           children: renderContent()
         }
       );
@@ -4765,12 +4796,12 @@ var init_dropDownMarkets_ui = __esm({
           }
         )
       ] });
-      const cls3 = "oui-h-[calc(100%_-_36px)]";
+      const cls2 = "oui-h-[calc(100%_-_36px)]";
       const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
       const { tabs } = useMarketsContext();
       const tabDataFilters = useCustomTabDataFilters(tabs);
       const renderBuiltInContent = (tabType) => {
-        return /* @__PURE__ */ jsx("div", { className: cls3, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx("div", { className: cls2, children: /* @__PURE__ */ jsx(
           MarketsListWidget,
           {
             type: tabType,
@@ -4801,9 +4832,9 @@ var init_dropDownMarkets_ui = __esm({
               tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
               tabsContent: "oui-h-full"
             },
-            className: cn("oui-dropDownMarkets-community-tabs", cls3),
+            className: cn("oui-dropDownMarkets-community-tabs", cls2),
             showScrollIndicator: true,
-            renderPanel: (selected) => /* @__PURE__ */ jsx("div", { className: cls3, children: /* @__PURE__ */ jsx(
+            renderPanel: (selected) => /* @__PURE__ */ jsx("div", { className: cls2, children: /* @__PURE__ */ jsx(
               MarketsListWidget,
               {
                 type: "all" /* All */,
@@ -4822,7 +4853,7 @@ var init_dropDownMarkets_ui = __esm({
         );
       };
       const renderCustomContent = (key) => {
-        return /* @__PURE__ */ jsx("div", { className: cls3, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx("div", { className: cls2, children: /* @__PURE__ */ jsx(
           MarketsListWidget,
           {
             type: "all" /* All */,
@@ -4862,7 +4893,7 @@ var init_dropDownMarkets_ui = __esm({
                   tabsContent: "oui-h-full",
                   scrollIndicator: "oui-mx-0"
                 },
-                className: cn("oui-dropDownMarkets-tabs", cls3),
+                className: cn("oui-dropDownMarkets-tabs", cls2),
                 showScrollIndicator: true,
                 children: tabs?.map((tab, index) => {
                   const key = tabKey(tab, index);
@@ -5615,7 +5646,7 @@ var TABLE_CLASSNAMES = {
 var LazySearchInput3 = React6.lazy(
   () => Promise.resolve().then(() => (init_searchInput(), searchInput_exports)).then((mod) => ({ default: mod.SearchInput }))
 );
-var cls2 = "oui-h-[calc(100%_-_36px)]";
+var cls = "oui-h-[calc(100%_-_36px)]";
 var MarketTabPanel = ({
   type,
   getColumns,
@@ -5625,7 +5656,7 @@ var MarketTabPanel = ({
   renderHeader,
   emptyView
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: cls2, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(
     MarketsListWidget,
     {
       type,
@@ -5701,7 +5732,7 @@ var SubMenuMarkets = (props) => {
           tabsContent: "oui-h-full",
           scrollIndicator: "oui-mx-1"
         },
-        className: cn("oui-subMenuMarkets-community-tabs", cls2),
+        className: cn("oui-subMenuMarkets-community-tabs", cls),
         showScrollIndicator: true,
         renderPanel: (selected) => /* @__PURE__ */ jsx(
           MarketTabPanel,
@@ -5717,7 +5748,7 @@ var SubMenuMarkets = (props) => {
     );
   };
   const renderCustomContent = (key) => {
-    return /* @__PURE__ */ jsx("div", { className: cls2, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(
       MarketsListWidget,
       {
         type: "all" /* All */,
@@ -5752,7 +5783,7 @@ var SubMenuMarkets = (props) => {
               tabsContent: "oui-h-full",
               scrollIndicator: "oui-mx-1"
             },
-            className: cn(cls2, "oui-subMenuMarkets-tabs oui-my-1.5"),
+            className: cn(cls, "oui-subMenuMarkets-tabs oui-my-1.5"),
             showScrollIndicator: true,
             children: tabs?.map((tab, index) => {
               const key = tabKey(tab, index);