@types/material-ui/index.d.ts

TypeScript definitions for material-ui

/// <reference types="react" />
/// <reference types="react-addons-linked-state-mixin" />

declare module "material-ui" {
    export import AppBar = __MaterialUI.AppBar;
    export import AppBarProps = __MaterialUI.AppBarProps;
    export import AutoComplete = __MaterialUI.AutoComplete;
    export import AutoCompleteProps = __MaterialUI.AutoCompleteProps;
    export import Avatar = __MaterialUI.Avatar;
    export import AvatarProps = __MaterialUI.AvatarProps;
    export import Badge = __MaterialUI.Badge;
    export import BadgeProps = __MaterialUI.BadgeProps;
    export import BottomNavigation = __MaterialUI.BottomNavigation.BottomNavigation;
    export import BottomNavigationProps = __MaterialUI.BottomNavigation.BottomNavigationProps;
    export import BottomNavigationItem = __MaterialUI.BottomNavigation.BottomNavigationItem;
    export import BottomNavigationItemProps = __MaterialUI.BottomNavigation.BottomNavigationItemProps;
    export import Card = __MaterialUI.Card.Card;
    export import CardProps = __MaterialUI.Card.CardProps;
    export import CardActions = __MaterialUI.Card.CardActions;
    export import CardActionsProps = __MaterialUI.Card.CardActionsProps;
    export import CardHeader = __MaterialUI.Card.CardHeader;
    export import CardHeaderProps = __MaterialUI.Card.CardHeaderProps;
    export import CardMedia = __MaterialUI.Card.CardMedia;
    export import CardMediaProps = __MaterialUI.Card.CardMediaProps;
    export import CardText = __MaterialUI.Card.CardText;
    export import CardTextProps = __MaterialUI.Card.CardTextProps;
    export import CardTitle = __MaterialUI.Card.CardTitle;
    export import CardTitleProps = __MaterialUI.Card.CardTitleProps;
    export import Checkbox = __MaterialUI.Switches.Checkbox;
    export import CheckboxProps = __MaterialUI.Switches.CheckboxProps;
    export import Chip = __MaterialUI.Chip;
    export import ChipProps = __MaterialUI.ChipProps;
    export import CircularProgress = __MaterialUI.CircularProgress;
    export import CircularProgressProps = __MaterialUI.CircularProgressProps;
    export import DatePicker = __MaterialUI.DatePicker.DatePicker;
    export import DatePickerProps = __MaterialUI.DatePicker.DatePickerProps;
    export import Dialog = __MaterialUI.Dialog;
    export import DialogProps = __MaterialUI.DialogProps;
    export import Divider = __MaterialUI.Divider;
    export import DividerProps = __MaterialUI.DividerProps;
    export import Drawer = __MaterialUI.Drawer;
    export import DrawerProps = __MaterialUI.DrawerProps;
    export import DropDownMenu = __MaterialUI.Menus.DropDownMenu;
    export import DropDownMenuProps = __MaterialUI.Menus.DropDownMenuProps;
    export import FlatButton = __MaterialUI.FlatButton;
    export import FlatButtonProps = __MaterialUI.FlatButtonProps;
    export import FloatingActionButton = __MaterialUI.FloatingActionButton;
    export import FloatingActionButtonProps = __MaterialUI.FloatingActionButtonProps;
    export import FontIcon = __MaterialUI.FontIcon;
    export import FontIconProps = __MaterialUI.FontIconProps;
    export import GridList = __MaterialUI.GridList.GridList;
    export import GridListProps = __MaterialUI.GridList.GridListProps;
    export import GridTile = __MaterialUI.GridList.GridTile;
    export import GridTileProps = __MaterialUI.GridList.GridTileProps;
    export import IconButton = __MaterialUI.IconButton;
    export import IconButtonProps = __MaterialUI.IconButtonProps;
    export import IconMenu = __MaterialUI.Menus.IconMenu;
    export import IconMenuProps = __MaterialUI.Menus.IconMenuProps;
    export import LinearProgress = __MaterialUI.LinearProgress;
    export import LinearProgressProps = __MaterialUI.LinearProgressProps;
    export import List = __MaterialUI.List.List;
    export import ListProps = __MaterialUI.List.ListProps;
    export import ListItem = __MaterialUI.List.ListItem;
    export import ListItemProps = __MaterialUI.List.ListItemProps;
    export import makeSelectable = __MaterialUI.List.makeSelectable;
    export import Menu = __MaterialUI.Menus.Menu;
    export import MenuProps = __MaterialUI.Menus.MenuProps;
    export import MenuItem = __MaterialUI.Menus.MenuItem;
    export import MenuItemProps = __MaterialUI.Menus.MenuItemProps;
    export import Paper = __MaterialUI.Paper;
    export import PaperProps = __MaterialUI.PaperProps;
    export import Popover = __MaterialUI.Popover.Popover;
    export import PopoverProps = __MaterialUI.Popover.PopoverProps;
    export import RadioButton = __MaterialUI.Switches.RadioButton;
    export import RadioButtonProps = __MaterialUI.Switches.RadioButtonProps;
    export import RadioButtonGroup = __MaterialUI.Switches.RadioButtonGroup;
    export import RadioButtonGroupProps = __MaterialUI.Switches.RadioButtonGroupProps;
    export import RaisedButton = __MaterialUI.RaisedButton;
    export import RaisedButtonProps = __MaterialUI.RaisedButtonProps;
    export import RefreshIndicator = __MaterialUI.RefreshIndicator;
    export import RefreshIndicatorProps = __MaterialUI.RefreshIndicatorProps;
    export import SelectField = __MaterialUI.SelectField;
    export import SelectFieldProps = __MaterialUI.SelectFieldProps;
    export import Slider = __MaterialUI.Slider;
    export import SliderProps = __MaterialUI.SliderProps;
    export import Subheader = __MaterialUI.Subheader;
    export import SubheaderProps = __MaterialUI.SubheaderProps;
    export import SvgIcon = __MaterialUI.SvgIcon;
    export import SvgIconProps = __MaterialUI.SvgIconProps;
    export import Step = __MaterialUI.Stepper.Step;
    export import StepProps = __MaterialUI.Stepper.StepProps;
    export import StepButton = __MaterialUI.Stepper.StepButton;
    export import StepButtonProps = __MaterialUI.Stepper.StepButtonProps;
    export import StepContent = __MaterialUI.Stepper.StepContent;
    export import StepContentProps = __MaterialUI.Stepper.StepContentProps;
    export import StepLabel = __MaterialUI.Stepper.StepLabel;
    export import StepLabelProps = __MaterialUI.Stepper.StepLabelProps;
    export import Stepper = __MaterialUI.Stepper.Stepper;
    export import StepperProps = __MaterialUI.Stepper.StepperProps;
    export import Snackbar = __MaterialUI.Snackbar;
    export import SnackbarProps = __MaterialUI.SnackbarProps;
    export import Tab = __MaterialUI.Tabs.Tab;
    export import TabProps = __MaterialUI.Tabs.TabProps;
    export import Tabs = __MaterialUI.Tabs.Tabs;
    export import TabsProps = __MaterialUI.Tabs.TabsProps;
    export import Table = __MaterialUI.Table.Table;
    export import TableProps = __MaterialUI.Table.TableProps;
    export import TableBody = __MaterialUI.Table.TableBody;
    export import TableBodyProps = __MaterialUI.Table.TableBodyProps;
    export import TableFooter = __MaterialUI.Table.TableFooter;
    export import TableFooterProps = __MaterialUI.Table.TableFooterProps;
    export import TableHeader = __MaterialUI.Table.TableHeader;
    export import TableHeaderProps = __MaterialUI.Table.TableHeaderProps;
    export import TableHeaderColumn = __MaterialUI.Table.TableHeaderColumn;
    export import TableHeaderColumnProps = __MaterialUI.Table.TableHeaderColumnProps;
    export import TableRow = __MaterialUI.Table.TableRow;
    export import TableRowProps = __MaterialUI.Table.TableRowProps;
    export import TableRowColumn = __MaterialUI.Table.TableRowColumn;
    export import TableRowColumnProps = __MaterialUI.Table.TableRowColumnProps;
    export import TextField = __MaterialUI.TextField;
    export import TextFieldProps = __MaterialUI.TextFieldProps;
    export import TimePicker = __MaterialUI.TimePicker;
    export import TimePickerProps = __MaterialUI.TimePickerProps;
    export import Toggle = __MaterialUI.Switches.Toggle;
    export import ToggleProps = __MaterialUI.Switches.ToggleProps;
    export import Toolbar = __MaterialUI.Toolbar.Toolbar;
    export import ToolbarProps = __MaterialUI.Toolbar.ToolbarProps;
    export import ToolbarGroup = __MaterialUI.Toolbar.ToolbarGroup;
    export import ToolbarGroupProps = __MaterialUI.Toolbar.ToolbarGroupProps;
    export import ToolbarSeparator = __MaterialUI.Toolbar.ToolbarSeparator;
    export import ToolbarSeparatorProps = __MaterialUI.Toolbar.ToolbarSeparatorProps;
    export import ToolbarTitle = __MaterialUI.Toolbar.ToolbarTitle;
    export import ToolbarTitleProps = __MaterialUI.Toolbar.ToolbarTitleProps;
}

declare namespace __MaterialUI {
    // ReactLink is from "react/addons"
    interface ReactLink<T> {
        value: T;
        requestChange(newValue: T): void;
    }

    export interface ThemeWrapperProps {
        theme: Styles.MuiTheme;
    }
    export class ThemeWrapper extends React.Component<ThemeWrapperProps> {
    }

    export namespace Styles {
        interface Spacing {
            iconSize?: number | undefined;

            desktopGutter?: number | undefined;
            desktopGutterMore?: number | undefined;
            desktopGutterLess?: number | undefined;
            desktopGutterMini?: number | undefined;
            desktopKeylineIncrement?: number | undefined;
            desktopDropDownMenuItemHeight?: number | undefined;
            desktopDropDownMenuFontSize?: number | undefined;
            desktopLeftNavMenuItemHeight?: number | undefined;
            desktopSubheaderHeight?: number | undefined;
            desktopToolbarHeight?: number | undefined;
        }
        export let Spacing: Spacing;

        interface ThemePalette {
            primary1Color?: string | undefined;
            primary2Color?: string | undefined;
            primary3Color?: string | undefined;
            accent1Color?: string | undefined;
            accent2Color?: string | undefined;
            accent3Color?: string | undefined;
            textColor?: string | undefined;
            secondaryTextColor?: string | undefined;
            alternateTextColor?: string | undefined;
            canvasColor?: string | undefined;
            borderColor?: string | undefined;
            disabledColor?: string | undefined;
            pickerHeaderColor?: string | undefined;
            clockCircleColor?: string | undefined;
            shadowColor?: string | undefined;
        }
        export let ThemePalette: ThemePalette;
        interface MuiTheme {
            spacing?: Spacing | undefined;
            fontFamily?: string | undefined;
            palette?: ThemePalette | undefined;
            isRtl?: boolean | undefined;
            userAgent?: string | boolean | undefined;
            zIndex?: zIndex | undefined;
            baseTheme?: RawTheme | undefined;
            rawTheme?: RawTheme | undefined;
            appBar?: {
                color?: string | undefined;
                textColor?: string | undefined;
                height?: number | undefined;
                titleFontWeight?: number | undefined;
                padding?: number | undefined;
            } | undefined;
            avatar?: {
                color?: string | undefined;
                backgroundColor?: string | undefined;
                borderColor?: string | undefined;
            } | undefined;
            badge?: {
                color?: string | undefined;
                textColor?: string | undefined;
                primaryColor?: string | undefined;
                primaryTextColor?: string | undefined;
                secondaryColor?: string | undefined;
                secondaryTextColor?: string | undefined;
                fontWeight?: number | undefined;
            } | undefined;
            button?: {
                height?: number | undefined;
                minWidth?: number | undefined;
                iconButtonSize?: number | undefined;
                textTransform?: string | undefined;
            } | undefined;
            card?: {
                titleColor?: string | undefined;
                subtitleColor?: string | undefined;
                fontWeight?: number | undefined;
            } | undefined;
            cardMedia?: {
                color?: string | undefined;
                overlayContentBackground?: string | undefined;
                titleColor?: string | undefined;
                subtitleColor?: string | undefined;
            } | undefined;
            cardText?: {
                textColor?: string | undefined;
            } | undefined;
            checkbox?: {
                boxColor?: string | undefined;
                checkedColor?: string | undefined;
                requiredColor?: string | undefined;
                disabledColor?: string | undefined;
                labelColor?: string | undefined;
                labelDisabledColor?: string | undefined;
            } | undefined;
            chip?: {
                backgroundColor?: string | undefined;
                deleteIconColor?: string | undefined;
                textColor?: string | undefined;
                fontSize?: number | undefined;
                fontWeight?: number | undefined;
                shadow?: string | undefined;
            } | undefined;
            datePicker?: {
                color?: string | undefined;
                textColor?: string | undefined;
                calendarTextColor?: string | undefined;
                selectColor?: string | undefined;
                selectTextColor?: string | undefined;
                calendarYearBackgroundColor?: string | undefined;
                headerColor?: string | undefined;
            } | undefined;
            dialog?: {
                titleFontSize?: number | undefined;
                bodyFontSize?: number | undefined;
                bodyColor?: string | undefined;
            } | undefined;
            dropDownMenu?: {
                accentColor?: string | undefined;
            } | undefined;
            enhancedButton?: {
                tapHighlightColor?: string | undefined;
            } | undefined;
            flatButton?: {
                color?: string | undefined;
                buttonFilterColor?: string | undefined;
                disabledTextColor?: string | undefined;
                textColor?: string | undefined;
                primaryTextColor?: string | undefined;
                secondaryTextColor?: string | undefined;
                fontSize?: number | undefined;
                fontWeight?: number | undefined;
            } | undefined;
            floatingActionButton?: {
                buttonSize?: number | undefined;
                miniSize?: number | undefined;
                color?: string | undefined;
                iconColor?: string | undefined;
                secondaryColor?: string | undefined;
                secondaryIconColor?: string | undefined;
                disabledTextColor?: string | undefined;
                disabledColor?: string | undefined;
            } | undefined;
            gridTile?: {
                textColor?: string | undefined;
            } | undefined;
            icon?: {
                color?: string | undefined;
                backgroundColor?: string | undefined;
            } | undefined;
            inkBar?: {
                backgroundColor?: string | undefined;
            } | undefined;
            drawer?: {
                width?: number | undefined;
                color?: string | undefined;
            } | undefined;
            listItem?: {
                nestedLevelDepth?: number | undefined;
                secondaryTextColor?: string | undefined;
                leftIconColor?: string | undefined;
                rightIconColor?: string | undefined;
            } | undefined;
            menu?: {
                backgroundColor?: string | undefined;
                containerBackgroundColor?: string | undefined;
            } | undefined;
            menuItem?: {
                dataHeight?: number | undefined;
                height?: number | undefined;
                hoverColor?: string | undefined;
                padding?: number | undefined;
                selectedTextColor?: string | undefined;
                rightIconDesktopFill?: string | undefined;
            } | undefined;
            menuSubheader?: {
                padding?: number | undefined;
                borderColor?: string | undefined;
                textColor?: string | undefined;
            } | undefined;
            overlay?: {
                backgroundColor?: string | undefined;
            } | undefined;
            paper?: {
                color?: string | undefined;
                backgroundColor?: string | undefined;
                zDepthShadows?: string[] | undefined;
            } | undefined;
            radioButton?: {
                borderColor?: string | undefined;
                backgroundColor?: string | undefined;
                checkedColor?: string | undefined;
                requiredColor?: string | undefined;
                disabledColor?: string | undefined;
                size?: number | undefined;
                labelColor?: string | undefined;
                labelDisabledColor?: string | undefined;
            } | undefined;
            raisedButton?: {
                color?: string | undefined;
                textColor?: string | undefined;
                primaryColor?: string | undefined;
                primaryTextColor?: string | undefined;
                secondaryColor?: string | undefined;
                secondaryTextColor?: string | undefined;
                disabledColor?: string | undefined;
                disabledTextColor?: string | undefined;
                fontSize?: number | undefined;
                fontWeight?: number | undefined;
            } | undefined;
            refreshIndicator?: {
                strokeColor?: string | undefined;
                loadingStrokeColor?: string | undefined;
            } | undefined;
            ripple?: {
                color?: string | undefined;
            } | undefined;
            slider?: {
                trackSize?: number | undefined;
                trackColor?: string | undefined;
                trackColorSelected?: string | undefined;
                handleSize?: number | undefined;
                handleSizeDisabled?: number | undefined;
                handleSizeActive?: number | undefined;
                handleColorZero?: string | undefined;
                handleFillColor?: string | undefined;
                selectionColor?: string | undefined;
                rippleColor?: string | undefined;
            } | undefined;
            snackbar?: {
                textColor?: string | undefined;
                backgroundColor?: string | undefined;
                actionColor?: string | undefined;
            } | undefined;
            subheader?: {
                color?: string | undefined;
                fontWeight?: number | undefined;
            } | undefined;
            stepper?: {
                backgroundColor?: string | undefined;
                hoverBackgroundColor?: string | undefined;
                iconColor?: string | undefined;
                hoveredIconColor?: string | undefined;
                inactiveIconColor?: string | undefined;
                textColor?: string | undefined;
                disabledTextColor?: string | undefined;
                connectorLineColor?: string | undefined;
            } | undefined;
            svgIcon?: {
                color?: string | undefined,
            } | undefined;
            table?: {
                backgroundColor?: string | undefined;
            } | undefined;
            tableFooter?: {
                borderColor?: string | undefined;
                textColor?: string | undefined;
            } | undefined;
            tableHeader?: {
                borderColor?: string | undefined;
            } | undefined;
            tableHeaderColumn?: {
                textColor?: string | undefined;
                height?: number | undefined;
                spacing?: number | undefined;
            } | undefined;
            tableRow?: {
                hoverColor?: string | undefined;
                stripeColor?: string | undefined;
                selectedColor?: string | undefined;
                textColor?: string | undefined;
                borderColor?: string | undefined;
                height?: number | undefined;
            } | undefined;
            tableRowColumn?: {
                height?: number | undefined;
                spacing?: number | undefined;
            } | undefined;
            tabs?: {
                backgroundColor?: string | undefined;
                textColor?: string | undefined;
                selectedTextColor?: string | undefined;
            } | undefined;
            textField?: {
                textColor?: string | undefined;
                hintColor?: string | undefined;
                floatingLabelColor?: string | undefined;
                disabledTextColor?: string | undefined;
                errorColor?: string | undefined;
                focusColor?: string | undefined;
                backgroundColor?: string | undefined;
                borderColor?: string | undefined;
            } | undefined;
            timePicker?: {
                color?: string | undefined;
                textColor?: string | undefined;
                accentColor?: string | undefined;
                clockColor?: string | undefined;
                clockCircleColor?: string | undefined;
                headerColor?: string | undefined;
                selectColor?: string | undefined;
                selectTextColor?: string | undefined;
            } | undefined;
            toggle?: {
                thumbOnColor?: string | undefined;
                thumbOffColor?: string | undefined;
                thumbDisabledColor?: string | undefined;
                thumbRequiredColor?: string | undefined;
                trackOnColor?: string | undefined;
                trackOffColor?: string | undefined;
                trackDisabledColor?: string | undefined;
                labelColor?: string | undefined;
                labelDisabledColor?: string | undefined;
                trackRequiredColor?: string | undefined;
            } | undefined;
            toolbar?: {
                color?: string | undefined;
                hoverColor?: string | undefined;
                backgroundColor?: string | undefined;
                height?: number | undefined;
                titleFontSize?: number | undefined;
                iconColor?: string | undefined;
                separatorColor?: string | undefined;
                menuHoverColor?: string | undefined;
            } | undefined;
            tooltip?: {
                color?: string | undefined;
                rippleBackgroundColor?: string | undefined;
            } | undefined;
        }

        interface zIndex {
            menu: number;
            appBar: number;
            drawerOverlay: number;
            drawer: number;
            dialogOverlay: number;
            dialog: number;
            layer: number;
            popover: number;
            snackbar: number;
            tooltip: number;
        }
        export let zIndex: zIndex;

        interface RawTheme {
            spacing?: Spacing | undefined;
            fontFamily?: string | undefined;
            palette?: ThemePalette | undefined;
        }
        let lightBaseTheme: RawTheme;
        let darkBaseTheme: RawTheme;

        export function muiThemeable(): <
            TComponent extends React.ComponentClass<P> | React.FunctionComponent<P>,
            P extends {muiTheme?: MuiTheme | undefined}
        >(component: TComponent) => TComponent;

        export interface MuiThemeProviderProps {
            children?: React.ReactElement;
            muiTheme?: MuiTheme | undefined;
        }
        export class MuiThemeProvider extends React.Component<MuiThemeProviderProps> {
        }

        export function getMuiTheme(...muiTheme: MuiTheme[]): MuiTheme;

        interface Transitions {
            easeOut(duration?: string, property?: string | string[], delay?: string, easeFunction?: string): string;
            create(duration?: string, property?: string, delay?: string, easeFunction?: string): string;
            easeOutFunction: string;
            easeInOutFunction: string;
        }
        export let Transitions: Transitions;

        interface Typography {
            textFullBlack: string;
            textDarkBlack: string;
            textLightBlack: string;
            textMinBlack: string;
            textFullWhite: string;
            textDarkWhite: string;
            textLightWhite: string;

            // font weight
            fontWeightLight: number;
            fontWeightNormal: number;
            fontWeightMedium: number;

            fontStyleButtonFontSize: number;
        }
        export let Typography: Typography;
    }

    export interface AppBarProps {
        className?: string | undefined;
        iconClassNameLeft?: string | undefined;
        iconClassNameRight?: string | undefined;
        iconElementLeft?: React.ReactElement | undefined;
        iconElementRight?: React.ReactElement | undefined;
        iconStyleRight?: React.CSSProperties | undefined;
        iconStyleLeft?: React.CSSProperties | undefined;
        onLeftIconButtonClick?: React.MouseEventHandler<{}> | undefined;
        onRightIconButtonClick?: React.MouseEventHandler<{}> | undefined;
        onTitleClick?: React.MouseEventHandler<{}> | undefined;
        showMenuIconButton?: boolean | undefined;
        style?: React.CSSProperties | undefined;
        title?: React.ReactNode | undefined;
        titleStyle?: React.CSSProperties | undefined;
        zDepth?: number | undefined;
    }
    export class AppBar extends React.Component<AppBarProps> {
    }

    export interface AppCanvasProps {
    }
    export class AppCanvas extends React.Component<AppCanvasProps> {
    }

    namespace propTypes {
        type horizontal = 'left' | 'middle' | 'right';
        type tooltipHorizontal = 'left' | 'center' | 'right';
        type vertical = 'top' | 'center' | 'bottom';
        type direction = 'left' | 'right' | 'up' | 'down';

        interface origin {
            horizontal: horizontal;
            vertical: vertical;
        }

        interface utils {
            getWeekArray(date: Date, firstDayOfWeek: number): Array<Array<(Date | null)>>;
            getYear(date: Date): number;
            setYear(date: Date, year: number): Date;
            addDays(date: Date, days: number): Date;
            addMonths(date: Date, months: number): Date;
            addYears(date: Date, years: number): Date;
            getFirstDayOfMonth(date: Date): Date;
            monthDiff(date1: Date, date2: Date): number;
        }

        type corners = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
        type cornersAndCenter = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
    }

    export interface AutoCompleteProps<DataItem> extends TextFieldProps {
        anchorOrigin?: propTypes.origin | undefined;
        animated?: boolean | undefined;
        animation?: React.ComponentClass<Popover.PopoverAnimationProps> | undefined;
        dataSource: DataItem[];
        dataSourceConfig?: { text: string; value: string; } | undefined;
        disableFocusRipple?: boolean | undefined;
        errorStyle?: React.CSSProperties | undefined;
        errorText?: React.ReactNode | undefined;
        filter?(searchText: string, key: string, item: DataItem): boolean;
        floatingLabelText?: React.ReactNode | undefined;
        fullWidth?: boolean | undefined;
        hintText?: React.ReactNode | undefined;
        listStyle?: React.CSSProperties | undefined;
        maxSearchResults?: number | undefined;
        menuCloseDelay?: number | undefined;
        menuProps?: any;
        menuStyle?: React.CSSProperties | undefined;
        onBlur?: React.FocusEventHandler<{}> | undefined;
        onFocus?: React.FocusEventHandler<{}> | undefined;
        onKeyDown?: React.KeyboardEventHandler<{}> | undefined;
        onNewRequest?(chosenRequest: DataItem, index: number): void;
        onUpdateInput?(searchText: string, dataSource: DataItem[]): void;
        open?: boolean | undefined;
        openOnFocus?: boolean | undefined;
        popoverProps?: Popover.PopoverProps | undefined;
        searchText?: string | undefined;
        style?: React.CSSProperties | undefined;
        targetOrigin?: propTypes.origin | undefined;
        textFieldStyle?: React.CSSProperties | undefined;
    }
    export class AutoComplete extends React.Component<AutoCompleteProps<any>> {
        static noFilter(): boolean;
        static defaultFilter(searchText: string, key: string): boolean;
        static caseSensitiveFilter(searchText: string, key: string): boolean;
        static caseInsensitiveFilter(searchText: string, key: string): boolean;

        static levenshteinDistanceFilter(distanceLessThan: number): (searchText: string, key: string) => boolean;

        static fuzzyFilter(searchText: string, key: string): boolean;
        static Item: Menus.MenuItem;
        static Divider: Divider;
    }

    export interface AvatarProps {
        backgroundColor?: string | undefined;
        children?: React.ReactNode;
        className?: string | undefined;
        color?: string | undefined;
        icon?: React.ReactElement | undefined;
        size?: number | undefined;
        src?: string | undefined;
        style?: React.CSSProperties | undefined;
        onClick?: React.MouseEventHandler<{}> | undefined;
    }
    export class Avatar extends React.Component<AvatarProps> {
    }

    export interface BadgeProps {
        badgeContent: React.ReactNode;
        badgeStyle?: React.CSSProperties | undefined;
        children?: React.ReactNode;
        className?: string | undefined;
        primary?: boolean | undefined;
        secondary?: boolean | undefined;
        style?: React.CSSProperties | undefined;
    }
    export class Badge extends React.Component<BadgeProps> {
    }

    export interface BeforeAfterWrapperProps {
        afterElementType?: string | undefined;
        afterStyle?: React.CSSProperties | undefined;
        beforeElementType?: string | undefined;
        beforeStyle?: React.CSSProperties | undefined;
        elementType?: string | undefined;
        style?: React.CSSProperties | undefined;
    }
    export class BeforeAfterWrapper extends React.Component<BeforeAfterWrapperProps> {
    }

    // non generally overridden elements of EnhancedButton
    export interface SharedEnhancedButtonProps<T> {
        centerRipple?: boolean | undefined;
        disableFocusRipple?: boolean | undefined;
        disableKeyboardFocus?: boolean | undefined;
        disableTouchRipple?: boolean | undefined;
        focusRippleColor?: string | undefined;
        focusRippleOpacity?: number | undefined;
        href?: string | undefined;
        keyboardFocused?: boolean | undefined;
        onBlur?: React.FocusEventHandler<{}> | undefined;
        onFocus?: React.FocusEventHandler<{}> | undefined;
        onKeyboardFocus?(e: React.FocusEvent<{}>, isKeyboardFocused: boolean): void;
        onKeyDown?: React.KeyboardEventHandler<{}> | undefined;
        onKeyUp?: React.KeyboardEventHandler<{}> | undefined;
        onClick?: React.MouseEventHandler<{}> | undefined;
        style?: React.CSSProperties | undefined;
        tabIndex?: number | undefined;
        target?: string | undefined;
        touchRippleColor?: string | undefined;
        touchRippleOpacity?: number | undefined;
        type?: string | undefined;
        containerElement?: React.ReactNode | string | undefined;
    }

    export interface EnhancedButtonProps extends React.HTMLAttributes<{}>, SharedEnhancedButtonProps<EnhancedButton> {
        // container element, <button/>, or <span/>(if disabled link) is the element that get the 'other' properties
        containerElement?: React.ReactNode | string | undefined;
        disabled?: boolean | undefined;
    }
    export class EnhancedButton extends React.Component<EnhancedButtonProps> {
    }

    export interface FlatButtonProps extends React.DOMAttributes<{}>, SharedEnhancedButtonProps<FlatButton> {
        // <EnhancedButton/> is the element that get the 'other' properties
        backgroundColor?: string | undefined;
        className?: string | undefined;
        disabled?: boolean | undefined;
        fullWidth?: boolean | undefined;
        hoverColor?: string | undefined;
        icon?: React.ReactNode | undefined;
        label?: React.ReactNode | undefined;
        labelPosition?: "before" | "after" | undefined;
        labelStyle?: React.CSSProperties | undefined;
        linkButton?: boolean | undefined;
        onKeyboardFocus?(e: React.FocusEvent<{}>, isKeyboardFocused: boolean): void;
        onMouseEnter?: React.MouseEventHandler<{}> | undefined;
        onMouseLeave?: React.MouseEventHandler<{}> | undefined;
        onTouchStart?: React.TouchEventHandler<{}> | undefined;
        primary?: boolean | undefined;
        rippleColor?: string | undefined;
        secondary?: boolean | undefined;
        style?: React.CSSProperties | undefined;
    }
    export class FlatButton extends React.Component<FlatButtonProps> {
    }

    export interface RaisedButtonProps extends SharedEnhancedButtonProps<RaisedButton> {
        // <EnhancedButton/> is the element that get the 'other' properties
        backgroundColor?: string | undefined;
        buttonStyle?: React.CSSProperties | undefined;
        children?: React.ReactNode;
        className?: string | undefined;
        disabled?: boolean | undefined;
        disabledBackgroundColor?: string | undefined;
        disabledLabelColor?: string | undefined;
        fullWidth?: boolean | undefined;
        icon?: React.ReactNode | undefined;
        label?: React.ReactNode | undefined;
        labelColor?: string | undefined;
        labelPosition?: "before" | "after" | undefined;
        labelStyle?: React.CSSProperties | undefined;
        linkButton?: boolean | undefined;
        onMouseDown?: React.MouseEventHandler<{}> | undefined;
        onMouseEnter?: React.MouseEventHandler<{}> | undefined;
        onMouseLeave?: React.MouseEventHandler<{}> | undefined;
        onMouseUp?: React.MouseEventHandler<{}> | undefined;
        onTouchEnd?: React.TouchEventHandler<{}> | undefined;
        onTouchStart?: React.TouchEventHandler<{}> | undefined;
        overlayStyle?: React.CSSProperties | undefined;
        primary?: boolean | undefined;
        rippleStyle?: React.CSSProperties | undefined;
        secondary?: boolean | undefined;
        style?: React.CSSProperties | undefined;
    }
    export class RaisedButton extends React.Component<RaisedButtonProps> {
    }

    export interface FloatingActionButtonProps extends React.HTMLAttributes<{}>, SharedEnhancedButtonProps<FloatingActionButton> {
        // <EnhancedButton/> is the element that get the 'other' properties
        backgroundColor?: string | undefined;
        className?: string | undefined;
        disabled?: boolean | undefined;
        disabledColor?: string | undefined;
        iconClassName?: string | undefined;
        iconStyle?: React.CSSProperties | undefined;
        mini?: boolean | undefined;
        onMouseDown?: React.MouseEventHandler<{}> | undefined;
        onMouseEnter?: React.MouseEventHandler<{}> | undefined;
        onMouseLeave?: React.MouseEventHandler<{}> | undefined;
        onMouseUp?: React.MouseEventHandler<{}> | undefined;
        onTouchEnd?: React.TouchEventHandler<{}> | undefined;
        onTouchStart?: React.TouchEventHandler<{}> | undefined;
        secondary?: boolean | undefined;
        style?: React.CSSProperties | undefined;
        zDepth?: number | undefined;
    }
    export class FloatingActionButton extends React.Component<FloatingActionButtonProps> {
    }

    export interface IconButtonProps extends React.HTMLAttributes<{}>, SharedEnhancedButtonProps<IconButton> {
        // <EnhancedButton/> is the element that get the 'other' properties
        className?: string | undefined;
        disableTouchRipple?: boolean | undefined;
        disabled?: boolean | undefined;
        hoveredStyle?: React.CSSProperties | undefined;
        iconClassName?: string | undefined;
        iconStyle?: React.CSSProperties | undefined;
        onBlur?: React.FocusEventHandler<{}> | undefined;
        onFocus?: React.FocusEventHandler<{}> | undefined;
        onKeyboardFocus?(e: React.FocusEvent<{}>, isKeyboardFocused: boolean): void;
        onMouseEnter?: React.MouseEventHandler<{}> | undefined;
        onMouseLeave?: React.MouseEventHandler<{}> | undefined;
        onMouseOut?: React.MouseEventHandler<{}> | undefined;
        style?: React.CSSProperties | undefined;
        tooltip?: React.ReactNode | string | undefined;
        tooltipPosition?: propTypes.cornersAndCenter | undefined;
        tooltipStyles?: React.CSSProperties | undefined;
        touch?: boolean | undefined;
    }
    export class IconButton extends React.Component<IconButtonProps> {
    }

    namespace BottomNavigation {
        export interface BottomNavigationProps {
            children?: React.ReactNode;
            className?: string | undefined;
            selectedIndex?: number | undefined;
            style?: React.CSSProperties | undefined;
        }

        export class BottomNavigation extends React.Component<BottomNavigationProps> { }

        export interface BottomNavigationItemProps extends SharedEnhancedButtonProps<BottomNavigationItem> {
            className?: string | undefined;
            icon?: React.ReactNode | undefined;
            label?: React.ReactNode | undefined;
        }

        export class BottomNavigationItem extends React.Component<BottomNavigationItemProps> { }
    }

    namespace Card {
        export interface CardProps {
            children?: React.ReactNode;
            className?: string | undefined;
            actAsExpander?: boolean | undefined;
            containerStyle?: React.CSSProperties | undefined;
            expandable?: boolean | undefined;
            expanded?: boolean | undefined;
            initiallyExpanded?: boolean | undefined;
            onExpandChange?(isExpanded: boolean): void;
            showExpandableButton?: boolean | undefined;
            style?: React.CSSProperties | undefined;
        }
        export class Card extends React.Component<CardProps> {
        }

        export interface CardActionsProps {
            actAsExpander?: boolean | undefined;
            children?: React.ReactNode;
            expandable?: boolean | undefined;
            showExpandableButton?: boolean | undefined;
            style?: React.CSSProperties | undefined;
            className?: string | undefined;
        }
        export class CardActions extends React.Component<CardActionsProps> {
        }

        export interface CardExpandableProps {
            expanded?: boolean | undefined;
            onExpanding?(isExpanded: boolean): void;
            style?: React.CSSProperties | undefined;
        }
        export class CardExpandable extends React.Component<CardExpandableProps> {
        }

        export interface CardHeaderProps {
            actAsExpander?: boolean | undefined;
            avatar?: React.ReactNode | undefined;
            expandable?: boolean | undefined;
            showExpandableButton?: boolean | undefined;
            style?: React.CSSProperties | undefined;
            subtitle?: React.ReactNode | undefined;
            subtitleColor?: string | undefined;
            subtitleStyle?: React.CSSProperties | undefined;
            textStyle?: React.CSSProperties | undefined;
            title?: React.ReactNode | undefined;
            titleColor?: string | undefined;
            titleStyle?: React.CSSProperties | undefined;
            className?: string | undefined;
            openIcon?: React.ReactNode | undefined;
            closeIcon?: React.ReactNode | undefined;
            iconStyle?: React.CSSProperties | undefined;
        }
        export class CardHeader extends React.Component<CardHeaderProps> {
        }

        export interface CardMediaProps {
            actAsExpander?: boolean | undefined;
            expandable?: boolean | undefined;
            children?: React.ReactNode;
            mediaStyle?: React.CSSProperties | undefined;
            overlay?: React.ReactNode | undefined;
            overlayContainerStyle?: React.CSSProperties | undefined;
            overlayContentStyle?: React.CSSProperties | undefined;
            overlayStyle?: React.CSSProperties | undefined;
            style?: React.CSSProperties | undefined;
        }
        export class CardMedia extends React.Component<CardMediaProps> {
        }

        export interface CardTextProps {
            actAsExpander?: boolean | undefined;
            children?: React.ReactNode;
            color?: string | undefined;
            expandable?: boolean | undefined;
            style?: React.CSSProperties | undefined;
            className?: string | undefined;
        }
        export class CardText extends React.Component<CardTextProps> {
        }

        export interface CardTitleProps {
            actAsExpander?: boolean | undefined;
            expandable?: boolean | undefined;
            showExpandableButton?: boolean | undefined;
            style?: React.CSSProperties | undefined;
            subtitle?: React.ReactNode | undefined;
            subtitleColor?: string | undefined;
            subtitleStyle?: React.CSSProperties | undefined;
            title?: React.ReactNode | undefined;
            titleColor?: string | undefined;
            titleStyle?: React.CSSProperties | undefined;
        }
        export class CardTitle extends React.Component<CardTitleProps> {
        }
    }

    export interface ChipProps {
        backgroundColor?: string | undefined;
        children?: React.ReactNode;
        className?: string | undefined;
        containerElement?: React.ReactNode | string | undefined;
        labelColor?: string | undefined;
        labelStyle?: React.CSSProperties | undefined;
        onClick?: React.MouseEventHandler<Chip> | undefined;
        onRequestDelete?: React.TouchEventHandler<Chip> | undefined;
        style?: React.CSSProperties | undefined;
        deleteIconStyle?: React.CSSProperties | undefined;
    }

    export class Chip extends React.Component<ChipProps> {
    }

    namespace DatePicker {
        export interface DatePickerProps {
            // <TextField/> is the element that get the 'other' properties
            DateTimeFormat?: typeof Intl.DateTimeFormat | undefined;
            autoOk?: boolean | undefined;
            cancelLabel?: React.ReactNode | undefined;
            container?: "dialog" | "inline" | undefined;
            defaultDate?: Date | undefined;
            dialogContainerStyle?: React.CSSProperties | undefined;
            disableYearSelection?: boolean | undefined;
            disabled?: boolean | undefined;
            firstDayOfWeek?: number | undefined;
            formatDate?(date: Date): string;
            locale?: string | undefined;
            maxDate?: Date | undefined;
            minDate?: Date | undefined;
            mode?: "portrait" | "landscape" | undefined;
            okLabel?: React.ReactNode | undefined;
            onChange?(e: any, date: Date): void; // e is always null
            onDismiss?(): void;
            onFocus?: React.FocusEventHandler<{}> | undefined;
            onShow?(): void;
            onClick?: React.TouchEventHandler<{}> | undefined;
            shouldDisableDate?(day: Date): boolean;
            style?: React.CSSProperties | undefined;
            textFieldStyle?: React.CSSProperties | undefined;
            value?: Date | undefined;

            // From <TextField />
            className?: string | undefined;
            defaultValue?: string | undefined;
            errorStyle?: React.CSSProperties | undefined;
            errorText?: React.ReactNode | undefined;
            floatingLabelStyle?: React.CSSProperties | undefined;
            floatingLabelText?: React.ReactNode | undefined;
            fullWidth?: boolean | undefined;
            hideCalendarDate?: boolean | undefined;
            hintStyle?: React.CSSProperties | undefined;
            hintText?: React.ReactNode | undefined;
            id?: string | undefined;
            inputStyle?: React.CSSProperties | undefined;
            onBlur?: React.FocusEventHandler<{}> | undefined;
            onKeyDown?: React.KeyboardEventHandler<{}> | undefined;
            openToYearSelection?: boolean | undefined;
            rows?: number | undefined;
            rowsMax?: number | undefined;
            name?: string | undefined;
            type?: string | undefined;
            underlineDisabledStyle?: React.CSSProperties | undefined;
            underlineFocusStyle?: React.CSSProperties | undefined;
            underlineShow?: boolean | undefined;
            underlineStyle?: React.CSSProperties | undefined;
            utils?: propTypes.utils | undefined;
        }
        export class DatePicker extends React.Component<DatePickerProps> {
            focus(): void;
            openDialog(): void;
        }

        export interface DatePickerDialogProps {
            // <Container/> is the element that get the 'other' properties
            DateTimeFormat?: typeof Intl.DateTimeFormat | undefined;
            animation?: React.ComponentClass<Popover.PopoverAnimationProps> | undefined;
            autoOk?: boolean | undefined;
            cancelLabel?: React.ReactNode | undefined;
            container?: "dialog" | "inline" | undefined;
            disableYearSelection?: boolean | undefined;
            firstDayOfWeek?: number | undefined;
            initialDate?: Date | undefined;
            locale?: string | undefined;
            maxDate?: Date | undefined;
            minDate?: Date | undefined;
            mode?: "portrait" | "landscape" | undefined;
            okLabel?: React.ReactNode | undefined;
            onAccept?(d: Date): void;
            onDismiss?(): void;
            onShow?(): void;
            shouldDisableDate?(day: Date): boolean;
            style?: React.CSSProperties | undefined;
            utils?: propTypes.utils | undefined;
        }
        export class DatePickerDialog extends React.Component<DatePickerDialogProps> {
            show(): void;
            dismiss(): void;
        }
    }

    /** @deprecated use array of components instead */
    export interface DialogAction {
        id?: string | undefined;
        onClick?: React.MouseEventHandler<{}> | undefined;
        ref?: string | undefined;
        text: string;
    }
    export interface DialogProps extends React.DOMAttributes<{}>, React.RefAttributes<Dialog> {
        actions?: Array<DialogAction | React.ReactElement> | undefined;
        /** @deprecated use a custom `actions` property instead */
        actionFocus?: string | undefined;
        actionsContainerClassName?: string | undefined;
        actionsContainerStyle?: React.CSSProperties | undefined;
        autoDetectWindowHeight?: boolean | undefined;
        autoScrollBodyContent?: boolean | undefined;
        bodyClassName?: string | undefined;
        bodyStyle?: React.CSSProperties | undefined;
        className?: string | undefined;
        contentClassName?: string | undefined;
        contentStyle?: React.CSSProperties | undefined;
        modal?: boolean | undefined;
        onRequestClose?(buttonClicked: boolean): void;
        open: boolean;
        overlayClassName?: string | undefined;
        overlayStyle?: React.CSSProperties | undefined;
        paperClassName?: string | undefined;
        paperProps?: any;
        repositionOnUpdate?: boolean | undefined;
        style?: React.CSSProperties | undefined;
        title?: React.ReactNode | undefined;
        titleClassName?: string | undefined;
        titleStyle?: React.CSSProperties | undefined;
    }
    export class Dialog extends React.Component<DialogProps> {
    }

    export interface DividerProps {
        className?: string | undefined;
        inset?: boolean | undefined;
        style?: React.CSSProperties | undefined;
    }
    export class Divider extends React.Component<DividerProps> {
    }

    export interface DrawerProps {
        children?: React.ReactNode;
        className?: string | undefined;
        containerClassName?: string | undefined;
        containerStyle?: React.CSSProperties | undefined;
        disableSwipeToOpen?: boolean | undefined;
        docked?: boolean | undefined;
        onRequestChange?(opening: boolean, reason: string): void;
        open?: boolean | undefined;
        openSecondary?: boolean | undefined;
        overlayClassName?: string | undefined;
        overlayStyle?: React.CSSProperties | undefined;
        style?: React.CSSProperties | undefined;
        swipeAreaWidth?: number | undefined;
        width?: number | string | undefined;
        zDepth?: number | undefined;
    }
    export class Drawer extends React.Component<DrawerProps> {
    }

    namespace GridList {
        export interface GridListProps {
            cellHeight?: number|'auto' | undefined;
            children?: React.ReactNode;
            cols?: number | undefined;
            padding?: number | undefined;
            style?: React.CSSProperties | undefined;
        }
        export class GridList extends React.Component<GridListProps> {
        }

        export interface GridTileProps {
            actionIcon?: React.ReactElement | undefined;
            actionPosition?: "left" | "right" | undefined;
            children?: React.ReactNode;
            cols?: number | undefined;
            containerElement?: string | React.