feat(Popover): add RTL support

src/Popover.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useBootstrapPrefix } from './ThemeProvider';
+import { useBootstrapPrefix, useIsRTL } from './ThemeProvider';
 import PopoverHeader from './PopoverHeader';
 import PopoverBody from './PopoverBody';
 import { ArrowProps, Placement } from './types';
-import { BsPrefixProps } from './helpers';
+import { BsPrefixProps, getOverlayDirection } from './helpers';
 
 export interface PopoverProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -98,13 +98,9 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
     ref,
   ) => {
     const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'popover');
+    const isRTL = useIsRTL();
     const [primaryPlacement] = placement?.split('-') || [];
-    let bsDirection = primaryPlacement;
-    if (primaryPlacement === 'left') {
-      bsDirection = 'start';
-    } else if (primaryPlacement === 'right') {
-      bsDirection = 'end';
-    }
+    const bsDirection = getOverlayDirection(primaryPlacement, isRTL);
 
     return (
       <div

src/helpers.ts

@@ -47,3 +47,13 @@ export type BsPrefixComponentClass<
 > = React.ComponentClass<ReplaceProps<As, BsPrefixProps<As> & P>>;
 
 export type TransitionType = boolean | TransitionComponent;
+
+export function getOverlayDirection(placement: string, isRTL?: boolean) {
+  let bsDirection = placement;
+  if (placement === 'left') {
+    bsDirection = isRTL ? 'end' : 'start';
+  } else if (placement === 'right') {
+    bsDirection = isRTL ? 'start' : 'end';
+  }
+  return bsDirection;
+}

test/helpersSpec.ts

@@ -0,0 +1,21 @@
+import { getOverlayDirection } from '../src/helpers';
+
+describe('Helpers', () => {
+  describe('getOverlayDirection', () => {
+    it('should return start for left', () => {
+      getOverlayDirection('left', false).should.equal('start');
+    });
+
+    it('should return end for left in RTL', () => {
+      getOverlayDirection('left', true).should.equal('end');
+    });
+
+    it('should return end for right', () => {
+      getOverlayDirection('right', false).should.equal('end');
+    });
+
+    it('should return start for right in RTL', () => {
+      getOverlayDirection('right', true).should.equal('start');
+    });
+  });
+});