fix(clerk-js): Ensure RTL is supported within Drawer component

.changeset/slick-pets-love.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Ensure Checkout drawer animation and content respects RTL usage.

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "594kB" },
+    { "path": "./dist/clerk.js", "maxSize": "594.1kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "68.3KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "104.05KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "104.4KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39.5KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -360,7 +360,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
           sx={t => ({
             position: 'absolute',
             top: t.space.$2,
-            right: t.space.$2,
+            insetInlineEnd: t.space.$2,
           })}
         >
           {closeSlot}
@@ -382,7 +382,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
       ) : null}
       <Box
         sx={t => ({
-          paddingRight: t.space.$10,
+          paddingBlockEnd: t.space.$10,
         })}
       >
         <Flex

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

@@ -349,6 +349,9 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
             elementDescriptor={descriptors.pricingTableCardDescription}
             variant='subtitle'
             colorScheme='secondary'
+            sx={{
+              justifySelf: 'flex-start',
+            }}
           >
             {plan.description}
           </Text>
@@ -412,6 +415,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
             plan.isDefault ? localizationKeys('commerce.alwaysFree') : localizationKeys('commerce.billedMonthlyOnly')
           }
           sx={{
+            justifySelf: 'flex-start',
             alignSelf: 'center',
           }}
         />

packages/clerk-js/src/ui/elements/Drawer.tsx

@@ -16,7 +16,7 @@ import * as React from 'react';
 import { transitionDurationValues, transitionTiming } from '../../ui/foundations/transitions';
 import type { LocalizationKey } from '../customizables';
 import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';
-import { usePrefersReducedMotion } from '../hooks';
+import { useDirection, usePrefersReducedMotion } from '../hooks';
 import { useScrollLock } from '../hooks/useScrollLock';
 import { Close as CloseIcon } from '../icons';
 import type { ThemableCssProp } from '../styledSystem';
@@ -38,6 +38,7 @@ interface DrawerContext {
   context: ReturnType<typeof useFloating>['context'];
   getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];
   portalProps: FloatingPortalProps;
+  direction: ReturnType<typeof useDirection>;
 }
 
 const DrawerContext = React.createContext<DrawerContext | null>(null);
@@ -87,12 +88,14 @@ function Root({
   portalProps,
   dismissProps,
 }: RootProps) {
+  const direction = useDirection();
+
   const { refs, context } = useFloating({
     open,
     onOpenChange,
     transform: false,
     strategy,
-    placement: 'right',
+    placement: direction === 'ltr' ? 'right' : 'left',
     ...floatingProps,
   });
 
@@ -112,6 +115,7 @@ function Root({
         refs,
         context,
         getFloatingProps,
+        direction,
       }}
     >
       <FloatingPortal {...portalProps}>{children}</FloatingPortal>
@@ -195,7 +199,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
   const prefersReducedMotion = usePrefersReducedMotion();
   const { animations: layoutAnimations } = useAppearance().parsedLayout;
   const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
-  const { strategy, refs, context, getFloatingProps } = useDrawerContext();
+  const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();
   const mergedRefs = useMergeRefs([ref, refs.setFloating]);
 
   const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
@@ -236,7 +240,9 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
             // Apply the conditional right offset + the spread of the
             // box shadow to ensure it is fully offscreen before unmounting
             '--transform-offset':
-              strategy === 'fixed' ? `calc(100% + ${t.space.$3} + ${t.space.$8x75})` : `calc(100% + ${t.space.$8x75})`,
+              strategy === 'fixed'
+                ? `calc((100% + ${t.space.$3} + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`
+                : `calc((100% + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`,
             willChange: 'transform',
             position: strategy,
             insetBlock: strategy === 'fixed' ? t.space.$3 : 0,

packages/clerk-js/src/ui/hooks/__tests__/useDirection.test.ts

@@ -0,0 +1,102 @@
+import { renderHook } from '@testing-library/react';
+
+import { useDirection } from '../useDirection';
+
+describe('useDirection', () => {
+  const originalWindow = window;
+  const mockGetComputedStyle = jest.fn();
+
+  beforeEach(() => {
+    // Mock window.getComputedStyle
+    mockGetComputedStyle.mockReset();
+    Object.defineProperty(window, 'getComputedStyle', {
+      value: mockGetComputedStyle,
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    // Restore window
+    Object.defineProperty(global, 'window', {
+      value: originalWindow,
+      writable: true,
+    });
+  });
+
+  describe('SSR environment', () => {
+    const originalWindow = global.window;
+
+    beforeEach(() => {
+      // @ts-ignore - Intentionally removing window for SSR test
+      delete global.window;
+    });
+
+    afterEach(() => {
+      global.window = originalWindow;
+    });
+
+    it('returns ltr when window is undefined', () => {
+      expect(useDirection()).toBe('ltr');
+    });
+  });
+
+  describe('Browser environment', () => {
+    it('returns rtl when element has dir="rtl"', () => {
+      const element = document.createElement('div');
+      element.dir = 'rtl';
+
+      const { result } = renderHook(() => useDirection(element));
+      expect(result.current).toBe('rtl');
+    });
+
+    it('returns ltr when element has dir="ltr"', () => {
+      const element = document.createElement('div');
+      element.dir = 'ltr';
+
+      const { result } = renderHook(() => useDirection(element));
+      expect(result.current).toBe('ltr');
+    });
+
+    it('returns rtl when element has computed direction rtl', () => {
+      const element = document.createElement('div');
+      element.dir = 'auto';
+      mockGetComputedStyle.mockReturnValue({ direction: 'rtl' });
+
+      const { result } = renderHook(() => useDirection(element));
+      expect(result.current).toBe('rtl');
+    });
+
+    it('returns ltr when element has no dir attribute', () => {
+      const element = document.createElement('div');
+      mockGetComputedStyle.mockReturnValue({ direction: 'ltr' });
+
+      const { result } = renderHook(() => useDirection(element));
+      expect(result.current).toBe('ltr');
+    });
+
+    it('returns ltr when element has invalid dir attribute value', () => {
+      const element = document.createElement('div');
+      element.dir = 'test';
+      mockGetComputedStyle.mockReturnValue({ direction: 'ltr' });
+
+      const { result } = renderHook(() => useDirection(element));
+      expect(result.current).toBe('ltr');
+    });
+
+    it('uses document.documentElement when no element is provided', () => {
+      document.documentElement.dir = 'rtl';
+
+      const { result } = renderHook(() => useDirection());
+      expect(result.current).toBe('rtl');
+    });
+
+    it('prioritizes element direction over document direction', () => {
+      document.documentElement.dir = 'rtl';
+      const element = document.createElement('div');
+      element.dir = 'ltr';
+
+      const { result } = renderHook(() => useDirection(element));
+      expect(result.current).toBe('ltr');
+    });
+  });
+});

packages/clerk-js/src/ui/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './useClerkModalStateParams';
 export * from './useClipboard';
 export * from './useDebounce';
 export * from './useDelayedVisibility';
+export * from './useDirection';
 export * from './useEmailLink';
 export * from './useEnabledThirdPartyProviders';
 export * from './useEnterpriseSSOLink';

packages/clerk-js/src/ui/hooks/useDirection.ts

@@ -0,0 +1,32 @@
+function getDirectionFromElement(element: HTMLElement): 'ltr' | 'rtl' {
+  const dir = element.dir;
+
+  if (dir === 'rtl') {
+    return 'rtl';
+  }
+
+  if (dir === 'ltr') {
+    return 'ltr';
+  }
+
+  if (dir === 'auto' || !dir) {
+    const computedDirection = window.getComputedStyle(element).direction;
+    if (computedDirection === 'rtl') {
+      return 'rtl';
+    }
+  }
+
+  return 'ltr';
+}
+
+export function useDirection(element?: HTMLElement) {
+  if (typeof window === 'undefined') {
+    return 'ltr';
+  }
+
+  if (element) {
+    return getDirectionFromElement(element);
+  }
+
+  return getDirectionFromElement(document.documentElement);
+}