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

package/dist/index.js

@@ -598,7 +598,10 @@ var SymbolBadge = (props) => {
     props.symbol
   );
   const badge = brokerName ?? brokerId ?? void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
+  if (!badge) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { as: "span", display: "inlineFlex", className: props.className, children: /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw }) });
 };
 var OrderConfirmDialog = (props) => {
   const { symbolInfo, order, onConfirm, onCancel } = props;
@@ -3756,6 +3759,13 @@ var PriceInput = (props) => {
     }
   );
 };
+function stackedOrderInputRoundedCn(position) {
+  return ui.cn(
+    "!oui-rounded",
+    position === "top" && "!oui-rounded-t-xl",
+    position === "bottom" && "!oui-rounded-b-xl"
+  );
+}
 var QuantityInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
@@ -3775,8 +3785,9 @@ var QuantityInput = React3.memo((props) => {
       formatters: [ui.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"
       }
     }
@@ -3868,8 +3879,9 @@ var TotalInput = React3.memo((props) => {
         formatters: [ui.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"
         }
       }
@@ -3888,8 +3900,9 @@ var TotalInput = React3.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: [ui.inputFormatter.dpFormatter(2)],
@@ -3900,9 +3913,15 @@ var TotalInput = React3.memo((props) => {
 });
 TotalInput.displayName = "TotalInput";
 var QtyAndTotalInput = React3.memo((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, className: "oui-orderEntry-qtyAndTotal oui-group oui-gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(QuantityInput, { order_quantity: props.order_quantity }),
-    /* @__PURE__ */ jsxRuntime.jsx(TotalInput, { total: props.total })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-qtyAndTotal oui-space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuantityInput,
+      {
+        order_quantity: props.order_quantity,
+        stackPosition: props.quantityStackPosition
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TotalInput, { total: props.total, stackPosition: "bottom" })
   ] });
 });
 QtyAndTotalInput.displayName = "QtyAndTotalInput";
@@ -4428,7 +4447,7 @@ var ScaledQuantityUnit = (props) => {
         trigger: ui.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"
         )
       },
@@ -4473,7 +4492,7 @@ var ScaledQuantityInput = React3.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",
@@ -4484,7 +4503,10 @@ var ScaledQuantityInput = React3.memo((props) => {
         },
         formatters: [ui.inputFormatter.dpFormatter(base_dp)],
         onFocus: onFocus(3 /* QUANTITY */),
-        onBlur: onBlur(3 /* QUANTITY */)
+        onBlur: onBlur(3 /* QUANTITY */),
+        classNames: {
+          root: "oui-orderEntry-scaledOrder-quantityInput"
+        }
       }
     );
   }
@@ -4495,7 +4517,7 @@ var ScaledQuantityInput = React3.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) => {
@@ -4503,7 +4525,10 @@ var ScaledQuantityInput = React3.memo((props) => {
       },
       formatters: [ui.inputFormatter.dpFormatter(quote_dp)],
       onFocus: onFocus(5 /* TOTAL */),
-      onBlur: onBlur(5 /* TOTAL */)
+      onBlur: onBlur(5 /* TOTAL */),
+      classNames: {
+        root: "oui-orderEntry-scaledOrder-totalInput"
+      }
     }
   );
 });
@@ -4542,7 +4567,7 @@ var TotalOrdersInput = React3.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) => {
@@ -4554,7 +4579,10 @@ var TotalOrdersInput = React3.memo((props) => {
         ui.inputFormatter.dpFormatter(0)
       ],
       onFocus: onFocus(9 /* TOTAL_ORDERS */),
-      onBlur: onBlur(9 /* TOTAL_ORDERS */)
+      onBlur: onBlur(9 /* TOTAL_ORDERS */),
+      classNames: {
+        root: "oui-orderEntry-scaledOrder-totalOrdersInput"
+      }
     }
   );
 });
@@ -4569,23 +4597,23 @@ var ScaledOrderInput = (props) => {
         end_price: values.end_price
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ui.Grid,
-      {
-        cols: 2,
-        className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-gap-1",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ScaledQuantityInput,
-            {
-              order_quantity: values.order_quantity,
-              total: values.total
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(TotalOrdersInput, { total_orders: values.total_orders })
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-scaledOrderInput-qtyAndOrders oui-space-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ScaledQuantityInput,
+        {
+          order_quantity: values.order_quantity,
+          total: values.total,
+          stackPosition: "middle"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TotalOrdersInput,
+        {
+          total_orders: values.total_orders,
+          stackPosition: "middle"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       QuantityDistributionInput,
       {
@@ -4861,7 +4889,8 @@ var TrailingStopInput = (props) => {
       QtyAndTotalInput,
       {
         order_quantity: values.order_quantity,
-        total: values.total
+        total: values.total,
+        quantityStackPosition: "middle"
       }
     )
   ] });
@@ -4895,7 +4924,8 @@ function OrderInput(props) {
       QtyAndTotalInput,
       {
         order_quantity: values.order_quantity,
-        total: values.total
+        total: values.total,
+        quantityStackPosition: showTriggerPrice || showPrice ? "middle" : "top"
       }
     )
   ] });