style(Dimmer): update typings

src/modules/Dimmer/Dimmer.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
 import {
@@ -14,11 +14,6 @@ import {
 import Portal from '../../addons/Portal'
 import DimmerDimmable from './DimmerDimmable'
 
-const _meta = {
-  name: 'Dimmer',
-  type: META.TYPES.MODULE,
-}
-
 /**
  * A dimmer hides distractions to focus attention on particular content.
  */
@@ -68,7 +63,10 @@ export default class Dimmer extends Component {
     simple: PropTypes.bool,
   }
 
-  static _meta = _meta
+  static _meta = {
+    name: 'Dimmer',
+    type: META.TYPES.MODULE,
+  }
 
   static Dimmable = DimmerDimmable
 
@@ -113,10 +111,11 @@ export default class Dimmer extends Component {
     const rest = getUnhandledProps(Dimmer, this.props)
     const ElementType = getElementType(Dimmer, this.props)
 
-    const childrenJSX = (_.isNil(children) ? content : children) && (
+    const childrenContent = _.isNil(children) ? content : children
+    const childrenJSX = childrenContent && (
         <div className='content'>
           <div className='center' ref={center => (this.center = center)}>
-            { _.isNil(children) ? content : children }
+            { childrenContent }
           </div>
         </div>
       )

src/modules/Dimmer/index.d.ts

@@ -1,21 +1,22 @@
 import * as React from 'react';
 
 interface DimmerProps {
-
-  /** An active dimmer will dim its parent container. */
-  active?: boolean;
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** An active dimmer will dim its parent container. */
+  active?: boolean;
+
   /** Primary content. */
   children?: React.ReactNode;
 
   /** Additional classes. */
   className?: string;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 
   /** A disabled dimmer cannot be activated */
   disabled?: boolean;
@@ -26,15 +27,15 @@ interface DimmerProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: (event: React.MouseEvent<HTMLInputElement>, data: DimmerProps) => void;
 
   /**
    * Handles click outside Dimmer's content, but inside Dimmer area.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onClickOutside?: React.MouseEventHandler<HTMLDivElement>;
+  onClickOutside?: (event: React.MouseEvent<HTMLInputElement>, data: DimmerProps) => void;
 
   /** A dimmer can be formatted to have its colors inverted. */
   inverted?: boolean;
@@ -46,13 +47,15 @@ interface DimmerProps {
   simple?: boolean;
 }
 
-interface DimmerClass extends React.ComponentClass<DimmerProps> {
+interface DimmerComponent extends React.ComponentClass<DimmerProps> {
   Dimmable: typeof DimmerDimmable;
 }
 
-export const Dimmer: DimmerClass;
+export const Dimmer: DimmerComponent;
 
 interface DimmerDimmableProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 

test/specs/modules/Dimmer/Dimmer-test.js

@@ -13,15 +13,15 @@ describe('Dimmer', () => {
   common.hasUIClassName(Dimmer)
   common.rendersChildren(Dimmer)
 
+  common.implementsCreateMethod(Dimmer)
+
   common.propKeyOnlyToClassName(Dimmer, 'active', {
     className: 'active transition visible',
   })
   common.propKeyOnlyToClassName(Dimmer, 'disabled')
   common.propKeyOnlyToClassName(Dimmer, 'inverted')
   common.propKeyOnlyToClassName(Dimmer, 'simple')
 
-  common.implementsCreateMethod(Dimmer)
-
   describe('content', () => {
     it('renders text', () => {
       const text = faker.hacker.phrase()