fix(Tooltip): warnings pop up due to arrowProps passed into TooltipBox (#282)

Author: clukhei

src/Overlay/Overlay.tsx

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseOverlay, {
   OverlayProps as BaseOverlayProps,
-  OverlayArrowProps,
 } from '@restart/ui/Overlay';
 //@ts-ignore
 import { componentOrElement, elementType } from 'prop-types-extra';
@@ -19,9 +18,6 @@ export interface OverlayInjectedProps {
   ref: React.RefCallback<HTMLElement>;
   style: React.CSSProperties;
   'aria-labelledby'?: string;
-
-  arrowProps: Partial<OverlayArrowProps>;
-
   show: boolean;
   placement: Placement | undefined;
   popper: {
@@ -149,13 +145,10 @@ const defaultProps: Partial<OverlayProps> = {
   placement: 'top',
 };
 
-function wrapRefs(props: any, arrowProps : any) {
+function wrapRefs(props: any) {
   const { ref } = props;
-  const { ref: aRef } = arrowProps;
 
   props.ref = ref.__wrapped || (ref.__wrapped = (r:any) => ref(safeFindDOMNode(r)));
-  arrowProps.ref =
-    aRef.__wrapped || (aRef.__wrapped = (r:any) => aRef(safeFindDOMNode(r)));
 }
 
 const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
@@ -182,8 +175,8 @@ const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
         //@ts-ignore
         transition={actualTransition}
       >
-        {(overlayProps, { arrowProps, popper: popperObj, show }) => {
-          wrapRefs(overlayProps, arrowProps);
+        {(overlayProps, { popper: popperObj, show }) => {
+          wrapRefs(overlayProps);
           // Need to get placement from popper object, handling case when overlay is flipped using 'flip' prop
           const updatedPlacement = popperObj?.placement;
           const popper = Object.assign(popperRef.current, {
@@ -201,13 +194,11 @@ const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
               show,
               ...(!transition && show && { className: 'show' }),
               popper,
-              arrowProps,
             });
 
           return React.cloneElement(overlay as React.ReactElement, {
             ...overlayProps,
             placement: updatedPlacement,
-            arrowProps,
             popper,
             className: classNames(
               (overlay as React.ReactElement).props.className,

src/Popover/Popover.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { OverlayArrowProps } from '@restart/ui/Overlay';
 import { useBootstrapPrefix, useIsRTL } from '../ThemeProvider/ThemeProvider';
 import PopoverHeader from './PopoverHeader';
 import PopoverBody from './PopoverBody';
@@ -13,11 +12,9 @@ export interface PopoverProps
     BsPrefixProps {
   placement?: Placement;
   title?: string;
-  arrowProps?: Partial<OverlayArrowProps>;
   body?: boolean;
   popper?: any;
   show?: boolean;
-  hasArrow?: boolean;
 }
 
 const propTypes = {
@@ -55,17 +52,6 @@ const propTypes = {
     'left',
     'left-start',
   ]),
-
-  /**
-   * An Overlay injected set of props for positioning the popover arrow.
-   *
-   * > This is generally provided by the `Overlay` component positioning the popover
-   */
-  arrowProps: PropTypes.shape({
-    ref: PropTypes.any,
-    style: PropTypes.object,
-  }),
-
   /**
    * When this prop is set, it creates a Popover with a Popover.Body inside
    * passing the children directly to it
@@ -77,7 +63,6 @@ const propTypes = {
 
   /** @private */
   show: PropTypes.bool,
-  hasArrow: PropTypes.bool,
 };
 
 const defaultProps: Partial<PopoverProps> = {
@@ -93,8 +78,6 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
       style,
       children,
       body,
-      arrowProps,
-      hasArrow = false,
       popper: _,
       show: _1,
       ...props
@@ -119,7 +102,6 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
         )}
         {...props}
       >
-        {hasArrow && <div className="popover-arrow" {...arrowProps} />}
         <> {children}</>
       </div>
     );

src/Tooltip/TooltipBox.tsx

@@ -48,19 +48,6 @@ const propTypes = {
     'left',
     'left-start',
   ]),
-
-  /**
-   * An Overlay injected set of props for positioning the tooltip arrow.
-   *
-   * > This is generally provided by the `Overlay` component positioning the tooltip
-   *
-   * @type {{ ref: ReactRef, style: Object }}
-   */
-  arrowProps: PropTypes.shape({
-    ref: PropTypes.any,
-    style: PropTypes.object,
-  }),
-
   /** @private */
   popper: PropTypes.object,
 

tests/Popover/Popover.test.tsx

@@ -21,32 +21,7 @@ describe('Popover', () => {
     expect(popoverElem.classList).toContain('popover');
     expect(popoverElem.classList).toContain('bs-popover-end');
 
-    expect(popoverFirstElem.classList).not.toContain('popover-arrow');
     expect(popoverFirstElem.classList).toContain('popover-header'); 
     expect(popoverSecondElem.classList).toContain('popover-body');
   });
-
-  it('should  render popover arrow when hasArrow propr is false', () => {
-    const { getByTestId } = render(
-      <Popover data-testid="test" id="test-popover" hasArrow>
-        <Popover.Header>Popover title</Popover.Header>
-        <Popover.Body>
-          <strong>Popover Content</strong>
-        </Popover.Body>
-      </Popover>
-    ); 
-    const popoverElem = getByTestId('test');
-    const popoverArrowElem = popoverElem.children[0]!;
-    const popoverHeaderElem = popoverElem.children[1]!;
-    const popoverBodyElem = popoverElem.children[2]!;
-
-    expect(popoverElem.getAttribute('x-placement')).toEqual('right');
-    expect(popoverElem.getAttribute('role')).toEqual('tooltip');
-    expect(popoverElem.classList).toContain('popover');
-    expect(popoverElem.classList).toContain('bs-popover-end');
-
-    expect(popoverArrowElem.classList).toContain('popover-arrow'); 
-    expect(popoverHeaderElem.classList).toContain('popover-header');
-    expect(popoverBodyElem.classList).toContain('popover-body');
-  });
 });