// Type definitions for material-ui v0.15.1 // Project: https://github.com/callemall/material-ui // Definitions by: Nathan Brown , Oliver Herrmann // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped /// declare module "material-ui" { export import AppBar = __MaterialUI.AppBar; export import AutoComplete = __MaterialUI.AutoComplete; export import Avatar = __MaterialUI.Avatar; export import Badge = __MaterialUI.Badge; export import Card = __MaterialUI.Card.Card; export import CardActions = __MaterialUI.Card.CardActions; export import CardHeader = __MaterialUI.Card.CardHeader; export import CardMedia = __MaterialUI.Card.CardMedia; export import CardText = __MaterialUI.Card.CardText; export import CardTitle = __MaterialUI.Card.CardTitle; export import Checkbox = __MaterialUI.Switches.Checkbox; export import Chip = __MaterialUI.Chip; export import CircularProgress = __MaterialUI.CircularProgress; export import DatePicker = __MaterialUI.DatePicker.DatePicker; export import Dialog = __MaterialUI.Dialog; export import Divider = __MaterialUI.Divider; export import Drawer = __MaterialUI.Drawer; export import DropDownMenu = __MaterialUI.Menus.DropDownMenu; export import FlatButton = __MaterialUI.FlatButton; export import FloatingActionButton = __MaterialUI.FloatingActionButton; export import FontIcon = __MaterialUI.FontIcon; export import GridList = __MaterialUI.GridList.GridList; export import GridTile = __MaterialUI.GridList.GridTile; export import IconButton = __MaterialUI.IconButton; export import IconMenu = __MaterialUI.Menus.IconMenu; export import LinearProgress = __MaterialUI.LinearProgress; export import List = __MaterialUI.List.List; export import ListItem = __MaterialUI.List.ListItem; export import MakeSelectable = __MaterialUI.List.MakeSelectable; export import Menu = __MaterialUI.Menus.Menu; export import MenuItem = __MaterialUI.Menus.MenuItem; export import Paper = __MaterialUI.Paper; export import Popover = __MaterialUI.Popover.Popover; export import RadioButton = __MaterialUI.Switches.RadioButton; export import RadioButtonGroup = __MaterialUI.Switches.RadioButtonGroup; export import RaisedButton = __MaterialUI.RaisedButton; export import RefreshIndicator = __MaterialUI.RefreshIndicator; export import SelectField = __MaterialUI.SelectField; export import Slider = __MaterialUI.Slider; export import Subheader = __MaterialUI.Subheader; export import SvgIcon = __MaterialUI.SvgIcon; export import Step = __MaterialUI.Stepper.Step; export import StepButton = __MaterialUI.Stepper.StepButton; export import StepContent = __MaterialUI.Stepper.StepContent; export import StepLabel = __MaterialUI.Stepper.StepLabel; export import Stepper = __MaterialUI.Stepper; export import Snackbar = __MaterialUI.Snackbar; export import Tab = __MaterialUI.Tabs.Tab; export import Tabs = __MaterialUI.Tabs.Tabs; export import Table = __MaterialUI.Table.Table; export import TableBody = __MaterialUI.Table.TableBody; export import TableFooter = __MaterialUI.Table.TableFooter; export import TableHeader = __MaterialUI.Table.TableHeader; export import TableHeaderColumn = __MaterialUI.Table.TableHeaderColumn; export import TableRow = __MaterialUI.Table.TableRow; export import TableRowColumn = __MaterialUI.Table.TableRowColumn; export import TextField = __MaterialUI.TextField; export import TimePicker = __MaterialUI.TimePicker; export import Toggle = __MaterialUI.Switches.Toggle; export import Toolbar = __MaterialUI.Toolbar.Toolbar; export import ToolbarGroup = __MaterialUI.Toolbar.ToolbarGroup; export import ToolbarSeparator = __MaterialUI.Toolbar.ToolbarSeparator; export import ToolbarTitle = __MaterialUI.Toolbar.ToolbarTitle; // export type definitions export type TouchTapEvent = __MaterialUI.TouchTapEvent; export type TouchTapEventHandler = __MaterialUI.TouchTapEventHandler; } declare namespace __MaterialUI { export import React = __React; // ReactLink is from "react/addons" interface ReactLink { value: T; requestChange(newValue: T): void; } // What's common between React.TouchEvent and React.MouseEvent interface TouchTapEvent extends React.SyntheticEvent { altKey: boolean; ctrlKey: boolean; getModifierState(key: string): boolean; metaKey: boolean; shiftKey: boolean; } // What's common between React.TouchEventHandler and React.MouseEventHandler interface TouchTapEventHandler extends React.EventHandler { } interface ThemeWrapperProps extends React.Props { theme: Styles.MuiTheme; } export class ThemeWrapper extends React.Component { } export namespace Styles { interface Spacing { iconSize?: number; desktopGutter?: number; desktopGutterMore?: number; desktopGutterLess?: number; desktopGutterMini?: number; desktopKeylineIncrement?: number; desktopDropDownMenuItemHeight?: number; desktopDropDownMenuFontSize?: number; desktopLeftNavMenuItemHeight?: number; desktopSubheaderHeight?: number; desktopToolbarHeight?: number; } export var Spacing: Spacing; interface ThemePalette { primary1Color?: string; primary2Color?: string; primary3Color?: string; accent1Color?: string; accent2Color?: string; accent3Color?: string; textColor?: string; alternateTextColor?: string; canvasColor?: string; borderColor?: string; disabledColor?: string; pickerHeaderColor?: string; clockCircleColor?: string; shadowColor?: string; } interface MuiTheme { spacing?: Spacing; fontFamily?: string; palette?: ThemePalette; isRtl?: boolean; userAgent?: string; zIndex?: zIndex; baseTheme?: RawTheme; rawTheme?: RawTheme; appBar?: { color?: string; textColor?: string; height?: number; titleFontWeight?: number; padding?: number; }; avatar?: { color?: string; backgroundColor?: string; borderColor?: string; }; badge?: { color?: string; textColor?: string; primaryColor?: string; primaryTextColor?: string; secondaryColor?: string; secondaryTextColor?: string; fontWeight?: number; }; button?: { height?: number; minWidth?: number; iconButtonSize?: number; }; card?: { titleColor?: string; subtitleColor?: string; fontWeight?: number; }; cardMedia?: { color?: string; overlayContentBackground?: string; titleColor?: string; subtitleColor?: string; }; cardText?: { textColor?: string; }; checkbox?: { boxColor?: string; checkedColor?: string; requiredColor?: string; disabledColor?: string; labelColor?: string; labelDisabledColor?: string; }; chip?: { backgroundColor?: string; deleteIconColor?: string; textColor?: string; fontSize?: number; fontWeight?: number; shadow?: string; }; datePicker?: { color?: string; textColor?: string; calendarTextColor?: string; selectColor?: string; selectTextColor?: string; calendarYearBackgroundColor?: string; }; dialog?: { titleFontSize?: number; bodyFontSize?: number; bodyColor?: string; }; dropDownMenu?: { accentColor?: string; }; enhancedButton?: { tapHighlightColor?: string; }; flatButton?: { color?: string; buttonFilterColor?: string; disabledTextColor?: string; textColor?: string; primaryTextColor?: string; secondaryTextColor?: string; fontSize?: number; fontWeight?: number; }; floatingActionButton?: { buttonSize?: number; miniSize?: number; color?: string; iconColor?: string; secondaryColor?: string; secondaryIconColor?: string; disabledTextColor?: string; disabledColor?: string; }; gridTile?: { textColor?: string; }; icon?: { color?: string; backgroundColor?: string; }; inkBar?: { backgroundColor?: string; }; drawer?: { width?: number; color?: string; }; listItem?: { nestedLevelDepth?: number; secondaryTextColor?: string; leftIconColor?: string; rightIconColor?: string; }; menu?: { backgroundColor?: string; containerBackgroundColor?: string; }; menuItem?: { dataHeight?: number; height?: number; hoverColor?: string; padding?: number; selectedTextColor?: string; rightIconDesktopFill?: string; }; menuSubheader?: { padding?: number; borderColor?: string; textColor?: string; }; overlay?: { backgroundColor?: string; }; paper?: { color?: string; backgroundColor?: string; zDepthShadows?: string[]; }; radioButton?: { borderColor?: string; backgroundColor?: string; checkedColor?: string; requiredColor?: string; disabledColor?: string; size?: number; labelColor?: string; labelDisabledColor?: string; }; raisedButton?: { color?: string; textColor?: string; primaryColor?: string; primaryTextColor?: string; secondaryColor?: string; secondaryTextColor?: string; disabledColor?: string; disabledTextColor?: string; fontSize?: number; fontWeight?: number; }; refreshIndicator?: { strokeColor?: string; loadingStrokeColor?: string; }; ripple?: { color?: string; }; slider?: { trackSize?: number; trackColor?: string; trackColorSelected?: string; handleSize?: number; handleSizeDisabled?: number; handleSizeActive?: number; handleColorZero?: string; handleFillColor?: string; selectionColor?: string; rippleColor?: string; }; snackbar?: { textColor?: string; backgroundColor?: string; actionColor?: string; }; subheader?: { color?: string; fontWeight?: number; }; stepper?: { backgroundColor?: string; hoverBackgroundColor?: string; iconColor?: string; hoveredIconColor?: string; inactiveIconColor?: string; textColor?: string; disabledTextColor?: string; connectorLineColor?: string; }; table?: { backgroundColor?: string; }; tableFooter?: { borderColor?: string; textColor?: string; }; tableHeader?: { borderColor?: string; }; tableHeaderColumn?: { textColor?: string; height?: number; spacing?: number; }; tableRow?: { hoverColor?: string; stripeColor?: string; selectedColor?: string; textColor?: string; borderColor?: string; height?: number; }; tableRowColumn?: { height?: number; spacing?: number; }; tabs?: { backgroundColor?: string; textColor?: string; selectedTextColor?: string; }; textField?: { textColor?: string; hintColor?: string; floatingLabelColor?: string; disabledTextColor?: string; errorColor?: string; focusColor?: string; backgroundColor?: string; borderColor?: string; }; timePicker?: { color?: string; textColor?: string; accentColor?: string; clockColor?: string; clockCircleColor?: string; headerColor?: string; selectColor?: string; selectTextColor?: string; }; toggle?: { thumbOnColor?: string; thumbOffColor?: string; thumbDisabledColor?: string; thumbRequiredColor?: string; trackOnColor?: string; trackOffColor?: string; trackDisabledColor?: string; labelColor?: string; labelDisabledColor?: string; trackRequiredColor?: string; }; toolbar?: { color?: string; hoverColor?: string; backgroundColor?: string; height?: number; titleFontSize?: number; iconColor?: string; separatorColor?: string; menuHoverColor?: string; }; tooltip?: { color?: string; rippleBackgroundColor?: string; }; } interface zIndex { menu: number; appBar: number; drawerOverlay: number; drawer: number; dialogOverlay: number; dialog: number; layer: number; popover: number; snackbar: number; tooltip: number; } export var zIndex: zIndex; interface RawTheme { spacing?: Spacing; fontFamily?: string; palette?: ThemePalette; } var lightBaseTheme: RawTheme; var darkBaseTheme: RawTheme; export function muiThemeable, P, S>(): (component: TComponent) => TComponent; //** @deprecated use MuiThemeProvider instead **/ export function themeDecorator(muiTheme: Styles.MuiTheme): (Component: TFunction) => TFunction; interface MuiThemeProviderProps extends React.Props { muiTheme?: Styles.MuiTheme; } export class MuiThemeProvider extends React.Component{ } export function getMuiTheme(...muiTheme: MuiTheme[]): MuiTheme; interface ThemeManager { //** @deprecated ThemeManager is deprecated. please import getMuiTheme directly from "material-ui/styles/getMuiTheme" **/ getMuiTheme(baseTheme: RawTheme, muiTheme?: MuiTheme): MuiTheme; //** @deprecated modifyRawThemeSpacing is deprecated. please use getMuiTheme to modify your theme directly. http://www.material-ui.com/#/customization/themes **/ modifyRawThemeSpacing(muiTheme: MuiTheme, newSpacing: Spacing): MuiTheme; //** @deprecated modifyRawThemePalette is deprecated. please use getMuiTheme to modify your theme directly. http://www.material-ui.com/#/customization/themes **/ modifyRawThemePalette(muiTheme: MuiTheme, newPaletteKeys: ThemePalette): MuiTheme; //** @deprecated modifyRawThemeFontFamily is deprecated. please use getMuiTheme to modify your theme directly. http://www.material-ui.com/#/customization/themes **/ modifyRawThemeFontFamily(muiTheme: MuiTheme, newFontFamily: string): MuiTheme; } export var ThemeManager: ThemeManager; 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 var 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 var Typography: Typography; //** @deprecated use darkBaseTheme instead **/ export var DarkRawTheme: RawTheme; //** @deprecated use lightBaseTheme instead **/ export var LightRawTheme: RawTheme; } interface AppBarProps extends React.Props { className?: string; iconClassNameLeft?: string; iconClassNameRight?: string; iconElementLeft?: React.ReactElement; iconElementRight?: React.ReactElement; iconStyleRight?: React.CSSProperties; iconStyleLeft?: React.CSSProperties; onLeftIconButtonTouchTap?: TouchTapEventHandler; onRightIconButtonTouchTap?: TouchTapEventHandler; onTitleTouchTap?: TouchTapEventHandler; showMenuIconButton?: boolean; style?: React.CSSProperties; title?: React.ReactNode; titleStyle?: React.CSSProperties; zDepth?: number; } export class AppBar extends React.Component{ } interface AppCanvasProps extends React.Props { } export class AppCanvas extends React.Component { } namespace propTypes { type horizontal = 'left' | 'middle' | 'right'; type vertical = 'top' | 'center' | 'bottom'; type direction = 'left' | 'right' | 'up' | 'down'; interface origin { horizontal: horizontal; vertical: vertical; } type corners = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'; type cornersAndCenter = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right'; } type AutoCompleteDataItem = { text: string, value: React.ReactNode } | string; type AutoCompleteDataSource = { text: string, value: React.ReactNode }[] | string[]; interface AutoCompleteProps extends React.Props { anchorOrigin?: propTypes.origin; animated?: boolean; dataSource: AutoCompleteDataSource; disableFocusRipple?: boolean; errorStyle?: React.CSSProperties; errorText?: string; filter?: (searchText: string, key: string, item: AutoCompleteDataItem) => boolean; floatingLabelText?: React.ReactNode; fullWidth?: boolean; hintText?: string; listStyle?: React.CSSProperties; maxSearchResults?: number; menuCloseDelay?: number; menuProps?: any; menuStyle?: React.CSSProperties; onBlur?: React.FocusEventHandler; onFocus?: React.FocusEventHandler; onKeyDown?: React.KeyboardEventHandler; onNewRequest?: (chosenRequest: string, index: number) => void; onUpdateInput?: (searchText: string, dataSource: AutoCompleteDataSource) => void; open?: boolean; openOnFocus?: boolean; searchText?: string; style?: React.CSSProperties; targetOrigin?: propTypes.origin; /** @deprecated Instead, use openOnFocus */ triggerUpdateOnFocus?: boolean; } export class AutoComplete extends React.Component { 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; } interface AvatarProps extends React.Props { backgroundColor?: string; className?: string; color?: string; icon?: React.ReactElement; size?: number; src?: string; style?: React.CSSProperties; } export class Avatar extends React.Component { } interface BadgeProps extends React.Props { badgeContent: React.ReactNode; badgeStyle?: React.CSSProperties; className?: string; primary?: boolean; secondary?: boolean; style?: React.CSSProperties; } export class Badge extends React.Component { } interface BeforeAfterWrapperProps extends React.Props { afterElementType?: string; afterStyle?: React.CSSProperties; beforeElementType?: string; beforeStyle?: React.CSSProperties; elementType?: string; style?: React.CSSProperties; } export class BeforeAfterWrapper extends React.Component { } // non generally overridden elements of EnhancedButton interface SharedEnhancedButtonProps extends React.Props { centerRipple?: boolean; disableFocusRipple?: boolean; disableKeyboardFocus?: boolean; disableTouchRipple?: boolean; focusRippleColor?: string; focusRippleOpacity?: number; keyboardFocused?: boolean; linkButton?: boolean; onBlur?: React.FocusEventHandler; onFocus?: React.FocusEventHandler; onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void; onKeyDown?: React.KeyboardEventHandler; onKeyUp?: React.KeyboardEventHandler; onTouchTap?: TouchTapEventHandler; onClick?: React.MouseEventHandler; style?: React.CSSProperties; tabIndex?: number; touchRippleColor?: string; touchRippleOpacity?: number; type?: string; containerElement?: React.ReactNode | string; } interface EnhancedButtonProps extends React.HTMLAttributes, SharedEnhancedButtonProps { // container element,