fix(RTL): add dir="rtl" to html tag when running in RTL (#394)

Closes #366

Author: MarcusNotheis

packages/main/src/components/ThemeProvider/index.tsx

@@ -1,12 +1,13 @@
 import { getCompactSize } from '@ui5/webcomponents-base/dist/config/CompactSize';
 import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
+import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
 import { cssVariablesStyles } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { MessageToast } from '@ui5/webcomponents-react/lib/MessageToast';
 import React, { FC, Fragment, ReactNode, useEffect, useMemo } from 'react';
 import { ThemeProvider as ReactJssThemeProvider } from 'react-jss';
-import { JSSTheme } from "../../interfaces/JSSTheme";
+import { JSSTheme } from '../../interfaces/JSSTheme';
 
 declare global {
   interface Window {
@@ -47,7 +48,8 @@ const ThemeProvider: FC<ThemeProviderProps> = (props: ThemeProviderProps) => {
     return {
       theme,
       contentDensity: isCompactSize ? ContentDensity.Compact : ContentDensity.Cozy,
-      parameters: ThemingParameters
+      parameters: ThemingParameters,
+      rtl: getRTL()
     };
   }, [theme, isCompactSize]);
 
@@ -68,6 +70,9 @@ const ThemeProvider: FC<ThemeProviderProps> = (props: ThemeProviderProps) => {
         silent: true
       });
     }
+    if (getRTL()) {
+      document.dir = 'rtl';
+    }
   }, []);
 
   return (