fix(typings): update types to support ref

index.d.ts

@@ -52,12 +52,7 @@ export {
   StrictBreadcrumbSectionProps,
 } from './dist/commonjs/collections/Breadcrumb/BreadcrumbSection'
 
-export {
-  default as Form,
-  FormComponent,
-  FormProps,
-  StrictFormProps,
-} from './dist/commonjs/collections/Form'
+export { default as Form, FormProps, StrictFormProps } from './dist/commonjs/collections/Form'
 export {
   default as FormButton,
   FormButtonProps,

src/addons/Confirm/Confirm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { ButtonProps } from '../../elements/Button'
 import { StrictModalProps } from '../../modules/Modal'
 import { ModalContentProps } from '../../modules/Modal/ModalContent'
@@ -42,10 +42,10 @@ export interface StrictConfirmProps extends StrictModalProps {
   /** Whether or not the modal is visible. */
   open?: boolean
 
-  /** A confirm can vary in size. */
+  /** A Confirm can vary in size. */
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'fullscreen'
 }
 
-declare const Confirm: React.ComponentClass<ConfirmProps>
+declare const Confirm: ForwardRefComponent<ConfirmProps, HTMLDivElement>
 
 export default Confirm

src/addons/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import PaginationItem, { PaginationItemProps } from './PaginationItem'
 
 export interface PaginationProps extends StrictPaginationProps {
@@ -56,8 +56,8 @@ export interface StrictPaginationProps {
   totalPages: number | string
 }
 
-declare class Pagination extends React.Component<PaginationProps> {
-  static Item: typeof PaginationItem
+declare const Pagination: ForwardRefComponent<PaginationProps, HTMLDivElement> & {
+  Item: typeof PaginationItem
 }
 
 export default Pagination

src/addons/Pagination/PaginationItem.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface PaginationItemProps extends StrictPaginationItemProps {
   [key: string]: any
@@ -31,6 +32,6 @@ export interface StrictPaginationItemProps {
   type?: 'ellipsisItem' | 'firstItem' | 'prevItem' | 'pageItem' | 'nextItem' | 'lastItem'
 }
 
-declare class PaginationItem extends React.Component<PaginationItemProps> {}
+declare const PaginationItem: ForwardRefComponent<PaginationItemProps, HTMLDivElement>
 
 export default PaginationItem

src/addons/Portal/Portal.d.ts

@@ -97,8 +97,8 @@ export interface StrictPortalProps {
   triggerRef?: React.Ref<any>
 }
 
-declare class Portal extends React.Component<PortalProps> {
-  static Inner: typeof PortalInner
+declare const Portal: React.FC<PortalProps> & {
+  Inner: typeof PortalInner
 }
 
 export default Portal

src/addons/Portal/PortalInner.d.ts

@@ -28,6 +28,6 @@ export interface StrictPortalInnerProps {
   onUnmount?: (nothing: null, data: PortalInnerProps) => void
 }
 
-declare class PortalInner extends React.Component<PortalInnerProps> {}
+declare const PortalInner: React.FC<PortalInnerProps>
 
 export default PortalInner

src/addons/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 import { StrictCheckboxProps } from '../../modules/Checkbox'
 
 export interface RadioProps extends StrictRadioProps {
@@ -16,6 +16,6 @@ export interface StrictRadioProps extends StrictCheckboxProps {
   type?: 'checkbox' | 'radio'
 }
 
-declare const Radio: React.FC<RadioProps>
+declare const Radio: ForwardRefComponent<RadioProps, HTMLInputElement>
 
 export default Radio

src/addons/Select/Select.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react'
-
 import { StrictDropdownProps } from '../../modules/Dropdown'
 import DropdownDivider from '../../modules/Dropdown/DropdownDivider'
 import DropdownHeader from '../../modules/Dropdown/DropdownHeader'
 import DropdownItem, { DropdownItemProps } from '../../modules/Dropdown/DropdownItem'
 import DropdownMenu from '../../modules/Dropdown/DropdownMenu'
+import { ForwardRefComponent } from '../../generic'
 
 export interface SelectProps extends StrictSelectProps {
   [key: string]: any
@@ -15,13 +14,11 @@ export interface StrictSelectProps extends StrictDropdownProps {
   options: DropdownItemProps[]
 }
 
-interface SelectComponent extends React.FC<SelectProps> {
+declare const Select: ForwardRefComponent<SelectProps, HTMLDivElement> & {
   Divider: typeof DropdownDivider
   Header: typeof DropdownHeader
   Item: typeof DropdownItem
   Menu: typeof DropdownMenu
 }
 
-declare const Select: SelectComponent
-
 export default Select

src/addons/TextArea/TextArea.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface TextAreaProps extends StrictTextAreaProps {
   [key: string]: any
@@ -31,8 +32,6 @@ export interface StrictTextAreaProps {
   value?: number | string
 }
 
-declare class TextArea extends React.Component<TextAreaProps> {
-  focus: () => void
-}
+declare const TextArea: ForwardRefComponent<TextAreaProps, HTMLTextAreaElement>
 
 export default TextArea

src/collections/Breadcrumb/Breadcrumb.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticShorthandCollection,
   SemanticShorthandContent,
   SemanticShorthandItem,
@@ -38,11 +39,9 @@ export interface StrictBreadcrumbProps {
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'
 }
 
-interface BreadcrumbComponent extends React.ComponentClass<BreadcrumbProps> {
+declare const Breadcrumb: ForwardRefComponent<BreadcrumbProps, HTMLDivElement> & {
   Divider: typeof BreadcrumbDivider
   Section: typeof BreadcrumbSection
 }
 
-declare const Breadcrumb: BreadcrumbComponent
-
 export default Breadcrumb

src/collections/Breadcrumb/BreadcrumbDivider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface BreadcrumbDividerProps extends StrictBreadcrumbDividerProps {
@@ -24,6 +24,6 @@ export interface StrictBreadcrumbDividerProps {
   icon?: SemanticShorthandItem<IconProps>
 }
 
-declare const BreadcrumbDivider: React.FC<BreadcrumbDividerProps>
+declare const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps, HTMLDivElement>
 
 export default BreadcrumbDivider

src/collections/Breadcrumb/BreadcrumbSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface BreadcrumbSectionProps extends StrictBreadcrumbSectionProps {
   [key: string]: any
@@ -37,6 +37,6 @@ export interface StrictBreadcrumbSectionProps {
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: BreadcrumbSectionProps) => void
 }
 
-declare const BreadcrumbSection: React.ComponentClass<BreadcrumbSectionProps>
+declare const BreadcrumbSection: ForwardRefComponent<BreadcrumbSectionProps, HTMLDivElement>
 
 export default BreadcrumbSection

src/collections/Form/Form.d.ts

@@ -9,6 +9,7 @@ import FormInput from './FormInput'
 import FormRadio from './FormRadio'
 import FormSelect from './FormSelect'
 import FormTextArea from './FormTextArea'
+import { ForwardRefComponent } from '../../generic'
 
 export interface FormProps extends StrictFormProps {
   [key: string]: any
@@ -58,7 +59,7 @@ export interface StrictFormProps {
   widths?: 'equal'
 }
 
-export interface FormComponent extends React.FC<FormProps> {
+declare const Form: ForwardRefComponent<FormProps, HTMLFormElement> & {
   Field: typeof FormField
   Button: typeof FormButton
   Checkbox: typeof FormCheckbox
@@ -70,6 +71,4 @@ export interface FormComponent extends React.FC<FormProps> {
   TextArea: typeof FormTextArea
 }
 
-declare const Form: FormComponent
-
 export default Form

src/collections/Form/FormButton.d.ts

@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { StrictButtonProps } from '../../elements/Button'
 import { LabelProps } from '../../elements/Label'
 import { StrictFormFieldProps } from './FormField'
@@ -22,6 +20,6 @@ export interface StrictFormButtonProps
   label?: SemanticShorthandItem<LabelProps>
 }
 
-declare const FormButton: React.FC<FormButtonProps>
+declare const FormButton: ForwardRefComponent<FormButtonProps, HTMLButtonElement>
 
 export default FormButton

src/collections/Form/FormCheckbox.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictCheckboxProps } from '../../modules/Checkbox'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormCheckboxProps extends StrictFormCheckboxProps {
@@ -18,6 +17,6 @@ export interface StrictFormCheckboxProps extends StrictFormFieldProps, StrictChe
   type?: 'checkbox' | 'radio'
 }
 
-declare const FormCheckbox: React.FC<FormCheckboxProps>
+declare const FormCheckbox: ForwardRefComponent<FormCheckboxProps, HTMLInputElement>
 
 export default FormCheckbox

src/collections/Form/FormDropdown.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictDropdownProps } from '../../modules/Dropdown'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormDropdownProps extends StrictFormDropdownProps {
@@ -18,6 +17,6 @@ export interface StrictFormDropdownProps extends StrictFormFieldProps, StrictDro
   error?: any
 }
 
-declare const FormDropdown: React.FC<FormDropdownProps>
+declare const FormDropdown: ForwardRefComponent<FormDropdownProps, HTMLDivElement>
 
 export default FormDropdown

src/collections/Form/FormField.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   HtmlLabelProps,
   SemanticShorthandContent,
   SemanticShorthandItem,
@@ -57,6 +58,6 @@ export interface StrictFormFieldProps {
   width?: SemanticWIDTHS
 }
 
-declare const FormField: React.FC<FormFieldProps>
+declare const FormField: ForwardRefComponent<FormFieldProps, HTMLElement>
 
 export default FormField

src/collections/Form/FormGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticWIDTHS } from '../../generic'
+import { ForwardRefComponent, SemanticWIDTHS } from '../../generic'
 
 export interface FormGroupProps extends StrictFormGroupProps {
   [key: string]: any
@@ -34,6 +34,6 @@ export interface StrictFormGroupProps {
   widths?: SemanticWIDTHS | 'equal'
 }
 
-declare const FormGroup: React.FC<FormGroupProps>
+declare const FormGroup: ForwardRefComponent<FormGroupProps, HTMLInputElement>
 
 export default FormGroup

src/collections/Form/FormInput.d.ts

@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { LabelProps } from '../../elements/Label'
 import { StrictInputProps } from '../../elements/Input'
 import { StrictFormFieldProps } from './FormField'
@@ -25,6 +23,6 @@ export interface StrictFormInputProps
   label?: SemanticShorthandItem<LabelProps>
 }
 
-declare const FormInput: React.FC<FormInputProps>
+declare const FormInput: ForwardRefComponent<FormInputProps, HTMLInputElement>
 
 export default FormInput

src/collections/Form/FormRadio.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictRadioProps } from '../../addons/Radio'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormRadioProps extends StrictFormRadioProps {
@@ -18,6 +17,6 @@ export interface StrictFormRadioProps extends StrictFormFieldProps, StrictRadioP
   type?: 'checkbox' | 'radio'
 }
 
-declare const FormRadio: React.FC<FormRadioProps>
+declare const FormRadio: ForwardRefComponent<FormRadioProps, HTMLInputElement>
 
 export default FormRadio

src/collections/Form/FormSelect.d.ts

@@ -1,10 +1,7 @@
-import * as React from 'react'
-
 import { StrictSelectProps } from '../../addons/Select'
 import { DropdownItemProps } from '../../modules/Dropdown/DropdownItem'
 import { StrictFormFieldProps } from './FormField'
-import { SemanticShorthandItem } from '../../generic'
-import { LabelProps } from '../../elements/Label'
+import { ForwardRefComponent } from '../../generic'
 
 export interface FormSelectProps extends StrictFormSelectProps {
   [key: string]: any
@@ -24,6 +21,6 @@ export interface StrictFormSelectProps extends StrictFormFieldProps, StrictSelec
   options: DropdownItemProps[]
 }
 
-declare const FormSelect: React.FC<FormSelectProps>
+declare const FormSelect: ForwardRefComponent<FormSelectProps, HTMLDivElement>
 
 export default FormSelect

src/collections/Form/FormTextArea.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictTextAreaProps } from '../../addons/TextArea'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormTextAreaProps extends StrictFormTextAreaProps {
@@ -15,6 +14,6 @@ export interface StrictFormTextAreaProps extends StrictFormFieldProps, StrictTex
   control?: any
 }
 
-declare const FormTextArea: React.FC<FormTextAreaProps>
+declare const FormTextArea: ForwardRefComponent<FormTextAreaProps, HTMLTextAreaElement>
 
 export default FormTextArea

src/collections/Form/index.d.ts

@@ -1 +1 @@
-export { default, FormComponent, FormProps, StrictFormProps } from './Form'
+export { default, FormProps, StrictFormProps } from './Form'

src/collections/Grid/Grid.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { SemanticTEXTALIGNMENTS, SemanticVERTICALALIGNMENTS, SemanticWIDTHS } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticTEXTALIGNMENTS,
+  SemanticVERTICALALIGNMENTS,
+  SemanticWIDTHS,
+} from '../../generic'
 import GridColumn from './GridColumn'
 import GridRow from './GridRow'
 
@@ -70,11 +75,9 @@ export interface StrictGridProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-interface GridComponent extends React.FC<GridProps> {
+declare const Grid: ForwardRefComponent<GridProps, HTMLDivElement> & {
   Column: typeof GridColumn
   Row: typeof GridRow
 }
 
-declare const Grid: GridComponent
-
 export default Grid