update deps and add nullable type

Author: layershifter

package.json

@@ -82,9 +82,9 @@
     "@types/jest-axe": "^2.2.2",
     "@types/lodash": "^4.14.118",
     "@types/node": "^10.3.2",
-    "@types/react": "^16.3.17",
+    "@types/react": "^16.7.17",
     "@types/react-custom-scrollbars": "^4.0.5",
-    "@types/react-dom": "^16.0.6",
+    "@types/react-dom": "^16.0.11",
     "@types/react-is": "^16.5.0",
     "@types/react-router": "^4.0.27",
     "awesome-typescript-loader": "^5.2.1",
@@ -151,7 +151,7 @@
     "ts-node": "^6.1.0",
     "tslint": "^5.11.0",
     "tslint-config-airbnb": "^5.11.1",
-    "typescript": "~3.1.0",
+    "typescript": "~3.2.2",
     "webpack": "^4.25.1",
     "webpack-dev-middleware": "^3.4.0",
     "webpack-hot-middleware": "^2.18.2"

src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ import { Accessibility } from '../../lib/accessibility/types'
 
 import {
   ComponentEventHandler,
-  Extendable,
+  ReactProps,
   ShorthandValue,
   ShorthandRenderFunction,
 } from '../../../types/utils'
@@ -72,7 +72,7 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
 /**
  * An accordion allows users to toggle the display of sections of content.
  */
-class Accordion extends AutoControlledComponent<Extendable<AccordionProps>, any> {
+class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any> {
   static displayName = 'Accordion'
 
   static className = 'ui-accordion'

src/components/Accordion/AccordionContent.tsx

@@ -10,7 +10,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable, ComponentEventHandler } from '../../../types/utils'
+import { ReactProps, ComponentEventHandler } from '../../../types/utils'
 
 export interface AccordionContentProps
   extends UIComponentProps,
@@ -31,7 +31,7 @@ export interface AccordionContentProps
 /**
  * A standard AccordionContent.
  */
-class AccordionContent extends UIComponent<Extendable<AccordionContentProps>, any> {
+class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, any> {
   static displayName = 'AccordionContent'
 
   static create: Function

src/components/Accordion/AccordionTitle.tsx

@@ -11,7 +11,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable, ComponentEventHandler } from '../../../types/utils'
+import { ReactProps, ComponentEventHandler } from '../../../types/utils'
 
 export interface AccordionTitleProps
   extends UIComponentProps,
@@ -35,7 +35,7 @@ export interface AccordionTitleProps
 /**
  * A standard AccordionTitle.
  */
-class AccordionTitle extends UIComponent<Extendable<AccordionTitleProps>, any> {
+class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
   static displayName = 'AccordionTitle'
 
   static create: Function

src/components/Animation/Animation.tsx

@@ -10,6 +10,7 @@ import {
 } from '../../lib'
 import { AnimationProp } from '../../themes/types'
 import createAnimationStyles from '../../lib/createAnimationStyles'
+import { ReactPropsStrict } from '../../../types/utils'
 
 export interface AnimationProps
   extends StyledComponentProps,
@@ -78,7 +79,7 @@ export interface AnimationProps
 /**
  * An animation allows the user to animate their own components.
  */
-class Animation extends UIComponent<AnimationProps, any> {
+class Animation extends UIComponent<ReactPropsStrict<AnimationProps>, any> {
   static create: Function
 
   static className = 'ui-animation'

src/components/Attachment/Attachment.tsx

@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 import {
   UIComponent,
   customPropTypes,
@@ -38,7 +38,7 @@ export interface AttachmentProps extends UIComponentProps, ChildrenComponentProp
 /**
  * An Attachment displays a file attachment.
  */
-class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
+class Attachment extends UIComponent<ReactProps<AttachmentProps>, any> {
   static create: Function
 
   static className = 'ui-attachment'

src/components/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Image from '../Image/Image'
 import Label from '../Label/Label'
 import Status from '../Status/Status'
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 import {
   createShorthandFactory,
   customPropTypes,
@@ -35,7 +35,7 @@ export interface AvatarProps extends UIComponentProps {
 /**
  * An avatar is a graphic representation of user.
  */
-class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
+class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
   static create: Function
 
   static className = 'ui-avatar'

src/components/Button/Button.tsx

@@ -17,7 +17,7 @@ import Icon from '../Icon/Icon'
 import Slot from '../Slot/Slot'
 import { buttonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-import { ComponentEventHandler, Extendable, ShorthandValue } from '../../../types/utils'
+import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
 import ButtonGroup from './ButtonGroup'
 
 export interface ButtonProps
@@ -83,7 +83,7 @@ export interface ButtonState {
  *  - for disabled buttons, add 'disabled' attribute so that the state is properly recognized by the screen reader
  *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label', or 'aria-labelledby' attributes
  */
-class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
+class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
   static create: Function
 
   public static displayName = 'Button'

src/components/Button/ButtonGroup.tsx

@@ -2,7 +2,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
 
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 import {
   UIComponent,
   childrenExist,
@@ -28,7 +28,7 @@ export interface ButtonGroupProps
 /**
  * A button group presents multiple related actions.
  */
-class ButtonGroup extends UIComponent<Extendable<ButtonGroupProps>, any> {
+class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
   public static displayName = 'ButtonGroup'
 
   public static className = 'ui-buttons'

src/components/Chat/Chat.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { childrenExist, customPropTypes, UIComponent, commonPropTypes } from '../../lib'
 import ChatItem from './ChatItem'
 import ChatMessage from './ChatMessage'
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import { chatBehavior } from '../../lib/accessibility'
 import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
@@ -24,7 +24,7 @@ export interface ChatProps extends UIComponentProps, ChildrenComponentProps {
 /**
  * A Chat displays messages between users.
  */
-class Chat extends UIComponent<Extendable<ChatProps>, any> {
+class Chat extends UIComponent<ReactProps<ChatProps>, any> {
   static className = 'ui-chat'
 
   static displayName = 'Chat'

src/components/Chat/ChatItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 import {
   childrenExist,
   createShorthandFactory,
@@ -29,7 +29,7 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps
 /**
  * A chat item represents a single event in a chat.
  */
-class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
+class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
   static className = 'ui-chat__item'
   static create: Function
   static displayName = 'ChatItem'

src/components/Chat/ChatMessage.tsx

@@ -13,7 +13,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 import { chatMessageBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 
@@ -43,7 +43,7 @@ export interface ChatMessageProps
 /**
  * A chat message represents a single statement communicated to a user.
  */
-class ChatMessage extends UIComponent<Extendable<ChatMessageProps>, any> {
+class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, any> {
   static className = 'ui-chat__message'
 
   static create: Function

src/components/Divider/Divider.tsx

@@ -11,7 +11,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable } from '../../../types/utils'
+import { ReactProps } from '../../../types/utils'
 
 export interface DividerProps
   extends UIComponentProps,
@@ -31,7 +31,7 @@ export interface DividerProps
 /**
  * A divider visually segments content into groups.
  */
-class Divider extends UIComponent<Extendable<DividerProps>, any> {
+class Divider extends UIComponent<ReactProps<DividerProps>, any> {
   static displayName = 'Divider'
 
   static create: Function

src/components/Form/Form.tsx

@@ -10,7 +10,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { ComponentEventHandler, Extendable, ShorthandValue } from '../../../types/utils'
+import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
 import FormField from './FormField'
 
 export interface FormProps extends UIComponentProps, ChildrenComponentProps {
@@ -33,7 +33,7 @@ export interface FormProps extends UIComponentProps, ChildrenComponentProps {
  * @accessibility
  * Label needs to be provided by using 'aria-label', or 'aria-labelledby' attributes on the <form> element.
  */
-class Form extends UIComponent<Extendable<FormProps>, any> {
+class Form extends UIComponent<ReactProps<FormProps>, any> {
   static create: Function
 
   public static displayName = 'Form'

src/components/Form/FormField.tsx

@@ -10,7 +10,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 import Text from '../Text/Text'
 import Input from '../Input/Input'
 import Slot from '../Slot/Slot'
@@ -44,7 +44,7 @@ export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps
 /**
  * A field is a form element containing a label and an input.
  */
-class FormField extends UIComponent<Extendable<FormFieldProps>, any> {
+class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
   public static displayName = 'FormField'
 
   public static className = 'ui-form__field'

src/components/Grid/Grid.tsx

@@ -10,7 +10,7 @@ import {
   commonPropTypes,
   ContentComponentProps,
 } from '../../lib'
-import { Extendable } from '../../../types/utils'
+import { ReactProps } from '../../../types/utils'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
 import ReactNode = React.ReactNode
@@ -38,7 +38,7 @@ export interface GridProps
  * @accessibility This is example usage of the accessibility tag.
  * This should be replaced with the actual description after the PR is merged
  */
-class Grid extends UIComponent<Extendable<GridProps>, any> {
+class Grid extends UIComponent<ReactProps<GridProps>, any> {
   public static displayName = 'Grid'
 
   public static className = 'ui-grid'

src/components/Header/Header.tsx

@@ -11,7 +11,7 @@ import {
   commonPropTypes,
 } from '../../lib'
 import HeaderDescription from './HeaderDescription'
-import { Extendable, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
 
 export interface HeaderProps
   extends UIComponentProps,
@@ -34,7 +34,7 @@ export interface HeaderProps
  *  - when the description property is used in header, readers will narrate both header content and description within the element.
  *    In addition to that, both will be displayed in the list of headings.
  */
-class Header extends UIComponent<Extendable<HeaderProps>, any> {
+class Header extends UIComponent<ReactProps<HeaderProps>, any> {
   static className = 'ui-header'
 
   static displayName = 'Header'

src/components/Header/HeaderDescription.tsx

@@ -9,7 +9,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable } from '../../../types/utils'
+import { ReactProps } from '../../../types/utils'
 
 export interface HeaderDescriptionProps
   extends UIComponentProps,
@@ -19,7 +19,7 @@ export interface HeaderDescriptionProps
 /**
  * A header's description provides more detailed information.
  */
-class HeaderDescription extends UIComponent<Extendable<HeaderDescriptionProps>, any> {
+class HeaderDescription extends UIComponent<ReactProps<HeaderDescriptionProps>, any> {
   static create: Function
 
   static className = 'ui-header__description'

src/components/Icon/Icon.tsx

@@ -11,7 +11,7 @@ import { iconBehavior } from '../../lib/accessibility/'
 import { Accessibility } from '../../lib/accessibility/types'
 
 import { SvgIconSpec } from '../../themes/types'
-import { Extendable } from '../../../types/utils'
+import { ReactProps } from '../../../types/utils'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 export type IconSize =
@@ -54,7 +54,7 @@ export interface IconProps extends UIComponentProps {
 /**
  * An icon is a glyph used to represent something else.
  */
-class Icon extends UIComponent<Extendable<IconProps>, any> {
+class Icon extends UIComponent<ReactProps<IconProps>, any> {
   static create: Function
 
   static className = 'ui-icon'

src/components/Image/Image.tsx

@@ -5,7 +5,7 @@ import { createShorthandFactory, UIComponent, UIComponentProps, commonPropTypes
 import { imageBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 
-import { Extendable } from '../../../types/utils'
+import { ReactProps } from '../../../types/utils'
 
 export interface ImageProps extends UIComponentProps {
   /**
@@ -37,7 +37,7 @@ export interface ImageProps extends UIComponentProps {
  *  - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior
  *  - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently.
  */
-class Image extends UIComponent<Extendable<ImageProps>, any> {
+class Image extends UIComponent<ReactProps<ImageProps>, any> {
   static create: Function
 
   static className = 'ui-image'

src/components/Input/Input.tsx

@@ -12,7 +12,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
+import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
 import Icon from '../Icon/Icon'
 import Ref from '../Ref/Ref'
 import Slot from '../Slot/Slot'
@@ -76,7 +76,7 @@ export interface InputState {
  * Other considerations:
  *  - if input is search, then use "role='search'"
  */
-class Input extends AutoControlledComponent<Extendable<InputProps>, InputState> {
+class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState> {
   private inputDomElement: HTMLInputElement
 
   static className = 'ui-input'

src/components/ItemLayout/ItemLayout.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../lib'
 import Layout from '../Layout/Layout'
 import { ComponentSlotClasses, ICSSInJSStyle } from '../../themes/types'
-import { Extendable } from '../../../types/utils'
+import { ReactProps } from '../../../types/utils'
 
 export interface ItemLayoutProps extends UIComponentProps, ContentComponentProps<any> {
   contentMedia?: any
@@ -58,7 +58,7 @@ export interface ItemLayoutProps extends UIComponentProps, ContentComponentProps
 /**
  * The Item Layout handles layout styles for menu items, list items and other similar item templates.
  */
-class ItemLayout extends UIComponent<Extendable<ItemLayoutProps>, any> {
+class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
   static create: Function
 
   static displayName = 'ItemLayout'