feat: Add comprehensive RTL support with CSS logical properties and icon flipping

  - Add direction property to ThemePreferences interface (ltr/rtl)
  - Convert component styles to CSS logical properties
  - Implement icon flipping for RTL mode in OrganizationSwitcher
  - Add comprehensive RTL tests
  - Remove redundant useRTL hook (use useTheme instead)

Author: d3varaja

packages/javascript/src/models/config.ts

@@ -215,6 +215,11 @@ export interface WithPreferences {
 export type Config<T = unknown> = BaseConfig<T>;
 
 export interface ThemePreferences {
+  /**
+   * The text direction for the UI.
+   * @default 'ltr'
+   */
+  direction?: 'ltr' | 'rtl';
   /**
    * Inherit from Branding from WSO2 Identity Server or Asgardeo.
    */

packages/javascript/src/theme/types.ts

@@ -149,6 +149,11 @@ export interface ThemeConfig {
     small: string;
   };
   colors: ThemeColors;
+  /**
+   * The text direction for the UI.
+   * @default 'ltr'
+   */
+  direction?: 'ltr' | 'rtl';
   shadows: {
     large: string;
     medium: string;

packages/react/src/components/presentation/OrganizationList/OrganizationList.styles.ts

@@ -48,10 +48,7 @@ const useStyles = (theme: Theme, colorScheme: string) => {
 
       &__loading-overlay {
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;
@@ -77,10 +74,7 @@ const useStyles = (theme: Theme, colorScheme: string) => {
       `,
       loadingOverlay: css`
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;

packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.test.tsx

@@ -38,6 +38,7 @@ vi.mock('../../../contexts/Theme/useTheme', () => ({
       },
     },
     colorScheme: 'light',
+    direction: (document.documentElement.getAttribute('dir') as 'ltr' | 'rtl') || 'ltr',
   }),
 }));
 

packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx

@@ -34,7 +34,6 @@ import {cx} from '@emotion/css';
 import {FC, ReactElement, ReactNode, useState} from 'react';
 import useTheme from '../../../contexts/Theme/useTheme';
 import useTranslation from '../../../hooks/useTranslation';
-import useRTL from '../../../hooks/useRTL';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
 import Building from '../../primitives/Icons/Building';
@@ -187,12 +186,12 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
   avatarSize = 24,
   fallback = null,
 }): ReactElement => {
-  const {theme, colorScheme} = useTheme();
+  const {theme, colorScheme, direction} = useTheme();
   const styles = useStyles(theme, colorScheme);
   const [isOpen, setIsOpen] = useState(false);
   const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
   const {t} = useTranslation();
-  const {isRTL} = useRTL();
+  const isRTL = direction === 'rtl';
 
   const {refs, floatingStyles, context} = useFloating({
     open: isOpen,
@@ -310,7 +309,9 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
             )}
           </>
         )}
-        <ChevronDown width="16" height="16" style={{transform: isRTL ? 'scaleX(-1)' : 'none'}} />
+        <span style={{transform: isRTL ? 'scaleX(-1)' : 'none', display: 'inline-flex'}}>
+          <ChevronDown width="16" height="16" />
+        </span>
       </Button>
 
       {isOpen && (

packages/react/src/components/primitives/Divider/Divider.styles.ts

@@ -54,8 +54,9 @@ const useStyles = (
       height: 100%;
       min-height: calc(${theme.vars.spacing.unit} * 2);
       width: 1px;
-      border-left: 1px ${borderStyle} ${baseColor};
-      margin: 0 calc(${theme.vars.spacing.unit} * 1);
+      border-inline-start: 1px ${borderStyle} ${baseColor};
+      margin-block: 0;
+      margin-inline: calc(${theme.vars.spacing.unit} * 1);
     `;
 
     const horizontalDivider = css`

packages/react/src/components/primitives/TextField/TextField.styles.ts

@@ -39,10 +39,10 @@ const useStyles = (
   hasEndIcon: boolean,
 ) => {
   return useMemo(() => {
-    const leftPadding = hasStartIcon
+    const inlineStartPadding = hasStartIcon
       ? `calc(${theme.vars.spacing.unit} * 5)`
       : `calc(${theme.vars.spacing.unit} * 1.5)`;
-    const rightPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+    const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
 
     const inputContainer = css`
       position: relative;
@@ -52,7 +52,9 @@ const useStyles = (
 
     const input = css`
       width: 100%;
-      padding: ${theme.vars.spacing.unit} ${rightPadding} ${theme.vars.spacing.unit} ${leftPadding};
+      padding-block: ${theme.vars.spacing.unit};
+      padding-inline-start: ${inlineStartPadding};
+      padding-inline-end: ${inlineEndPadding};
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
       border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
@@ -127,12 +129,12 @@ const useStyles = (
 
     const startIcon = css`
       ${icon};
-      left: ${theme.vars.spacing.unit};
+      inset-inline-start: ${theme.vars.spacing.unit};
     `;
 
     const endIcon = css`
       ${icon};
-      right: ${theme.vars.spacing.unit};
+      inset-inline-end: ${theme.vars.spacing.unit};
     `;
 
     return {

packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -468,7 +468,10 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         >
           <ThemeProvider
             inheritFromBranding={preferences?.theme?.inheritFromBranding}
-            theme={preferences?.theme?.overrides}
+            theme={{
+              ...preferences?.theme?.overrides,
+              direction: preferences?.theme?.direction,
+            }}
             mode={getActiveTheme(preferences.theme.mode)}
           >
             <FlowProvider>

packages/react/src/contexts/Theme/ThemeContext.ts

@@ -22,6 +22,10 @@ import {Theme} from '@asgardeo/browser';
 export interface ThemeContextValue {
   theme: Theme;
   colorScheme: 'light' | 'dark';
+  /**
+   * The text direction for the UI.
+   */
+  direction: 'ltr' | 'rtl';
   toggleTheme: () => void;
   /**
    * Whether branding theme is currently loading

packages/react/src/contexts/Theme/ThemeProvider.tsx

@@ -213,6 +213,9 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
 
   const theme = useMemo(() => createTheme(finalThemeConfig, colorScheme === 'dark'), [finalThemeConfig, colorScheme]);
 
+  // Get direction from theme config or default to 'ltr'
+  const direction = (finalThemeConfig as any)?.direction || 'ltr';
+
   const handleThemeChange = useCallback((isDark: boolean) => {
     setColorScheme(isDark ? 'dark' : 'light');
   }, []);
@@ -262,9 +265,17 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
     applyThemeToDOM(theme);
   }, [theme]);
 
+  // Apply direction to document
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.documentElement.dir = direction;
+    }
+  }, [direction]);
+
   const value = {
     theme,
     colorScheme,
+    direction,
     toggleTheme,
     isBrandingLoading,
     brandingError,