@orderly.network/ui-tradingview 3.0.4-alpha.4 → 3.1.0-alpha.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React3, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation, Trans, useLocaleCode, i18n } from '@orderly.network/i18n';
-import { injectable, useScreen, cn, Flex, Divider, useOrderlyTheme, Text, Switch, Box, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent } from '@orderly.network/ui';
+import { injectable, useScreen, cn, Flex, Divider, useDocumentDirection, useOrderlyTheme, Text, Switch, Box, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent } from '@orderly.network/ui';
 import { useConfig, useAccount, useSymbolsInfo, useLocalStorage, useOrderEntry_deprecated, useMarginModeBySymbol, useWS, usePositionStream, useOrderStream, useEventEmitter } from '@orderly.network/hooks';
 import { OrderSide, TradingviewFullscreenKey, OrderType, AccountStatusEnum, OrderStatus, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, MarginMode } from '@orderly.network/types';
 import { Decimal, commify, getTrailingStopPrice, getPrecisionByNumber } from '@orderly.network/utils';
@@ -483,7 +483,7 @@ var init_timeInterval = __esm({
         "div",
         {
           className: cn(
-            "oui-text-2xs oui-text-base-contrast-36 oui-flex oui-gap-[2px] oui-items-center oui-mr-3 oui-font-semibold",
+            "oui-text-2xs oui-text-base-contrast-36 oui-flex oui-gap-[2px] oui-items-center oui-me-3 oui-font-semibold",
             "oui-overflow-hidden"
           ),
           children: timeIntervalMap.map((item) => /* @__PURE__ */ jsx(
@@ -556,7 +556,7 @@ var init_timeInterval = __esm({
             "oui-overflow-hidden"
           ),
           children: [
-            /* @__PURE__ */ jsx("div", { className: " oui-flex oui-gap-1 oui-items-center oui-mr-3 oui-font-semibold", children: mobileTimeIntervalDefaultMap.map((item) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: " oui-flex oui-gap-1 oui-items-center oui-me-3 oui-font-semibold", children: mobileTimeIntervalDefaultMap.map((item) => /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
@@ -4334,6 +4334,7 @@ var Widget = class {
       datafeed: options.datafeed,
       studies_overrides: options.studiesOverrides,
       locale: options.locale,
+      direction: options.direction,
       theme: options.theme,
       loading_screen: options.loadingScreen,
       toolbar_bg: options.toolbarBg,
@@ -4415,7 +4416,7 @@ var getChartLocalStorageKey = (suffix, isMobile) => {
   return isMobile ? `orderly_tradingview_mobile_${suffix}` : `orderly_tradingview_${suffix}`;
 };
 var defaultLocale = (localeCode) => {
-  return localeCode === "id" ? "id_ID" : localeCode === "tc" ? "zh_TW" : localeCode;
+  return localeCode === "id" ? "id_ID" : localeCode === "tc" ? "zh_TW" : localeCode === "ar" ? "ar" : localeCode === "he" ? "he_IL" : localeCode;
 };
 function useTradingviewScript(props) {
   const {
@@ -4435,6 +4436,7 @@ function useTradingviewScript(props) {
     customIndicatorsGetter
   } = props;
   const localeCode = useLocaleCode();
+  const direction = useDocumentDirection();
   const { isMobile } = useScreen();
   const { currentTheme } = useOrderlyTheme();
   const theme = props.theme ?? currentTheme?.mode ?? "dark";
@@ -4667,6 +4669,7 @@ function useTradingviewScript(props) {
         autosize: true,
         symbol: withExchangePrefix(symbol),
         locale: typeof locale === "function" ? locale(localeCode) : locale,
+        direction,
         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         container: chartRef.current,
         libraryPath,
@@ -4719,7 +4722,8 @@ function useTradingviewScript(props) {
     configHash,
     loadingScreen,
     toolbarBg,
-    customIndicatorsGetter
+    customIndicatorsGetter,
+    direction
   ]);
   useEffect(() => {
     ws.on(
@@ -4779,6 +4783,7 @@ function useTradingviewScript(props) {
     symbol,
     onFullScreenChange,
     classNames,
+    direction,
     fullscreen
   };
 }
@@ -4800,7 +4805,7 @@ var NoTradingview = () => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-inset-0 oui-z-0 oui-flex oui-flex-col oui-items-center oui-justify-start oui-p-2 oui-text-base-contrast-80 md:oui-justify-center md:oui-p-10", children: /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("p", { className: "oui-mb-6 oui-text-xs", children: t("tradingView.noScriptSrc") }),
-    /* @__PURE__ */ jsx("p", { className: "oui-mb-3 oui-pl-0 oui-text-2xs oui-text-base-contrast-54 md:oui-pl-2 md:oui-text-base md:oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("p", { className: "oui-mb-3 oui-ps-0 oui-text-2xs oui-text-base-contrast-54 md:oui-ps-2 md:oui-text-base md:oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(
       Trans,
       {
         i18nKey: "tradingView.noScriptSrc.1",
@@ -4815,7 +4820,7 @@ var NoTradingview = () => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("p", { className: "oui-pl-0 oui-text-2xs oui-text-base-contrast-54 md:oui-pl-2 md:oui-text-base md:oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("p", { className: "oui-ps-0 oui-text-2xs oui-text-base-contrast-54 md:oui-ps-2 md:oui-text-base md:oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(
       Trans,
       {
         i18nKey: "tradingView.noScriptSrc.2",
@@ -4836,12 +4841,13 @@ var TopBar = (props) => {
   return /* @__PURE__ */ jsx("div", { className: "top-toolbar oui-flex oui-h-[44px] oui-justify-between md:oui-justify-start oui-items-center oui-p-2 md:oui-px-3 md:oui-pt-3 md:oui-pb-[14px] oui-w-full", children: props.children });
 };
 var topBar_default = TopBar;
-var TradingviewChart = ({ chartRef }) => {
+var TradingviewChart = ({ chartRef, direction = "ltr" }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-testid": "tradingview-chart",
       ref: chartRef,
+      dir: direction,
       className: "oui-size-full oui-overflow-hidden"
     }
   );
@@ -5008,13 +5014,15 @@ var TradingviewUI = forwardRef((props, ref) => {
     changeLineType,
     openChartSetting,
     openChartIndicators,
-    onFullScreenChange
+    onFullScreenChange,
+    direction = "ltr"
   } = props;
   const { isMobile } = useScreen();
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
+      dir: direction,
       className: cn(
         "oui-tradingview-root oui-relative oui-size-full",
         props.classNames?.root
@@ -5022,6 +5030,7 @@ var TradingviewUI = forwardRef((props, ref) => {
       children: !tradingViewScriptSrc ? /* @__PURE__ */ jsx(NoTradingview, {}) : /* @__PURE__ */ jsxs(
         "div",
         {
+          dir: direction,
           className: cn(
             "oui-absolute oui-inset-0 oui-z-[1] oui-flex oui-flex-col",
             props.classNames?.content