Fix caret prop of DropdownMenu (#804)

Author: tcbegley

src/components/dropdownmenu/DropdownMenu.js

@@ -1,11 +1,14 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
+
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import RBDropdown from 'react-bootstrap/Dropdown';
 import Nav from 'react-bootstrap/Nav';
-import ButtonGroup from 'react-bootstrap/ButtonGroup';
+
 import {DropdownMenuContext} from '../../private/DropdownMenuContext';
 import {bootstrapColors} from '../../private/BootstrapColors';
+import DropdownToggle from '../../private/DropdownToggle';
 
 /**
  * DropdownMenu creates an overlay useful for grouping together links and other
@@ -75,7 +78,8 @@ const DropdownMenu = props => {
           (loading_state && loading_state.is_loading) || undefined
         }
       >
-        <RBDropdown.Toggle
+        <DropdownToggle
+          caret={caret}
           as={nav ? Nav.Link : undefined}
           onClick={toggle}
           disabled={disabled}
@@ -89,7 +93,7 @@ const DropdownMenu = props => {
           className={toggle_class_name || toggleClassName}
         >
           {label}
-        </RBDropdown.Toggle>
+        </DropdownToggle>
         <RBDropdown.Menu
           renderOnMount
           variant={menu_variant === 'dark' ? 'dark' : undefined}

src/private/DropdownToggle.js

@@ -0,0 +1,59 @@
+import React, {useContext} from 'react';
+
+import classNames from 'classnames';
+
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import DropdownContext from '@restart/ui/DropdownContext';
+import {useDropdownToggle} from '@restart/ui/DropdownToggle';
+import Button from 'react-bootstrap/Button';
+import InputGroupContext from 'react-bootstrap/InputGroupContext';
+import {useBootstrapPrefix} from 'react-bootstrap/ThemeProvider';
+import useWrappedRefWithWarning from 'react-bootstrap/useWrappedRefWithWarning';
+
+// vendored https://github.com/react-bootstrap/react-bootstrap/blob/master/src/DropdownToggle.tsx
+const DropdownToggle = React.forwardRef(
+  (
+    {
+      caret,
+      bsPrefix,
+      split,
+      className,
+      childBsPrefix,
+      as: Component = Button,
+      ...props
+    },
+    ref
+  ) => {
+    const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-toggle');
+    const dropdownContext = useContext(DropdownContext);
+    const isInputGroup = useContext(InputGroupContext);
+
+    if (childBsPrefix !== undefined) {
+      props.bsPrefix = childBsPrefix;
+    }
+
+    const [toggleProps] = useDropdownToggle();
+
+    toggleProps.ref = useMergedRefs(
+      toggleProps.ref,
+      useWrappedRefWithWarning(ref, 'DropdownToggle')
+    );
+
+    // This intentionally forwards size and variant (if set) to the
+    // underlying component, to allow it to render size and style variants.
+    return (
+      <Component
+        className={classNames(
+          className,
+          caret && prefix, // remove dropdown-toggle class if caret is false
+          split && `${prefix}-split`,
+          !!isInputGroup && dropdownContext?.show && 'show'
+        )}
+        {...toggleProps}
+        {...props}
+      />
+    );
+  }
+);
+
+export default DropdownToggle;