fix(mixed): correct types to match propTypes

CHANGELOG.md

@@ -60,6 +60,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/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 import { NavLink } from 'react-router-dom'

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsRtl.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowCode.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowTransparent.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowVariables.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import DocumentTitle from 'react-document-title'
 import { withRouter } from 'react-router'

docs/src/components/ComponentDoc/ComponentDocLinks.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { List } from 'semantic-ui-react'
 import { constants } from 'src/lib'

docs/src/components/ComponentDoc/ComponentDocSee.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { Header, List } from 'semantic-ui-react'

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router'
 import * as copyToClipboard from 'copy-to-clipboard'

docs/src/components/ComponentDoc/ComponentExamples.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { exampleContext } from 'docs/src/utils'

docs/src/components/ComponentDoc/ComponentProp/ComponentPropDefaultValue.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 export default class ComponentPropDefaultValue extends React.PureComponent<any, any> {

docs/src/components/ComponentDoc/ComponentProp/ComponentPropDescription.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 export default class ComponentPropDescription extends React.PureComponent<any, any> {

docs/src/components/ComponentDoc/ComponentProp/ComponentPropEnum.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { updateForKeys } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentProp/ComponentPropEnumToggle.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { updateForKeys } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentProp/ComponentPropEnumValue.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { neverUpdate } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { neverUpdate } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentProp/ComponentPropName.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Icon, Popup } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Checkbox } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentProps/ComponentPropsComponents.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentProps/ComponentPropsDescription.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Divider } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Accordion, Menu, Sticky } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Accordion, Icon, Menu } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentTable/ComponentTable.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Table } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
 import { Table } from 'semantic-ui-react'

docs/src/components/ComponentDoc/ContributionPrompt.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { Message, Icon } from 'semantic-ui-react'

docs/src/components/ComponentDoc/ExampleSection.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { Grid, Header } from 'semantic-ui-react'

docs/src/components/DocsBehaviorRoot.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Grid, Header } from 'semantic-ui-react'
 import DocumentTitle from 'react-document-title'

docs/src/components/DocsLayout.tsx

@@ -1,5 +1,5 @@
 import AnchorJS from 'anchor-js'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { withRouter } from 'react-router'
 import { Route } from 'react-router-dom'

docs/src/components/DocsRoot.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import ComponentDoc from '../components/ComponentDoc'

docs/src/components/Editor/Editor.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import AceEditor, { AceEditorProps } from 'react-ace'
 import * as ace from 'brace'

docs/src/components/ExternalExampleLayout.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash/fp'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { exampleContext, exampleKebabNameToFilename, parseExamplePath } from 'docs/src/utils'

docs/src/components/Knobs/KnobsBoolean.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import KnobsField from './KnobsField'

docs/src/components/Knobs/KnobsScalar.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import KnobsField from './KnobsField'

docs/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import keyboardKey from 'keyboard-key'
 import * as _ from 'lodash/fp'
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'

docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.knobs.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import Knobs from 'docs/src/components/Knobs/Knobs'

docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.knobs.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 

docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 

docs/src/examples/components/Layout/Variations/LayoutExampleGap.knobs.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import Knobs from 'docs/src/components/Knobs/Knobs'

docs/src/examples/components/List/Types/ListExample.knobs.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 

docs/src/examples/components/List/Variations/ListExampleTruncate.knobs.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 

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>
     )
   }
 }

docs/src/utils/componentInfoShape.ts

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import * as PropTypes from 'prop-types'
 
 const componentInfoShape = PropTypes.shape({
   displayName: PropTypes.string.isRequired,

package.json

@@ -85,9 +85,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",
@@ -153,7 +153,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'