fix(OverlayTrigger): convert to an arrow function to fix type issues (#…

…6709)

* Convert OverlayTrigger to an arrow function to fix type issues

Fixes #6708

* Use React.FC to suppress propTypes exports in the .d.ts file
Fix type mismatches

Fixes #6708

src/OverlayTrigger.tsx

@@ -8,6 +8,7 @@ import { useUncontrolledProp } from 'uncontrollable';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import Overlay, { OverlayChildren, OverlayProps } from './Overlay';
 import safeFindDOMNode from './safeFindDOMNode';
+import { Placement } from './types';
 
 export type OverlayTriggerType = 'hover' | 'click' | 'focus';
 
@@ -36,6 +37,7 @@ export interface OverlayTriggerProps
 
   target?: never;
   onHide?: never;
+  placement?: Placement;
 }
 
 function normalizeDelay(delay?: OverlayDelay) {
@@ -66,7 +68,11 @@ function handleMouseOverOut(
   }
 }
 
-const triggerType = PropTypes.oneOf(['click', 'hover', 'focus']);
+const triggerType = PropTypes.oneOf<OverlayTriggerType>([
+  'click',
+  'hover',
+  'focus',
+]);
 
 const propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
@@ -78,16 +84,19 @@ const propTypes = {
    *
    * @type {'hover' | 'click' |'focus' | Array<'hover' | 'click' |'focus'>}
    */
-  trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]),
+  trigger: PropTypes.oneOfType([
+    triggerType.isRequired,
+    PropTypes.arrayOf(triggerType.isRequired),
+  ]),
 
   /**
    * A millisecond delay amount to show and hide the Overlay once triggered
    */
   delay: PropTypes.oneOfType([
-    PropTypes.number,
+    PropTypes.number.isRequired,
     PropTypes.shape({
-      show: PropTypes.number,
-      hide: PropTypes.number,
+      show: PropTypes.number.isRequired,
+      hide: PropTypes.number.isRequired,
     }),
   ]),
 
@@ -124,10 +133,11 @@ const propTypes = {
   /**
    * An element or text to overlay next to the target.
    */
-  overlay: PropTypes.oneOfType([PropTypes.func, PropTypes.element.isRequired]),
+  overlay: PropTypes.oneOfType([PropTypes.func, PropTypes.element.isRequired])
+    .isRequired,
 
   /**
-   * A Popper.js config object passed to the the underlying popper instance.
+   * A Popper.js config object passed to the underlying popper instance.
    */
   popperConfig: PropTypes.object,
 
@@ -145,7 +155,7 @@ const propTypes = {
   /**
    * The placement of the Overlay in relation to it's `target`.
    */
-  placement: PropTypes.oneOf([
+  placement: PropTypes.oneOf<Placement>([
     'auto-start',
     'auto',
     'auto-end',
@@ -164,7 +174,7 @@ const propTypes = {
   ]),
 };
 
-function OverlayTrigger({
+const OverlayTrigger: React.FC<OverlayTriggerProps> = ({
   trigger = ['hover', 'focus'],
   overlay,
   children,
@@ -178,7 +188,7 @@ function OverlayTrigger({
   placement,
   flip = placement && placement.indexOf('auto') !== -1,
   ...props
-}: OverlayTriggerProps) {
+}: OverlayTriggerProps) => {
   const triggerNodeRef = useRef(null);
   const mergedRef = useMergedRefs<unknown>(
     triggerNodeRef,
@@ -307,7 +317,7 @@ function OverlayTrigger({
       </Overlay>
     </>
   );
-}
+};
 
 OverlayTrigger.propTypes = propTypes;