web component input phone add rtl in country item

packages/components/input-phone/index.js

@@ -1,9 +1,12 @@
 import { useState, useEffect } from "react";
-import { options } from "./options";
+import { useTheme } from "styled-components";
 import { FixedSizeList as List } from "react-window";
-import { StyledBox } from "./styled-input-phone";
-import InvalidSvgUrl from "PUBLIC_DIR/images/phoneFlags/invalid.svg?url";
 import PropTypes from "prop-types";
+
+import { options } from "./options";
+import { StyledBox } from "./styled-input-phone";
+
+import InvalidSvgUrl from "PUBLIC_DIR/images/phoneFlags/invalid.svg?url";
 import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
 import Box from "@docspace/components/box";
 import ComboBox from "@docspace/components/combobox";
@@ -31,6 +34,7 @@ const InputPhone = ({
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
   const [isValid, setIsValid] = useState(true);
+  const theme = useTheme();
 
   const onInputChange = (e) => {
     const str = e.target.value.replace(/\D/g, "");
@@ -104,6 +108,13 @@ const InputPhone = ({
   const Row = ({ data, index, style }) => {
     const country = data[index];
     const prefix = "+";
+    const RtlRowComponent = () => (
+      <>
+        <Text className="country-dialcode">{country.dialCode}</Text>
+        <Text className="country-prefix">{prefix}</Text>
+        <Text className="country-name">{country.name}</Text>
+      </>
+    );
 
     return (
       <DropDownItem
@@ -115,9 +126,15 @@ const InputPhone = ({
         data-option={index}
         onClick={onCountryClick}
       >
-        <Text className="country-name">{country.name}</Text>
-        <Text className="country-prefix">{prefix}</Text>
-        <Text className="country-dialcode">{country.dialCode}</Text>
+        {theme.interfaceDirection === "rtl" ? (
+          <RtlRowComponent />
+        ) : (
+          <>
+            <Text className="country-name">{country.name}</Text>
+            <Text className="country-prefix">{prefix}</Text>
+            <Text className="country-dialcode">{country.dialCode}</Text>
+          </>
+        )}
       </DropDownItem>
     );
   };

packages/components/input-phone/styled-input-phone.js

@@ -136,11 +136,23 @@ export const StyledBox = styled(Box)`
 
   .country-name {
     margin-left: 10px;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl" &&
+      css`
+        margin-left: 0px;
+        margin-right: 10px;
+      `}
     color: ${(props) => props.theme.inputPhone.color};
   }
 
   .country-prefix {
     margin-left: 5px;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl" &&
+      css`
+        margin-left: 0px;
+        margin-right: 5px;
+      `}
     color: ${(props) => props.theme.inputPhone.dialCodeColor};
   }
 
@@ -151,6 +163,11 @@ export const StyledBox = styled(Box)`
   .country-item {
     display: flex;
     align-items: center;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl" &&
+      css`
+        flex-direction: row-reverse;
+      `}
     max-width: 100%;
     padding: 0;
     height: 36px;

packages/components/scrollbar/index.js

@@ -1,8 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useTheme } from "styled-components";
+
 import { isMobile } from "@docspace/components/utils/device";
 import StyledScrollbar from "./styled-scrollbar";
 import { classNames } from "../utils/classNames";
+
 const Scrollbar = React.forwardRef((props, ref) => {
   const scrollbarType = {
     smallWhite: {
@@ -66,31 +69,42 @@ const Scrollbar = React.forwardRef((props, ref) => {
   const thumbV = stype ? stype.thumbV : {};
   const thumbH = stype ? stype.thumbH : {};
   const view = stype ? stype.view : {};
+  const theme = useTheme();
 
-  const renderNavThumbVertical = ({ style, ...props }) => (
-    <div
-      {...props}
-      className="nav-thumb-vertical"
-      style={{ ...style, ...thumbV }}
-    />
-  );
+  const renderNavThumbVertical = ({ style, ...props }) => {
+    return (
+      <div
+        {...props}
+        className="nav-thumb-vertical"
+        style={{ ...style, ...thumbV }}
+      />
+    );
+  };
 
-  const renderNavThumbHorizontal = ({ style, ...props }) => (
-    <div
-      className="nav-thumb-horizontal"
-      {...props}
-      style={{ ...style, ...thumbH }}
-    />
-  );
+  const renderNavThumbHorizontal = ({ style, ...props }) => {
+    return (
+      <div
+        className="nav-thumb-horizontal"
+        {...props}
+        style={{ ...style, ...thumbH, left: 0, margin: "10px" }}
+      />
+    );
+  };
 
-  const renderView = ({ style, ...rest }) => (
-    <div
-      {...rest}
-      style={{ ...style, ...view }}
-      tabIndex={-1}
-      className={classNames("scroll-body", props.scrollclass)}
-    />
-  );
+  const renderView = ({ style, ...rest }) => {
+    return (
+      <div
+        {...rest}
+        style={{
+          ...style,
+          ...view,
+          marginLeft: theme.interfaceDirection === "rtl" ? "-15px" : "0",
+        }}
+        tabIndex={-1}
+        className={classNames("scroll-body", props.scrollclass)}
+      />
+    );
+  };
 
   return (
     <StyledScrollbar