@orderly.network/markets 2.12.4 → 3.0.0-alpha.0

package/dist/index.d.mts

@@ -467,26 +467,28 @@ type CollapseMarketsProps = {
 declare const CollapseMarkets: React.FC<CollapseMarketsProps>;
 
 type SideMarketsScriptOptions = {
-    resizeable?: boolean;
     panelSize?: "small" | "middle" | "large";
+    collapsed?: boolean;
     onPanelSizeChange?: React.Dispatch<React.SetStateAction<"small" | "middle" | "large">>;
 };
 type SideMarketsScriptReturn = ReturnType<typeof useSideMarketsScript>;
 declare const useSideMarketsScript: (options?: SideMarketsScriptOptions) => {
-    readonly resizeable: boolean;
-    readonly panelSize: "small" | "middle" | "large" | undefined;
-    readonly onPanelSizeChange: React.Dispatch<React.SetStateAction<"small" | "middle" | "large">>;
     readonly activeTab: MarketsTabName;
     readonly onTabChange: (value: MarketsTabName) => void;
     readonly tabSort: Record<string, SortType>;
+    readonly panelSize: "small" | "middle" | "large";
 };
 
 type SideMarketsProps = SideMarketsScriptReturn & {
     className?: string;
+} & {
+    panelSize?: "small" | "middle" | "large";
 };
 declare const SideMarkets: react__default.FC<SideMarketsProps>;
 
-type SideMarketsWidgetProps = MarketsProviderProps & Partial<Pick<SideMarketsProps, "resizeable" | "panelSize" | "onPanelSizeChange" | "className">>;
+type SideMarketsWidgetProps = MarketsProviderProps & Partial<Pick<SideMarketsProps, "className">> & {
+    collapsed?: boolean;
+};
 declare const SideMarketsWidget: react__default.FC<SideMarketsWidgetProps>;
 
 type DropDownMarketsScriptReturn = ReturnType<typeof useDropDownMarketsScript>;
@@ -861,4 +863,4 @@ declare const SymbolDisplay: react.MemoExoticComponent<(props: SymbolDisplayProp
  */
 declare const builtInTabs: Record<MarketBuiltInTabType, BuiltInMarketTab>;
 
-export { CollapseMarkets, type CollapseMarketsProps, CommunitySubTabName, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, SubMenuMarketsWidget, SymbolDisplay, SymbolInfoBar, SymbolInfoBarFull, SymbolInfoBarFullWidget, SymbolInfoBarRiskNotice, SymbolInfoBarWidget, builtInTabs, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };
+export { CollapseMarkets, type CollapseMarketsProps, CommunitySubTabName, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, SubMenuMarketsWidget, SymbolDisplay, SymbolInfoBar, SymbolInfoBarFull, type SymbolInfoBarFullProps, SymbolInfoBarFullWidget, SymbolInfoBarRiskNotice, SymbolInfoBarWidget, builtInTabs, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };

package/dist/index.d.ts

@@ -467,26 +467,28 @@ type CollapseMarketsProps = {
 declare const CollapseMarkets: React.FC<CollapseMarketsProps>;
 
 type SideMarketsScriptOptions = {
-    resizeable?: boolean;
     panelSize?: "small" | "middle" | "large";
+    collapsed?: boolean;
     onPanelSizeChange?: React.Dispatch<React.SetStateAction<"small" | "middle" | "large">>;
 };
 type SideMarketsScriptReturn = ReturnType<typeof useSideMarketsScript>;
 declare const useSideMarketsScript: (options?: SideMarketsScriptOptions) => {
-    readonly resizeable: boolean;
-    readonly panelSize: "small" | "middle" | "large" | undefined;
-    readonly onPanelSizeChange: React.Dispatch<React.SetStateAction<"small" | "middle" | "large">>;
     readonly activeTab: MarketsTabName;
     readonly onTabChange: (value: MarketsTabName) => void;
     readonly tabSort: Record<string, SortType>;
+    readonly panelSize: "small" | "middle" | "large";
 };
 
 type SideMarketsProps = SideMarketsScriptReturn & {
     className?: string;
+} & {
+    panelSize?: "small" | "middle" | "large";
 };
 declare const SideMarkets: react__default.FC<SideMarketsProps>;
 
-type SideMarketsWidgetProps = MarketsProviderProps & Partial<Pick<SideMarketsProps, "resizeable" | "panelSize" | "onPanelSizeChange" | "className">>;
+type SideMarketsWidgetProps = MarketsProviderProps & Partial<Pick<SideMarketsProps, "className">> & {
+    collapsed?: boolean;
+};
 declare const SideMarketsWidget: react__default.FC<SideMarketsWidgetProps>;
 
 type DropDownMarketsScriptReturn = ReturnType<typeof useDropDownMarketsScript>;
@@ -861,4 +863,4 @@ declare const SymbolDisplay: react.MemoExoticComponent<(props: SymbolDisplayProp
  */
 declare const builtInTabs: Record<MarketBuiltInTabType, BuiltInMarketTab>;
 
-export { CollapseMarkets, type CollapseMarketsProps, CommunitySubTabName, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, SubMenuMarketsWidget, SymbolDisplay, SymbolInfoBar, SymbolInfoBarFull, SymbolInfoBarFullWidget, SymbolInfoBarRiskNotice, SymbolInfoBarWidget, builtInTabs, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };
+export { CollapseMarkets, type CollapseMarketsProps, CommunitySubTabName, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, SubMenuMarketsWidget, SymbolDisplay, SymbolInfoBar, SymbolInfoBarFull, type SymbolInfoBarFullProps, SymbolInfoBarFullWidget, SymbolInfoBarRiskNotice, SymbolInfoBarWidget, builtInTabs, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };

package/dist/index.js

@@ -143,7 +143,7 @@ var init_symbolDisplay = __esm({
     });
   }
 });
-var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, ExpandIcon, CollapseIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
+var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
 var init_icons = __esm({
   "src/icons.tsx"() {
     EditIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -440,30 +440,6 @@ var init_icons = __esm({
         ]
       }
     );
-    ExpandIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
-      }
-    );
-    CollapseIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
-      }
-    );
     FilterIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -3633,7 +3609,7 @@ var init_expandMarkets_ui = __esm({
         return { default: mod.MarketsListWidget };
       })
     );
-    cls = "oui-h-[calc(100%_-_36px)]";
+    cls = "oui-h-full";
     exports.ExpandMarkets = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
       const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
@@ -4597,53 +4573,17 @@ var init_fundingComparison = __esm({
 // src/components/sideMarkets/sideMarkets.ui.tsx
 var sideMarkets_ui_exports = {};
 __export(sideMarkets_ui_exports, {
-  SideMarkets: () => exports.SideMarkets,
-  SideMarketsHeader: () => SideMarketsHeader
+  SideMarkets: () => exports.SideMarkets
 });
-var SideMarketsHeader; exports.SideMarkets = void 0;
+exports.SideMarkets = void 0;
 var init_sideMarkets_ui = __esm({
   "src/components/sideMarkets/sideMarkets.ui.tsx"() {
-    init_icons();
     init_expandMarkets();
     init_marketsList();
     init_marketsProvider();
     init_useFavoritesExtraProps();
-    SideMarketsHeader = (props) => {
-      const { resizeable, panelSize, onPanelSizeChange } = props;
-      const { t } = i18n.useTranslation();
-      const cls3 = ui.cn(
-        "oui-text-base-contrast-36",
-        resizeable ? "oui-cursor-pointer hover:oui-text-base-contrast-80" : "oui-cursor-not-allowed"
-      );
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Flex,
-        {
-          className: panelSize === "small" ? "oui-absolute oui-end-[-20px] oui-z-50" : "oui-relative",
-          justify: panelSize === "large" ? "between" : "center",
-          width: "100%",
-          px: 3,
-          children: [
-            panelSize === "large" && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 80, children: t("common.markets") }),
-            panelSize === "large" && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: resizeable ? () => onPanelSizeChange?.("middle") : void 0,
-                children: /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { className: cls3 })
-              }
-            ),
-            (panelSize === "middle" || panelSize === "small") && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: resizeable ? () => onPanelSizeChange?.("large") : void 0,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { className: cls3 })
-              }
-            )
-          ]
-        }
-      );
-    };
     exports.SideMarkets = (props) => {
-      const { panelSize, activeTab, onTabChange, className, tabSort } = props;
+      const { activeTab, onTabChange, className, tabSort, panelSize } = props;
       const { symbol, onSymbolChange } = useMarketsContext();
       const { getFavoritesProps } = useFavoritesProps();
       const renderContent = () => {
@@ -4668,34 +4608,12 @@ var init_sideMarkets_ui = __esm({
           }
         );
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Flex,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
         {
-          id: "oui-side-markets",
-          className: ui.cn("oui-relative oui-font-semibold", className),
-          direction: "column",
-          gapY: 5,
-          height: "100%",
           width: "100%",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SideMarketsHeader,
-              {
-                ...ramda.pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Box,
-              {
-                width: "100%",
-                className: ui.cn(
-                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
-                  panelSize === "middle" && "oui-h-[calc(100%_-_52px)]"
-                ),
-                children: renderContent()
-              }
-            )
-          ]
+          height: "100%",
+          children: renderContent()
         }
       );
     };
@@ -5950,7 +5868,6 @@ init_type();
 init_useTabSort();
 var SIDE_MARKETS_SEL_TAB_KEY2 = "orderly_side_markets_sel_tab_key";
 var useSideMarketsScript = (options) => {
-  const [panelSize, setPanelSize] = React6.useState(options?.panelSize);
   const [activeTab, setActiveTab] = hooks.useLocalStorage(
     SIDE_MARKETS_SEL_TAB_KEY2,
     "all" /* All */
@@ -5958,26 +5875,25 @@ var useSideMarketsScript = (options) => {
   const { tabSort } = useTabSort({
     storageKey: SIDE_MARKETS_TAB_SORT_STORAGE_KEY
   });
-  const onPanelSizeChange = React6.useCallback(
+  const panelSize = React6.useMemo(() => {
+    if (options?.collapsed) {
+      return "small";
+    }
+    return options?.panelSize || "large";
+  }, [options?.collapsed, options?.panelSize]);
+  React6.useCallback(
     (size) => {
       if (typeof options?.onPanelSizeChange === "function") {
         options.onPanelSizeChange(size);
-      } else {
-        setPanelSize(size);
       }
     },
     [options?.onPanelSizeChange]
   );
-  React6.useEffect(() => {
-    setPanelSize(options?.panelSize);
-  }, [options?.panelSize]);
   return {
-    resizeable: options?.resizeable ?? true,
-    panelSize,
-    onPanelSizeChange,
     activeTab,
     onTabChange: setActiveTab,
-    tabSort
+    tabSort,
+    panelSize
   };
 };
 
@@ -5989,9 +5905,7 @@ var LazySideMarkets = React6__default.default.lazy(
   })
 );
 var SideMarketsWidget = (props) => {
-  const state = useSideMarketsScript(
-    ramda.pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-  );
+  const state = useSideMarketsScript(props);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.MarketsProvider, { ...ramda.pick(["symbol", "onSymbolChange"], props), children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazySideMarkets, { ...state, className: props.className }) }) });
 };
 
@@ -6673,7 +6587,6 @@ var SymbolInfoBarDesktop = ({
   {
     intensity: 900,
     r: "2xl",
-    mt: 1,
     px: 3,
     className: ui.cn(
       "oui-symbol-info-bar-desktop",
@@ -7095,10 +7008,14 @@ function useSymbolInfoBarFullScript(options) {
     openTimeInterval
   };
 }
+var SymbolInfoBarFullInjectable = ui.injectable(
+  SymbolInfoBarFull,
+  "Trading.SymbolInfoBar.Desktop"
+);
 var SymbolInfoBarFullWidget = (props) => {
   const { symbol, ...rest } = props;
   const state = useSymbolInfoBarFullScript({ symbol });
-  return /* @__PURE__ */ jsxRuntime.jsx(SymbolInfoBarFull, { ...state, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(SymbolInfoBarFullInjectable, { ...state, ...rest });
 };
 
 // src/components/horizontalMarkets/horizontalMarkets.widget.tsx