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

package/dist/index.d.mts

@@ -15464,6 +15464,7 @@ interface ColorConfigInterface {
 }
 
 type TradingviewLocaleCode = LanguageCode;
+type TradingviewDirection = "ltr" | "rtl";
 interface TradingviewWidgetPropsInterface {
     symbol?: string;
     mode?: ChartMode;
@@ -15519,6 +15520,7 @@ interface TradingviewUIPropsInterface {
         root?: string;
         content?: string;
     };
+    direction?: TradingviewDirection;
     fullscreen?: boolean;
 }
 interface DisplayControlSettingInterface {
@@ -15589,6 +15591,7 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
         root?: string;
         content?: string;
     } | undefined;
+    direction: "ltr" | "rtl";
     fullscreen: any;
 };
 
@@ -15600,4 +15603,4 @@ declare const DesktopDisplayControl: React.FC<IProps>;
 
 declare const MobileDisplayControl: React.FC<IProps>;
 
-export { DesktopDisplayControl, type DesktopDisplayControlMenuItem, type DesktopDisplayControlMenuListProps, DesktopDisplayControlMenuListTarget, type DisplayControlSettingInterface, InjectableTradingviewDesktop, MobileDisplayControl, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+export { DesktopDisplayControl, type DesktopDisplayControlMenuItem, type DesktopDisplayControlMenuListProps, DesktopDisplayControlMenuListTarget, type DisplayControlSettingInterface, InjectableTradingviewDesktop, MobileDisplayControl, type TradingviewDirection, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.d.ts

@@ -15464,6 +15464,7 @@ interface ColorConfigInterface {
 }
 
 type TradingviewLocaleCode = LanguageCode;
+type TradingviewDirection = "ltr" | "rtl";
 interface TradingviewWidgetPropsInterface {
     symbol?: string;
     mode?: ChartMode;
@@ -15519,6 +15520,7 @@ interface TradingviewUIPropsInterface {
         root?: string;
         content?: string;
     };
+    direction?: TradingviewDirection;
     fullscreen?: boolean;
 }
 interface DisplayControlSettingInterface {
@@ -15589,6 +15591,7 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
         root?: string;
         content?: string;
     } | undefined;
+    direction: "ltr" | "rtl";
     fullscreen: any;
 };
 
@@ -15600,4 +15603,4 @@ declare const DesktopDisplayControl: React.FC<IProps>;
 
 declare const MobileDisplayControl: React.FC<IProps>;
 
-export { DesktopDisplayControl, type DesktopDisplayControlMenuItem, type DesktopDisplayControlMenuListProps, DesktopDisplayControlMenuListTarget, type DisplayControlSettingInterface, InjectableTradingviewDesktop, MobileDisplayControl, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+export { DesktopDisplayControl, type DesktopDisplayControlMenuItem, type DesktopDisplayControlMenuListProps, DesktopDisplayControlMenuListTarget, type DisplayControlSettingInterface, InjectableTradingviewDesktop, MobileDisplayControl, type TradingviewDirection, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.js

@@ -489,7 +489,7 @@ var init_timeInterval = __esm({
         "div",
         {
           className: ui.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__ */ jsxRuntime.jsx(
@@ -562,7 +562,7 @@ var init_timeInterval = __esm({
             "oui-overflow-hidden"
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: " oui-flex oui-gap-1 oui-items-center oui-mr-3 oui-font-semibold", children: mobileTimeIntervalDefaultMap.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: " oui-flex oui-gap-1 oui-items-center oui-me-3 oui-font-semibold", children: mobileTimeIntervalDefaultMap.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: ui.cn(
@@ -4340,6 +4340,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,
@@ -4421,7 +4422,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 {
@@ -4441,6 +4442,7 @@ function useTradingviewScript(props) {
     customIndicatorsGetter
   } = props;
   const localeCode = i18n.useLocaleCode();
+  const direction = ui.useDocumentDirection();
   const { isMobile } = ui.useScreen();
   const { currentTheme } = ui.useOrderlyTheme();
   const theme = props.theme ?? currentTheme?.mode ?? "dark";
@@ -4673,6 +4675,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,
@@ -4725,7 +4728,8 @@ function useTradingviewScript(props) {
     configHash,
     loadingScreen,
     toolbarBg,
-    customIndicatorsGetter
+    customIndicatorsGetter,
+    direction
   ]);
   React3.useEffect(() => {
     ws.on(
@@ -4785,6 +4789,7 @@ function useTradingviewScript(props) {
     symbol,
     onFullScreenChange,
     classNames,
+    direction,
     fullscreen
   };
 }
@@ -4806,7 +4811,7 @@ var NoTradingview = () => {
   const { t } = i18n.useTranslation();
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oui-mb-6 oui-text-xs", children: t("tradingView.noScriptSrc") }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       i18n.Trans,
       {
         i18nKey: "tradingView.noScriptSrc.1",
@@ -4821,7 +4826,7 @@ var NoTradingview = () => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       i18n.Trans,
       {
         i18nKey: "tradingView.noScriptSrc.2",
@@ -4842,12 +4847,13 @@ var TopBar = (props) => {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "div",
     {
       "data-testid": "tradingview-chart",
       ref: chartRef,
+      dir: direction,
       className: "oui-size-full oui-overflow-hidden"
     }
   );
@@ -5014,13 +5020,15 @@ var TradingviewUI = React3.forwardRef((props, ref) => {
     changeLineType,
     openChartSetting,
     openChartIndicators,
-    onFullScreenChange
+    onFullScreenChange,
+    direction = "ltr"
   } = props;
   const { isMobile } = ui.useScreen();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
+      dir: direction,
       className: ui.cn(
         "oui-tradingview-root oui-relative oui-size-full",
         props.classNames?.root
@@ -5028,6 +5036,7 @@ var TradingviewUI = React3.forwardRef((props, ref) => {
       children: !tradingViewScriptSrc ? /* @__PURE__ */ jsxRuntime.jsx(NoTradingview, {}) : /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          dir: direction,
           className: ui.cn(
             "oui-absolute oui-inset-0 oui-z-[1] oui-flex oui-flex-col",
             props.classNames?.content