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

package/dist/index.d.mts

@@ -487,6 +487,7 @@ type SideMarketsProps = SideMarketsScriptReturn & {
 declare const SideMarkets: react__default.FC<SideMarketsProps>;
 
 type SideMarketsWidgetProps = MarketsProviderProps & Partial<Pick<SideMarketsProps, "className">> & {
+    panelSize?: "small" | "middle" | "large";
     collapsed?: boolean;
 };
 declare const SideMarketsWidget: react__default.FC<SideMarketsWidgetProps>;

package/dist/index.d.ts

@@ -487,6 +487,7 @@ type SideMarketsProps = SideMarketsScriptReturn & {
 declare const SideMarkets: react__default.FC<SideMarketsProps>;
 
 type SideMarketsWidgetProps = MarketsProviderProps & Partial<Pick<SideMarketsProps, "className">> & {
+    panelSize?: "small" | "middle" | "large";
     collapsed?: boolean;
 };
 declare const SideMarketsWidget: react__default.FC<SideMarketsWidgetProps>;

package/dist/index.js

@@ -500,7 +500,7 @@ var init_marketsHeader_ui = __esm({
       } = props;
       const { onSymbolChange } = useMarketsContext();
       const { t } = i18n.useTranslation();
-      const cls3 = ui.cn(
+      const cls2 = ui.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"
       );
@@ -522,7 +522,7 @@ var init_marketsHeader_ui = __esm({
                   total24Amount,
                   totalOpenInterest,
                   tvl,
-                  className: cls3
+                  className: cls2
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -530,7 +530,7 @@ var init_marketsHeader_ui = __esm({
                 {
                   data: news,
                   title: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.gradient, { color: "brand", children: t("markets.newListings") }),
-                  className: cls3,
+                  className: cls2,
                   onSymbol
                 }
               ),
@@ -539,7 +539,7 @@ var init_marketsHeader_ui = __esm({
                 {
                   data: gainers,
                   title: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-success-light", children: t("markets.topGainers") }),
-                  className: cls3,
+                  className: cls2,
                   onSymbol
                 }
               ),
@@ -548,7 +548,7 @@ var init_marketsHeader_ui = __esm({
                 {
                   data: losers,
                   title: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-danger-light", children: t("markets.topLosers") }),
-                  className: cls3,
+                  className: cls2,
                   onSymbol
                 }
               )
@@ -3589,7 +3589,7 @@ var init_marketsDataList = __esm({
     init_marketsDataList_ui();
   }
 });
-var LazySearchInput2, LazyMarketsListWidget, cls; exports.ExpandMarkets = void 0;
+var LazySearchInput2, LazyMarketsListWidget, expandListTableClassNames, ExpandMarketsListPanel; exports.ExpandMarkets = void 0;
 var init_expandMarkets_ui = __esm({
   "src/components/expandMarkets/expandMarkets.ui.tsx"() {
     init_useCommunityTabs();
@@ -3609,7 +3609,17 @@ var init_expandMarkets_ui = __esm({
         return { default: mod.MarketsListWidget };
       })
     );
-    cls = "oui-h-full";
+    expandListTableClassNames = {
+      root: ui.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: ui.cn("oui-min-h-0 oui-w-full oui-min-w-0 oui-max-w-full oui-flex-1")
+    };
+    ExpandMarketsListPanel = ({
+      children
+    }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-size-full oui-min-h-0 oui-min-w-0 oui-flex-col", children: /* @__PURE__ */ jsxRuntime.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 }) });
     exports.ExpandMarkets = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
       const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
@@ -3618,15 +3628,16 @@ var init_expandMarkets_ui = __esm({
       const tabDataFilters = useCustomTabDataFilters(tabs);
       const renderBuiltInContent = (type) => {
         const tabType = type;
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(ExpandMarketsListPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyMarketsListWidget,
           {
             type: tabType,
             initialSort: tabSort[type],
             onSort: onTabSort(tabType),
             tableClassNames: {
-              root: "oui-expandMarkets-list",
+              root: expandListTableClassNames.root,
               scroll: ui.cn(
+                expandListTableClassNames.scroll,
                 "oui-px-1",
                 tabType === "favorites" /* Favorites */ ? "oui-pb-9" : "oui-pb-2"
               )
@@ -3648,19 +3659,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: ui.cn("oui-expandMarkets-community-tabs", cls),
+            className: ui.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__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+            renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx(ExpandMarketsListPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
               LazyMarketsListWidget,
               {
                 type: "all" /* All */,
                 initialSort: tabSort["community" /* Community */],
                 onSort: onTabSort("community" /* Community */),
                 tableClassNames: {
-                  root: "oui-expandMarkets-list",
-                  scroll: ui.cn("oui-px-1", "oui-pb-2")
+                  root: expandListTableClassNames.root,
+                  scroll: ui.cn(
+                    expandListTableClassNames.scroll,
+                    "oui-px-1",
+                    "oui-pb-2"
+                  )
                 },
                 dataFilter: createCommunityBrokerFilter(selected)
               }
@@ -3669,7 +3688,7 @@ var init_expandMarkets_ui = __esm({
         );
       };
       const renderCustomContent = (key) => {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(ExpandMarketsListPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyMarketsListWidget,
           {
             type: "all" /* All */,
@@ -3677,8 +3696,12 @@ var init_expandMarkets_ui = __esm({
             initialSort: tabSort[key],
             onSort: onTabSort(key),
             tableClassNames: {
-              root: "oui-expandMarkets-list",
-              scroll: ui.cn("oui-px-1", "oui-pb-2")
+              root: expandListTableClassNames.root,
+              scroll: ui.cn(
+                expandListTableClassNames.scroll,
+                "oui-px-1",
+                "oui-pb-2"
+              )
             }
           }
         ) }) });
@@ -3688,7 +3711,8 @@ var init_expandMarkets_ui = __esm({
         {
           className: ui.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: [
@@ -3706,11 +3730,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: ui.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: ui.cn("oui-expandMarkets-tabs", cls),
+                className: ui.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);
@@ -4613,6 +4643,7 @@ var init_sideMarkets_ui = __esm({
         {
           width: "100%",
           height: "100%",
+          className: ui.cn(className, "oui-min-h-0 oui-min-w-0 oui-max-w-full"),
           children: renderContent()
         }
       );
@@ -4771,12 +4802,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__ */ jsxRuntime.jsx("div", { className: cls3, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2, children: /* @__PURE__ */ jsxRuntime.jsx(
           exports.MarketsListWidget,
           {
             type: tabType,
@@ -4807,9 +4838,9 @@ var init_dropDownMarkets_ui = __esm({
               tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
               tabsContent: "oui-h-full"
             },
-            className: ui.cn("oui-dropDownMarkets-community-tabs", cls3),
+            className: ui.cn("oui-dropDownMarkets-community-tabs", cls2),
             showScrollIndicator: true,
-            renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls3, children: /* @__PURE__ */ jsxRuntime.jsx(
+            renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2, children: /* @__PURE__ */ jsxRuntime.jsx(
               exports.MarketsListWidget,
               {
                 type: "all" /* All */,
@@ -4828,7 +4859,7 @@ var init_dropDownMarkets_ui = __esm({
         );
       };
       const renderCustomContent = (key) => {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls3, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2, children: /* @__PURE__ */ jsxRuntime.jsx(
           exports.MarketsListWidget,
           {
             type: "all" /* All */,
@@ -4868,7 +4899,7 @@ var init_dropDownMarkets_ui = __esm({
                   tabsContent: "oui-h-full",
                   scrollIndicator: "oui-mx-0"
                 },
-                className: ui.cn("oui-dropDownMarkets-tabs", cls3),
+                className: ui.cn("oui-dropDownMarkets-tabs", cls2),
                 showScrollIndicator: true,
                 children: tabs?.map((tab, index) => {
                   const key = tabKey(tab, index);
@@ -5621,7 +5652,7 @@ var TABLE_CLASSNAMES = {
 var LazySearchInput3 = React6__default.default.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,
@@ -5631,7 +5662,7 @@ var MarketTabPanel = ({
   renderHeader,
   emptyView
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(
     exports.MarketsListWidget,
     {
       type,
@@ -5707,7 +5738,7 @@ var SubMenuMarkets = (props) => {
           tabsContent: "oui-h-full",
           scrollIndicator: "oui-mx-1"
         },
-        className: ui.cn("oui-subMenuMarkets-community-tabs", cls2),
+        className: ui.cn("oui-subMenuMarkets-community-tabs", cls),
         showScrollIndicator: true,
         renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx(
           MarketTabPanel,
@@ -5723,7 +5754,7 @@ var SubMenuMarkets = (props) => {
     );
   };
   const renderCustomContent = (key) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(
       exports.MarketsListWidget,
       {
         type: "all" /* All */,
@@ -5758,7 +5789,7 @@ var SubMenuMarkets = (props) => {
               tabsContent: "oui-h-full",
               scrollIndicator: "oui-mx-1"
             },
-            className: ui.cn(cls2, "oui-subMenuMarkets-tabs oui-my-1.5"),
+            className: ui.cn(cls, "oui-subMenuMarkets-tabs oui-my-1.5"),
             showScrollIndicator: true,
             children: tabs?.map((tab, index) => {
               const key = tabKey(tab, index);