@kodiak-finance/orderly-ui-share 2.9.2 → 2.9.3

package/dist/index.mjs

@@ -1,7 +1,7 @@
+import { i18n, useTranslation } from '@kodiak-finance/orderly-i18n';
 import { useEmblaCarousel, cn, Button, ChevronLeftIcon, ChevronRightIcon, registerSimpleDialog, registerSimpleSheet, Box, Flex, Text, Divider, ScrollArea, Input, CloseCircleFillIcon, toast } from '@kodiak-finance/orderly-ui';
 import React, { forwardRef, useImperativeHandle, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { usePoster, useSymbolsInfo, useReferralInfo } from '@kodiak-finance/orderly-hooks';
-import { i18n, useTranslation } from '@kodiak-finance/orderly-i18n';
 import { EMPTY_LIST } from '@kodiak-finance/orderly-types';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { formatNum, Decimal } from '@kodiak-finance/orderly-utils';
@@ -57,6 +57,7 @@ var Poster = forwardRef((props, parentRef) => {
       ref,
       width,
       height,
+      dir: "ltr",
       className,
       style
     }
@@ -422,11 +423,17 @@ var NextButton = (props) => {
 };
 var CarouselBackgroundImage = (props) => {
   const { backgroundImages, selectedSnap, setSelectedSnap } = props;
+  const [direction, setDirection] = useState("ltr");
   const [emblaRef, emblaApi] = useEmblaCarousel({
     // loop: true,
     containScroll: "keepSnaps",
-    dragFree: true
+    dragFree: true,
+    direction
   });
+  useEffect(() => {
+    const docDir = document?.documentElement?.dir?.toLowerCase();
+    setDirection(docDir === "rtl" ? "rtl" : "ltr");
+  }, []);
   const onPrevButtonClick = useCallback(() => {
     if (!emblaApi) {
       return;
@@ -464,7 +471,7 @@ var CarouselBackgroundImage = (props) => {
     };
   }, [emblaApi, onSelect]);
   return /* @__PURE__ */ jsxs(Flex, { mt: 4, px: 2, children: [
-    /* @__PURE__ */ jsx(PrevButton, { onClick: onPrevButtonClick }),
+    direction === "rtl" ? /* @__PURE__ */ jsx(NextButton, { onClick: onNextButtonClick }) : /* @__PURE__ */ jsx(PrevButton, { onClick: onPrevButtonClick }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -482,10 +489,9 @@ var CarouselBackgroundImage = (props) => {
             },
             mx: 2,
             my: 1,
-            mr: 6,
             r: "base",
             className: cn(
-              "oui-shrink-0 oui-w-[162px]",
+              "oui-shrink-0 oui-w-[162px] oui-me-6",
               selectedSnap === index && "oui-outline oui-outline-1 oui-outline-primary-darken"
             ),
             children: /* @__PURE__ */ jsx("img", { src: e, className: "oui-rounded-sm" })
@@ -494,7 +500,7 @@ var CarouselBackgroundImage = (props) => {
         )) })
       }
     ),
-    /* @__PURE__ */ jsx(NextButton, { onClick: onNextButtonClick })
+    direction === "rtl" ? /* @__PURE__ */ jsx(PrevButton, { onClick: onPrevButtonClick }) : /* @__PURE__ */ jsx(NextButton, { onClick: onNextButtonClick })
   ] });
 };
 var Checkbox = (props) => {
@@ -566,7 +572,7 @@ var Message = (props) => {
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "oui-text-xs oui-text-base-contrast-54 oui-ml-1 hover:oui-cursor-pointer",
+        className: "oui-text-xs oui-text-base-contrast-54 oui-ms-1 hover:oui-cursor-pointer",
         onClick: () => {
           setCheck(!props.check);
         },
@@ -587,7 +593,7 @@ var Message = (props) => {
         suffix: focus && /* @__PURE__ */ jsx(
           "button",
           {
-            className: "oui-mr-3 oui-cursor-pointer",
+            className: "oui-me-3 oui-cursor-pointer",
             onMouseDown: (e) => {
               setMessage("");
               setTimeout(() => {
@@ -711,7 +717,7 @@ var PnlFormatView = (props) => {
             size: "xs",
             intensity: 54,
             className: cn(
-              "oui-ml-2 "
+              "oui-ms-2 "
               // isSelected && "oui-text-base-contrast"
             ),
             children: text
@@ -792,6 +798,7 @@ var DesktopSharePnLContent = (props) => {
     backgroundImages: []
   };
   const [domain, setDomain] = useState("");
+  const direction = "ltr";
   const posterRef = useRef(null);
   useEffect(() => {
     const currentDomain = window.location.hostname;
@@ -851,6 +858,7 @@ var DesktopSharePnLContent = (props) => {
             height: 310,
             data: {
               backgroundImg: curBgImg,
+              direction,
               ...resetOptions,
               data: posterData
             },
@@ -1073,7 +1081,7 @@ var CarouselItem = React.forwardRef((originalProps, ref) => {
       "aria-roledescription": "slide",
       className: cn(
         "oui-min-w-0 oui-shrink-0 oui-grow-0 oui-basis-full",
-        orientation === "horizontal" ? "oui-pl-4" : "oui-pt-4",
+        orientation === "horizontal" ? "oui-ps-4" : "oui-pt-4",
         className
       ),
       ...props,
@@ -1097,7 +1105,7 @@ var CarouselPrevious = React.forwardRef((originalProps, ref) => {
       variant,
       className: cn(
         "oui-absolute oui-size-8 oui-rounded-full",
-        orientation === "horizontal" ? "oui--left-12 oui-top-1/2 oui--translate-y-1/2" : "oui--top-12 oui-left-1/2 oui--translate-x-1/2 oui-rotate-90",
+        orientation === "horizontal" ? "oui--start-12 oui-top-1/2 oui--translate-y-1/2" : "oui--top-12 oui-start-1/2 oui--translate-x-1/2 oui-rotate-90",
         className
       ),
       disabled: !canScrollPrev,
@@ -1126,7 +1134,7 @@ var CarouselNext = React.forwardRef((originalProps, ref) => {
       variant,
       className: cn(
         "oui-absolute oui-size-8 oui-rounded-full",
-        orientation === "horizontal" ? "oui--right-12 oui-top-1/2 oui--translate-y-1/2" : "oui--bottom-12 oui-left-1/2 oui--translate-x-1/2 oui-rotate-90",
+        orientation === "horizontal" ? "oui--end-12 oui-top-1/2 oui--translate-y-1/2" : "oui--bottom-12 oui-start-1/2 oui--translate-x-1/2 oui-rotate-90",
         className
       ),
       disabled: !canScrollNext,
@@ -1197,6 +1205,7 @@ var MobileSharePnLContent = (props) => {
     backgroundImages: []
   };
   const [domain, setDomain] = useState("");
+  const direction = "ltr";
   const posterRefs = shareOptions?.backgroundImages?.map(
     () => useRef(null)
   );
@@ -1283,6 +1292,7 @@ var MobileSharePnLContent = (props) => {
                   height: 310,
                   data: {
                     backgroundImg: item,
+                    direction,
                     ...resetOptions,
                     data: posterData
                   },
@@ -1350,7 +1360,7 @@ var MobileSharePnLContent = (props) => {
             suffix: focus && /* @__PURE__ */ jsx(
               "button",
               {
-                className: "oui-mr-3 oui-cursor-pointer",
+                className: "oui-me-3 oui-cursor-pointer",
                 onMouseDown: (e) => {
                   setMessage("");
                   setTimeout(() => {
@@ -1393,7 +1403,7 @@ var PnlFormatView2 = (props) => {
       case "pnl":
         return t("share.pnl.displayFormat.pnl");
     }
-  }, [type]);
+  }, [t, type]);
   const isSelected = type === curType;
   return /* @__PURE__ */ jsx(
     "div",
@@ -1571,6 +1581,8 @@ var SharePnLDialogWidget = (props) => {
   });
   return /* @__PURE__ */ jsx(DesktopSharePnL, { ...state });
 };
+
+// src/index.ts
 var SharePnLDialogId = "sharePnLDialog";
 var SharePnLBottomSheetId = "sharePnLBottomSheet";
 registerSimpleDialog(SharePnLDialogId, SharePnLDialogWidget, {
@@ -1579,7 +1591,7 @@ registerSimpleDialog(SharePnLDialogId, SharePnLDialogWidget, {
   }
 });
 registerSimpleSheet(SharePnLBottomSheetId, SharePnLBottomSheetWidget, {
-  title: i18n.t("share.pnl.sharePnl"),
+  title: () => i18n.t("share.pnl.sharePnl"),
   classNames: {
     body: "oui-pb-4 oui-pt-0"
   }