chore(package): update @types and TS

build/gulp/tasks/test-projects/cra/App.tsx

@@ -1,17 +1,39 @@
-import { Avatar, Button, Header, Image, Input, Popup, Provider, themes } from '@stardust-ui/react'
+import {
+  Accordion,
+  Animation,
+  Attachment,
+  Avatar,
+  Button,
+  Divider,
+  Header,
+  Icon,
+  Image,
+  Indicator,
+  Input,
+  Popup,
+  Provider,
+  themes,
+} from '@stardust-ui/react'
 import * as React from 'react'
 
 class App extends React.Component {
   public render() {
     return (
       <Provider theme={themes.teams}>
         <div>
-          <Popup trigger={<Button content="Popup" />} content="Popup content" />
+          <Accordion panels={[{ title: 'Title', content: 'Content' }]} />
+          <Animation name="spinner">
+            <Icon name="umbrella" circular bordered />
+          </Animation>
+          <Attachment header="Document.docx" />
           <Avatar src="//placehold.it" />
           <Button content="Click me" />
+          <Divider />
           <Header content="This is " />
           <Image src="//placehold.it" />
+          <Indicator />
           <Input placeholder="Type here" />
+          <Popup trigger={<Button content="Popup" />} content="Popup content" />
         </div>
       </Provider>
     )

docs/src/examples/components/Ref/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Types from './Types'
 
-const RefExamples: React.SFC = () => (
+const RefExamples = () => (
   <div>
     <Types />
   </div>

package.json

@@ -58,10 +58,10 @@
     "@types/lodash": "^4.14.118",
     "@types/node": "^10.3.2",
     "@types/puppeteer": "^1.11.1",
-    "@types/react": "^16.7.17",
+    "@types/react": "^16.8.7",
     "@types/react-custom-scrollbars": "^4.0.5",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-is": "^16.5.0",
+    "@types/react-dom": "^16.8.2",
+    "@types/react-is": "^16.7.1",
     "@types/react-router": "^4.0.27",
     "awesome-typescript-loader": "^5.2.1",
     "clean-webpack-plugin": "^0.1.19",
@@ -128,7 +128,7 @@
     "tsconfig-paths": "^3.7.0",
     "tslint": "^5.11.0",
     "tslint-config-airbnb": "^5.11.1",
-    "typescript": "~3.2.2",
+    "typescript": "^3.3.3333",
     "webpack": "^4.25.1",
     "webpack-dev-middleware": "^3.4.0",
     "webpack-hot-middleware": "^2.18.2"

packages/react/src/components/Animation/Animation.tsx

@@ -124,7 +124,8 @@ class Animation extends UIComponent<ReactPropsStrict<AnimationProps>, any> {
 
     const animationStyle = createAnimationStyles(animation, theme)
 
-    const child = childrenExist(children) && React.Children.only(children)
+    const child =
+      childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
     const result = child
       ? React.cloneElement(child, {
           style: { ...animationStyle, ...(child.props && child.props.style) },

packages/react/src/components/Flex/FlexItem.tsx

@@ -80,9 +80,8 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
       })
     }
 
-    return _.isNil(children)
-      ? children
-      : applyStyles(React.Children.only(children), styles, classes)
+    if (_.isNil(children)) return children
+    return applyStyles(React.Children.only(children) as React.ReactElement<any>, styles, classes)
   }
 }
 

packages/react/src/components/Provider/ProviderConsumer.tsx

@@ -16,7 +16,7 @@ export interface ProviderConsumerProps {
 /**
  * The Provider's Consumer is for accessing theme.
  */
-const ProviderConsumer: React.SFC<ProviderConsumerProps> = ({ render }) => (
+const ProviderConsumer: React.FunctionComponent<ProviderConsumerProps> = ({ render }) => (
   <FelaTheme>{render}</FelaTheme>
 )
 

packages/react/src/components/Ref/Ref.tsx

@@ -13,10 +13,10 @@ export interface RefProps extends ChildrenComponentProps<React.ReactElement<any>
    *
    * @param {HTMLElement} node - Referred node.
    */
-  innerRef?: React.Ref<any>
+  innerRef: React.Ref<any>
 }
 
-const Ref: React.SFC<ReactPropsStrict<RefProps>> = props => {
+const Ref: React.FunctionComponent<ReactPropsStrict<RefProps>> = props => {
   const { children, innerRef } = props
 
   const child = React.Children.only(children)
@@ -28,7 +28,7 @@ const Ref: React.SFC<ReactPropsStrict<RefProps>> = props => {
 Ref.displayName = 'Ref'
 Ref.propTypes = {
   children: PropTypes.element.isRequired,
-  innerRef: customPropTypes.ref as PropTypes.Requireable<any>,
+  innerRef: customPropTypes.ref.isRequired as PropTypes.Validator<React.Ref<any>>,
 }
 
 export default Ref

packages/react/src/components/Ref/RefFindNode.tsx

@@ -10,7 +10,7 @@ export interface RefFindNodeProps extends ChildrenComponentProps<React.ReactElem
    *
    * @param {HTMLElement} node - Referred node.
    */
-  innerRef?: React.Ref<any>
+  innerRef: React.Ref<any>
 }
 
 export default class RefFindNode extends React.Component<RefFindNodeProps> {

packages/react/src/components/Ref/RefForward.tsx

@@ -3,14 +3,13 @@ import * as React from 'react'
 
 import { ChildrenComponentProps, customPropTypes, handleRef } from '../../lib'
 
-export interface RefForwardProps
-  extends ChildrenComponentProps<React.ReactElement<any> & { ref: React.Ref<any> }> {
+export interface RefForwardProps extends ChildrenComponentProps<React.ReactElement<any>> {
   /**
    * Called when a child component will be mounted or updated.
    *
    * @param {HTMLElement} node - Referred node.
    */
-  innerRef?: React.Ref<any>
+  innerRef: React.Ref<any>
 }
 
 export default class RefForward extends React.Component<RefForwardProps> {
@@ -24,7 +23,7 @@ export default class RefForward extends React.Component<RefForwardProps> {
   private handleRefOverride = (node: HTMLElement) => {
     const { children, innerRef } = this.props
 
-    handleRef(children.ref, node)
+    handleRef((children as React.ReactElement<any> & { ref: React.Ref<any> }).ref, node)
     handleRef(innerRef, node)
   }
 

packages/react/src/lib/createComponent.tsx

@@ -13,7 +13,7 @@ export interface CreateComponentConfig<P> {
   shorthandPropName?: string
   defaultProps?: Partial<P>
   handledProps?: string[]
-  propTypes?: React.ValidationMap<P>
+  propTypes?: React.WeakValidationMap<P>
   actionHandlers?: AccessibilityActionHandlers
   focusZoneRef?: (focusZone: FocusZone) => void
   render: (config: RenderResultConfig<P>, props: P) => React.ReactNode

packages/react/src/lib/customPropTypes.tsx

@@ -8,8 +8,12 @@ const typeOf = x => Object.prototype.toString.call(x)
 /**
  * Ensure a component can render as a give prop value.
  */
-export const as = (...args) =>
-  (PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.symbol]) as any)(...args)
+export const as = PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.object,
+  PropTypes.string,
+  PropTypes.symbol,
+])
 
 /**
  * Ensure a prop is a valid DOM node.

packages/react/test/specs/components/Ref/Ref-test.tsx

@@ -10,7 +10,8 @@ describe('Ref', () => {
   describe('children', () => {
     it('renders single child', () => {
       const child = <div data-child="whatever" />
-      const component = shallow(<Ref>{child}</Ref>)
+      const innerRef = React.createRef()
+      const component = shallow(<Ref innerRef={innerRef}>{child}</Ref>)
 
       expect(component.contains(child)).toBeTruthy()
     })

packages/react/test/specs/lib/AutoFocusZone-test.tsx

@@ -53,7 +53,7 @@ describe('AutoFocusZone', () => {
   describe('Focusing the ATZ', () => {
     function setupTest(firstFocusableSelector?: string) {
       let autoFocusZoneRef: AutoFocusZone | null = null
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
+      const topLevelDiv = ReactTestUtils.renderIntoDocument<{}>(
         <div onFocusCapture={_onFocus}>
           <AutoFocusZone
             data-is-focusable={true}

packages/react/test/specs/lib/FocusTrapZone-test.tsx

@@ -98,7 +98,7 @@ describe('FocusTrapZone', () => {
     it('can tab across FocusZones with different button structures', async () => {
       expect.assertions(3)
 
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
+      const topLevelDiv = ReactTestUtils.renderIntoDocument<{}>(
         <div onFocusCapture={_onFocus}>
           <FocusTrapZone forceFocusInsideTrap={false}>
             <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
@@ -159,7 +159,7 @@ describe('FocusTrapZone', () => {
     it('can tab across a FocusZone with different button structures', async () => {
       expect.assertions(3)
 
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
+      const topLevelDiv = ReactTestUtils.renderIntoDocument<{}>(
         <div onFocusCapture={_onFocus}>
           <FocusTrapZone forceFocusInsideTrap={false}>
             <div data-is-visible={true}>
@@ -213,7 +213,7 @@ describe('FocusTrapZone', () => {
     it('can trap focus when FTZ bookmark elements are FocusZones, and those elements have inner elements focused that are not the first inner element', async () => {
       expect.assertions(4)
 
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
+      const topLevelDiv = ReactTestUtils.renderIntoDocument<{}>(
         <div onFocusCapture={_onFocus}>
           <button className={'z1'}>z1</button>
           <FocusTrapZone forceFocusInsideTrap={false}>
@@ -280,7 +280,7 @@ describe('FocusTrapZone', () => {
 
   describe('Tab and shift-tab do nothing (keep focus where it is) when the FTZ contains 0 tabbable items', () => {
     function setupTest() {
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
+      const topLevelDiv = ReactTestUtils.renderIntoDocument<{}>(
         <div onFocusCapture={_onFocus}>
           <button className={'z1'}>z1</button>
           <FocusTrapZone forceFocusInsideTrap={false}>
@@ -350,7 +350,7 @@ describe('FocusTrapZone', () => {
   describe('Focusing the FTZ', () => {
     function setupTest(focusPreviouslyFocusedInnerElement: boolean) {
       let focusTrapZoneRef: FocusTrapZone | null = null
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
+      const topLevelDiv = ReactTestUtils.renderIntoDocument<{}>(
         <div onFocusCapture={_onFocus}>
           <FocusTrapZone
             forceFocusInsideTrap={false}
@@ -450,7 +450,7 @@ describe('FocusTrapZone', () => {
 
     it('FocusTrapZone maintains a proper stack of FocusTrapZones as more are mounted/unmounted.', async () => {
       let focusTrapZoneFocusStack: FocusTrapZone[] = getFocusStack()
-      const topLevelDiv = ReactTestUtils.renderIntoDocument(
+      const topLevelDiv = ReactTestUtils.renderIntoDocument<{}>(
         <div>
           <FocusTrapZoneTestComponent />
         </div>,