[WIP] BREAKING(refs): add support of automatic refs

docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar, Grid, Status, Text } from '@stardust-ui/react'
+import { Avatar, Grid, Text } from '@stardust-ui/react'
 
 const defaultAvatar = (
   <Avatar
@@ -54,12 +54,12 @@ const AvatarExampleStatusCustomizationShorthand = () => (
     {defaultAvatar}
     <Avatar
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
-      size={Avatar.defaultProps.size * 1.5}
+      size={48}
       status={{
         color: 'green',
         icon: 'check',
         title: 'Available',
-        size: Status.defaultProps.size * 1.5,
+        size: 48,
       }}
     />
   </Grid>

package.json

@@ -65,6 +65,7 @@
     "fela-plugin-placeholder-prefixer": "^5.0.18",
     "fela-plugin-prefixer": "^5.0.18",
     "fela-plugin-rtl": "^1.0.6",
+    "hoist-non-react-statics": "^3.1.0",
     "keyboard-key": "^1.0.1",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
@@ -80,6 +81,7 @@
     "@types/enzyme": "^3.1.14",
     "@types/faker": "^4.1.3",
     "@types/gulp-load-plugins": "^0.0.31",
+    "@types/hoist-non-react-statics": "^3.0.1",
     "@types/jest": "^23.3.9",
     "@types/jest-axe": "^2.2.2",
     "@types/lodash": "^4.14.118",

src/components/Accordion/Accordion.tsx

@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import AccordionTitle from './AccordionTitle'
 import AccordionContent from './AccordionContent'
@@ -69,9 +70,6 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
   accessibility?: Accessibility
 }
 
-/**
- * An accordion allows users to toggle the display of sections of content.
- */
 class Accordion extends AutoControlledComponent<Extendable<AccordionProps>, any> {
   static displayName = 'Accordion'
 
@@ -186,4 +184,7 @@ class Accordion extends AutoControlledComponent<Extendable<AccordionProps>, any>
   }
 }
 
-export default Accordion
+/**
+ * An accordion allows users to toggle the display of sections of content.
+ */
+export default forwardRefFactory(Accordion)

src/components/Accordion/AccordionContent.tsx

@@ -9,6 +9,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import { Extendable, ComponentEventHandler } from '../../../types/utils'
 
@@ -28,9 +29,6 @@ export interface AccordionContentProps
   onClick?: ComponentEventHandler<AccordionContentProps>
 }
 
-/**
- * A standard AccordionContent.
- */
 class AccordionContent extends UIComponent<Extendable<AccordionContentProps>, any> {
   static displayName = 'AccordionContent'
 
@@ -55,6 +53,10 @@ class AccordionContent extends UIComponent<Extendable<AccordionContentProps>, an
   }
 }
 
-AccordionContent.create = createShorthandFactory(AccordionContent, 'content')
+const ForwardedAccordionContent = forwardRefFactory(AccordionContent)
+ForwardedAccordionContent.create = createShorthandFactory(ForwardedAccordionContent, 'content')
 
-export default AccordionContent
+/**
+ * A standard AccordionContent.
+ */
+export default ForwardedAccordionContent

src/components/Accordion/AccordionTitle.tsx

@@ -10,6 +10,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import { Extendable, ComponentEventHandler } from '../../../types/utils'
 
@@ -32,9 +33,6 @@ export interface AccordionTitleProps
   onClick?: ComponentEventHandler<AccordionTitleProps>
 }
 
-/**
- * A standard AccordionTitle.
- */
 class AccordionTitle extends UIComponent<Extendable<AccordionTitleProps>, any> {
   static displayName = 'AccordionTitle'
 
@@ -73,6 +71,10 @@ class AccordionTitle extends UIComponent<Extendable<AccordionTitleProps>, any> {
   }
 }
 
-AccordionTitle.create = createShorthandFactory(AccordionTitle, 'content')
+const ForwardedAccordionTitle = forwardRefFactory(AccordionTitle)
+ForwardedAccordionTitle.create = createShorthandFactory(ForwardedAccordionTitle, 'content')
 
-export default AccordionTitle
+/**
+ * A standard AccordionTitle.
+ */
+export default ForwardedAccordionTitle

src/components/Attachment/Attachment.tsx

@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Button from '../Button/Button'
@@ -96,6 +97,7 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
   }
 }
 
-Attachment.create = createShorthandFactory(Attachment, 'header')
+const ForwardedAttachment = forwardRefFactory(Attachment)
+ForwardedAttachment.create = createShorthandFactory(ForwardedAttachment, 'header')
 
-export default Attachment
+export default ForwardedAttachment

src/components/Avatar/Avatar.tsx

@@ -8,6 +8,7 @@ import {
   UIComponent,
   UIComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 
 export interface AvatarProps extends UIComponentProps {
@@ -114,8 +115,9 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
   }
 }
 
-Avatar.create = createShorthandFactory(Avatar, 'name')
+const ForwardedAvatar = forwardRefFactory(Avatar)
+ForwardedAvatar.create = createShorthandFactory(ForwardedAvatar, 'name')
 
-export default Avatar
+export default ForwardedAvatar
 
 export type AvatarPropsWithDefaults = AvatarProps & typeof Avatar.defaultProps

src/components/Button/Button.tsx

@@ -11,6 +11,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Slot from '../Slot/Slot'
@@ -177,6 +178,7 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
   }
 }
 
-Button.create = createShorthandFactory(Button, 'content')
+const ForwardedButton = forwardRefFactory(Button)
+ForwardedButton.create = createShorthandFactory(ForwardedButton, 'content')
 
-export default Button
+export default ForwardedButton

src/components/Button/ButtonGroup.tsx

@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import Button from './Button'
 import { buttonGroupBehavior } from '../../lib/accessibility'
@@ -99,4 +100,4 @@ class ButtonGroup extends UIComponent<Extendable<ButtonGroupProps>, any> {
   }
 }
 
-export default ButtonGroup
+export default forwardRefFactory(ButtonGroup)

src/components/Chat/Chat.tsx

@@ -2,7 +2,13 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { childrenExist, customPropTypes, UIComponent, commonPropTypes } from '../../lib'
+import {
+  childrenExist,
+  customPropTypes,
+  UIComponent,
+  commonPropTypes,
+  forwardRefFactory,
+} from '../../lib'
 import ChatItem from './ChatItem'
 import ChatMessage from './ChatMessage'
 import { Extendable, ShorthandValue } from '../../../types/utils'
@@ -62,4 +68,4 @@ class Chat extends UIComponent<Extendable<ChatProps>, any> {
   }
 }
 
-export default Chat
+export default forwardRefFactory(Chat)

src/components/Chat/ChatItem.tsx

@@ -10,6 +10,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import Slot from '../Slot/Slot'
 
@@ -60,6 +61,7 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
   }
 }
 
-ChatItem.create = createShorthandFactory(ChatItem, 'content')
+const ForwardedChatItem = forwardRefFactory(ChatItem)
+ForwardedChatItem.create = createShorthandFactory(ForwardedChatItem, 'content')
 
-export default ChatItem
+export default ForwardedChatItem

src/components/Chat/ChatMessage.tsx

@@ -12,6 +12,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import {
   ComponentVariablesInput,
@@ -152,6 +153,7 @@ class ChatMessage extends UIComponent<Extendable<ChatMessageProps>, any> {
   }
 }
 
-ChatMessage.create = createShorthandFactory(ChatMessage, 'content')
+const ForwardedChatMessage = forwardRefFactory(ChatMessage)
+ForwardedChatMessage.create = createShorthandFactory(ForwardedChatMessage, 'content')
 
-export default ChatMessage
+export default ForwardedChatMessage

src/components/Divider/Divider.tsx

@@ -10,6 +10,7 @@ import {
   ColorComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 import { Extendable } from '../../../types/utils'
 
@@ -60,8 +61,9 @@ class Divider extends UIComponent<Extendable<DividerProps>, any> {
   }
 }
 
-Divider.create = createShorthandFactory(Divider, 'content')
+const ForwardedDivider = forwardRefFactory(Divider)
+ForwardedDivider.create = createShorthandFactory(ForwardedDivider, 'content')
 
-export default Divider
+export default ForwardedDivider
 
 export type DividerPropsWithDefaults = DividerProps & typeof Divider.defaultProps

src/components/Popup/Popup.tsx

@@ -13,6 +13,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  noForwardRefFactory,
 } from '../../lib'
 import { ComponentEventHandler, Extendable, ShorthandValue } from '../../../types/utils'
 
@@ -84,12 +85,7 @@ export interface PopupState {
   target: HTMLElement
 }
 
-/**
- * A Popup displays additional information on top of a page.
- * @accessibility This is example usage of the accessibility tag.
- * This should be replaced with the actual description after the PR is merged
- */
-export default class Popup extends AutoControlledComponent<Extendable<PopupProps>, PopupState> {
+class Popup extends AutoControlledComponent<Extendable<PopupProps>, PopupState> {
   public static displayName = 'Popup'
 
   public static className = 'ui-popup'
@@ -299,3 +295,10 @@ export default class Popup extends AutoControlledComponent<Extendable<PopupProps
     }
   }
 }
+
+/**
+ * A Popup displays additional information on top of a page.
+ * @accessibility This is example usage of the accessibility tag.
+ * This should be replaced with the actual description after the PR is merged
+ */
+export default noForwardRefFactory(Popup)

src/components/Status/Status.tsx

@@ -6,6 +6,7 @@ import {
   customPropTypes,
   UIComponent,
   createShorthandFactory,
+  forwardRefFactory,
   UIComponentProps,
   commonPropTypes,
 } from '../../lib'
@@ -25,9 +26,6 @@ export interface StatusProps extends UIComponentProps {
   state?: 'success' | 'info' | 'warning' | 'error' | 'unknown'
 }
 
-/**
- * A status graphically represents someone's or something's state.
- */
 class Status extends UIComponent<Extendable<StatusProps>, any> {
   static create: Function
 
@@ -71,5 +69,9 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
 
 Status.create = createShorthandFactory(Status, 'state')
 
-export default Status
+/**
+ * A status graphically represents someone's or something's state.
+ */
+export default forwardRefFactory(Status)
+
 export type StatusPropsWithDefaults = StatusProps & typeof Status.defaultProps

src/components/Text/Text.tsx

@@ -9,6 +9,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  forwardRefFactory,
 } from '../../lib'
 
 import { Extendable } from '../../../types/utils'
@@ -95,6 +96,7 @@ class Text extends UIComponent<Extendable<TextProps>, any> {
   }
 }
 
-Text.create = createShorthandFactory(Text, 'content')
+const ForwardedText = forwardRefFactory(Text)
+ForwardedText.create = createShorthandFactory(ForwardedText, 'content')
 
-export default Text
+export default ForwardedText

src/lib/factories.tsx

@@ -9,6 +9,7 @@ import {
   ShorthandRenderer,
 } from '../../types/utils'
 import { mergeStyles } from './mergeThemes'
+import { isForwardRefComponent } from './forwardRefFactory/componentUtils'
 
 type HTMLTag = 'iframe' | 'img' | 'input'
 type ShorthandProp = 'children' | 'src' | 'type'
@@ -81,11 +82,17 @@ export function createShorthand(
  * @returns {function} A shorthand factory function waiting for `val` and `defaultProps`.
  */
 export function createShorthandFactory(Component: React.ReactType, mappedProp?: string) {
-  if (typeof Component !== 'function' && typeof Component !== 'string') {
-    throw new Error('createShorthandFactory() Component must be a string or function.')
+  if (
+    typeof Component === 'function' ||
+    typeof Component === 'string' ||
+    isForwardRefComponent(Component)
+  ) {
+    return (val, options) => createShorthand(Component, mappedProp, val, options)
   }
 
-  return (val, options) => createShorthand(Component, mappedProp, val, options)
+  throw new Error(
+    'createShorthandFactory() Component must be a string, a function or to be wrapped with forwardRef().',
+  )
 }
 
 // ============================================================
@@ -98,9 +105,6 @@ function createShorthandFromValue(
   value?: ShorthandValue,
   options: CreateShorthandOptions = CREATE_SHORTHAND_DEFAULT_OPTIONS,
 ) {
-  if (typeof Component !== 'function' && typeof Component !== 'string') {
-    throw new Error('createShorthand() Component must be a string or function.')
-  }
   // short circuit noop values
   const valIsNoop = _.isNil(value) || typeof value === 'boolean'
   if (valIsNoop && !options.render) return null