wip Dropdown

src/elements/Flag/Flag.js

@@ -530,14 +530,13 @@ Flag.propTypes = {
   name: customPropTypes.suggest(names),
 }
 
-Flag.defaultProps = {
-  as: 'i',
-}
-
 // Heads up!
 // .create() factories should be defined on exported component to be visible as static properties
 const MemoFlag = React.memo(Flag)
 
 MemoFlag.create = createShorthandFactory(MemoFlag, (value) => ({ name: value }))
+MemoFlag.defaultProps = {
+  as: 'i',
+}
 
 export default MemoFlag

src/elements/Icon/Icon.js

@@ -148,15 +148,15 @@ Icon.propTypes = {
   'aria-label': PropTypes.string,
 }
 
-Icon.defaultProps = {
-  as: 'i',
-}
-
 // Heads up!
 // .create() factories should be defined on exported component to be visible as static properties
 const MemoIcon = React.memo(Icon)
 
 MemoIcon.Group = IconGroup
 MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value }))
 
+MemoIcon.defaultProps = {
+  as: 'i',
+}
+
 export default MemoIcon

src/modules/Dropdown/Dropdown.js

@@ -64,7 +64,11 @@ function renderItemContent(item) {
  * @see Select
  * @see Menu
  */
-export default class Dropdown extends Component {
+const Dropdown = React.forwardRef((props, ref) => {
+  return <DropdownInner {...props} innerRef={ref} />
+})
+
+class DropdownInner extends Component {
   searchRef = createRef()
   sizerRef = createRef()
   ref = createRef()
@@ -1431,6 +1435,7 @@ Dropdown.propTypes = {
   wrapSelection: PropTypes.bool,
 }
 
+Dropdown.displayName = 'Dropdown'
 Dropdown.defaultProps = {
   additionLabel: 'Add ',
   additionPosition: 'top',
@@ -1448,11 +1453,18 @@ Dropdown.defaultProps = {
   wrapSelection: true,
 }
 
-Dropdown.autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
+DropdownInner.autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
+
+if (process.env.NODE_ENV !== 'production') {
+  DropdownInner.defaultProps = Dropdown.defaultProps
+  DropdownInner.propTypes = Dropdown.propTypes
+}
 
 Dropdown.Divider = DropdownDivider
 Dropdown.Header = DropdownHeader
 Dropdown.Item = DropdownItem
 Dropdown.Menu = DropdownMenu
 Dropdown.SearchInput = DropdownSearchInput
 Dropdown.Text = DropdownText
+
+export default Dropdown

test/specs/addons/Confirm/Confirm-test.js

@@ -31,16 +31,20 @@ describe('Confirm', () => {
   common.implementsShorthandProp(Confirm, {
     autoGenerateKey: false,
     propKey: 'header',
+    rendersPortal: true,
     ShorthandComponent: Modal.Header,
     rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
+    requiredProps: { open: true },
   })
   common.implementsShorthandProp(Confirm, {
     autoGenerateKey: false,
     propKey: 'content',
+    rendersPortal: true,
     ShorthandComponent: Modal.Content,
     rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
+    requiredProps: { open: true },
   })
 
   describe('children', () => {

test/specs/commonTests/implementsCommonProps.js

@@ -110,6 +110,7 @@ export const implementsHTMLLabelProp = (Component, options = {}) => {
  */
 export const implementsIconProp = (Component, options = {}) => {
   implementsShorthandProp(Component, {
+    assertExactMatch: false,
     propKey: 'icon',
     ShorthandComponent: Icon,
     mapValueToProps: (val) => ({ name: val }),

test/specs/commonTests/implementsShorthandProp.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { createElement } from 'react'
+import React from 'react'
+import ReactIs from 'react-is'
 
 import { createShorthand } from 'src/lib'
 import { consoleUtil, getComponentName } from 'test/utils'
@@ -41,13 +42,18 @@ export default (Component, options = {}) => {
     parentIsFragment = false,
     rendersPortal = false,
     propKey,
-    ShorthandComponent,
     shorthandDefaultProps = {},
     shorthandOverrideProps = {},
+    rendersPortal = false,
     requiredProps = {},
   } = options
   const { assertRequired } = helpers('implementsShorthandProp', Component)
-  const assertMethod = assertExactMatch ? 'contain' : 'containMatchingElement'
+
+  const assertMethod = assertExactMatch ? 'equals' : 'matchesElement'
+  const ShorthandComponent =
+    options.ShorthandComponent.$$typeof === ReactIs.Memo
+      ? options.ShorthandComponent.type
+      : options.ShorthandComponent
 
   describe(`${propKey} shorthand prop (common)`, () => {
     assertRequired(Component, 'a `Component`')
@@ -62,39 +68,44 @@ export default (Component, options = {}) => {
         overrideProps: shorthandOverrideProps,
         autoGenerateKey,
       })
-      const element = createElement(Component, { ...requiredProps, [propKey]: value })
-      const wrapper = shallow(element)
+      const wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: value }))
+
+      const result = wrapper.find(ShorthandComponent)
 
-      wrapper.should[assertMethod](expectedShorthandElement)
+      expect(result[assertMethod](expectedShorthandElement)).to.equal(true)
 
       // Enzyme's .key() method is not consistent with React for elements with
       // no key (`undefined` vs `null`), so use the underlying element instead
       // Will fail if more than one element of this type is found
       if (autoGenerateKey) {
-        const shorthandElement = wrapper.find(ShorthandComponent).getElement()
-        expect(shorthandElement.key).to.equal(expectedShorthandElement.key, "key doesn't match")
+        expect(result.getElement().key).to.equal(expectedShorthandElement.key, "key doesn't match")
       }
     }
 
     if (alwaysPresent || (Component.defaultProps && Component.defaultProps[propKey])) {
       it(`has default ${name} when not defined`, () => {
-        shallow(<Component {...requiredProps} />).should.have.descendants(ShorthandComponent)
+        const wrapper = mount(React.createElement(Component, requiredProps))
+
+        wrapper.should.have.descendants(ShorthandComponent)
       })
     } else {
       if (!parentIsFragment && !rendersPortal) {
         noDefaultClassNameFromProp(Component, propKey, [], options)
       }
 
       it(`has no ${name} when not defined`, () => {
-        shallow(<Component {...requiredProps} />).should.not.have.descendants(ShorthandComponent)
+        const wrapper = mount(React.createElement(Component, requiredProps))
+
+        wrapper.should.not.have.descendants(ShorthandComponent)
       })
     }
 
     if (!alwaysPresent) {
       it(`has no ${name} when null`, () => {
-        shallow(
-          createElement(Component, { ...requiredProps, [propKey]: null }),
-        ).should.not.have.descendants(ShorthandComponent)
+        const element = React.createElement(Component, { ...requiredProps, [propKey]: null })
+        const wrapper = mount(element)
+
+        wrapper.should.not.have.descendants(ShorthandComponent)
       })
     }