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

package/dist/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
+var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyUi = require('@kodiak-finance/orderly-ui');
 var React = require('react');
 var orderlyHooks = require('@kodiak-finance/orderly-hooks');
-var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyTypes = require('@kodiak-finance/orderly-types');
 var jsxRuntime = require('react/jsx-runtime');
 var orderlyUtils = require('@kodiak-finance/orderly-utils');
@@ -63,6 +63,7 @@ var Poster = React.forwardRef((props, parentRef) => {
       ref,
       width,
       height,
+      dir: "ltr",
       className,
       style
     }
@@ -428,11 +429,17 @@ var NextButton = (props) => {
 };
 var CarouselBackgroundImage = (props) => {
   const { backgroundImages, selectedSnap, setSelectedSnap } = props;
+  const [direction, setDirection] = React.useState("ltr");
   const [emblaRef, emblaApi] = orderlyUi.useEmblaCarousel({
     // loop: true,
     containScroll: "keepSnaps",
-    dragFree: true
+    dragFree: true,
+    direction
   });
+  React.useEffect(() => {
+    const docDir = document?.documentElement?.dir?.toLowerCase();
+    setDirection(docDir === "rtl" ? "rtl" : "ltr");
+  }, []);
   const onPrevButtonClick = React.useCallback(() => {
     if (!emblaApi) {
       return;
@@ -470,7 +477,7 @@ var CarouselBackgroundImage = (props) => {
     };
   }, [emblaApi, onSelect]);
   return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { mt: 4, px: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PrevButton, { onClick: onPrevButtonClick }),
+    direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(NextButton, { onClick: onNextButtonClick }) : /* @__PURE__ */ jsxRuntime.jsx(PrevButton, { onClick: onPrevButtonClick }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -488,10 +495,9 @@ var CarouselBackgroundImage = (props) => {
             },
             mx: 2,
             my: 1,
-            mr: 6,
             r: "base",
             className: orderlyUi.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__ */ jsxRuntime.jsx("img", { src: e, className: "oui-rounded-sm" })
@@ -500,7 +506,7 @@ var CarouselBackgroundImage = (props) => {
         )) })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(NextButton, { onClick: onNextButtonClick })
+    direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(PrevButton, { onClick: onPrevButtonClick }) : /* @__PURE__ */ jsxRuntime.jsx(NextButton, { onClick: onNextButtonClick })
   ] });
 };
 var Checkbox = (props) => {
@@ -572,7 +578,7 @@ var Message = (props) => {
     /* @__PURE__ */ jsxRuntime.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);
         },
@@ -593,7 +599,7 @@ var Message = (props) => {
         suffix: focus && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "oui-mr-3 oui-cursor-pointer",
+            className: "oui-me-3 oui-cursor-pointer",
             onMouseDown: (e) => {
               setMessage("");
               setTimeout(() => {
@@ -717,7 +723,7 @@ var PnlFormatView = (props) => {
             size: "xs",
             intensity: 54,
             className: orderlyUi.cn(
-              "oui-ml-2 "
+              "oui-ms-2 "
               // isSelected && "oui-text-base-contrast"
             ),
             children: text
@@ -798,6 +804,7 @@ var DesktopSharePnLContent = (props) => {
     backgroundImages: []
   };
   const [domain, setDomain] = React.useState("");
+  const direction = "ltr";
   const posterRef = React.useRef(null);
   React.useEffect(() => {
     const currentDomain = window.location.hostname;
@@ -857,6 +864,7 @@ var DesktopSharePnLContent = (props) => {
             height: 310,
             data: {
               backgroundImg: curBgImg,
+              direction,
               ...resetOptions,
               data: posterData
             },
@@ -1079,7 +1087,7 @@ var CarouselItem = React__default.default.forwardRef((originalProps, ref) => {
       "aria-roledescription": "slide",
       className: orderlyUi.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,
@@ -1103,7 +1111,7 @@ var CarouselPrevious = React__default.default.forwardRef((originalProps, ref) =>
       variant,
       className: orderlyUi.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,
@@ -1132,7 +1140,7 @@ var CarouselNext = React__default.default.forwardRef((originalProps, ref) => {
       variant,
       className: orderlyUi.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,
@@ -1203,6 +1211,7 @@ var MobileSharePnLContent = (props) => {
     backgroundImages: []
   };
   const [domain, setDomain] = React.useState("");
+  const direction = "ltr";
   const posterRefs = shareOptions?.backgroundImages?.map(
     () => React.useRef(null)
   );
@@ -1289,6 +1298,7 @@ var MobileSharePnLContent = (props) => {
                   height: 310,
                   data: {
                     backgroundImg: item,
+                    direction,
                     ...resetOptions,
                     data: posterData
                   },
@@ -1356,7 +1366,7 @@ var MobileSharePnLContent = (props) => {
             suffix: focus && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
-                className: "oui-mr-3 oui-cursor-pointer",
+                className: "oui-me-3 oui-cursor-pointer",
                 onMouseDown: (e) => {
                   setMessage("");
                   setTimeout(() => {
@@ -1399,7 +1409,7 @@ var PnlFormatView2 = (props) => {
       case "pnl":
         return t("share.pnl.displayFormat.pnl");
     }
-  }, [type]);
+  }, [t, type]);
   const isSelected = type === curType;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1577,6 +1587,8 @@ var SharePnLDialogWidget = (props) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsx(DesktopSharePnL, { ...state });
 };
+
+// src/index.ts
 var SharePnLDialogId = "sharePnLDialog";
 var SharePnLBottomSheetId = "sharePnLBottomSheet";
 orderlyUi.registerSimpleDialog(SharePnLDialogId, SharePnLDialogWidget, {
@@ -1585,7 +1597,7 @@ orderlyUi.registerSimpleDialog(SharePnLDialogId, SharePnLDialogWidget, {
   }
 });
 orderlyUi.registerSimpleSheet(SharePnLBottomSheetId, SharePnLBottomSheetWidget, {
-  title: orderlyI18n.i18n.t("share.pnl.sharePnl"),
+  title: () => orderlyI18n.i18n.t("share.pnl.sharePnl"),
   classNames: {
     body: "oui-pb-4 oui-pt-0"
   }