@orderly.network/layout-split 2.0.4-alpha.0 → 2.0.4-alpha.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React, { createContext, forwardRef, useMemo, useCallback, useContext, useState, useEffect, useRef } from 'react';
+import React, { createContext, forwardRef, useMemo, useCallback, useContext, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import { cn, Box, Flex, createInterceptor, Text, CloseIcon, Divider, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent } from '@orderly.network/ui';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -25,7 +25,7 @@ function ResizablePanelGroup({
     {
       "data-slot": "resizable-panel-group",
       className: cn(
-        "aria-[orientation=vertical]:oui-flex-col oui-flex oui-w-full oui-h-full",
+        "oui-flex oui-size-full aria-[orientation=vertical]:oui-flex-col",
         className
       ),
       ...props
@@ -55,11 +55,11 @@ function ResizableHandle({
     {
       "data-slot": "resizable-handle",
       className: cn(
-        "oui-bg-primary focus:oui-ring-0 focus-visible:oui-ring-0 focus-visible:oui-outline-none after:oui-absolute after:oui-inset-y-0 after:oui-left-1/2 after:oui-w-1 after:-oui-translate-x-1/2 aria-[orientation=horizontal]:oui-h-px aria-[orientation=horizontal]:oui-w-full aria-[orientation=horizontal]:after:oui-left-0 aria-[orientation=horizontal]:after:oui-h-1 aria-[orientation=horizontal]:after:oui-w-full aria-[orientation=horizontal]:after:oui-translate-x-0 aria-[orientation=horizontal]:after:-oui-translate-y-1/2 [&[aria-orientation=horizontal]>div]:oui-rotate-90 oui-relative oui-flex oui-w-px oui-items-center oui-justify-center",
+        "oui-relative oui-flex oui-w-px oui-items-center oui-justify-center oui-bg-primary after:oui-absolute after:oui-inset-y-0 after:oui-left-1/2 after:oui-w-1 after:-oui-translate-x-1/2 focus:oui-ring-0 focus-visible:oui-outline-none focus-visible:oui-ring-0 aria-[orientation=horizontal]:oui-h-px aria-[orientation=horizontal]:oui-w-full aria-[orientation=horizontal]:after:oui-left-0 aria-[orientation=horizontal]:after:oui-h-1 aria-[orientation=horizontal]:after:oui-w-full aria-[orientation=horizontal]:after:-oui-translate-y-1/2 aria-[orientation=horizontal]:after:oui-translate-x-0 [&[aria-orientation=horizontal]>div]:oui-rotate-90",
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx("div", { className: "oui-bg-primary oui-z-10 oui-flex oui-h-6 oui-w-1 oui-shrink-0 oui-rounded-lg" })
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "oui-z-10 oui-flex oui-h-6 oui-w-1 oui-shrink-0 oui-rounded-lg oui-bg-primary" })
     }
   );
 }
@@ -132,7 +132,7 @@ function SplitLayout({
       });
       onSizeChange?.(sizesAsStrings);
     },
-    [onSizeChange, count]
+    [onSizeChange, count, sizes]
   );
   if (count === 0) return /* @__PURE__ */ jsx(Fragment, {});
   const marginPx = gap != null ? gap * 2 : 4;
@@ -1202,9 +1202,9 @@ var LayoutSwitchButton = ({
           {
             justify: position === "right" ? "end" : "start",
             className: cn(
-              "oui-w-[148px] oui-h-[100px]",
-              "oui-bg-base-10 oui-rounded-[10px]",
-              "oui-border-[4px] oui-border-base-5 group-hover:oui-border-primary-light",
+              "oui-h-[100px] oui-w-[148px]",
+              "oui-rounded-[10px] oui-bg-base-10",
+              "oui-border-4 oui-border-base-5 group-hover:oui-border-primary-light",
               layout === position && "!oui-border-primary-light"
             ),
             children: /* @__PURE__ */ jsx(Box, { p: 1, children: /* @__PURE__ */ jsx(OrderEntryIcon, {}) })
@@ -1257,7 +1257,7 @@ var LayoutSwitchButton = ({
         onMouseLeave: () => setHoveredMarket(null),
         className: "oui-group",
         children: [
-          /* @__PURE__ */ jsxs(Flex, { justify: "center", className: "oui-w-[148px] oui-h-[100px]", children: [
+          /* @__PURE__ */ jsxs(Flex, { justify: "center", className: "oui-h-[100px] oui-w-[148px]", children: [
             position === "left" && /* @__PURE__ */ jsx(MarketLeftIcon, { isSelected, isHovered }),
             position === "top" && /* @__PURE__ */ jsx(MarketTopIcon, { isSelected, isHovered }),
             position === "bottom" && /* @__PURE__ */ jsx(MarketBottomIcon, { isSelected, isHovered }),
@@ -1411,7 +1411,7 @@ var TRADINGVIEW_MIN_WIDTH = 540;
 var DATA_LIST_MAX_HEIGHT = 800;
 var DATA_LIST_INITIAL_HEIGHT = 350;
 var SPACE = 8;
-var SYMBOL_INFO_BAR_HEIGHT = 54;
+var SYMBOL_INFO_BAR_HEIGHT = 56;
 var ORDERLY_ORDER_ENTRY_SIDE_MARKETS_LAYOUT = "orderly_order_entry_side_markets_layout";
 var ORDERLY_SIDE_MARKETS_MODE_KEY = "orderly_side_markets_mode";
 var ORDERLY_HORIZONTAL_MARKETS_LAYOUT = "orderly_horizontal_markets_layout";
@@ -1645,8 +1645,7 @@ function useSplitLayout(options = {}) {
   const {
     initialLayout = "right",
     initialMarketLayout = "left",
-    canTrade = true,
-    isFirstTimeDeposit = false
+    canTrade = true
   } = options;
   const max2XL = useMediaQuery("(max-width: 1279px)");
   const min3XL = useMediaQuery("(min-width: 1440px)");
@@ -1701,30 +1700,6 @@ function useSplitLayout(options = {}) {
     ORDERLY_ORDER_ENTRY_EXTRA_HEIGHT,
     0
   );
-  useCallback(
-    (preSize, nextSize, boxHeight) => {
-      if (!boxHeight) return;
-      const splitTradingviewHeight = boxHeight * preSize / 100;
-      const splitOrderbookHeight = boxHeight * nextSize / 100;
-      const tradingviewHeight = Math.min(
-        Math.max(splitTradingviewHeight, TRADINGVIEW_MIN_HEIGHT),
-        max2XL ? 1200 : 600
-      );
-      const orderbookHeight = Math.min(
-        Math.max(splitOrderbookHeight, ORDERBOOK_MIN_HEIGHT),
-        ORDERBOOK_MAX_HEIGHT
-      );
-      if (splitOrderbookHeight >= orderbookHeight) {
-        const offset = splitOrderbookHeight - orderbookHeight;
-        setExtraHeight(Math.max(0, extraHeight - offset));
-      } else if (tradingviewHeight + orderbookHeight < (max2XL ? 1200 : 600) + ORDERBOOK_MAX_HEIGHT) {
-        const height = tradingviewHeight + orderbookHeight + SPACE + SYMBOL_INFO_BAR_HEIGHT;
-        const offset = Math.max(0, height - 0);
-        setExtraHeight(extraHeight + offset);
-      }
-    },
-    [max2XL, extraHeight, setExtraHeight]
-  );
   const tradingviewMaxHeight = max2XL ? 1200 : 600;
   const dataListHeight = canTrade ? 379 : 277;
   const memoizedPanelSize = useMemo(() => {
@@ -1887,27 +1862,22 @@ var TradingSortablePanel = (props) => {
   );
 };
 var SplitLineBar = (props) => {
-  const { onMouseDown, mode = "horizontal", ...rest } = props;
-  const disable = useMemo(
-    () => props.className?.split(" ").includes("disable"),
-    [props.className]
-  );
-  const filteredCls = useMemo(
-    () => props.className?.split(" ").filter((cls) => cls !== "disable"),
-    [props.className]
-  );
+  const { onMouseDown, mode = "horizontal", className, ...rest } = props;
+  const tokens = className?.split(/\s+/).filter(Boolean) ?? [];
+  const disable = tokens.includes("disable");
+  const filteredCls = tokens.filter((t) => t !== "disable").join(" ");
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
       className: cn(
-        filteredCls,
+        filteredCls || void 0,
         "!oui-transition-none",
-        "!oui-shadow-none !oui-bg-transparent",
+        "!oui-bg-transparent !oui-shadow-none",
         "hover:!oui-bg-primary-light hover:!oui-shadow-[0px_0px_4px_0px] hover:!oui-shadow-primary-light/80",
         "active:!oui-bg-primary-light active:!oui-shadow-[0px_0px_4px_0px] active:!oui-shadow-primary-light/80",
         "focus:!oui-bg-primary-light focus:!oui-shadow-[0px_0px_4px_0px] focus:!oui-shadow-primary-light/80",
-        mode === "horizontal" ? "!oui-w-[2px] !oui-min-w-[2px] !oui-mx-[3px]" : "!oui-h-[2px] !oui-min-h-[2px] !oui-my-[3px]",
+        mode === "horizontal" ? "!oui-mx-[3px] !oui-w-[2px] !oui-min-w-[2px]" : "!oui-my-[3px] !oui-h-[2px] !oui-min-h-[2px]",
         disable && "oui-pointer-events-none"
       ),
       children: /* @__PURE__ */ jsx(
@@ -1949,6 +1919,18 @@ var DEFAULT_SORTABLE_ITEMS = [
   TRADING_PANEL_IDS.ASSETS,
   TRADING_PANEL_IDS.ORDER_ENTRY
 ];
+function orderEntrySortablePanelClassName(id) {
+  if (id === TRADING_PANEL_IDS.MARGIN || id === "margin") {
+    return "oui-trading-riskRate-container";
+  }
+  if (id === TRADING_PANEL_IDS.ASSETS || id === "assets") {
+    return "oui-trading-assetsView-container oui-border oui-border-line-12";
+  }
+  if (id === TRADING_PANEL_IDS.ORDER_ENTRY || id === "orderEntry") {
+    return "oui-trading-orderEntry-container";
+  }
+  return void 0;
+}
 var dropAnimationConfig = {
   keyframes({
     transform
@@ -1990,8 +1972,6 @@ function SplitTradingLayout(props) {
     max2XL,
     max4XL,
     horizontalDraggable,
-    panelSize,
-    setPanelSize,
     marketsWidth,
     mainSplitSize,
     setMainSplitSize,
@@ -2003,17 +1983,34 @@ function SplitTradingLayout(props) {
     setDataListSplitHeightSM,
     orderBookSplitHeightSM,
     setOrderbookSplitHeightSM,
-    tradingviewMaxHeight: tradindviewMaxHeight,
+    tradingviewMaxHeight,
     extraHeight,
     setExtraHeight,
-    dataListHeight: dataListMinHeight,
-    symbolInfoBarHeight
+    dataListHeight: dataListMinHeight
   } = useSplitLayout();
+  const symbolInfoBarChromeRef = useRef(null);
+  const [symbolBarChromeHeight, setSymbolBarChromeHeight] = useState(
+    SYMBOL_INFO_BAR_HEIGHT
+  );
+  useLayoutEffect(() => {
+    const el = symbolInfoBarChromeRef.current;
+    if (!el) return;
+    const sync = () => {
+      const next = el.getBoundingClientRect().height;
+      if (!(Number.isFinite(next) && next > 0)) return;
+      setSymbolBarChromeHeight(
+        (prev) => Math.round(Math.abs(prev - next)) >= 1 ? Math.round(next) : prev
+      );
+    };
+    sync();
+    const observer = new ResizeObserver(sync);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
   const [tradingViewFullScreen] = useLocalStorage(
     TradingviewFullscreenKey,
     false
   );
-  const [animating, setAnimating] = useState(false);
   const [sortableItems, setSortableItems] = useLocalStorage(
     ORDER_ENTRY_SORT_KEY,
     DEFAULT_SORTABLE_ITEMS
@@ -2061,9 +2058,9 @@ function SplitTradingLayout(props) {
   }
   const onMainSplitSizeChange = (width) => layout === "left" ? setMainSplitSize(`${100 - Math.min(Number(width), 100)}`) : setMainSplitSize(width);
   const minScreenHeight = useMemo(() => {
-    return tradingViewFullScreen ? 0 : symbolInfoBarHeight + ORDERBOOK_MAX_HEIGHT + DATA_LIST_INITIAL_HEIGHT + SPACE * 4;
-  }, [tradingViewFullScreen, symbolInfoBarHeight]);
-  const minScreenHeightSM = TOP_BAR_HEIGHT + BOTTOM_BAR_HEIGHT + symbolInfoBarHeight + TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + dataListMinHeight + SPACE * 4;
+    return tradingViewFullScreen ? 0 : symbolBarChromeHeight + ORDERBOOK_MAX_HEIGHT + DATA_LIST_INITIAL_HEIGHT + SPACE * 4;
+  }, [tradingViewFullScreen, symbolBarChromeHeight]);
+  const minScreenHeightSM = TOP_BAR_HEIGHT + BOTTOM_BAR_HEIGHT + symbolBarChromeHeight + TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + dataListMinHeight + SPACE * 4;
   const containerPaddingX = useMemo(() => max4XL ? 12 : 8, [max4XL]);
   const getPanel = (id) => panels.get(id)?.node ?? null;
   const horizontalMarketsView = getPanel(TRADING_PANEL_IDS.HORIZONTAL_MARKETS);
@@ -2094,22 +2091,10 @@ function SplitTradingLayout(props) {
       width: marketsWidth,
       style: { minWidth: marketsWidth },
       className: "oui-trading-markets-container oui-transition-all oui-duration-150",
-      onTransitionEnd: () => setAnimating(false),
-      children: !animating && marketLayout === "left" && marketsWidget
-    }
-  );
-  const symbolInfoBarView = /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: "oui-trading-symbolInfoBar-container",
-      intensity: 900,
-      r: "2xl",
-      px: 3,
-      width: "100%",
-      style: { minHeight: symbolInfoBarHeight, height: symbolInfoBarHeight },
-      children: getPanel(TRADING_PANEL_IDS.SYMBOL_INFO_BAR)
+      children: marketLayout === "left" && marketsWidget
     }
   );
+  const symbolInfoBarView = getPanel(TRADING_PANEL_IDS.SYMBOL_INFO_BAR);
   const tradingviewWidget = getPanel(TRADING_PANEL_IDS.TRADING_VIEW);
   const tradingView = /* @__PURE__ */ jsx(
     Box,
@@ -2168,15 +2153,7 @@ function SplitTradingLayout(props) {
         {
           id,
           showIndicator: showPositionIcon,
-          className: cn(
-            id === TRADING_PANEL_IDS.MARGIN && "oui-trading-riskRate-container",
-            id === TRADING_PANEL_IDS.ASSETS && "oui-trading-assetsView-container oui-border oui-border-line-12",
-            id === TRADING_PANEL_IDS.ORDER_ENTRY && "oui-trading-orderEntry-container",
-            // Support legacy short-name keys
-            id === "margin" && "oui-trading-riskRate-container",
-            id === "assets" && "oui-trading-assetsView-container oui-border oui-border-line-12",
-            id === "orderEntry" && "oui-trading-orderEntry-container"
-          ),
+          className: orderEntrySortablePanelClassName(id),
           children: getPanel(id)
         },
         id
@@ -2233,7 +2210,7 @@ function SplitTradingLayout(props) {
     Flex,
     {
       direction: "column",
-      className: "oui-flex-1 oui-overflow-hidden",
+      className: "oui-min-h-0 oui-flex-1 oui-overflow-hidden",
       gap: 2,
       style: {
         minWidth: max4XL ? marketsWidth + TRADINGVIEW_MIN_WIDTH + ORDERBOOK_MIN_WIDTH + SPACE * 2 : TRADINGVIEW_MIN_WIDTH + ORDERBOOK_MIN_WIDTH + SPACE
@@ -2244,9 +2221,12 @@ function SplitTradingLayout(props) {
           TradingSplitLayout,
           {
             style: {
-              maxHeight: `calc(100% - ${symbolInfoBarHeight}px - ${SPACE}px)`
+              flex: 1,
+              minHeight: 0,
+              width: "100%",
+              overflow: "hidden"
             },
-            className: "oui-w-full",
+            className: "oui-flex oui-min-h-0 oui-w-full oui-flex-1 oui-overflow-hidden",
             mode: "vertical",
             onSizeChange: setDataListSplitSize,
             children: [
@@ -2323,17 +2303,17 @@ function SplitTradingLayout(props) {
                           ),
                           style: {
                             minHeight: Math.max(
-                              symbolInfoBarHeight + TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + SPACE * 2,
+                              symbolBarChromeHeight + TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + SPACE * 2,
                               orderEntryHeight
                             ),
-                            maxHeight: symbolInfoBarHeight + tradindviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE * 2
+                            maxHeight: symbolBarChromeHeight + tradingviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE * 2
                           },
                           children: [
                             /* @__PURE__ */ jsxs(
                               Flex,
                               {
                                 height: "100%",
-                                className: "oui-w-[calc(100%_-_280px_-_12px)] oui-flex-1",
+                                className: "oui-min-h-0 oui-w-[calc(100%_-_280px_-_12px)] oui-flex-1",
                                 direction: "column",
                                 gapY: 2,
                                 children: [
@@ -2342,15 +2322,15 @@ function SplitTradingLayout(props) {
                                     Flex,
                                     {
                                       width: "100%",
-                                      height: "100%",
                                       gapX: 2,
                                       itemAlign: "stretch",
                                       style: {
+                                        flex: 1,
                                         minHeight: TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + SPACE,
-                                        maxHeight: tradindviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE
+                                        maxHeight: tradingviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE
                                       },
                                       className: cn(
-                                        "oui-flex-1",
+                                        "oui-min-h-0 oui-flex-1",
                                         layout === "left" && "oui-flex-row-reverse"
                                       ),
                                       children: [
@@ -2363,7 +2343,7 @@ function SplitTradingLayout(props) {
                                             width: marketsWidth,
                                             style: {
                                               minHeight: TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + SPACE,
-                                              maxHeight: tradindviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE
+                                              maxHeight: tradingviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE
                                             },
                                             children: marketsWidget
                                           }
@@ -2386,7 +2366,7 @@ function SplitTradingLayout(props) {
                                                   r: "2xl",
                                                   style: {
                                                     minHeight: TRADINGVIEW_MIN_HEIGHT,
-                                                    maxHeight: tradindviewMaxHeight,
+                                                    maxHeight: tradingviewMaxHeight,
                                                     height: 1200
                                                   },
                                                   children: tradingviewWidget
@@ -2809,7 +2789,7 @@ var CollapsiblePanel = ({
     "div",
     {
       className: cn(
-        "oui-flex oui-flex-col oui-gap-y-5 oui-overflow-hidden oui-rounded-2xl oui-bg-base-9 oui-w-full oui-h-full",
+        "oui-flex oui-size-full oui-flex-col oui-gap-y-5 oui-overflow-hidden oui-rounded-2xl oui-bg-base-9",
         className
       ),
       style: computedStyle,
@@ -3135,20 +3115,24 @@ function updateSizeAtPath(node, path, newSizes) {
   }
   return updatedNode;
 }
-function getCollapsiblePanels(node) {
-  const collapsible = /* @__PURE__ */ new Map();
-  const traverse = (n) => {
-    if (n.type === "panel" && n.id) {
-      collapsible.set(n.id, n.collapsible ?? false);
+function collectPanelCollapseState(root) {
+  const collapsiblePanels = /* @__PURE__ */ new Map();
+  const collapsedPanels = /* @__PURE__ */ new Set();
+  const traverse = (node) => {
+    if (node.type === "panel" && node.id) {
+      collapsiblePanels.set(node.id, node.collapsible ?? false);
+      if (node.defaultCollapsed) {
+        collapsedPanels.add(node.id);
+      }
     }
-    if (n.type === "split" || n.type === "sort") {
-      for (const child of n.children ?? []) {
+    if (node.type === "split" || node.type === "sort") {
+      for (const child of node.children ?? []) {
         traverse(child);
       }
     }
   };
-  traverse(node);
-  return collapsible;
+  traverse(root);
+  return { collapsiblePanels, collapsedPanels };
 }
 function createUpdatedLayout(rootNode, layout, breakpoint, path, sizes) {
   const updatedRoot = updateSizeAtPath(rootNode, path, sizes);
@@ -3201,36 +3185,24 @@ function SplitRenderer(props) {
     },
     [computeUpdatedLayout, onLayoutPersist]
   );
-  const collapsiblePanels = useMemo(
-    () => getCollapsiblePanels(rootNode),
+  const { collapsiblePanels, collapsedPanels } = useMemo(
+    () => collectPanelCollapseState(rootNode),
     [rootNode]
   );
-  const collapsedPanels = useMemo(() => {
-    const collapsed = /* @__PURE__ */ new Set();
-    const traverse = (node) => {
-      if (node.type === "panel" && node.id && node.defaultCollapsed) {
-        collapsed.add(node.id);
-      }
-      if (node.type === "split" || node.type === "sort") {
-        node.children?.forEach(traverse);
-      }
-    };
-    traverse(rootNode);
-    return collapsed;
-  }, [rootNode]);
   const computeUpdatedLayoutForCollapse = useCallback(
     (panelId, collapsed) => {
-      const updatedLayouts = {};
+      const layouts = { ...layout.layouts };
       for (const bp of BREAKPOINT_KEYS) {
-        if (layout.layouts[bp]) {
-          updatedLayouts[bp] = updateDefaultCollapsedAtPath(
-            layout.layouts[bp],
+        const nodeAtBreakpoint = layouts[bp];
+        if (nodeAtBreakpoint) {
+          layouts[bp] = updateDefaultCollapsedAtPath(
+            nodeAtBreakpoint,
             panelId,
             collapsed
           );
         }
       }
-      return { ...layout, layouts: updatedLayouts };
+      return { ...layout, layouts };
     },
     [layout]
   );
@@ -3285,7 +3257,7 @@ function SplitRenderer(props) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "oui-fixed oui-right-2 oui-bottom-5 oui-text-lg oui-text-trade-loss oui-flex oui-flex-col oui-items-end",
+        className: "oui-fixed oui-bottom-5 oui-right-2 oui-flex oui-flex-col oui-items-end oui-text-lg oui-text-trade-loss",
         style: { zIndex: 1e3 },
         children: [
           /* @__PURE__ */ jsx("span", { children: breakpoint }),
@@ -3294,7 +3266,7 @@ function SplitRenderer(props) {
             "button",
             {
               onClick: () => ctx?.reset(),
-              className: "oui-mt-1 oui-px-2 oui-py-1 oui-text-sm oui-bg-gray-500 oui-text-white oui-rounded",
+              className: "oui-mt-1 oui-rounded oui-bg-gray-500 oui-px-2 oui-py-1 oui-text-sm oui-text-white",
               children: "Reset"
             }
           )