Web: Components: Adapt TextInput component to RTL interface

packages/components/text-input/common-input-styles.js

@@ -50,6 +50,30 @@ const commonInputStyle = css`
 
   cursor: ${(props) =>
     props.isReadOnly || props.isDisabled ? "default" : "text"};
+
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl" &&
+    css`
+      // If current interface direction is rtl, set cursor in the right side of the input
+      :placeholder-shown {
+        direction: rtl;
+      }
+
+      ::placeholder {
+        text-align: right;
+      }
+
+      &[type="email"]:placeholder-shown,
+      &[type="tel"]:placeholder-shown,
+      &[type="number"]:placeholder-shown,
+      &[type="url"]:placeholder-shown {
+        direction: ltr;
+      }
+
+      &[type="password"] {
+        direction: rtl;
+      }
+    `}
 `;
 
 export default commonInputStyle;

packages/components/text-input/input.js

@@ -17,6 +17,7 @@ const Input = ({
   forwardedRef,
   className,
   theme,
+  dir = "auto",
   ...props
 }) => {
   const rest = {};
@@ -33,7 +34,12 @@ const Input = ({
       {...props}
     />
   ) : (
-    <input className={`${className} not-selectable`} {...props} {...rest} />
+    <input
+      className={`${className} not-selectable`}
+      dir={dir}
+      {...props}
+      {...rest}
+    />
   );
 };
 export default Input;