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

package/dist/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
+var i18n = require('@orderly.network/i18n');
 var ui = require('@orderly.network/ui');
 var React = require('react');
 var hooks = require('@orderly.network/hooks');
-var i18n = require('@orderly.network/i18n');
 var types = require('@orderly.network/types');
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@orderly.network/utils');
@@ -63,6 +63,7 @@ var Poster = React.forwardRef((props, parentRef) => {
       ref,
       width,
       height,
+      dir: "ltr",
       className,
       style
     }
@@ -427,11 +428,17 @@ var NextButton = (props) => {
 };
 var CarouselBackgroundImage = (props) => {
   const { backgroundImages, selectedSnap, setSelectedSnap } = props;
+  const [direction, setDirection] = React.useState("ltr");
   const [emblaRef, emblaApi] = ui.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;
@@ -469,7 +476,7 @@ var CarouselBackgroundImage = (props) => {
     };
   }, [emblaApi, onSelect]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.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",
       {
@@ -487,10 +494,9 @@ var CarouselBackgroundImage = (props) => {
             },
             mx: 2,
             my: 1,
-            mr: 6,
             r: "base",
             className: ui.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" })
@@ -499,7 +505,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) => {
@@ -571,7 +577,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);
         },
@@ -592,7 +598,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(() => {
@@ -716,7 +722,7 @@ var PnlFormatView = (props) => {
             size: "xs",
             intensity: 54,
             className: ui.cn(
-              "oui-ml-2 "
+              "oui-ms-2 "
               // isSelected && "oui-text-base-contrast"
             ),
             children: text
@@ -797,6 +803,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;
@@ -856,6 +863,7 @@ var DesktopSharePnLContent = (props) => {
             height: 310,
             data: {
               backgroundImg: curBgImg,
+              direction,
               ...resetOptions,
               data: posterData
             },
@@ -1078,7 +1086,7 @@ var CarouselItem = React__default.default.forwardRef((originalProps, ref) => {
       "aria-roledescription": "slide",
       className: ui.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,
@@ -1102,7 +1110,7 @@ var CarouselPrevious = React__default.default.forwardRef((originalProps, ref) =>
       variant,
       className: ui.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,
@@ -1131,7 +1139,7 @@ var CarouselNext = React__default.default.forwardRef((originalProps, ref) => {
       variant,
       className: ui.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,
@@ -1202,6 +1210,7 @@ var MobileSharePnLContent = (props) => {
     backgroundImages: []
   };
   const [domain, setDomain] = React.useState("");
+  const direction = "ltr";
   const posterRefs = shareOptions?.backgroundImages?.map(
     () => React.useRef(null)
   );
@@ -1288,6 +1297,7 @@ var MobileSharePnLContent = (props) => {
                   height: 310,
                   data: {
                     backgroundImg: item,
+                    direction,
                     ...resetOptions,
                     data: posterData
                   },
@@ -1355,7 +1365,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(() => {
@@ -1398,7 +1408,7 @@ var PnlFormatView2 = (props) => {
       case "pnl":
         return t("share.pnl.displayFormat.pnl");
     }
-  }, [type]);
+  }, [t, type]);
   const isSelected = type === curType;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1576,6 +1586,8 @@ var SharePnLDialogWidget = (props) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsx(DesktopSharePnL, { ...state });
 };
+
+// src/index.ts
 var SharePnLDialogId = "sharePnLDialog";
 var SharePnLBottomSheetId = "sharePnLBottomSheet";
 ui.registerSimpleDialog(SharePnLDialogId, SharePnLDialogWidget, {
@@ -1584,7 +1596,7 @@ ui.registerSimpleDialog(SharePnLDialogId, SharePnLDialogWidget, {
   }
 });
 ui.registerSimpleSheet(SharePnLBottomSheetId, SharePnLBottomSheetWidget, {
-  title: i18n.i18n.t("share.pnl.sharePnl"),
+  title: () => i18n.i18n.t("share.pnl.sharePnl"),
   classNames: {
     body: "oui-pb-4 oui-pt-0"
   }