fix(dropdowns): overrides floating ui's default RTL handling to prefe…

…r theme.rtl in menu (#1728)
zendeskgarden · Mar 4, 2024 · 8499182 · 8499182
1 parent 544cf2b
commit 8499182
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dropdowns/src/elements/menu/MenuList.tsx b/packages/dropdowns/src/elements/menu/MenuList.tsx
@@ -14,7 +14,15 @@ import {
   getFloatingPlacements,
   getMenuPosition
 } from '@zendeskgarden/react-theming';
-import { autoPlacement, autoUpdate, flip, offset, size, useFloating } from '@floating-ui/react-dom';
+import {
+  autoPlacement,
+  autoUpdate,
+  platform,
+  flip,
+  offset,
+  size,
+  useFloating
+} from '@floating-ui/react-dom';
 import { IMenuListProps, PLACEMENT } from '../../types';
 import { StyledFloatingMenu, StyledMenu } from '../../views';
 import { createPortal } from 'react-dom';
@@ -59,6 +67,14 @@ export const MenuList = forwardRef<HTMLUListElement, IMenuListProps>(
       update,
       floatingStyles: { transform }
     } = useFloating<HTMLElement>({
+      platform: {
+        ...platform,
+        // Defers RTL to Garden
+        // References:
+        // - https://github.com/floating-ui/floating-ui/issues/1530
+        // - https://github.com/floating-ui/floating-ui/blob/master/packages/dom/src/platform/isRTL.ts#L3
+        isRTL: () => theme.rtl
+      },
       elements: { reference: triggerRef?.current, floating: floatingRef?.current },
       placement: floatingPlacement,
       middleware: [