fix(Popover): support for ref attribute

react-bootstrap · Oct 4, 2019 · 0ad84a8 · 0ad84a8
1 parent e70024c
commit 0ad84a8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 42 deletions.
diff --git a/src/NavLink.js b/src/NavLink.js
@@ -48,9 +48,6 @@ const propTypes = {
 
   /** @default 'a' */
   as: PropTypes.elementType,
-
-  /** @private */
-  innerRef: PropTypes.any,
 };
 
 const defaultProps = {

diff --git a/src/Popover.js b/src/Popover.js
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
-import { createBootstrapComponent } from './ThemeProvider';
+import { useBootstrapPrefix } from './ThemeProvider';
 import PopoverTitle from './PopoverTitle';
 import PopoverContent from './PopoverContent';
 
@@ -44,9 +44,6 @@ const propTypes = {
    */
   content: PropTypes.bool,
 
-  /** @private */
-  innerRef: PropTypes.any,
-
   /** @private */
   scheduleUpdate: PropTypes.func,
   /** @private */
@@ -57,40 +54,47 @@ const defaultProps = {
   placement: 'right',
 };
 
-function Popover({
-  bsPrefix,
-  innerRef,
-  placement,
-  className,
-  style,
-  children,
-  content,
-  arrowProps,
-  scheduleUpdate: _,
-  outOfBoundaries: _1,
-  ...props
-}) {
-  return (
-    <div
-      role="tooltip"
-      ref={innerRef}
-      style={style}
-      x-placement={placement}
-      className={classNames(className, bsPrefix, `bs-popover-${placement}`)}
-      {...props}
-    >
-      <div className="arrow" {...arrowProps} />
-      {content ? <PopoverContent>{children}</PopoverContent> : children}
-    </div>
-  );
-}
+const Popover = React.forwardRef(
+  (
+    {
+      bsPrefix,
+      placement,
+      className,
+      style,
+      children,
+      content,
+      arrowProps,
+      scheduleUpdate: _,
+      outOfBoundaries: _1,
+      ...props
+    },
+    ref,
+  ) => {
+    const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'popover');
+    return (
+      <div
+        ref={ref}
+        role="tooltip"
+        style={style}
+        x-placement={placement}
+        className={classNames(
+          className,
+          decoratedBsPrefix,
+          `bs-popover-${placement}`,
+        )}
+        {...props}
+      >
+        <div className="arrow" {...arrowProps} />
+        {content ? <PopoverContent>{children}</PopoverContent> : children}
+      </div>
+    );
+  },
+);
 
 Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;
 
-const DecoratedPopover = createBootstrapComponent(Popover, 'popover');
-
-DecoratedPopover.Title = PopoverTitle;
-DecoratedPopover.Content = PopoverContent;
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
 
-export default DecoratedPopover;
+export default Popover;
diff --git a/src/Toast.js b/src/Toast.js
@@ -44,9 +44,6 @@ const propTypes = {
    * A `react-transition-group` Transition component used to animate the Toast on dismissal.
    */
   transition: PropTypes.elementType,
-
-  /** @ignore */
-  innerRef: PropTypes.any,
 };
 
 const defaultProps = {