@orderly.network/ui-order-entry 3.1.0-alpha.0 → 3.1.1-alpha.0

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { useLocalStorage, utils, useGetEstLiqPrice, useOrderlyContext, useMemoiz
 import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg, useCanTrade } from '@orderly.network/react-app';
 import { OrderSide, EMPTY_LIST, DistributionType, TrailingCallbackType, OrderType, MarginMode, PositionType, BBOOrderType, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, OrderLevel, TrackerEventName } from '@orderly.network/types';
-import { registerSimpleDialog, SimpleDialog, ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, Slider, textVariants, injectable, Button, ThrottledButton, registerSimpleSheet, Select, Grid, Checkbox, SettingFillIcon, useScreen, Tips, InfoCircleIcon, AddCircleIcon, useModal, toast, Divider, Switch, SimpleSheet, Badge, TokenIcon, DataTable, IconButton, CloseIcon, CloseCircleFillIcon, ChevronRightIcon, SymbolBadge as SymbolBadge$1, EditIcon as EditIcon$1, SimpleDropdownMenu, CaretDownIcon, DotStatus, PopoverRoot, PopoverTrigger, PopoverContent } from '@orderly.network/ui';
+import { registerSimpleDialog, SimpleDialog, ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, Slider, textVariants, injectable, Button, ThrottledButton, registerSimpleSheet, Select, Checkbox, SettingFillIcon, Grid, useScreen, Tips, InfoCircleIcon, AddCircleIcon, useModal, toast, Divider, Switch, SimpleSheet, Badge, TokenIcon, DataTable, IconButton, CloseIcon, CloseCircleFillIcon, ChevronRightIcon, SymbolBadge as SymbolBadge$1, EditIcon as EditIcon$1, SimpleDropdownMenu, CaretDownIcon, DotStatus, PopoverRoot, PopoverTrigger, PopoverContent } from '@orderly.network/ui';
 import { TPSLPositionTypeWidget, TPSLAdvancedWidget } from '@orderly.network/ui-tpsl';
 import { Decimal, zero, formatSymbol, removeTrailingZeros, todpIfNeed, getBBOType } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -592,7 +592,10 @@ var SymbolBadge = (props) => {
     props.symbol
   );
   const badge = brokerName ?? brokerId ?? void 0;
-  return /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw });
+  if (!badge) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Flex, { as: "span", display: "inlineFlex", className: props.className, children: /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw }) });
 };
 var OrderConfirmDialog = (props) => {
   const { symbolInfo, order, onConfirm, onCancel } = props;
@@ -3750,6 +3753,13 @@ var PriceInput = (props) => {
     }
   );
 };
+function stackedOrderInputRoundedCn(position) {
+  return cn(
+    "!oui-rounded",
+    position === "top" && "!oui-rounded-t-xl",
+    position === "bottom" && "!oui-rounded-b-xl"
+  );
+}
 var QuantityInput = memo((props) => {
   const { t } = useTranslation();
   const { symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
@@ -3769,8 +3779,9 @@ var QuantityInput = memo((props) => {
       formatters: [inputFormatter.dpFormatter(base_dp)],
       onFocus: onFocus(3 /* QUANTITY */),
       onBlur: onBlur(3 /* QUANTITY */),
-      className: "oui-orderEntry-quantityInput !oui-rounded-e",
+      className: stackedOrderInputRoundedCn(props.stackPosition),
       classNames: {
+        root: "oui-orderEntry-quantityInput",
         suffix: "oui-justify-end"
       }
     }
@@ -3862,8 +3873,9 @@ var TotalInput = memo((props) => {
         formatters: [inputFormatter.dpFormatter(2)],
         onFocus: onFocus(6 /* MARGIN */),
         onBlur: onBlur(6 /* MARGIN */),
-        className: "oui-orderEntry-marginInput !oui-rounded-s",
+        className: stackedOrderInputRoundedCn(props.stackPosition),
         classNames: {
+          root: "oui-orderEntry-marginInput",
           suffix: "oui-justify-end"
         }
       }
@@ -3882,8 +3894,9 @@ var TotalInput = memo((props) => {
       onChange: (val) => {
         setOrderValue("total", val);
       },
-      className: "oui-orderEntry-totalInput !oui-rounded-s",
+      className: stackedOrderInputRoundedCn(props.stackPosition),
       classNames: {
+        root: "oui-orderEntry-totalInput",
         suffix: "oui-justify-end"
       },
       formatters: [inputFormatter.dpFormatter(2)],
@@ -3894,9 +3907,15 @@ var TotalInput = memo((props) => {
 });
 TotalInput.displayName = "TotalInput";
 var QtyAndTotalInput = memo((props) => {
-  return /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-orderEntry-qtyAndTotal oui-group oui-gap-1", children: [
-    /* @__PURE__ */ jsx(QuantityInput, { order_quantity: props.order_quantity }),
-    /* @__PURE__ */ jsx(TotalInput, { total: props.total })
+  return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-qtyAndTotal oui-space-y-1", children: [
+    /* @__PURE__ */ jsx(
+      QuantityInput,
+      {
+        order_quantity: props.order_quantity,
+        stackPosition: props.quantityStackPosition
+      }
+    ),
+    /* @__PURE__ */ jsx(TotalInput, { total: props.total, stackPosition: "bottom" })
   ] });
 });
 QtyAndTotalInput.displayName = "QtyAndTotalInput";
@@ -4422,7 +4441,7 @@ var ScaledQuantityUnit = (props) => {
         trigger: cn(
           "oui-orderEntry-scaledQuantityUnit-btn",
           "oui-absolute oui-end-0 oui-top-1",
-          "oui-w-full oui-justify-end",
+          "oui-w-auto oui-justify-end",
           "oui-shadow-none"
         )
       },
@@ -4467,7 +4486,7 @@ var ScaledQuantityInput = memo((props) => {
         suffix,
         id: "order_quantity_input",
         name: "order_quantity_input",
-        className: "oui-orderEntry-scaledOrder-quantityInput !oui-rounded-e",
+        className: stackedOrderInputRoundedCn(props.stackPosition),
         value: props.order_quantity,
         error: getErrorMsg(
           "order_quantity",
@@ -4478,7 +4497,10 @@ var ScaledQuantityInput = memo((props) => {
         },
         formatters: [inputFormatter.dpFormatter(base_dp)],
         onFocus: onFocus(3 /* QUANTITY */),
-        onBlur: onBlur(3 /* QUANTITY */)
+        onBlur: onBlur(3 /* QUANTITY */),
+        classNames: {
+          root: "oui-orderEntry-scaledOrder-quantityInput"
+        }
       }
     );
   }
@@ -4489,7 +4511,7 @@ var ScaledQuantityInput = memo((props) => {
       suffix,
       id: "order_total_input",
       name: "order_total_input",
-      className: "oui-orderEntry-scaledOrder-totalInput !oui-rounded-e",
+      className: stackedOrderInputRoundedCn(props.stackPosition),
       value: props.total,
       error: getErrorMsg("order_quantity", `${errors?.total?.value} ${quote}`),
       onChange: (val) => {
@@ -4497,7 +4519,10 @@ var ScaledQuantityInput = memo((props) => {
       },
       formatters: [inputFormatter.dpFormatter(quote_dp)],
       onFocus: onFocus(5 /* TOTAL */),
-      onBlur: onBlur(5 /* TOTAL */)
+      onBlur: onBlur(5 /* TOTAL */),
+      classNames: {
+        root: "oui-orderEntry-scaledOrder-totalInput"
+      }
     }
   );
 });
@@ -4536,7 +4561,7 @@ var TotalOrdersInput = memo((props) => {
       label: t("orderEntry.totalOrders"),
       placeholder: "2-20",
       id: "order_total_orders_input",
-      className: "oui-orderEntry-scaledOrder-totalOrdersInput !oui-rounded-s",
+      className: stackedOrderInputRoundedCn(props.stackPosition),
       value: props.total_orders,
       error: getErrorMsg("total_orders"),
       onChange: (val) => {
@@ -4548,7 +4573,10 @@ var TotalOrdersInput = memo((props) => {
         inputFormatter.dpFormatter(0)
       ],
       onFocus: onFocus(9 /* TOTAL_ORDERS */),
-      onBlur: onBlur(9 /* TOTAL_ORDERS */)
+      onBlur: onBlur(9 /* TOTAL_ORDERS */),
+      classNames: {
+        root: "oui-orderEntry-scaledOrder-totalOrdersInput"
+      }
     }
   );
 });
@@ -4563,23 +4591,23 @@ var ScaledOrderInput = (props) => {
         end_price: values.end_price
       }
     ),
-    /* @__PURE__ */ jsxs(
-      Grid,
-      {
-        cols: 2,
-        className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-gap-1",
-        children: [
-          /* @__PURE__ */ jsx(
-            ScaledQuantityInput,
-            {
-              order_quantity: values.order_quantity,
-              total: values.total
-            }
-          ),
-          /* @__PURE__ */ jsx(TotalOrdersInput, { total_orders: values.total_orders })
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: "oui-scaledOrderInput-qtyAndOrders oui-space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        ScaledQuantityInput,
+        {
+          order_quantity: values.order_quantity,
+          total: values.total,
+          stackPosition: "middle"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TotalOrdersInput,
+        {
+          total_orders: values.total_orders,
+          stackPosition: "middle"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       QuantityDistributionInput,
       {
@@ -4855,7 +4883,8 @@ var TrailingStopInput = (props) => {
       QtyAndTotalInput,
       {
         order_quantity: values.order_quantity,
-        total: values.total
+        total: values.total,
+        quantityStackPosition: "middle"
       }
     )
   ] });
@@ -4889,7 +4918,8 @@ function OrderInput(props) {
       QtyAndTotalInput,
       {
         order_quantity: values.order_quantity,
-        total: values.total
+        total: values.total,
+        quantityStackPosition: showTriggerPrice || showPrice ? "middle" : "top"
       }
     )
   ] });