Theme and styles RTL support

package.json

@@ -33,6 +33,8 @@
     "react-window": "^1.8.10",
     "recharts": "^2.12.4",
     "redux": "^5.0.1",
+    "stylis": "^4.3.1",
+    "stylis-plugin-rtl": "^2.1.1",
     "vite": "^5.2.8",
     "vite-plugin-pwa": "^0.19.8",
     "vite-plugin-svgr": "^4.2.0",

src/AppThemeProvider.jsx

@@ -1,21 +1,40 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { ThemeProvider, useMediaQuery } from '@mui/material';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
 import theme from './common/theme';
+import { useLocalization } from './common/components/LocalizationProvider';
+
+const cache = {
+  ltr: createCache({
+    key: 'muiltr',
+    stylisPlugins: [prefixer],
+  }),
+  rtl: createCache({
+    key: 'muirtl',
+    stylisPlugins: [prefixer, rtlPlugin],
+  }),
+};
 
 const AppThemeProvider = ({ children }) => {
   const server = useSelector((state) => state.session.server);
+  const { direction } = useLocalization();
 
   const serverDarkMode = server?.attributes?.darkMode;
   const preferDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode;
 
-  const themeInstance = theme(server, darkMode);
+  const themeInstance = theme(server, darkMode, direction);
 
   return (
-    <ThemeProvider theme={themeInstance}>
-      {children}
-    </ThemeProvider>
+    <CacheProvider value={cache[direction]}>
+      <ThemeProvider theme={themeInstance}>
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
   );
 };
 

src/common/components/LocalizationProvider.jsx

@@ -152,8 +152,9 @@ const LocalizationContext = createContext({
 
 export const LocalizationProvider = ({ children }) => {
   const [language, setLanguage] = usePersistedState('language', getDefaultLanguage());
+  const direction = /^(ar|he|fa)$/.test(language) ? 'rtl' : 'ltr';
 
-  const value = useMemo(() => ({ languages, language, setLanguage }), [languages, language, setLanguage]);
+  const value = useMemo(() => ({ languages, language, setLanguage, direction }), [languages, language, setLanguage, direction]);
 
   useEffect(() => {
     let selected;
@@ -163,8 +164,8 @@ export const LocalizationProvider = ({ children }) => {
       selected = language;
     }
     dayjs.locale(selected);
-    document.dir = /^(ar|he|fa)$/.test(language) ? 'rtl' : 'ltr';
-  }, [language]);
+    document.dir = direction;
+  }, [language, direction]);
 
   return (
     <LocalizationContext.Provider value={value}>

src/common/theme/index.js

@@ -4,8 +4,9 @@ import palette from './palette';
 import dimensions from './dimensions';
 import components from './components';
 
-export default (server, darkMode) => useMemo(() => createTheme({
+export default (server, darkMode, direction) => useMemo(() => createTheme({
   palette: palette(server, darkMode),
+  direction,
   dimensions,
   components,
-}), [server, darkMode]);
+}), [server, darkMode, direction]);