style(Accordion): update typings (#1333)

* style(Accordion): update typings

* style(Accordion): update typings

src/modules/Accordion/Accordion.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Children, cloneElement, PropTypes } from 'react'
 
 import {
@@ -10,30 +10,21 @@ import {
   useKeyOnly,
 } from '../../lib'
 import Icon from '../../elements/Icon'
-
 import AccordionContent from './AccordionContent'
 import AccordionTitle from './AccordionTitle'
 
 /**
- * An accordion allows users to toggle the display of sections of content
+ * An accordion allows users to toggle the display of sections of content.
  */
 export default class Accordion extends Component {
-  static defaultProps = {
-    exclusive: true,
-  }
-
-  static autoControlledProps = [
-    'activeIndex',
-  ]
-
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
     /** Index of the currently active panel. */
     activeIndex: PropTypes.oneOfType([
-      PropTypes.number,
       PropTypes.arrayOf(PropTypes.number),
+      PropTypes.number,
     ]),
 
     /** Primary content. */
@@ -44,11 +35,11 @@ export default class Accordion extends Component {
 
     /** Initial activeIndex value. */
     defaultActiveIndex: PropTypes.oneOfType([
-      PropTypes.number,
       PropTypes.arrayOf(PropTypes.number),
+      PropTypes.number,
     ]),
 
-    /** Only allow one panel open at a time */
+    /** Only allow one panel open at a time. */
     exclusive: PropTypes.bool,
 
     /** Format to take up the width of it's container. */
@@ -80,6 +71,14 @@ export default class Accordion extends Component {
     styled: PropTypes.bool,
   }
 
+  static defaultProps = {
+    exclusive: true,
+  }
+
+  static autoControlledProps = [
+    'activeIndex',
+  ]
+
   static _meta = {
     name: 'Accordion',
     type: META.TYPES.MODULE,

src/modules/Accordion/AccordionContent.js

@@ -1,5 +1,5 @@
-import React, { PropTypes } from 'react'
 import cx from 'classnames'
+import React, { PropTypes } from 'react'
 
 import {
   customPropTypes,
@@ -9,6 +9,9 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A content sub-component for Accordion component.
+ */
 function AccordionContent(props) {
   const { active, children, className } = props
   const classes = cx(
@@ -22,8 +25,6 @@ function AccordionContent(props) {
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }
 
-AccordionContent.displayName = 'AccordionContent'
-
 AccordionContent.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,

src/modules/Accordion/AccordionTitle.js

@@ -10,11 +10,9 @@ import {
 } from '../../lib'
 
 /**
- * A title sub-component for Accordion component
+ * A title sub-component for Accordion component.
  */
 export default class AccordionTitle extends Component {
-  static displayName = 'AccordionTitle'
-
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
@@ -29,7 +27,7 @@ export default class AccordionTitle extends Component {
     className: PropTypes.string,
 
     /**
-     * Called on blur.
+     * Called on click.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
      * @param {object} data - All props.

src/modules/Accordion/index.d.ts

@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { ReactMouseEvents } from '../..';
 
-// Accordion
-// ----------------------------------
 interface AccordionProps {
-
-  /** Index of the currently active panel. */
-  activeIndex?: number | number[];
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** Index of the currently active panel. */
+  activeIndex?: number | number[];
+
   /** Primary content. */
   children?: React.ReactNode;
 
@@ -20,7 +18,7 @@ interface AccordionProps {
   /** Initial activeIndex value. */
   defaultActiveIndex?: number | number[];
 
-  /** Only allow one panel open at a time */
+  /** Only allow one panel open at a time. */
   exclusive?: boolean;
 
   /** Format to take up the width of it's container. */
@@ -30,15 +28,14 @@ interface AccordionProps {
   inverted?: string;
 
   /** Called with (event, index) when a panel title is clicked. */
-  onTitleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onTitleClick?: (event: React.MouseEvent<HTMLDivElement>, index: number | number[]) => void;
 
   /**
    * Create simple accordion panels from an array of { text: <string>, content: <custom> } objects.
    * Object can optionally define an `active` key to open/close the panel.
    * Mutually exclusive with children.
-   * TODO: AccordionPanel should be a sub-component
    */
-  panels?: any;
+  panels?: Array<any>;
 
   /** Adds some basic styling to accordion panels. */
   styled?: boolean;
@@ -51,24 +48,26 @@ interface AccordionClass extends React.ComponentClass<AccordionProps> {
 
 export const Accordion: AccordionClass;
 
-
 interface AccordionContentProps {
-  /** Whether or not the content is visible. */
-  active?: boolean;
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** Whether or not the content is visible. */
+  active?: boolean;
+
   /** Primary content. */
   children?: React.ReactNode;
 
   /** Additional classes. */
   className?: string;
 }
 
-export const AccordionContent: React.ComponentClass<AccordionContentProps>;
+export const AccordionContent: React.StatelessComponent<AccordionContentProps>;
 
-interface AccordionTitleProps extends ReactMouseEvents<HTMLElement> {
+interface AccordionTitleProps {
+  [key: string]: any;
 
   /** Whether or not the title is in the open state. */
   active?: boolean;
@@ -81,6 +80,14 @@ interface AccordionTitleProps extends ReactMouseEvents<HTMLElement> {
 
   /** Additional classes. */
   className?: string;
+
+  /**
+   * Called on click.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>, data: AccordionTitleProps) => void;
 }
 
 export const AccordionTitle: React.ComponentClass<AccordionTitleProps>;