fix: adds rtl fix for floating ui implementations (#1732)

Author: geotrev

packages/datepickers/src/elements/DatePicker/DatePicker.tsx

@@ -18,7 +18,7 @@ import React, {
 import PropTypes from 'prop-types';
 import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
-import { autoPlacement, autoUpdate, flip, useFloating } from '@floating-ui/react-dom';
+import { autoPlacement, autoUpdate, flip, platform, useFloating } from '@floating-ui/react-dom';
 import { IDatePickerProps, PLACEMENT, WEEK_STARTS_ON } from '../../types';
 import { Calendar } from './components/Calendar';
 import { datepickerReducer, retrieveInitialState } from './utils/date-picker-reducer';
@@ -72,6 +72,10 @@ export const DatePicker = forwardRef<HTMLDivElement, IDatePickerProps>((props, c
     update,
     floatingStyles: { transform }
   } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
     elements: { reference: triggerRef?.current, floating: floatingRef?.current },
     placement: floatingPlacement,
     middleware: [_placement === 'auto' ? autoPlacement() : flip()]

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,
+  flip,
+  offset,
+  platform,
+  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: [

packages/modals/src/elements/TooltipModal/TooltipModal.tsx

@@ -9,7 +9,7 @@ import React, { HTMLAttributes, useState, useContext, useEffect, useRef } from '
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { CSSTransition } from 'react-transition-group';
-import { autoPlacement, autoUpdate, offset, useFloating } from '@floating-ui/react-dom';
+import { autoPlacement, autoUpdate, offset, platform, useFloating } from '@floating-ui/react-dom';
 import { useModal } from '@zendeskgarden/container-modal';
 import { mergeRefs } from 'react-merge-refs';
 import { TooltipModalContext } from '../../utils/useTooltipModalContext';
@@ -70,6 +70,10 @@ const TooltipModalComponent = React.forwardRef<HTMLDivElement, ITooltipModalProp
       update,
       floatingStyles: { transform }
     } = useFloating({
+      platform: {
+        ...platform,
+        isRTL: () => theme.rtl
+      },
       elements: { reference: referenceElement, floating: floatingElement },
       placement: floatingPlacement,
       middleware: [

packages/tooltips/src/elements/Tooltip.tsx

@@ -14,7 +14,7 @@ import { useTooltip } from '@zendeskgarden/container-tooltip';
 import { composeEventHandlers, getControlledValue } from '@zendeskgarden/container-utilities';
 import { StyledTooltipWrapper, StyledTooltip } from '../styled';
 import { ITooltipProps, PLACEMENT, SIZE, TYPE } from '../types';
-import { autoPlacement, autoUpdate, useFloating } from '@floating-ui/react-dom';
+import { autoPlacement, autoUpdate, platform, useFloating } from '@floating-ui/react-dom';
 import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
 import { toSize } from './utils';
 
@@ -63,6 +63,10 @@ export const Tooltip = ({
     update,
     floatingStyles: { transform }
   } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
     elements: { reference: triggerRef?.current, floating: floatingRef?.current },
     placement: floatingPlacement,
     middleware: _placement === 'auto' ? [autoPlacement()] : undefined