fix(mixed): correct types to match propTypes

CHANGELOG.md

@@ -41,6 +41,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix multiple React's warnings about keys in docs @layershifter ([#602](https://github.com/stardust-ui/react/pull/602))
 - Fix incorrect handling of `isFromKeyboard` in `Menu` @layershifter ([#596](https://github.com/stardust-ui/react/pull/596))
 - Fix property names used in shorthand factories @kuzhelov ([#591](https://github.com/stardust-ui/react/pull/591))
+- Fix compatibility with TypeScript 3.2 and handle `null` as a valid value in all optional props @layershifter ([#550](https://github.com/stardust-ui/react/pull/550))
 
 ### Features
 - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))

docs/src/examples/components/Ref/Types/RefForwardingExample.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Ref, Segment } from '@stardust-ui/react'
 
-const ExampleButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+const ExampleButton = React.forwardRef<HTMLButtonElement, { children: string }>((props, ref) => (
   <div>
     <button {...props} ref={ref} />
   </div>

docs/src/prototypes/popups/GridImagePicker/GridImagePicker.tsx

@@ -6,7 +6,6 @@ import { ShorthandValue } from '../../../../../types/utils'
 import GridImagePickerItem, { GridPickerItemProps } from './GridImagePickerItem'
 
 export interface GridPickerProps {
-  as?: keyof React.ReactHTML
   items: GridPickerItemProps[]
   gridColumns?: string | number
   inputIcon?: ShorthandValue
@@ -27,7 +26,6 @@ const inputStyles = {
 
 class GridImagePicker extends React.Component<GridPickerProps> {
   static defaultProps = {
-    as: 'ul',
     gridColumns: 5,
     inputIcon: 'search',
     inputPlaceholder: 'Search...',
@@ -41,7 +39,7 @@ class GridImagePicker extends React.Component<GridPickerProps> {
   }
 
   render() {
-    const { as: ElementType, gridColumns, inputIcon, inputPlaceholder } = this.props
+    const { gridColumns, inputIcon, inputPlaceholder } = this.props
 
     return (
       <>
@@ -53,7 +51,7 @@ class GridImagePicker extends React.Component<GridPickerProps> {
           inputRef={this.setInputNode}
         />
         <Grid
-          as={ElementType}
+          as="ul"
           accessibility={gridBehavior}
           columns={gridColumns}
           style={gridStyles}

docs/src/prototypes/popups/GridImagePicker/GridImagePickerItem.tsx

@@ -3,7 +3,6 @@ import { Image, Button } from '@stardust-ui/react'
 import * as React from 'react'
 
 export interface GridPickerItemProps {
-  as?: keyof React.ReactHTML
   title?: string
   imageSrc: string
   onClick?: (e: React.SyntheticEvent, props: GridPickerItemProps) => void
@@ -17,19 +16,15 @@ const imageButtonStyles = {
 }
 
 class GridImagePickerItem extends React.Component<GridPickerItemProps> {
-  static defaultProps = {
-    as: 'li',
-  }
-
   render() {
-    const { title, imageSrc, as: ElementType, onClick } = this.props
+    const { title, imageSrc, onClick } = this.props
 
     return (
-      <ElementType>
+      <li>
         <Button styles={imageButtonStyles} onClick={onClick} title={title} role="listitem">
           {imageSrc && <Image src={imageSrc} fluid />}
         </Button>
-      </ElementType>
+      </li>
     )
   }
 }

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'