Update Typescript definition to 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.

react-toolbox.d.ts

@@ -1,7 +1,8 @@
-// Type definitions for react-toolbox 0.14.1
+// Type definitions for react-toolbox 0.16.2
 // Project: http://react-toolbox.com/
 // Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker)
 /*  CHANGES
+    * 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
     * 02/03/2016:
         * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
         * Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
@@ -31,6 +32,7 @@ declare namespace __RT {
          * Sets a CSS class on the component.
          */
         className?: string,
+        id?: string;
         /**
          * A key used to uniquely identify the element within an Array
          */
@@ -68,10 +70,26 @@ declare namespace __RT {
          * If true, the dialog will be active.
          */
         active: boolean,
+        /**
+         * Callback called when the ESC key is pressed with the overlay active.
+         */
+        onEscKeyDown?: Function,
         /**
          * Callback to be invoked when the dialog overlay is clicked.
          */
         onOverlayClick?: Function,
+        /**
+         * Callback called when the mouse button is pressed on the overlay.
+         */
+        onOverlayMouseDown?: Function,
+        /**
+         * Callback called when the mouse is moving over the overlay.
+         */
+        onOverlayMouseMove?: Function,
+        /**
+         * Callback called when the mouse button is released over the overlay.
+         */
+        onOverlayMouseUp?: Function,
     }
 
     // Interface for components with icons
@@ -79,7 +97,7 @@ declare namespace __RT {
         /**
          * Value of the icon (See icon component).
          */
-        icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement,
+        icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
     }
 
     export interface Conditional {
@@ -137,11 +155,11 @@ declare namespace __RT {
      * You should give the content with children elements.
      */
     class AppBar extends React.Component<AppBarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface AvatarProps extends Props, Iconic {
         children?: any,
-        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
         title?: string | boolean,
     }
     /**
@@ -151,7 +169,7 @@ declare namespace __RT {
      * When used with a specific logo, avatars can also be used to represent brand.
      */
     class Avatar extends React.Component<AvatarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
         /**
@@ -168,7 +186,7 @@ declare namespace __RT {
          */
         multiple?: boolean,
         /**
-         *  Object of key/values or array representing all items suggested.
+         * 	Object of key/values or array representing all items suggested.
          */
         source: Object | Array<any>,
         /**
@@ -177,7 +195,7 @@ declare namespace __RT {
          */
         type?: string,
         /**
-         *  Value or array of values currently selected component.Current value of the input element.
+         * 	Value or array of values currently selected component.Current value of the input element.
          */
         value?: string | Array<any>,
     }
@@ -187,7 +205,7 @@ declare namespace __RT {
      * The opening direction is determined at opening time depending on the current position.
      */
     class Autocomplete extends React.Component<AutocompleteProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ButtonProps extends Props, Clickable, Conditional, Iconic {
         /**
@@ -244,10 +262,10 @@ declare namespace __RT {
      * It consists of text, an image, or both, designed in accordance with your app’s color theme.
      */
     class Button extends React.Component<ButtonProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     class IconButton extends React.Component<ButtonProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface CardProps extends Props, Clickable {
         /**
@@ -284,10 +302,10 @@ declare namespace __RT {
      * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
      */
     export class Card extends React.Component<CardProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardTitleProps extends Props {
-        avatar?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        avatar?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
         /**
          * Children to pass through the component.
          */
@@ -306,7 +324,7 @@ declare namespace __RT {
      * This component can also display an avatar next to the title content.
      */
     export class CardTitle extends React.Component<CardTitleProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardMediaProps extends Props {
         /**
@@ -330,14 +348,14 @@ declare namespace __RT {
         /**
          * Can be used instead of children. Accepts an element or a URL string.
          */
-        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
     }
     /**
      * Used for displaying media such as images or videos on a card. 
      * Can also be used with a solid background color instead of an image.
      */
     export class CardMedia extends React.Component<CardMediaProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardTextProps extends Props {
         /**
@@ -350,7 +368,7 @@ declare namespace __RT {
      * Good for small descriptions or other supplementary text.
      */
     export class CardText extends React.Component<CardTextProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardActionsProps extends Props {
         /**
@@ -363,14 +381,14 @@ declare namespace __RT {
      * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
      */
     export class CardActions extends React.Component<CardActionsProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
         /**
          * Value for the checkbox, can be true or false.
          * @default false
          */
-        checked: boolean,
+        checked?: boolean,
         /**
          * Text label to attach next to the checkbox element.
          */
@@ -389,7 +407,31 @@ declare namespace __RT {
         onFocus?: Function,
     }
     export class Checkbox extends React.Component<CheckboxProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
+    }
+
+    export interface ChipProps extends Props {
+        /**
+         * 	Child components, usually Avatar and inline elements
+         */
+        children?: React.ReactNode;
+        /**
+         * If true, the chip will be rendered with a delete icon.
+         */
+        deletable?: boolean;
+        /**
+         * Callback to be invoked when the delete icon is clicked.
+         */
+        onDeleteClick?: React.MouseEventHandler
+    }
+    /**
+     * Avatars can be used to represent people. 
+     * For personal avatars, offer personalization options. 
+     * As users may choose not to personalize an avatar, provide delightful defaults. 
+     * When used with a specific logo, avatars can also be used to represent brand.
+     */
+    class Chip extends React.Component<ChipProps, {}> {
+        render(): React.ReactElement<any>;
     }
     export interface DatePickerProps extends Props, Changeable<Date> {
         /**
@@ -410,7 +452,7 @@ declare namespace __RT {
         value?: Date,
     }
     export class DatePicker extends React.Component<DatePickerProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface DialogProps extends Props, Modal {
         /**
@@ -429,7 +471,7 @@ declare namespace __RT {
         type?: string,
     }
     export class Dialog extends React.Component<DialogProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface DrawerProps extends Props, Modal {
         /**
@@ -439,7 +481,7 @@ declare namespace __RT {
         type?: string
     }
     export class Drawer extends React.Component<DrawerProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     export interface DropdownProps extends Props, Changeable<any>, Conditional {
@@ -465,14 +507,14 @@ declare namespace __RT {
         value: string,
     }
     class Dropdown extends React.Component<DropdownProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface FontIconProps extends Props {
         value: string
     }
     class FontIcon extends React.Component<FontIconProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
@@ -534,7 +576,7 @@ declare namespace __RT {
         value?: string,
     }
     class Input extends React.Component<InputProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface LinkProps extends React.Props<Link>, Iconic {
@@ -549,7 +591,7 @@ declare namespace __RT {
         count?: number,
     }
     class Link extends React.Component<LinkProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface ListProps extends Props {
@@ -565,7 +607,7 @@ declare namespace __RT {
         selectable?: boolean,
     }
     class List extends React.Component<ListProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ListItemProps extends Props, Conditional, Clickable {
         /**
@@ -576,6 +618,14 @@ declare namespace __RT {
          * Main text of the item. Required.
          */
         caption?: string,
+        /**
+         * An element that will be displayed as the item. If set, this will override `caption` and `legend`.
+         */
+        itemContent?: React.ReactElement<any>,
+        /**
+         * 	A list of elements that are placed on the left side of the item and after the avatar attribute.
+         */
+        leftActions?: React.ReactElement<any>[],
         /**
          * A string key of a font icon to display an icon in the left side of the item.
          */
@@ -584,6 +634,10 @@ declare namespace __RT {
          * Secondary text to display under the caption.
          */
         legend?: string,
+        /**
+         * 	A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+         */
+        rightActions?: React.ReactElement<any>[],
         /**
          * The same as the leftIcon but in this case the icon is displayed in the right side.
          */
@@ -598,9 +652,13 @@ declare namespace __RT {
          * @default false
          */
         selectable?: boolean,
+        /**
+         * In case you want to provide the item as a link, you can pass this property to specify the href.
+         */
+        to?: string;
     }
     class ListItem extends React.Component<ListItemProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
         /**
@@ -630,7 +688,7 @@ declare namespace __RT {
         onFocus?: Function,
     }
     class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface ListSubHeaderProps extends Props {
         /**
@@ -639,7 +697,7 @@ declare namespace __RT {
         caption: string;
     }
     class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ListDividerProps extends Props {
         /**
@@ -648,7 +706,7 @@ declare namespace __RT {
         inset: boolean;
     }
     class ListDivider extends React.Component<ListDividerProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface MenuProps extends Props {
         /**
@@ -690,7 +748,7 @@ declare namespace __RT {
         value?: boolean,
     }
     class Menu extends React.Component<MenuProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface IconMenuProps extends Props, Iconic {
         /**
@@ -729,7 +787,7 @@ declare namespace __RT {
         selectable?: boolean,
     }
     class IconMenu extends React.Component<IconMenuProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface MenuItemProps extends Props, Conditional, Iconic {
         /**
@@ -746,10 +804,10 @@ declare namespace __RT {
         selected?: boolean,
     }
     class MenuItem extends React.Component<MenuItemProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     class MenuDivider extends React.Component<any, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface NavigationProps extends Props {
         /**
@@ -766,8 +824,24 @@ declare namespace __RT {
         type?: string,
     }
     class Navigation extends React.Component<NavigationProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
+
+    interface OverlayProps extends Props {
+        active?: boolean;
+        children?: any;
+        /**
+         * Sets a CSS class on the component.
+         */
+        className?: string;
+        invisible?: boolean;
+        onClick?: Function;
+        onEscKeyDown?: Function
+    }
+    class Overlay extends React.Component<OverlayProps, {}> {
+        render(): React.DOMElement<any, any>;
+    }
+
     interface ProgressBarProps extends Props {
         /**
          * Value of a secondary progress bar useful for buffering.
@@ -800,7 +874,7 @@ declare namespace __RT {
         value?: number,
     }
     class ProgressBar extends React.Component<ProgressBarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface RadioGroupProps extends Props, Conditional, Changeable<any> {
         /**
@@ -813,7 +887,7 @@ declare namespace __RT {
         value?: any,
     }
     class RadioGroup extends React.Component<RadioGroupProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface RadioButtonProps extends Props, Conditional {
         /**
@@ -842,7 +916,7 @@ declare namespace __RT {
         value: any,
     }
     class RadioButton extends React.Component<RadioButtonProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface SliderProps extends Props {
         /**
@@ -879,7 +953,7 @@ declare namespace __RT {
         value: number,
     }
     class Slider extends React.Component<SliderProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface SnackbarProps extends Props, Modal, Iconic {
         /**
@@ -908,7 +982,7 @@ declare namespace __RT {
         type?: string,
     }
     class Snackbar extends React.Component<SnackbarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface SwitchProps extends Props, Conditional {
         /**
@@ -918,7 +992,7 @@ declare namespace __RT {
         /**
          * If true, component will be disabled.
          */
-        disabled: boolean,
+        disabled?: boolean,
         /**
          * The text string to use for the floating label element.
          */
@@ -941,7 +1015,7 @@ declare namespace __RT {
         onFocus?: Function,
     }
     class Switch extends React.Component<SwitchProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TableProps extends Props {
         /**
@@ -970,7 +1044,7 @@ declare namespace __RT {
         source?: Array<{ [key: string]: any }>,
     }
     class Table extends React.Component<TableProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TabsProps extends Props, Changeable<number> {
         /**
@@ -979,7 +1053,7 @@ declare namespace __RT {
         index: number,
     }
     class Tabs extends React.Component<TabsProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TabProps extends Props, Conditional {
         /**
@@ -1002,7 +1076,7 @@ declare namespace __RT {
         onActive?: Function,
     }
     class Tab extends React.Component<TabProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TimePickerProps extends Props, Changeable<Date> {
         /**
@@ -1016,18 +1090,22 @@ declare namespace __RT {
         value?: Date,
     }
     class TimePicker extends React.Component<TimePickerProps, {}> {
-        render(): React.DOMElement<any>;
-    }
-    /*interface TooltipProps extends Props {
-        /**
-         * The text string to use for the tooltip.
-         *
-        label: string,
+        render(): React.DOMElement<any, any>;
     }
 
-    class Tooltip extends React.Component<TooltipProps, {}> {
-        render(): React.DOMElement<any>;
-    }*/
+    //#region HOC
+    interface ActivableRendererOptions {
+        /**
+         * @default 500
+         */
+        delay?: number;
+    }
+    interface ActivableRendererProps {
+        active: boolean;
+        children?: any;
+        delay?: number
+    }
+    function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
 
     class TooltipComponent<P, S> extends React.Component<P, S> {
         getDecoratedComponentInstance(): React.Component<P, S>;
@@ -1038,6 +1116,12 @@ declare namespace __RT {
     }
 
     function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
+    //#endregion
+}
+
+declare var ActivableRendererFactory: typeof __RT.ActivableRendererFactory;
+declare module 'react-toolbox/lib/hoc/ActivableRenderer' {
+    export default ActivableRendererFactory;
 }
 
 declare var AppBar: typeof __RT.AppBar;
@@ -1138,6 +1222,10 @@ declare var Navigation: typeof __RT.Navigation;
 declare module 'react-toolbox/lib/navigation' {
     export default Navigation;
 }
+declare var Overlay: typeof __RT.Overlay;
+declare module 'react-toolbox/lib/overlay' {
+    export default Overlay;
+}
 declare var ProgressBar: typeof __RT.ProgressBar;
 declare module 'react-toolbox/lib/progress_bar' {
     export default ProgressBar;
@@ -1182,6 +1270,7 @@ declare module 'react-toolbox/lib/tooltip' {
     export default Tooltip;
 }
 declare module 'react-toolbox' {
+    import ActivableRendererFactory from 'react-toolbox/lib/hoc/ActivableRenderer';
     import AppBar from 'react-toolbox/lib/app_bar';
     import Autocomplete from 'react-toolbox/lib/autocomplete';
     import Avatar from 'react-toolbox/lib/avatar';
@@ -1198,6 +1287,7 @@ declare module 'react-toolbox' {
     import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
     import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
     import Navigation from 'react-toolbox/lib/navigation';
+    import Overlay from 'react-toolbox/lib/overlay';
     import ProgressBar from 'react-toolbox/lib/progress_bar';
     import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
     import Slider from 'react-toolbox/lib/slider';
@@ -1208,6 +1298,7 @@ declare module 'react-toolbox' {
     import Tooltip from 'react-toolbox/lib/tooltip';
 
     export {
+    ActivableRendererFactory,
     AppBar,
     Autocomplete,
     Avatar,
@@ -1224,6 +1315,7 @@ declare module 'react-toolbox' {
     List, ListItem, ListCheckbox, ListSubHeader, ListDivider,
     Menu, IconMenu, MenuItem, MenuDivider,
     Navigation,
+    Overlay,
     ProgressBar,
     RadioGroup, RadioButton,
     Slider,