fix(useOverlayOffset): use offset prop in useOverlayOffset (#6264)

* fix: use offset prop in useOverlayOffset

* add tests

* fixed tests

src/Overlay.tsx

@@ -163,7 +163,7 @@ const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
     outerRef,
   ) => {
     const popperRef = useRef({});
-    const [ref, modifiers] = useOverlayOffset();
+    const [ref, modifiers] = useOverlayOffset(outerProps.offset);
     const mergedRef = useMergedRefs(outerRef, ref);
 
     const actualTransition =

src/useOverlayOffset.tsx

@@ -1,15 +1,14 @@
 import { useMemo, useRef } from 'react';
 import hasClass from 'dom-helpers/hasClass';
-import { Options } from '@restart/ui/usePopper';
+import { Offset, Options } from '@restart/ui/usePopper';
 import { useBootstrapPrefix } from './ThemeProvider';
 import Popover from './Popover';
 
 // This is meant for internal use.
 // This applies a custom offset to the overlay if it's a popover.
-export default function useOverlayOffset(): [
-  React.RefObject<HTMLElement>,
-  Options['modifiers'],
-] {
+export default function useOverlayOffset(
+  customOffset?: Offset,
+): [React.RefObject<HTMLElement>, Options['modifiers']] {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const popoverClass = useBootstrapPrefix(undefined, 'popover');
 
@@ -22,13 +21,13 @@ export default function useOverlayOffset(): [
             overlayRef.current &&
             hasClass(overlayRef.current, popoverClass)
           ) {
-            return Popover.POPPER_OFFSET;
+            return customOffset || Popover.POPPER_OFFSET;
           }
-          return [0, 0];
+          return customOffset || [0, 0];
         },
       },
     }),
-    [popoverClass],
+    [customOffset, popoverClass],
   );
 
   return [overlayRef, [offset]];

test/useOverlayOffsetSpec.tsx

@@ -4,24 +4,26 @@ import { mount } from 'enzyme';
 import { render } from '@testing-library/react';
 import { expect } from 'chai';
 
+import { Offset } from '@restart/ui/usePopper';
 import Popover from '../src/Popover';
 import Tooltip from '../src/Tooltip';
 import useOverlayOffset from '../src/useOverlayOffset';
 
 describe('useOverlayOffset', () => {
-  const Wrapper = React.forwardRef<any, React.PropsWithChildren<unknown>>(
-    (props, outerRef) => {
-      const [ref, modifiers] = useOverlayOffset();
+  const Wrapper = React.forwardRef<
+    any,
+    React.PropsWithChildren<{ customOffset?: Offset }>
+  >((props, outerRef) => {
+    const [ref, modifiers] = useOverlayOffset(props.customOffset);
 
-      useImperativeHandle(outerRef, () => ({
-        modifiers,
-      }));
+    useImperativeHandle(outerRef, () => ({
+      modifiers,
+    }));
 
-      return React.cloneElement(props.children as React.ReactElement, {
-        ref,
-      });
-    },
-  );
+    return React.cloneElement(props.children as React.ReactElement, {
+      ref,
+    });
+  });
 
   it('should have offset of [0s, 8] for Popovers', () => {
     const ref = React.createRef<any>();
@@ -36,6 +38,19 @@ describe('useOverlayOffset', () => {
     expect(offset).to.eql([0, 8]);
   });
 
+  it('should apply custom offset', () => {
+    const ref = React.createRef<any>();
+
+    render(
+      <Wrapper ref={ref} customOffset={[200, 200]}>
+        <Popover id="test-popover" />
+      </Wrapper>,
+    );
+
+    const offset = ref.current.modifiers[0].options.offset();
+    expect(offset).to.eql([200, 200]);
+  });
+
   it('should have offset of [0, 0] for Tooltips', () => {
     const ref = React.createRef<any>();