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

package/dist/index.mjs

@@ -66,16 +66,28 @@ var init_rwaDotTooltip = __esm({
       return /* @__PURE__ */ jsx(
         Tooltip,
         {
+          className: "oui-pointer-events-none",
+          disableHoverableContent: true,
           content: /* @__PURE__ */ jsx(Text, { color: isInTradingHours ? "success" : "danger", children: isInTradingHours ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") }),
-          children: /* @__PURE__ */ jsx(Box, { py: 2, px: 1, children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(
             Box,
             {
-              width: 4,
-              height: 4,
-              r: "full",
-              className: isInTradingHours ? "oui-bg-success" : "oui-bg-danger"
+              as: "span",
+              py: 2,
+              px: 1,
+              className: "oui-inline-flex oui-shrink-0 oui-items-center",
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  width: 4,
+                  height: 4,
+                  r: "full",
+                  className: isInTradingHours ? "oui-bg-success" : "oui-bg-danger"
+                }
+              )
             }
-          ) })
+          )
         }
       );
     };
@@ -104,7 +116,7 @@ var init_symbolDisplay = __esm({
       const symbol = children;
       const symbolsInfo = useSymbolsInfo();
       const displayName = symbolsInfo[symbol]("displayName");
-      const suffix = record?.isRwa || showBadge ? /* @__PURE__ */ jsxs(Flex, { gapX: 0, itemAlign: "center", children: [
+      const suffix = record?.isRwa || showBadge ? /* @__PURE__ */ jsxs(Flex, { as: "span", display: "inlineFlex", gapX: 0, itemAlign: "center", children: [
         record?.isRwa && /* @__PURE__ */ jsx(RwaDotTooltip, { record }),
         showBadge && /* @__PURE__ */ jsx(SymbolBadge, { symbol })
       ] }) : null;
@@ -494,7 +506,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 +528,7 @@ var init_marketsHeader_ui = __esm({
                   total24Amount,
                   totalOpenInterest,
                   tvl,
-                  className: cls3
+                  className: cls2
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -524,7 +536,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 +545,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 +554,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
                 }
               )
@@ -638,29 +650,33 @@ var init_marketsHeader_ui = __esm({
     ListItem = (props) => {
       const { item } = props;
       return /* @__PURE__ */ jsxs(
-        Flex,
+        Box,
         {
           width: "100%",
-          gapX: 3,
           py: 2,
           px: 4,
-          className: cn("oui-cursor-pointer hover:oui-bg-base-8", props.className),
+          className: cn(
+            "oui-grid oui-grid-cols-[minmax(0,1fr)_96px_72px] oui-items-center oui-gap-x-3",
+            "oui-cursor-pointer hover:oui-bg-base-8",
+            props.className
+          ),
           onClick: () => {
             props.onSymbol(item);
           },
           children: [
-            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-w-full", children: item.symbol }),
-            /* @__PURE__ */ jsx(Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-min-w-0", children: item.symbol }),
+            /* @__PURE__ */ jsx(Flex, { justify: "end", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
                 currency: "$",
                 size: "xs",
                 weight: "semibold",
                 dp: item.quote_dp,
+                className: "oui-tabular-nums oui-text-right",
                 children: item["24h_close"]
               }
             ) }),
-            /* @__PURE__ */ jsx(Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Flex, { justify: "end", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
                 rule: "percentages",
@@ -668,6 +684,7 @@ var init_marketsHeader_ui = __esm({
                 size: "xs",
                 weight: "semibold",
                 showIdentifier: true,
+                className: "oui-tabular-nums oui-text-right",
                 children: item.change
               }
             ) })
@@ -1062,29 +1079,33 @@ var init_marketsHeader_mobile_ui = __esm({
     ListItem2 = (props) => {
       const { item } = props;
       return /* @__PURE__ */ jsxs(
-        Flex,
+        Box,
         {
           width: "100%",
-          gapX: 3,
           py: 2,
           px: 4,
-          className: cn("oui-cursor-pointer hover:oui-bg-base-8", props.className),
+          className: cn(
+            "oui-grid oui-grid-cols-[minmax(0,1fr)_96px_72px] oui-items-center oui-gap-x-3",
+            "oui-cursor-pointer hover:oui-bg-base-8",
+            props.className
+          ),
           onClick: () => {
             props.onSymbol(item);
           },
           children: [
-            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-w-full", children: item.symbol }),
-            /* @__PURE__ */ jsx(Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-min-w-0", children: item.symbol }),
+            /* @__PURE__ */ jsx(Flex, { justify: "end", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
                 currency: "$",
                 size: "xs",
                 weight: "semibold",
                 dp: item.quote_dp,
+                className: "oui-tabular-nums oui-text-right",
                 children: item["24h_close"]
               }
             ) }),
-            /* @__PURE__ */ jsx(Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Flex, { justify: "end", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
                 rule: "percentages",
@@ -1092,6 +1113,7 @@ var init_marketsHeader_mobile_ui = __esm({
                 size: "xs",
                 weight: "semibold",
                 showIdentifier: true,
+                className: "oui-tabular-nums oui-text-right",
                 children: item.change
               }
             ) })
@@ -1647,6 +1669,7 @@ function getSymbolColumn(favorite, isFavoriteList = false, options) {
     title: i18n.t("common.symbol"),
     dataIndex: "symbol",
     width: 150,
+    className: "oui-z-10",
     onSort: true,
     render: (value, record) => {
       let favoritesIcon;
@@ -3583,7 +3606,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 +3626,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 +3645,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 +3676,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 +3705,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 +3713,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 +3728,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 +3747,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 +4660,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 +4819,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 +4855,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 +4876,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 +4916,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 +5669,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 +5679,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 +5755,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 +5771,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 +5806,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);