Socket
Socket
Sign inDemoInstall

@rmwc/types

Package Overview
Dependencies
Maintainers
1
Versions
113
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rmwc/types - npm Package Compare versions

Comparing version 5.0.6-alpha.0 to 5.0.7-alpha.0

7

flow-typed/base/component.js

@@ -1,5 +0,4 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type DeprecateT } from './utils/deprecation';
declare type ClassNamesInputT = ((props: any) => Array<string | typeof undefined | null | {

@@ -6,0 +5,0 @@ [className: string]: boolean | typeof undefined | string | number;

@@ -1,4 +0,3 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
export class FoundationElement<Props: {}, ElementType = HTMLElement> {}

@@ -5,0 +4,0 @@

@@ -1,5 +0,4 @@

// @flow
import { type WithThemeProps as _WithThemeProps } from './with-theme';
import { type FoundationProps as _FoundationProps } from './foundation-component';
import { FocusTrap as _FocusTrap } from 'focus-trap';
export { default as classNames } from 'classnames';

@@ -6,0 +5,0 @@ export { default as createFocusTrap } from 'focus-trap';

@@ -1,2 +0,1 @@

// @flow
export var debounce: (func: Function, wait: number) => () => void;

@@ -1,2 +0,1 @@

// @flow
export type DeprecateT = {

@@ -3,0 +2,0 @@ [oldPropName: string]: string | [string, (value: any) => void];

@@ -1,3 +0,2 @@

// @flow
import * as React from 'react';
interface Type {

@@ -4,0 +3,0 @@ type: string;

@@ -1,2 +0,1 @@

// @flow
export var eventsMap: {

@@ -3,0 +2,0 @@ blur: string;

@@ -1,2 +0,1 @@

// @flow
export * from './debounce';

@@ -3,0 +2,0 @@ export * from './deprecation';

@@ -1,3 +0,2 @@

// @flow
export var closest: (element: EventTarget | HTMLElement | null, selector: string) => Element | null;
export var matches: (element: HTMLElement, selector: string) => boolean;

@@ -1,2 +0,1 @@

// @flow
/**

@@ -3,0 +2,0 @@ * Generates a pseudo random string for DOM ids

@@ -1,3 +0,2 @@

// @flow
export var toCamel: (str: string) => string;
export var toDashCase: (str: string) => string;

@@ -1,3 +0,2 @@

// @flow
import * as React from 'react';
interface WrapChildProps extends Object {

@@ -4,0 +3,0 @@ [key: string]: any;

@@ -1,4 +0,3 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
export interface WithThemeProps {

@@ -5,0 +4,0 @@ theme?: RMWC.ThemePropT;

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type IconProps, type IconPropT } from '@rmwc/icon';
declare module '@rmwc/button' {
import type { IconProps, IconPropT } from '@rmwc/icon';
declare export interface ButtonProps extends RMWC.WithRippleProps {
/** Make the Button dense. */
dense?: boolean;
/** Make the Button raised. */
raised?: boolean;
/** Make the button unelevated. */
unelevated?: boolean;
/** Make the button outlined. */
outlined?: boolean;
/** make the button disabled */
disabled?: boolean;
/** Content specified as a label prop. */
label?: React.Node | any;
/** Content specified as children. */
children?: React.Node;
/** An Icon for the Button */
icon?: IconPropT;
}
/**
* The Button component. Buttons also accepts all of the props from the Ripple component.
*/
declare export var Button: React.ComponentType<ButtonProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export interface ButtonIconProps extends IconProps {
}
/** An icon that goes inside of buttons. This is an instance of the Icon component. */
declare export var ButtonIcon: React.ComponentType<ButtonIconProps & RMWC.ComponentProps>;
declare export interface ButtonProps extends RMWC.WithRippleProps {
/** Make the Button dense. */
dense?: boolean;
/** Make the Button raised. */
raised?: boolean;
/** Make the button unelevated. */
unelevated?: boolean;
/** Make the button outlined. */
outlined?: boolean;
/** make the button disabled */
disabled?: boolean;
/** Content specified as a label prop. */
label?: React.Node | any;
/** Content specified as children. */
children?: React.Node;
/** An Icon for the Button */
icon?: IconPropT;
}
/**
* The Button component. Buttons also accepts all of the props from the Ripple component.
*/
declare export var Button: React.ComponentType<ButtonProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export interface ButtonIconProps extends IconProps {
}
/** An icon that goes inside of buttons. This is an instance of the Icon component. */
declare export var ButtonIcon: React.ComponentType<ButtonIconProps & RMWC.ComponentProps>;
}
// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type ButtonProps } from '@rmwc/button';
import { type IconButtonProps } from '@rmwc/icon-button';
declare module '@rmwc/card' {
import type { ButtonProps } from '@rmwc/button';
import type { IconButtonProps } from '@rmwc/icon-button';
/****************************************************************
* Card
****************************************************************/
declare export interface CardProps {
/** Removes the shadow and displays a hairline outline instead */
outlined?: boolean;
}
/** A Card Component */
declare export var Card: React.ComponentType<CardProps & RMWC.ComponentProps>;
/****************************************************************
* Card Media
****************************************************************/
declare export interface CardMediaProps {
/** Automatically scales the media area’s height to equal its width */
square?: boolean;
/** Automatically scales the media area’s height according to its width, maintaining a 16:9 aspect ratio */
sixteenByNine?: boolean;
}
/** Media area that displays a custom background-image with background-size: cover */
declare export var CardMedia: React.ComponentType<CardMediaProps & RMWC.ComponentProps>;
/** An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image */
declare export var CardMediaContent: React.ComponentType<RMWC.ComponentProps>;
/** The main clickable area for the primary content of the card */
declare export var CardPrimaryAction: React.ComponentType<RMWC.ComponentProps & RMWC.WithRippleProps>;
/****************************************************************
* Card Actions
****************************************************************/
declare export interface CardActionsProps {
/** Removes the action area’s padding and causes its only child (an mdc-card__action element) to consume 100% of the action area’s width */
fullBleed?: boolean;
}
/** Row containing action buttons and/or icons */
declare export var CardActions: React.ComponentType<CardActionsProps & RMWC.ComponentProps>;
/** A group of action buttons, displayed on the left side of the card (in LTR), adjacent to CardActionIcons */
declare export var CardActionButtons: React.ComponentType<RMWC.ComponentProps>;
/** A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to CardActionButtons */
declare export var CardActionIcons: React.ComponentType<RMWC.ComponentProps>;
declare export interface CardActionIconProps extends IconButtonProps {
}
/** A card action Icon */
declare export var CardActionIcon: React.ComponentType<CardActionIconProps & RMWC.ComponentProps>;
declare export interface CardActionButtonProps extends ButtonProps {
}
/** A card action Button */
declare export var CardActionButton: React.ComponentType<CardActionButtonProps & RMWC.ComponentProps>;
declare export type CardActionPropsT = IconButtonProps & ButtonProps;
/** DEPRECATED: A Card action Button. Depending on the props that are passed, this will either render an instance of the Button component, or the IconButton component. */
declare export var CardAction: {
(props: CardActionPropsT): React.Node;
displayName: string;
};
/****************************************************************
* Card
****************************************************************/
declare export interface CardProps {
/** Removes the shadow and displays a hairline outline instead */
outlined?: boolean;
}
/** A Card Component */
declare export var Card: React.ComponentType<CardProps & RMWC.ComponentProps>;
/****************************************************************
* Card Media
****************************************************************/
declare export interface CardMediaProps {
/** Automatically scales the media area’s height to equal its width */
square?: boolean;
/** Automatically scales the media area’s height according to its width, maintaining a 16:9 aspect ratio */
sixteenByNine?: boolean;
}
/** Media area that displays a custom background-image with background-size: cover */
declare export var CardMedia: React.ComponentType<CardMediaProps & RMWC.ComponentProps>;
/** An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image */
declare export var CardMediaContent: React.ComponentType<RMWC.ComponentProps>;
/** The main clickable area for the primary content of the card */
declare export var CardPrimaryAction: React.ComponentType<RMWC.ComponentProps & RMWC.WithRippleProps>;
/****************************************************************
* Card Actions
****************************************************************/
declare export interface CardActionsProps {
/** Removes the action area’s padding and causes its only child (an mdc-card__action element) to consume 100% of the action area’s width */
fullBleed?: boolean;
}
/** Row containing action buttons and/or icons */
declare export var CardActions: React.ComponentType<CardActionsProps & RMWC.ComponentProps>;
/** A group of action buttons, displayed on the left side of the card (in LTR), adjacent to CardActionIcons */
declare export var CardActionButtons: React.ComponentType<RMWC.ComponentProps>;
/** A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to CardActionButtons */
declare export var CardActionIcons: React.ComponentType<RMWC.ComponentProps>;
declare export interface CardActionIconProps extends IconButtonProps {
}
/** A card action Icon */
declare export var CardActionIcon: React.ComponentType<CardActionIconProps & RMWC.ComponentProps>;
declare export interface CardActionButtonProps extends ButtonProps {
}
/** A card action Button */
declare export var CardActionButton: React.ComponentType<CardActionButtonProps & RMWC.ComponentProps>;
declare export type CardActionPropsT = IconButtonProps & ButtonProps;
/** DEPRECATED: A Card action Button. Depending on the props that are passed, this will either render an instance of the Button component, or the IconButton component. */
declare export var CardAction: {
(props: CardActionPropsT): React.Node;
displayName: string;
};
}
// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { ToggleableFoundationComponent, type ToggleableFoundationProps } from '@rmwc/toggleable';
import { ToggleableFoundationComponent } from '@rmwc/toggleable';
declare module '@rmwc/checkbox' {
import type { ToggleableFoundationProps } from '@rmwc/toggleable';
declare export interface CheckboxProps extends RMWC.WithRippleProps, ToggleableFoundationProps {
/** Make the control indeterminate */
indeterminate?: boolean;
}
/**
* A Checkbox component
*/
declare export class Checkbox extends ToggleableFoundationComponent<CheckboxProps> {}
declare export interface CheckboxProps extends RMWC.WithRippleProps, ToggleableFoundationProps {
/** Make the control indeterminate */
indeterminate?: boolean;
}
/**
* A Checkbox component
*/
declare export class Checkbox extends ToggleableFoundationComponent<CheckboxProps> {}
}

@@ -5,60 +5,64 @@ // @flow

import { FoundationComponent } from '@rmwc/base';
import { type IconProps, type IconPropT } from '@rmwc/icon';
declare module '@rmwc/chip' {
import type { IconProps, IconPropT } from '@rmwc/icon';
declare export interface ChipProps {
/** Text for your Chip. */
label?: React.Node;
/** makes the Chip appear selected. */
selected?: boolean;
/** Instance of an Icon Component. */
leadingIcon?: IconPropT;
/** Instance of an Icon Component. */
trailingIcon?: IconPropT;
/** An optional chip ID that will be included in callback evt.detail. If this is not passed, RMWC will attempt to use the "key" prop if present. */
id?: string;
/** Includes an optional checkmark for the chips selected state. */
checkmark?: boolean;
/** Additional children will be rendered in the text area. */
children?: React.Node;
/** A callback for click or enter key. This should be used over onClick for accessibility reasons. */
onInteraction?: (evt: RMWC.CustomEventT<{
chipId: string;
}>) => void;
/** A callback for click or enter key for the trailing icon. material-components-web always treats this as an intent to remove the chip. */
onTrailingIconInteraction?: (evt: RMWC.CustomEventT<{
chipId: string;
}>) => void;
/** A callback that is fired once the chip is in an exited state from removing it. */
onRemove?: (evt: RMWC.CustomEventT<{
chipId: string;
}>) => void;
}
declare export interface DeprecatedChipProps {
/** Deprecated, use label instead */
text?: React.Node;
}
/** A Chip component. */
declare export class Chip extends FoundationComponent<ChipProps & DeprecatedChipProps> {}
declare export interface ChipIconProps extends IconProps {
/** Make it a leading icon */
leading?: boolean;
/** Make it a trailing icon */
trailing?: boolean;
}
declare export var ChipIcon: {
(props: ChipIconProps & RMWC.ComponentProps): React.Node;
displayName: string;
};
declare export interface ChipSetProps {
/** Creates a choice chipset */
choice?: boolean;
/** Creates a filter chipset */
filter?: boolean;
}
/** A container for multiple chips. */
declare export var ChipSet: React.ComponentType<ChipSetProps & RMWC.ComponentProps>;
declare export interface ChipProps {
/** Text for your Chip. */
label?: React.Node;
/** makes the Chip appear selected. */
selected?: boolean;
/** Instance of an Icon Component. */
leadingIcon?: IconPropT;
/** Instance of an Icon Component. */
trailingIcon?: IconPropT;
/** An optional chip ID that will be included in callback evt.detail. If this is not passed, RMWC will attempt to use the "key" prop if present. */
id?: string;
/** Includes an optional checkmark for the chips selected state. */
checkmark?: boolean;
/** Additional children will be rendered in the text area. */
children?: React.Node;
/** A callback for click or enter key. This should be used over onClick for accessibility reasons. */
onInteraction?: (evt: RMWC.CustomEventT<{
chipId: string;
}>) => void;
/** A callback for click or enter key for the trailing icon. material-components-web always treats this as an intent to remove the chip. */
onTrailingIconInteraction?: (evt: RMWC.CustomEventT<{
chipId: string;
}>) => void;
/** A callback that is fired once the chip is in an exited state from removing it. */
onRemove?: (evt: RMWC.CustomEventT<{
chipId: string;
}>) => void;
}
declare export interface DeprecatedChipProps {
/** Deprecated, use label instead */
text?: React.Node;
}
/** A Chip component. */
declare export class Chip extends FoundationComponent<ChipProps & DeprecatedChipProps> {}
declare export interface ChipIconProps extends IconProps {
/** Make it a leading icon */
leading?: boolean;
/** Make it a trailing icon */
trailing?: boolean;
}
declare export var ChipIcon: {
(props: ChipIconProps & RMWC.ComponentProps): React.Node;
displayName: string;
};
declare export interface ChipSetProps {
/** Creates a choice chipset */
choice?: boolean;
/** Creates a filter chipset */
filter?: boolean;
}
/** A container for multiple chips. */
declare export var ChipSet: React.ComponentType<ChipSetProps & RMWC.ComponentProps>;
}

@@ -8,15 +8,18 @@ // @flow

declare export interface CircularProgressProps {
/** Max value for determinate progress bars. */
max?: number;
/** Min value for determinate progress bars. */
min?: number;
/** Value for determinate progress bars. */
progress?: number;
/** The size of the loader you would like to render. */
size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number;
}
/** A Circular Progress indicator. */
declare export class CircularProgress extends React.Component<RMWC.MergeInterfacesT<CircularProgressProps, RMWC.ComponentProps>> {}
declare export interface CircularProgressProps {
/** Max value for determinate progress bars. */
max?: number;
/** Min value for determinate progress bars. */
min?: number;
/** Value for determinate progress bars. */
progress?: number;
/** The size of the loader you would like to render. */
size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number;
}
/** A Circular Progress indicator. */
declare export class CircularProgress extends React.Component<RMWC.MergeInterfacesT<CircularProgressProps, RMWC.ComponentProps>> {}
}

@@ -8,63 +8,66 @@ // @flow

declare interface SharedDataTableCellProps {
/** Align content to the start of the cell. */
alignStart?: boolean;
/** Align content to the middle of the cell. */
alignMiddle?: boolean;
/** Align content to the end of the cell. */
alignEnd?: boolean;
}
declare export interface DataTableProps {
/** The number of rows to affix to the top of the table when scrolling. */
stickyRows?: 0 | 1;
/** The number of columns to affix to the side of the table when scrolling. */
stickyColumns?: 0 | 1;
}
/** The DataTable Component. */
declare export var DataTable: React.ComponentType<DataTableProps & RMWC.ComponentProps>;
/** The data table content. */
declare export var DataTableContent: React.ComponentType<RMWC.ComponentProps>;
/** A header for the data table. */
declare export var DataTableHead: React.ComponentType<RMWC.ComponentProps>;
/** A body for the data table. */
declare export var DataTableBody: React.ComponentType<RMWC.ComponentProps>;
declare export interface DataTableRowProps {
/** Styles the row in a selected state. */
selected?: boolean;
/** Styles the row in an activated state. */
activated?: boolean;
}
/** A row for the data table. */
declare export var DataTableRow: React.ComponentType<DataTableRowProps & RMWC.ComponentProps>;
declare export interface DataTableHeadCellProps extends SharedDataTableCellProps {
/** Make the column sortable. Null for not sorted, 1 for ascending, and -1 for descending. */
sort?: null | number;
/** A callback for when the sorting method changes. Null for not sorted, 1 for ascending, and -1 for descending.*/
onSortChange?: (dir: null | number) => void;
/** Children to pass to the cell. */
children?: React.Node;
}
/** A header cell for the data table. */
declare export var DataTableHeadCell: {
(props: DataTableHeadCellProps & RMWC.ComponentProps): React.Node;
displayName: string;
};
declare export interface DataTableCellProps extends SharedDataTableCellProps {
}
/** A cell for the DataTable */
declare export var DataTableCell: React.ComponentType<DataTableCellProps & RMWC.ComponentProps>;
declare export interface SimpleDataTableProps extends DataTableProps {
/** Data to render. */
data: Array<any[]>;
/** Table headers to render. */
headers?: Array<any[]>;
/** A function that allows you to return custom props for a row. */
getRowProps?: (row: any[], index: number, isHead: boolean) => Object;
/** A function that allows you to return custom props for a cell. */
getCellProps?: (cell: any[], index: number, isHead: boolean) => Object;
}
/** A simple data table to render matrices. */
declare export class SimpleDataTable extends React.Component<SimpleDataTableProps> {}
declare export {};
declare interface SharedDataTableCellProps {
/** Align content to the start of the cell. */
alignStart?: boolean;
/** Align content to the middle of the cell. */
alignMiddle?: boolean;
/** Align content to the end of the cell. */
alignEnd?: boolean;
}
declare export interface DataTableProps {
/** The number of rows to affix to the top of the table when scrolling. */
stickyRows?: 0 | 1;
/** The number of columns to affix to the side of the table when scrolling. */
stickyColumns?: 0 | 1;
}
/** The DataTable Component. */
declare export var DataTable: React.ComponentType<DataTableProps & RMWC.ComponentProps>;
/** The data table content. */
declare export var DataTableContent: React.ComponentType<RMWC.ComponentProps>;
/** A header for the data table. */
declare export var DataTableHead: React.ComponentType<RMWC.ComponentProps>;
/** A body for the data table. */
declare export var DataTableBody: React.ComponentType<RMWC.ComponentProps>;
declare export interface DataTableRowProps {
/** Styles the row in a selected state. */
selected?: boolean;
/** Styles the row in an activated state. */
activated?: boolean;
}
/** A row for the data table. */
declare export var DataTableRow: React.ComponentType<DataTableRowProps & RMWC.ComponentProps>;
declare export interface DataTableHeadCellProps extends SharedDataTableCellProps {
/** Make the column sortable. Null for not sorted, 1 for ascending, and -1 for descending. */
sort?: null | number;
/** A callback for when the sorting method changes. Null for not sorted, 1 for ascending, and -1 for descending.*/
onSortChange?: (dir: null | number) => void;
/** Children to pass to the cell. */
children?: React.Node;
}
/** A header cell for the data table. */
declare export var DataTableHeadCell: {
(props: DataTableHeadCellProps & RMWC.ComponentProps): React.Node;
displayName: string;
};
declare export interface DataTableCellProps extends SharedDataTableCellProps {
}
/** A cell for the DataTable */
declare export var DataTableCell: React.ComponentType<DataTableCellProps & RMWC.ComponentProps>;
declare export interface SimpleDataTableProps extends DataTableProps {
/** Data to render. */
data: Array<any[]>;
/** Table headers to render. */
headers?: Array<any[]>;
/** A function that allows you to return custom props for a row. */
getRowProps?: (row: any[], index: number, isHead: boolean) => Object;
/** A function that allows you to return custom props for a cell. */
getCellProps?: (cell: any[], index: number, isHead: boolean) => Object;
}
/** A simple data table to render matrices. */
declare export class SimpleDataTable extends React.Component<SimpleDataTableProps> {}
declare export {};
}

@@ -5,54 +5,58 @@ // @flow

import { FoundationComponent, FocusTrap } from '@rmwc/base';
import { type ButtonProps } from '@rmwc/button';
declare module '@rmwc/dialog' {
import type { ButtonProps } from '@rmwc/button';
/** The Dialog title. */
declare export var DialogTitle: React.ComponentType<RMWC.ComponentProps>;
/** The Dialog content. */
declare export var DialogContent: React.ComponentType<RMWC.ComponentProps>;
/** Actions container for the Dialog. */
declare export var DialogActions: React.ComponentType<RMWC.ComponentProps>;
declare export interface DialogButtonProps extends ButtonProps {
/** An action returned in evt.detail.action to the onClose handler. */
action?: string;
/** Indicates this is the default selected action when pressing enter */
isDefaultAction?: boolean;
}
/** Action buttons for the Dialog. */
declare export class DialogButton extends React.Component<DialogButtonProps & RMWC.ComponentProps> {}
declare export interface DialogProps {
/** Whether or not the Dialog is showing. */
open?: boolean;
/** Callback for when the Dialog opens. */
onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
/** Callback for when the Dialog closes. */
onClose?: (evt: RMWC.CustomEventT<{}>) => void;
/** Callback to use if you need more direct access to the Dialog's lifecycle. */
onStateChange?: (state: 'opening' | 'opened' | 'closing' | 'closed') => void;
}
/** A Dialog component. */
declare export class Dialog extends FoundationComponent<DialogProps> {}
declare export interface SimpleDialogProps extends DialogProps {
/** A title for the default Dialog template. */
title?: React.Node;
/** Additional Dialog header content for the default Dialog template. */
header?: React.Node;
/** Body content for the default Dialog template, rendered before children. */
body?: React.Node;
/** Additional footer content for the default Dialog template, rendered before any buttons. */
footer?: React.Node;
/** Creates an accept button for the default Dialog template with a given label. You can pass `null` to remove the button.*/
acceptLabel?: React.Node;
/** Creates an cancel button for the default Dialog with a given label. You can pass `null` to remove the button.*/
cancelLabel?: React.Node;
/** Any children will be rendered in the body of the default Dialog template. */
children?: React.Node;
/** Allow the body to be scrollable */
scrollable?: boolean;
}
/** A non-standard SimpleDialog component for ease of use. */
declare export class SimpleDialog extends React.Component<SimpleDialogProps> {}
/** The Dialog title. */
declare export var DialogTitle: React.ComponentType<RMWC.ComponentProps>;
/** The Dialog content. */
declare export var DialogContent: React.ComponentType<RMWC.ComponentProps>;
/** Actions container for the Dialog. */
declare export var DialogActions: React.ComponentType<RMWC.ComponentProps>;
declare export interface DialogButtonProps extends ButtonProps {
/** An action returned in evt.detail.action to the onClose handler. */
action?: string;
/** Indicates this is the default selected action when pressing enter */
isDefaultAction?: boolean;
}
/** Action buttons for the Dialog. */
declare export class DialogButton extends React.Component<DialogButtonProps & RMWC.ComponentProps> {}
declare export interface DialogProps {
/** Whether or not the Dialog is showing. */
open?: boolean;
/** Callback for when the Dialog opens. */
onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
/** Callback for when the Dialog closes. */
onClose?: (evt: RMWC.CustomEventT<{}>) => void;
/** Callback to use if you need more direct access to the Dialog's lifecycle. */
onStateChange?: (state: 'opening' | 'opened' | 'closing' | 'closed') => void;
}
/** A Dialog component. */
declare export class Dialog extends FoundationComponent<DialogProps> {}
declare export interface SimpleDialogProps extends DialogProps {
/** A title for the default Dialog template. */
title?: React.Node;
/** Additional Dialog header content for the default Dialog template. */
header?: React.Node;
/** Body content for the default Dialog template, rendered before children. */
body?: React.Node;
/** Additional footer content for the default Dialog template, rendered before any buttons. */
footer?: React.Node;
/** Creates an accept button for the default Dialog template with a given label. You can pass `null` to remove the button.*/
acceptLabel?: React.Node;
/** Creates an cancel button for the default Dialog with a given label. You can pass `null` to remove the button.*/
cancelLabel?: React.Node;
/** Any children will be rendered in the body of the default Dialog template. */
children?: React.Node;
/** Allow the body to be scrollable */
scrollable?: boolean;
}
/** A non-standard SimpleDialog component for ease of use. */
declare export class SimpleDialog extends React.Component<SimpleDialogProps> {}
}

@@ -8,39 +8,42 @@ // @flow

/***************************************************************************************
* Drawer Headers
***************************************************************************************/
/** An optional header for the Drawer. */
declare export var DrawerHeader: React.ComponentType<RMWC.ComponentProps>;
/** An title for the DrawerHeader. */
declare export var DrawerTitle: React.ComponentType<RMWC.ComponentProps>;
/** A subtitle for the DrawerHeader. */
declare export var DrawerSubtitle: React.ComponentType<RMWC.ComponentProps>;
/***************************************************************************************
* Drawer Content
***************************************************************************************/
/** Content for Drawers. Please note this is an instance of mdc-list by default. You can change this to a a non list container by specifying the tag as 'div' or anything else. */
declare export var DrawerContent: React.ComponentType<RMWC.ComponentProps>;
/***************************************************************************************
* DrawerAppContent
***************************************************************************************/
/** For the Dismissible variant only. Sibling element that is resized when the drawer opens/closes. */
declare export var DrawerAppContent: React.ComponentType<RMWC.ComponentProps>;
/***************************************************************************************
* Drawers
***************************************************************************************/
declare export interface DrawerProps {
/** Opens or closes the Drawer. */
open?: boolean;
/** Callback that fires when the Drawer is closed. */
onClose?: (evt: RMWC.CustomEventT<{}>) => void;
/** Callback that fires when the Drawer is opened. */
onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
/** Makes a dismissible drawer. */
dismissible?: boolean;
/** Makes a modal / temporary drawer. */
modal?: boolean;
}
declare export var DrawerRoot: React.ComponentType<DrawerProps & RMWC.ComponentProps>;
declare export var Drawer: React.ComponentType<DrawerProps & RMWC.ComponentProps>;
/***************************************************************************************
* Drawer Headers
***************************************************************************************/
/** An optional header for the Drawer. */
declare export var DrawerHeader: React.ComponentType<RMWC.ComponentProps>;
/** An title for the DrawerHeader. */
declare export var DrawerTitle: React.ComponentType<RMWC.ComponentProps>;
/** A subtitle for the DrawerHeader. */
declare export var DrawerSubtitle: React.ComponentType<RMWC.ComponentProps>;
/***************************************************************************************
* Drawer Content
***************************************************************************************/
/** Content for Drawers. Please note this is an instance of mdc-list by default. You can change this to a a non list container by specifying the tag as 'div' or anything else. */
declare export var DrawerContent: React.ComponentType<RMWC.ComponentProps>;
/***************************************************************************************
* DrawerAppContent
***************************************************************************************/
/** For the Dismissible variant only. Sibling element that is resized when the drawer opens/closes. */
declare export var DrawerAppContent: React.ComponentType<RMWC.ComponentProps>;
/***************************************************************************************
* Drawers
***************************************************************************************/
declare export interface DrawerProps {
/** Opens or closes the Drawer. */
open?: boolean;
/** Callback that fires when the Drawer is closed. */
onClose?: (evt: RMWC.CustomEventT<{}>) => void;
/** Callback that fires when the Drawer is opened. */
onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
/** Makes a dismissible drawer. */
dismissible?: boolean;
/** Makes a modal / temporary drawer. */
modal?: boolean;
}
declare export var DrawerRoot: React.ComponentType<DrawerProps & RMWC.ComponentProps>;
declare export var Drawer: React.ComponentType<DrawerProps & RMWC.ComponentProps>;
}

@@ -8,13 +8,16 @@ // @flow

declare export interface ElevationProps {
/** A number from 0 - 24 for different levels of elevation */
z: number | string;
/** Allows for smooth transitions between elevations when the z value changes. */
transition?: boolean;
/** Allows the elevation classes to be merged onto the child component instead of creating an new DOM node. */
wrap?: boolean;
}
/** The Elevation Component */
declare export var Elevation: React.ComponentType<ElevationProps & RMWC.ComponentProps>;
declare export interface ElevationProps {
/** A number from 0 - 24 for different levels of elevation */
z: number | string;
/** Allows for smooth transitions between elevations when the z value changes. */
transition?: boolean;
/** Allows the elevation classes to be merged onto the child component instead of creating an new DOM node. */
wrap?: boolean;
}
/** The Elevation Component */
declare export var Elevation: React.ComponentType<ElevationProps & RMWC.ComponentProps>;
}
// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type IconProps, type IconPropT } from '@rmwc/icon';
declare module '@rmwc/fab' {
import type { IconProps, IconPropT } from '@rmwc/icon';
declare export interface FabProps extends RMWC.WithRippleProps {
/** Make the Fab smaller. */
mini?: boolean;
/** The icon for the FAB */
icon?: IconPropT;
/** A trialing icon for the FAB */
trailingIcon?: IconPropT;
/** Make the Fab extended with a label. */
label?: React.Node & any;
/** Content specified as children. */
children?: React.Node;
/** Animates the FAB out of view. When this class is removed, the FAB will return to view. */
exited?: boolean;
}
declare export var FabRoot: React.ComponentType<FabProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export var FabIcon: React.ComponentType<IconProps & RMWC.ComponentProps>;
declare export var FabLabel: React.ComponentType<RMWC.ComponentProps>;
/** A floating action button component */
declare export var Fab: (props: FabProps & RMWC.ComponentProps) => React.Node;
declare export interface FabProps extends RMWC.WithRippleProps {
/** Make the Fab smaller. */
mini?: boolean;
/** The icon for the FAB */
icon?: IconPropT;
/** A trialing icon for the FAB */
trailingIcon?: IconPropT;
/** Make the Fab extended with a label. */
label?: React.Node & any;
/** Content specified as children. */
children?: React.Node;
/** Animates the FAB out of view. When this class is removed, the FAB will return to view. */
exited?: boolean;
}
declare export var FabRoot: React.ComponentType<FabProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export var FabIcon: React.ComponentType<IconProps & RMWC.ComponentProps>;
declare export var FabLabel: React.ComponentType<RMWC.ComponentProps>;
/** A floating action button component */
declare export var Fab: (props: FabProps & RMWC.ComponentProps) => React.Node;
}
// @flow
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';

@@ -8,8 +7,11 @@

declare export interface FloatingLabelProps {
shake?: boolean;
float?: boolean;
}
declare export class FloatingLabel extends FoundationComponent<FloatingLabelProps> {}
import * as React from 'react';
declare export interface FloatingLabelProps {
shake?: boolean;
float?: boolean;
}
declare export class FloatingLabel extends FoundationComponent<FloatingLabelProps> {}
}

@@ -9,9 +9,13 @@ // @flow

declare export interface FormFieldProps {
/** Position the input after the label. */
alignEnd?: boolean;
}
declare export var FormFieldRoot: React.ComponentType<FormFieldProps & RMWC.ComponentProps>;
declare export class FormField extends FoundationComponent<FormFieldProps> {}
declare export interface FormFieldProps {
/** Position the input after the label. */
alignEnd?: boolean;
}
declare export var FormFieldRoot: React.ComponentType<FormFieldProps & RMWC.ComponentProps>;
declare export class FormField extends FoundationComponent<FormFieldProps> {}
}
// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type IconProps } from '@rmwc/icon';
declare module '@rmwc/grid-list' {
import type { IconProps } from '@rmwc/icon';
declare export interface GridListProps {
/** Use a 1px gutter. */
tileGutter1?: boolean;
/** Move the caption to the top of the card. */
headerCaption?: boolean;
/** Make the caption two lines. */
twolineCaption?: boolean;
/** Leaves space for a start aligned icon. */
withIconAlignStart?: boolean;
/** One of the following values: 1x1, 16x9, 2x3, 3x2, 4x3, 3x4. */
tileAspect?: '1x1' | '16x9' | '2x3' | '3x2' | '4x3' | '3x4';
}
/** Grid List Component */
declare export var GridList: React.ComponentType<GridListProps & RMWC.ComponentProps>;
/** The primary content for a Grid tile */
declare export var GridTilePrimary: React.ComponentType<RMWC.ComponentProps>;
declare export var GridTilePrimaryContent: React.ComponentType<RMWC.ComponentProps>;
/****************************************************************
* Public
****************************************************************/
/** A grid tile */
declare export var GridTile: React.ComponentType<RMWC.ComponentProps>;
/** The secondary content for a Grid tile */
declare export var GridTileSecondary: React.ComponentType<RMWC.ComponentProps>;
declare export interface GridTileIconProps extends IconProps {
}
/** The icon for a Grid tile. This is an instance of Icon component. */
declare export var GridTileIcon: React.ComponentType<GridTileIconProps & RMWC.ComponentProps>;
/** The title for a Grid tile */
declare export var GridTileTitle: React.ComponentType<RMWC.ComponentProps>;
/** Supporting Text for the Grid Tile */
declare export var GridTileTitleSupportText: React.ComponentType<RMWC.ComponentProps>;
declare export interface GridListProps {
/** Use a 1px gutter. */
tileGutter1?: boolean;
/** Move the caption to the top of the card. */
headerCaption?: boolean;
/** Make the caption two lines. */
twolineCaption?: boolean;
/** Leaves space for a start aligned icon. */
withIconAlignStart?: boolean;
/** One of the following values: 1x1, 16x9, 2x3, 3x2, 4x3, 3x4. */
tileAspect?: '1x1' | '16x9' | '2x3' | '3x2' | '4x3' | '3x4';
}
/** Grid List Component */
declare export var GridList: React.ComponentType<GridListProps & RMWC.ComponentProps>;
/** The primary content for a Grid tile */
declare export var GridTilePrimary: React.ComponentType<RMWC.ComponentProps>;
declare export var GridTilePrimaryContent: React.ComponentType<RMWC.ComponentProps>;
/****************************************************************
* Public
****************************************************************/
/** A grid tile */
declare export var GridTile: React.ComponentType<RMWC.ComponentProps>;
/** The secondary content for a Grid tile */
declare export var GridTileSecondary: React.ComponentType<RMWC.ComponentProps>;
declare export interface GridTileIconProps extends IconProps {
}
/** The icon for a Grid tile. This is an instance of Icon component. */
declare export var GridTileIcon: React.ComponentType<GridTileIconProps & RMWC.ComponentProps>;
/** The title for a Grid tile */
declare export var GridTileTitle: React.ComponentType<RMWC.ComponentProps>;
/** Supporting Text for the Grid Tile */
declare export var GridTileTitleSupportText: React.ComponentType<RMWC.ComponentProps>;
}

@@ -8,31 +8,34 @@ // @flow

declare export interface GridProps {
/** Specifies the grid should have fixed column width. */
fixedColumnWidth?: boolean;
/** Specifies the alignment of the whole grid. */
align?: 'left' | 'right';
/** Children for the Grid */
children?: React.Node;
}
/** A Grid component */
declare export var Grid: React.ComponentType<GridProps & RMWC.ComponentProps>;
declare export interface GridCellProps {
/** Default number of columns to span. */
span?: number;
/** Number of columns to span on a phone. */
phone?: number;
/** Number of columns to span on a tablet. */
tablet?: number;
/** Number of columns to span on a desktop. */
desktop?: number;
/** Specifies the order of the cell. */
order?: number;
/** Specifies the alignment of cell */
align?: 'top' | 'middle' | 'bottom';
}
/** A Grid cell */
declare export var GridCell: React.ComponentType<GridCellProps & RMWC.ComponentProps>;
/** By default, an inner grid component is included inside of <Grid>. Use GridInner when doing nested Grids. */
declare export var GridInner: React.ComponentType<RMWC.ComponentProps>;
declare export interface GridProps {
/** Specifies the grid should have fixed column width. */
fixedColumnWidth?: boolean;
/** Specifies the alignment of the whole grid. */
align?: 'left' | 'right';
/** Children for the Grid */
children?: React.Node;
}
/** A Grid component */
declare export var Grid: React.ComponentType<GridProps & RMWC.ComponentProps>;
declare export interface GridCellProps {
/** Default number of columns to span. */
span?: number;
/** Number of columns to span on a phone. */
phone?: number;
/** Number of columns to span on a tablet. */
tablet?: number;
/** Number of columns to span on a desktop. */
desktop?: number;
/** Specifies the order of the cell. */
order?: number;
/** Specifies the alignment of cell */
align?: 'top' | 'middle' | 'bottom';
}
/** A Grid cell */
declare export var GridCell: React.ComponentType<GridCellProps & RMWC.ComponentProps>;
/** By default, an inner grid component is included inside of <Grid>. Use GridInner when doing nested Grids. */
declare export var GridInner: React.ComponentType<RMWC.ComponentProps>;
}
// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type IconPropT, type IconProps } from '@rmwc/icon';
declare module '@rmwc/icon-button' {
import type { IconPropT, IconProps } from '@rmwc/icon';
declare export interface IconButtonProps extends RMWC.WithRippleProps {
/** Controls the on / off state of the a toggleable button. */
checked?: boolean;
/** An onChange callback that receives a custom event. */
onChange?: (evt: RMWC.CustomEventT<{
isOn: boolean;
}>) => void;
/** Makes the button disabled */
disabled?: boolean;
/** Icon for the button */
icon?: IconPropT;
/** If specified, renders a toggle with this icon as the on state. */
onIcon?: IconPropT;
}
declare export interface DeprecatedIconButtonProps {
/** DEPRECATED: Pass options directly to icon */
iconOptions?: any;
/** DEPRECATED: Pass options directly to onIcon */
onIconOptions?: any;
}
declare export var IconButtonRoot: React.ComponentType<IconButtonProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export interface IconButtonIconProps extends IconProps {
on?: boolean;
}
declare export var IconButtonIcon: React.ComponentType<IconButtonIconProps & RMWC.ComponentProps>;
declare export var IconButton: (props: IconButtonProps & RMWC.ComponentProps) => React.Node;
declare export interface IconButtonProps extends RMWC.WithRippleProps {
/** Controls the on / off state of the a toggleable button. */
checked?: boolean;
/** An onChange callback that receives a custom event. */
onChange?: (evt: RMWC.CustomEventT<{
isOn: boolean;
}>) => void;
/** Makes the button disabled */
disabled?: boolean;
/** Icon for the button */
icon?: IconPropT;
/** If specified, renders a toggle with this icon as the on state. */
onIcon?: IconPropT;
}
declare export interface DeprecatedIconButtonProps {
/** DEPRECATED: Pass options directly to icon */
iconOptions?: any;
/** DEPRECATED: Pass options directly to onIcon */
onIconOptions?: any;
}
declare export var IconButtonRoot: React.ComponentType<IconButtonProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export interface IconButtonIconProps extends IconProps {
on?: boolean;
}
declare export var IconButtonIcon: React.ComponentType<IconButtonIconProps & RMWC.ComponentProps>;
declare export var IconButton: (props: IconButtonProps & RMWC.ComponentProps) => React.Node;
}

@@ -9,53 +9,57 @@ // @flow

declare type IconElementT = React.Node;
declare export type IconStrategyT = 'auto' | 'ligature' | 'className' | 'url' | 'component' | 'custom';
declare export interface IconOptions {
icon: IconElementT;
/**
* Handle multiple methods of embedding an icon.
* 'ligature' uses ligature style embedding like material-icons,
* 'className' adds a class onto the element for libraries like glyphicons and ion icons,
* 'url' will load a remote image, and
* 'component' will render content as children like SVGs or any other React node.
* 'custom' allows you to specify your own render prop.
* If not set, 'auto' will be used or the defaults set inside of RMWCProvider.
* */
strategy?: IconStrategyT;
/**
* A className prefix to use when using css font icons that use prefixes,
* i.e. font-awesome-, ion-, glyphicons-.
* This only applies when using the 'className' strategy.
**/
prefix?: string;
/** A base className for the icon namespace, i.e. material-icons. */
basename?: string;
/** A render function to use when using the 'custom' strategy. */
render?: (props: {
content: IconElementT;
className: string;
}) => React.Node;
/** A size to render the icon */
size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
/** Additional props */
[key: string]: any;
}
declare export type IconPropT = IconElementT | IconOptions;
declare export interface IconProps extends DeprecatedIconProps {
/** The icon to use. This can be a string for a font icon, a url, or whatever the selected strategy needs. */
icon?: IconPropT;
}
declare export interface DeprecatedIconProps {
/** DEPRECATED: Additional Icon Options. See the Icon component documentation. */
iconOptions?: IconOptions;
}
/**
* Get the actual icon strategy to use
*/
declare export var getIconStrategy: (content: React.Node, strategy: string | null, providerStrategy: string | null) => string;
/**
* An Icon component. Most of these options can be set once globally, read the documentation on Provider for more info.
*/
declare export var Icon: React.ComponentType<IconProps & DeprecatedIconProps & RMWC.ComponentProps & $Shape<WithProviderContext>>;
declare export {};
declare type IconElementT = React.Node;
declare export type IconStrategyT = 'auto' | 'ligature' | 'className' | 'url' | 'component' | 'custom';
declare export interface IconOptions {
icon: IconElementT;
/**
* Handle multiple methods of embedding an icon.
* 'ligature' uses ligature style embedding like material-icons,
* 'className' adds a class onto the element for libraries like glyphicons and ion icons,
* 'url' will load a remote image, and
* 'component' will render content as children like SVGs or any other React node.
* 'custom' allows you to specify your own render prop.
* If not set, 'auto' will be used or the defaults set inside of RMWCProvider.
* */
strategy?: IconStrategyT;
/**
* A className prefix to use when using css font icons that use prefixes,
* i.e. font-awesome-, ion-, glyphicons-.
* This only applies when using the 'className' strategy.
**/
prefix?: string;
/** A base className for the icon namespace, i.e. material-icons. */
basename?: string;
/** A render function to use when using the 'custom' strategy. */
render?: (props: {
content: IconElementT;
className: string;
}) => React.Node;
/** A size to render the icon */
size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
/** Additional props */
[key: string]: any;
}
declare export type IconPropT = IconElementT | IconOptions;
declare export interface IconProps extends DeprecatedIconProps {
/** The icon to use. This can be a string for a font icon, a url, or whatever the selected strategy needs. */
icon?: IconPropT;
}
declare export interface DeprecatedIconProps {
/** DEPRECATED: Additional Icon Options. See the Icon component documentation. */
iconOptions?: IconOptions;
}
/**
* Get the actual icon strategy to use
*/
declare export var getIconStrategy: (content: React.Node, strategy: string | null, providerStrategy: string | null) => string;
/**
* An Icon component. Most of these options can be set once globally, read the documentation on Provider for more info.
*/
declare export var Icon: React.ComponentType<IconProps & DeprecatedIconProps & RMWC.ComponentProps & $Shape<WithProviderContext>>;
declare export {};
}

@@ -8,21 +8,24 @@ // @flow

declare export interface ImageListProps {
/** Indicates that this Image List should use the Masonry variant. */
masonry?: boolean;
/** Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image). */
withTextProtection?: boolean;
}
/** Indicates the root Image List element. */
declare export var ImageList: React.ComponentType<ImageListProps & RMWC.ComponentProps>;
/** Indicates each item in an Image List. */
declare export var ImageListItem: React.ComponentType<RMWC.ComponentProps>;
/** Optional. Parent of each item’s image element, responsible for constraining aspect ratio. This element may be omitted entirely if images are already sized to the correct aspect ratio. */
declare export var ImageListImageAspectContainer: React.ComponentType<RMWC.ComponentProps>;
/** Indicates the image element in each item. */
declare export var ImageListImage: React.ComponentType<RMWC.ComponentProps>;
/** Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. */
declare export var ImageListSupporting: React.ComponentType<RMWC.ComponentProps>;
/** Optional. Indicates the text label in each item, if the Image List contains text labels. */
declare export var ImageListLabel: React.ComponentType<RMWC.ComponentProps>;
declare export interface ImageListProps {
/** Indicates that this Image List should use the Masonry variant. */
masonry?: boolean;
/** Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image). */
withTextProtection?: boolean;
}
/** Indicates the root Image List element. */
declare export var ImageList: React.ComponentType<ImageListProps & RMWC.ComponentProps>;
/** Indicates each item in an Image List. */
declare export var ImageListItem: React.ComponentType<RMWC.ComponentProps>;
/** Optional. Parent of each item’s image element, responsible for constraining aspect ratio. This element may be omitted entirely if images are already sized to the correct aspect ratio. */
declare export var ImageListImageAspectContainer: React.ComponentType<RMWC.ComponentProps>;
/** Indicates the image element in each item. */
declare export var ImageListImage: React.ComponentType<RMWC.ComponentProps>;
/** Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. */
declare export var ImageListSupporting: React.ComponentType<RMWC.ComponentProps>;
/** Optional. Indicates the text label in each item, if the Image List contains text labels. */
declare export var ImageListLabel: React.ComponentType<RMWC.ComponentProps>;
}
// @flow
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';

@@ -8,8 +7,11 @@

declare export interface LineRippleProps {
active?: boolean;
center?: number;
}
declare export class LineRipple extends FoundationComponent<LineRippleProps> {}
import * as React from 'react';
declare export interface LineRippleProps {
active?: boolean;
center?: number;
}
declare export class LineRipple extends FoundationComponent<LineRippleProps> {}
}

@@ -9,24 +9,28 @@ // @flow

declare export interface LinearProgressProps {
/** Progress float percentage between 0 and 1. */
progress?: number | string;
/** A Progress buffer float percentage between 0 and 1. */
buffer?: number | string;
/** Progress goes from right to left. */
reversed?: boolean;
/** Hides the progress bar. Adding / removing this prop will trigger an animation in or out. */
closed?: boolean;
}
declare export interface DeprecatedLinearProgressProps {
/** Whether or not the Progress bar is determinate. */
determinate?: boolean;
}
declare export var LinearProgressRoot: React.ComponentType<LinearProgressProps & RMWC.ComponentProps>;
declare export var LinearProgressBufferingDots: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressBuffer: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressPrimaryBar: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressSecondaryBar: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressBarInner: React.ComponentType<RMWC.ComponentProps>;
declare export class LinearProgress extends FoundationComponent<LinearProgressProps & DeprecatedLinearProgressProps> {}
declare export interface LinearProgressProps {
/** Progress float percentage between 0 and 1. */
progress?: number | string;
/** A Progress buffer float percentage between 0 and 1. */
buffer?: number | string;
/** Progress goes from right to left. */
reversed?: boolean;
/** Hides the progress bar. Adding / removing this prop will trigger an animation in or out. */
closed?: boolean;
}
declare export interface DeprecatedLinearProgressProps {
/** Whether or not the Progress bar is determinate. */
determinate?: boolean;
}
declare export var LinearProgressRoot: React.ComponentType<LinearProgressProps & RMWC.ComponentProps>;
declare export var LinearProgressBufferingDots: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressBuffer: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressPrimaryBar: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressSecondaryBar: React.ComponentType<RMWC.ComponentProps>;
declare export var LinearProgressBarInner: React.ComponentType<RMWC.ComponentProps>;
declare export class LinearProgress extends FoundationComponent<LinearProgressProps & DeprecatedLinearProgressProps> {}
}

@@ -1,4 +0,3 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
interface CollapsibleProps {

@@ -5,0 +4,0 @@ handle: React.Node;

// @flow
declare export * from './list';
declare export * from './list-item';
declare export * from './collapsible-list';

@@ -10,2 +7,7 @@

declare export * from './list';
declare export * from './list-item';
declare export * from './collapsible-list';
}

@@ -1,5 +0,4 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type IconProps, type IconPropT } from '@rmwc/icon';
export interface ListItemProps extends RMWC.WithRippleProps {

@@ -6,0 +5,0 @@ /** A modifier for a selected state. */

@@ -1,5 +0,4 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';
export interface ListProps {

@@ -6,0 +5,0 @@ /** Reduces the padding on List items. */

// @flow
declare export * from './menu';
declare export * from './menu-surface';

@@ -9,2 +7,6 @@

declare export * from './menu';
declare export * from './menu-surface';
}

@@ -1,5 +0,4 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';
export type AnchorT = 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart';

@@ -6,0 +5,0 @@ export interface MenuSurfaceProps {

@@ -1,7 +0,6 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { List, type ListItemProps } from '@rmwc/list';
import { FoundationComponent } from '@rmwc/base';
import { MenuSurface, type MenuSurfaceProps } from './menu-surface';
/****************************************************************

@@ -8,0 +7,0 @@ * Menu

// @flow
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';

@@ -8,7 +7,10 @@

declare export interface NotchedOutlineProps {
notch?: number;
}
declare export class NotchedOutline extends FoundationComponent<NotchedOutlineProps> {}
import * as React from 'react';
declare export interface NotchedOutlineProps {
notch?: number;
}
declare export class NotchedOutline extends FoundationComponent<NotchedOutlineProps> {}
}

@@ -8,40 +8,43 @@ // @flow

declare type IconStrategyT = 'auto' | 'ligature' | 'className' | 'url' | 'component' | 'custom';
declare export interface RMWCProviderProps {
/** Set the buttons ripple effect globally */
ripple?: boolean;
/** Global options for icons */
icon?: $Shape<IconOptions>;
/** Children to render */
children?: React.Node;
}
declare export interface DeprecatedRMWCProviderPropsT {
/** DEPRECATED: Ripples for all components are now controlled by the providers ripple prop */
buttonDefaultRipple?: boolean;
/** DEPRECATED: Ripples for all components are now controlled by the providers ripple prop */
listItemDefaultRipple?: boolean;
/** DEPRECATED: Use the 'icon' prop. icon={{basename: 'material-icons'}} */
iconClassNameBase?: string;
/** DEPRECATED: Use the 'icon' prop. icon={{prefix: 'glyphicons-'}} */
iconClassNamePrefix?: string;
/** DEPRECATED: Use the 'icon' prop. icon={{strategy: 'className'}} */
iconStrategy?: IconStrategyT;
/** DEPRECATED: Use the 'icon' prop. icon={{render: () => <div />}} */
iconRender?: (props: {
content: React.Node;
className: string;
}) => React.Node;
}
declare export interface WithProviderContext {
providerContext: RMWCProviderProps;
}
declare export var ProviderContext: React.Context<RMWCProviderProps>;
declare export var withProviderContext: () => <P: {}>(Component: React.ComponentType<P & WithProviderContext>) => React.ComponentType<P & $Shape<WithProviderContext>>;
/**
* Provides default options for children
* Prop override options in providerDefaults with the same name
*/
declare export var RMWCProvider: (props: RMWCProviderProps & DeprecatedRMWCProviderPropsT) => React.Node;
declare export {};
declare type IconStrategyT = 'auto' | 'ligature' | 'className' | 'url' | 'component' | 'custom';
declare export interface RMWCProviderProps {
/** Set the buttons ripple effect globally */
ripple?: boolean;
/** Global options for icons */
icon?: $Shape<IconOptions>;
/** Children to render */
children?: React.Node;
}
declare export interface DeprecatedRMWCProviderPropsT {
/** DEPRECATED: Ripples for all components are now controlled by the providers ripple prop */
buttonDefaultRipple?: boolean;
/** DEPRECATED: Ripples for all components are now controlled by the providers ripple prop */
listItemDefaultRipple?: boolean;
/** DEPRECATED: Use the 'icon' prop. icon={{basename: 'material-icons'}} */
iconClassNameBase?: string;
/** DEPRECATED: Use the 'icon' prop. icon={{prefix: 'glyphicons-'}} */
iconClassNamePrefix?: string;
/** DEPRECATED: Use the 'icon' prop. icon={{strategy: 'className'}} */
iconStrategy?: IconStrategyT;
/** DEPRECATED: Use the 'icon' prop. icon={{render: () => <div />}} */
iconRender?: (props: {
content: React.Node;
className: string;
}) => React.Node;
}
declare export interface WithProviderContext {
providerContext: RMWCProviderProps;
}
declare export var ProviderContext: React.Context<RMWCProviderProps>;
declare export var withProviderContext: () => <P: {}>(Component: React.ComponentType<P & WithProviderContext>) => React.ComponentType<P & $Shape<WithProviderContext>>;
/**
* Provides default options for children
* Prop override options in providerDefaults with the same name
*/
declare export var RMWCProvider: (props: RMWCProviderProps & DeprecatedRMWCProviderPropsT) => React.Node;
declare export {};
}
// @flow
import * as RMWC from '@rmwc/types';
import { ToggleableFoundationComponent, type ToggleableFoundationProps } from '@rmwc/toggleable';
import { ToggleableFoundationComponent } from '@rmwc/toggleable';
declare module '@rmwc/radio' {
import type { ToggleableFoundationProps } from '@rmwc/toggleable';
declare export interface RadioProps extends RMWC.WithRippleProps, ToggleableFoundationProps {
}
/** A Radio button component. */
declare export class Radio extends ToggleableFoundationComponent<RadioProps> {}
declare export interface RadioProps extends RMWC.WithRippleProps, ToggleableFoundationProps {
}
/** A Radio button component. */
declare export class Radio extends ToggleableFoundationComponent<RadioProps> {}
}

@@ -9,33 +9,37 @@ // @flow

declare export interface RippleSurfaceProps {
className: string;
style: Object;
}
declare export interface RippleProps {
/** Makes the ripple unbounded */
unbounded?: boolean;
/** Makes the ripple primary */
primary?: boolean;
/** Makes the ripple an accent color*/
accent?: boolean;
/** makes the ripple disabled */
disabled?: boolean;
/** For internal use */
surface?: boolean | RippleSurface;
}
declare type ActivateEventTypes<S> = SyntheticMouseEvent<S> | SyntheticTouchEvent<S> | SyntheticKeyboardEvent<S> | SyntheticFocusEvent<S>;
/** A component for adding Ripples to other components. */
declare export class Ripple extends FoundationComponent<RippleProps> {}
declare export class RippleSurface extends React.PureComponent<React.Element<HTMLDivElement>> {}
declare interface WithRippleOpts {
accent?: boolean;
surface?: boolean;
unbounded?: boolean;
}
/**
* HOC that adds ripples to any component
*/
declare export var withRipple: (props?: WithRippleOpts) => <P: {}>(Component: React.ComponentType<P & RMWC.WithRippleProps>) => React.ComponentType<P & RMWC.WithRippleProps>;
declare export {};
declare export interface RippleSurfaceProps {
className: string;
style: Object;
}
declare export interface RippleProps {
/** Makes the ripple unbounded */
unbounded?: boolean;
/** Makes the ripple primary */
primary?: boolean;
/** Makes the ripple an accent color*/
accent?: boolean;
/** makes the ripple disabled */
disabled?: boolean;
/** For internal use */
surface?: boolean | RippleSurface;
}
declare type ActivateEventTypes<S> = SyntheticMouseEvent<S> | SyntheticTouchEvent<S> | SyntheticKeyboardEvent<S> | SyntheticFocusEvent<S>;
/** A component for adding Ripples to other components. */
declare export class Ripple extends FoundationComponent<RippleProps> {}
declare export class RippleSurface extends React.PureComponent<React.Element<HTMLDivElement>> {}
declare interface WithRippleOpts {
accent?: boolean;
surface?: boolean;
unbounded?: boolean;
}
/**
* HOC that adds ripples to any component
*/
declare export var withRipple: (props?: WithRippleOpts) => <P: {}>(Component: React.ComponentType<P & RMWC.WithRippleProps>) => React.ComponentType<P & RMWC.WithRippleProps>;
declare export {};
}

@@ -5,3 +5,2 @@ // @flow

import { FoundationComponent } from '@rmwc/base';
import { type IconProps, type IconPropT } from '@rmwc/icon';
import { Menu } from '@rmwc/menu';

@@ -11,54 +10,60 @@

import type { IconProps, IconPropT } from '@rmwc/icon';
declare export interface FormattedOption extends Object {
label: string;
value: string;
options?: FormattedOption[];
}
declare export interface SelectProps {
/** The value for a controlled select. */
value?: string;
/** Options accepts flat arrays, value => label maps, and more. See examples for details. */
options?: FormattedOption[] | string[] | {
[value: string]: string;
};
/** A label for the form control. */
label?: string;
/** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */
placeholder?: string;
/** Makes the select outlined. */
outlined?: boolean;
/** Disables the form control. */
disabled?: boolean;
/** Renders a non native / enhanced dropdown */
enhanced?: boolean;
/** Props for the root element. By default, additional props spread to the native select element. */
rootProps?: Object;
/** A reference to the native select element. Not applicable when `enhanced` is true. */
inputRef?: (ref: HTMLSelectElement | null) => void;
/** A className for the root element. */
className?: string;
/** Add a leading icon. */
withLeadingIcon?: IconPropT;
}
declare interface SelectState {
selectedIndex: number;
selectedTextContent: string;
menuOpen: boolean;
}
declare export class SelectBase extends FoundationComponent<SelectProps, SelectState> {}
declare export class SelectIcon extends FoundationComponent<IconProps> {}
declare export interface SelectHelperTextProps {
/** Make the help text always visible */
persistent?: boolean;
/** Make the help a validation message style */
validationMsg?: boolean;
}
declare export var SelectHelperText: React.ComponentType<SelectHelperTextProps & RMWC.ComponentProps>;
/**
* A Select Component
*/
declare export var Select: (props: SelectProps & RMWC.ComponentProps) => React.Node;
declare export {};
declare export interface FormattedOption extends Object {
label: string;
value: string;
options?: FormattedOption[];
}
declare export interface SelectProps {
/** The value for a controlled select. */
value?: string;
/** Options accepts flat arrays, value => label maps, and more. See examples for details. */
options?: FormattedOption[] | string[] | {
[value: string]: string;
};
/** A label for the form control. */
label?: string;
/** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */
placeholder?: string;
/** Makes the select outlined. */
outlined?: boolean;
/** Disables the form control. */
disabled?: boolean;
/** Renders a non native / enhanced dropdown */
enhanced?: boolean;
/** Props for the root element. By default, additional props spread to the native select element. */
rootProps?: Object;
/** A reference to the native select element. Not applicable when `enhanced` is true. */
inputRef?: (ref: HTMLSelectElement | null) => void;
/** A className for the root element. */
className?: string;
/** Add a leading icon. */
withLeadingIcon?: IconPropT;
}
declare interface SelectState {
selectedIndex: number;
selectedTextContent: string;
menuOpen: boolean;
}
declare export class SelectBase extends FoundationComponent<SelectProps, SelectState> {}
declare export class SelectIcon extends FoundationComponent<IconProps> {}
declare export interface SelectHelperTextProps {
/** Make the help text always visible */
persistent?: boolean;
/** Make the help a validation message style */
validationMsg?: boolean;
}
declare export var SelectHelperText: React.ComponentType<SelectHelperTextProps & RMWC.ComponentProps>;
/**
* A Select Component
*/
declare export var Select: (props: SelectProps & RMWC.ComponentProps) => React.Node;
declare export {};
}
// @flow
import * as React from 'react';
import * as RMWC from '@rmwc/types';

@@ -9,32 +8,36 @@ import { FoundationComponent } from '@rmwc/base';

declare export interface SliderProps {
/** A callback that fires when the Slider stops sliding which takes an event with event.detail.value set to the Slider's value. */
onChange?: (evt: RMWC.CustomEventT<{
value: number;
}>) => void;
/** A callback that fires continuously while the Slider is sliding that takes an event with event.detail.value set to the Slider's value. */
onInput?: (evt: RMWC.CustomEventT<{
value: number;
}>) => void;
/** The value of the Slider. */
value?: number | string;
/** The minimum value of the Slider. */
min?: number | string;
/** The maximum value of the Slider. */
max?: number | string;
/** A step to quantize values by. */
step?: number | string;
/** Displays the exact value of the Slider on the knob. */
discrete?: boolean;
/** Displays the individual step markers on the Slider track. */
displayMarkers?: boolean;
/** Disables the control. */
disabled?: boolean;
}
declare type SliderState = {
trackMarkersCount: number;
};
declare export class Slider extends FoundationComponent<SliderProps, SliderState> {}
declare export {};
import * as React from 'react';
declare export interface SliderProps {
/** A callback that fires when the Slider stops sliding which takes an event with event.detail.value set to the Slider's value. */
onChange?: (evt: RMWC.CustomEventT<{
value: number;
}>) => void;
/** A callback that fires continuously while the Slider is sliding that takes an event with event.detail.value set to the Slider's value. */
onInput?: (evt: RMWC.CustomEventT<{
value: number;
}>) => void;
/** The value of the Slider. */
value?: number | string;
/** The minimum value of the Slider. */
min?: number | string;
/** The maximum value of the Slider. */
max?: number | string;
/** A step to quantize values by. */
step?: number | string;
/** Displays the exact value of the Slider on the knob. */
discrete?: boolean;
/** Displays the individual step markers on the Slider track. */
displayMarkers?: boolean;
/** Disables the control. */
disabled?: boolean;
}
declare type SliderState = {
trackMarkersCount: number;
};
declare export class Slider extends FoundationComponent<SliderProps, SliderState> {}
declare export {};
}

@@ -5,52 +5,56 @@ // @flow

import { FoundationComponent } from '@rmwc/base';
import { type IconButtonProps } from '@rmwc/icon-button';
declare module '@rmwc/snackbar' {
import type { IconButtonProps } from '@rmwc/icon-button';
declare export interface SnackbarProps {
/** Show the Snackbar. */
open?: boolean;
/** A callback thats fired when the Snackbar shows. */
onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
/** A callback thats fired when the Snackbar hides. */
onClose?: (evt: RMWC.CustomEventT<{}>) => void;
/** A string or other renderable JSX to be used as the message body. */
message?: React.Node;
/** One or more actions to add to the snackbar. */
action?: React.Node | React.Node[];
/** Milliseconds to show the Snackbar for. */
timeout?: number;
/** Places the action underneath the message text. */
stacked?: boolean;
leading?: boolean;
dismissIcon?: boolean | string;
/** Whether or not your want clicking an action to close the Snackbar. */
dismissesOnAction?: boolean;
}
declare export interface DeprecatedSnackbarProps {
/** DEPRECATED: Use open. */
show?: boolean;
/** DEPRECATED: Use onOpen. */
onShow?: (evt: Event) => void;
/** DEPRECATED: Use onClose. */
onHide?: (evt: Event) => void;
/** DEPRECATED: Use leading. */
alignStart?: boolean;
/** DEPRECATED: No longer applicable. */
multiline?: boolean;
/** DEPRECATED: Use stacked. */
actionOnBottom?: boolean;
/** DEPRECATED: Use the actions prop. */
actionHandler?: () => void;
/** DEPRECATED: Use the actions prop. */
actionText?: React.Node;
}
declare export var SnackbarAction: React.ComponentType<RMWC.ComponentProps>;
declare export var SnackbarDismiss: React.ComponentType<IconButtonProps & RMWC.ComponentProps>;
/**
* A Snackbar component for notifications.
*/
declare export class Snackbar extends FoundationComponent<SnackbarProps & DeprecatedSnackbarProps> {}
declare export interface SnackbarProps {
/** Show the Snackbar. */
open?: boolean;
/** A callback thats fired when the Snackbar shows. */
onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
/** A callback thats fired when the Snackbar hides. */
onClose?: (evt: RMWC.CustomEventT<{}>) => void;
/** A string or other renderable JSX to be used as the message body. */
message?: React.Node;
/** One or more actions to add to the snackbar. */
action?: React.Node | React.Node[];
/** Milliseconds to show the Snackbar for. */
timeout?: number;
/** Places the action underneath the message text. */
stacked?: boolean;
leading?: boolean;
dismissIcon?: boolean | string;
/** Whether or not your want clicking an action to close the Snackbar. */
dismissesOnAction?: boolean;
}
declare export interface DeprecatedSnackbarProps {
/** DEPRECATED: Use open. */
show?: boolean;
/** DEPRECATED: Use onOpen. */
onShow?: (evt: Event) => void;
/** DEPRECATED: Use onClose. */
onHide?: (evt: Event) => void;
/** DEPRECATED: Use leading. */
alignStart?: boolean;
/** DEPRECATED: No longer applicable. */
multiline?: boolean;
/** DEPRECATED: Use stacked. */
actionOnBottom?: boolean;
/** DEPRECATED: Use the actions prop. */
actionHandler?: () => void;
/** DEPRECATED: Use the actions prop. */
actionText?: React.Node;
}
declare export var SnackbarAction: React.ComponentType<RMWC.ComponentProps>;
declare export var SnackbarDismiss: React.ComponentType<IconButtonProps & RMWC.ComponentProps>;
/**
* A Snackbar component for notifications.
*/
declare export class Snackbar extends FoundationComponent<SnackbarProps & DeprecatedSnackbarProps> {}
}
// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { ToggleableFoundationComponent, type ToggleableFoundationProps } from '@rmwc/toggleable';
import { ToggleableFoundationComponent } from '@rmwc/toggleable';
declare module '@rmwc/switch' {
import type { ToggleableFoundationProps } from '@rmwc/toggleable';
declare export interface SwitchProps extends RMWC.WithRippleProps, ToggleableFoundationProps {
}
declare export var SwitchRoot: React.ComponentType<SwitchProps & RMWC.ComponentProps>;
declare export class Switch extends ToggleableFoundationComponent<SwitchProps> {}
declare export interface SwitchProps extends RMWC.WithRippleProps, ToggleableFoundationProps {
}
declare export var SwitchRoot: React.ComponentType<SwitchProps & RMWC.ComponentProps>;
declare export class Switch extends ToggleableFoundationComponent<SwitchProps> {}
}
// @flow
declare export * from './tab-bar-context';
declare export * from './tab-bar';
declare export * from './tab-indicator';
declare export * from './tab-scroller';
declare export * from './tab';

@@ -12,2 +7,9 @@

declare export * from './tab-bar-context';
declare export * from './tab-bar';
declare export * from './tab-indicator';
declare export * from './tab-scroller';
declare export * from './tab';
}

@@ -1,3 +0,2 @@

// @flow
import * as React from 'react';
export type TabBarContextT = {

@@ -4,0 +3,0 @@ onTabInteraction: (evt: any) => void;

@@ -1,6 +0,5 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';
import { TabScroller } from './tab-scroller';
/************************************************************

@@ -7,0 +6,0 @@ * TabBar

@@ -1,4 +0,3 @@

// @flow
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';
export class TabIndicator extends FoundationComponent<{}> {}

@@ -1,5 +0,4 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { FoundationComponent } from '@rmwc/base';
export var TabScrollerRoot: React.ComponentType<RMWC.ComponentProps>;

@@ -6,0 +5,0 @@ export var TabScrollerScrollArea: React.ComponentType<RMWC.ComponentProps>;

@@ -1,6 +0,5 @@

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type IconProps, type IconPropT } from '@rmwc/icon';
import { type TabBarContextT } from './tab-bar-context';
export interface TabProps {

@@ -7,0 +6,0 @@ /** A label for the tab. */

// @flow
import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { type IconProps, type IconPropT } from '@rmwc/icon';
import { FoundationComponent } from '@rmwc/base';

@@ -9,59 +8,64 @@

import type { IconProps, IconPropT } from '@rmwc/icon';
/*********************************************************************
* TextField
*********************************************************************/
declare export interface TextFieldProps {
/** Makes a multiline TextField. */
textarea?: boolean;
/** Sets the value for controlled TextFields. */
value?: string | number;
/** Makes the TextField fullwidth. */
fullwidth?: boolean;
/** Disables the input. */
disabled?: boolean;
/** Mark the input as required. */
required?: boolean;
/** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used. */
invalid?: boolean;
/** Outline the TextField */
outlined?: boolean;
/** A label for the input. */
label?: React.Node;
/** Add a leading icon. */
withLeadingIcon?: IconPropT;
/** Add a trailing icon. */
withTrailingIcon?: IconPropT;
/** By default, props spread to the input. These props are for the component's root container. */
rootProps?: Object;
/** A reference to the native input or textarea. */
inputRef?: (ref: HTMLInputElement | HTMLTextAreaElement | null) => void;
/** The type of input field to render */
type?: string;
}
declare export interface DeprecatedTextfieldProps {
/** DEPRECATED: Is being removed from MCW. */
dense?: boolean;
}
/** A TextField component for accepting text input from a user. */
declare export class TextField extends FoundationComponent<TextFieldProps & DeprecatedTextfieldProps> {}
/*********************************************************************
* Helper Text
*********************************************************************/
declare export interface TextFieldHelperTextProps {
/** Make the help text always visible */
persistent?: boolean;
/** Make the help a validation message style */
validationMsg?: boolean;
}
/** A help text component */
declare export var TextFieldHelperText: React.ComponentType<TextFieldHelperTextProps & RMWC.ComponentProps>;
/*********************************************************************
* Icon
*********************************************************************/
/**
* An Icon in a TextField
*/
declare export class TextFieldIcon extends FoundationComponent<IconProps> {}
/*********************************************************************
* TextField
*********************************************************************/
declare export interface TextFieldProps {
/** Makes a multiline TextField. */
textarea?: boolean;
/** Sets the value for controlled TextFields. */
value?: string | number;
/** Makes the TextField fullwidth. */
fullwidth?: boolean;
/** Disables the input. */
disabled?: boolean;
/** Mark the input as required. */
required?: boolean;
/** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used. */
invalid?: boolean;
/** Outline the TextField */
outlined?: boolean;
/** A label for the input. */
label?: React.Node;
/** Add a leading icon. */
withLeadingIcon?: IconPropT;
/** Add a trailing icon. */
withTrailingIcon?: IconPropT;
/** By default, props spread to the input. These props are for the component's root container. */
rootProps?: Object;
/** A reference to the native input or textarea. */
inputRef?: (ref: HTMLInputElement | HTMLTextAreaElement | null) => void;
/** The type of input field to render */
type?: string;
}
declare export interface DeprecatedTextfieldProps {
/** DEPRECATED: Is being removed from MCW. */
dense?: boolean;
}
/** A TextField component for accepting text input from a user. */
declare export class TextField extends FoundationComponent<TextFieldProps & DeprecatedTextfieldProps> {}
/*********************************************************************
* Helper Text
*********************************************************************/
declare export interface TextFieldHelperTextProps {
/** Make the help text always visible */
persistent?: boolean;
/** Make the help a validation message style */
validationMsg?: boolean;
}
/** A help text component */
declare export var TextFieldHelperText: React.ComponentType<TextFieldHelperTextProps & RMWC.ComponentProps>;
/*********************************************************************
* Icon
*********************************************************************/
/**
* An Icon in a TextField
*/
declare export class TextFieldIcon extends FoundationComponent<IconProps> {}
}

@@ -8,30 +8,33 @@ // @flow

declare export interface ThemeProps {
/** A theme option as a string, a space separated string for multiple values, or an array of valid theme options. */
use: RMWC.ThemePropT;
/** Collapse the styles directly onto the child component. This eliminates the need for a wrapping `span` element and may be required for applying things like background-colors. */
wrap?: boolean;
}
/**
* A Theme Component.
*/
declare export var Theme: {
(props: RMWC.MergeInterfacesT<ThemeProps, RMWC.ComponentProps>): React.Element<any>;
displayName: string;
};
declare export interface ThemeProviderProps extends RMWC.ComponentProps {
/** Any theme option pointing to a valid CSS value. */
options: {
[key: string]: string;
};
/** Additional standard inline styles that will be merged into the style tag. */
style?: Object;
/** Instead of injecting a div tag, wrap a child component by merging the theme styles directly onto it. Useful when you don't want to mess with layout. */
wrap?: boolean;
/** Children to render */
children?: React.Node;
}
/** A ThemeProvider. This sets theme colors for its child tree. */
declare export class ThemeProvider extends React.Component<ThemeProviderProps> {}
declare export interface ThemeProps {
/** A theme option as a string, a space separated string for multiple values, or an array of valid theme options. */
use: RMWC.ThemePropT;
/** Collapse the styles directly onto the child component. This eliminates the need for a wrapping `span` element and may be required for applying things like background-colors. */
wrap?: boolean;
}
/**
* A Theme Component.
*/
declare export var Theme: {
(props: RMWC.MergeInterfacesT<ThemeProps, RMWC.ComponentProps>): React.Element<any>;
displayName: string;
};
declare export interface ThemeProviderProps extends RMWC.ComponentProps {
/** Any theme option pointing to a valid CSS value. */
options: {
[key: string]: string;
};
/** Additional standard inline styles that will be merged into the style tag. */
style?: Object;
/** Instead of injecting a div tag, wrap a child component by merging the theme styles directly onto it. Useful when you don't want to mess with layout. */
wrap?: boolean;
/** Children to render */
children?: React.Node;
}
/** A ThemeProvider. This sets theme colors for its child tree. */
declare export class ThemeProvider extends React.Component<ThemeProviderProps> {}
}

@@ -1,3 +0,2 @@

// @flow
import * as RMWC from '@rmwc/types';
export var themeOptions: RMWC.ThemeOptionT[];

@@ -1,2 +0,1 @@

// @flow
export var getRgb: (color: string) => {

@@ -3,0 +2,0 @@ r: number;

// @flow
import * as React from 'react';
import { FoundationComponent, type FoundationProps } from '@rmwc/base';
import { FoundationComponent } from '@rmwc/base';
declare module '@rmwc/toggleable' {
import type { FoundationProps } from '@rmwc/base';
declare export interface ToggleableFoundationProps {
/** A DOM ID for the toggle. */
id?: string;
/** Disables the control. */
disabled?: boolean;
/** Toggle the control on and off. */
checked?: boolean;
/** The value of the control. */
value?: string | number | string[];
/** A label for the control. */
label?: React.Node;
/** By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. */
rootProps?: Object;
/** A reference to the native input. */
inputRef?: (ref: HTMLInputElement | null) => void;
}
declare export class ToggleableFoundationComponent<P: ToggleableFoundationProps, S: any = {}> extends FoundationComponent<P & FoundationProps, S> {}
declare export interface ToggleableFoundationProps {
/** A DOM ID for the toggle. */
id?: string;
/** Disables the control. */
disabled?: boolean;
/** Toggle the control on and off. */
checked?: boolean;
/** The value of the control. */
value?: string | number | string[];
/** A label for the control. */
label?: React.Node;
/** By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. */
rootProps?: Object;
/** A reference to the native input. */
inputRef?: (ref: HTMLInputElement | null) => void;
}
declare export class ToggleableFoundationComponent<P: ToggleableFoundationProps, S: any = {}> extends FoundationComponent<P & FoundationProps, S> {}
}

@@ -5,52 +5,56 @@ // @flow

import { FoundationComponent } from '@rmwc/base';
import { type IconProps } from '@rmwc/icon';
declare module '@rmwc/toolbar' {
import type { IconProps } from '@rmwc/icon';
declare export interface ToolbarProps {
/** Makes the toolbar fixed */
fixed?: boolean;
/** Adds a waterfall effect on scroll */
waterfall?: boolean;
/** Fixes the last row of a multi-row toolbar */
fixedLastrowOnly?: boolean;
/** makes the toolbar flexible */
flexible?: boolean;
/** further defines the background and title movement behavior, use in conjunction with flexible. */
flexibleDefaultBehavior?: boolean;
}
declare export var ToolbarRoot: React.ComponentType<ToolbarProps & RMWC.ComponentProps>;
/** A Toolbar title */
declare export var ToolbarTitle: React.ComponentType<RMWC.ComponentProps>;
declare export interface ToolbarSectionProps {
/** Aligns the ToolbarSection at the start. */
alignStart?: boolean;
/** Aligns the ToolbarSection at the end. */
alignEnd?: boolean;
/** Makes the ToolbarSection shrink to fit. */
shrinkToFit?: boolean;
}
/** A section of the Toolbar */
declare export var ToolbarSection: React.ComponentType<ToolbarSectionProps & RMWC.ComponentProps>;
/** A Toolbar row */
declare export var ToolbarRow: React.ComponentType<RMWC.ComponentProps>;
/**
* This component can be placed after a fixed Toolbar component to fill in the space.
*/
declare export var ToolbarFixedAdjust: React.ComponentType<RMWC.ComponentProps>;
declare export interface ToolbarMenuIconProps extends IconProps {
}
/**
* A Menu Icon For the Toolbar. This is an instance of the Icon component.
*/
declare export var ToolbarMenuIcon: React.ComponentType<ToolbarMenuIconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export interface ToolbarIconProps extends IconProps {
}
/**
* A standard Icon for toolbar actions. This is an instance of the Icon component.
*/
declare export var ToolbarIcon: React.ComponentType<ToolbarIconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export class Toolbar extends FoundationComponent<ToolbarProps> {}
declare export interface ToolbarProps {
/** Makes the toolbar fixed */
fixed?: boolean;
/** Adds a waterfall effect on scroll */
waterfall?: boolean;
/** Fixes the last row of a multi-row toolbar */
fixedLastrowOnly?: boolean;
/** makes the toolbar flexible */
flexible?: boolean;
/** further defines the background and title movement behavior, use in conjunction with flexible. */
flexibleDefaultBehavior?: boolean;
}
declare export var ToolbarRoot: React.ComponentType<ToolbarProps & RMWC.ComponentProps>;
/** A Toolbar title */
declare export var ToolbarTitle: React.ComponentType<RMWC.ComponentProps>;
declare export interface ToolbarSectionProps {
/** Aligns the ToolbarSection at the start. */
alignStart?: boolean;
/** Aligns the ToolbarSection at the end. */
alignEnd?: boolean;
/** Makes the ToolbarSection shrink to fit. */
shrinkToFit?: boolean;
}
/** A section of the Toolbar */
declare export var ToolbarSection: React.ComponentType<ToolbarSectionProps & RMWC.ComponentProps>;
/** A Toolbar row */
declare export var ToolbarRow: React.ComponentType<RMWC.ComponentProps>;
/**
* This component can be placed after a fixed Toolbar component to fill in the space.
*/
declare export var ToolbarFixedAdjust: React.ComponentType<RMWC.ComponentProps>;
declare export interface ToolbarMenuIconProps extends IconProps {
}
/**
* A Menu Icon For the Toolbar. This is an instance of the Icon component.
*/
declare export var ToolbarMenuIcon: React.ComponentType<ToolbarMenuIconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export interface ToolbarIconProps extends IconProps {
}
/**
* A standard Icon for toolbar actions. This is an instance of the Icon component.
*/
declare export var ToolbarIcon: React.ComponentType<ToolbarIconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
declare export class Toolbar extends FoundationComponent<ToolbarProps> {}
}
// @flow
import * as RMWC from '@rmwc/types';
import { type IconProps } from '@rmwc/icon';
import * as React from 'react';

@@ -8,62 +7,66 @@

import type { IconProps } from '@rmwc/icon';
declare export interface TopAppBarProps {
/** Emits when the navigation icon is clicked. */
onNav?: (evt: RMWC.CustomEventT<{}>) => void;
/** Styles the top app bar as a fixed top app bar. */
fixed?: boolean;
/** Styles the top app bar as a prominent top app bar. */
prominent?: boolean;
/** Styles the top app bar as a short top app bar. */
short?: boolean;
/** Styles the top app bar to always be collapsed. */
shortCollapsed?: boolean;
/** Styles the top app bar to be dense. */
dense?: boolean;
}
declare export var TopAppBarRoot: React.ComponentType<TopAppBarProps & RMWC.ComponentProps>;
/** A row for the app bar. */
declare export var TopAppBarRow: React.ComponentType<RMWC.ComponentProps>;
declare export interface TopAppBarSectionProps {
/** Aligns the section to the start. */
alignStart?: boolean;
/** Aligns the section to the end. */
alignEnd?: boolean;
}
/** A section for the app bar. */
declare export var TopAppBarSection: React.ComponentType<TopAppBarSectionProps & RMWC.ComponentProps>;
/** A navigation icon for the top app bar. This is an instance of the Icon component. */
declare export var TopAppBarNavigationIcon: React.ComponentType<IconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
/** Action items for the top app bar. This is an instance of the Icon component.*/
declare export var TopAppBarActionItem: React.ComponentType<IconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
/** A title for the top app bar. */
declare export var TopAppBarTitle: React.ComponentType<RMWC.ComponentProps>;
declare export interface TopAppBarFixedAdjustProps {
/** Class used to style the content below the dense top app bar to prevent the top app bar from covering it. */
dense?: boolean;
/** Class used to style the content below the prominent top app bar to prevent the top app bar from covering it. */
prominent?: boolean;
/** Class used to style the content below the top app bar when styled as both prominent and dense, to prevent the top app bar from covering it. */
denseProminent?: boolean;
/** Class used to style the content below the short top app bar to prevent the top app bar from covering it. */
short?: boolean;
}
/** An optional component to fill the space when the TopAppBar is fixed. Place it directly after the TopAppBar. */
declare export var TopAppBarFixedAdjust: React.ComponentType<TopAppBarFixedAdjustProps & RMWC.ComponentProps>;
declare export var TopAppBar: (props: TopAppBarProps & RMWC.ComponentProps) => React.Node;
declare export interface SimpleTopAppBarProps extends TopAppBarProps {
/** The title for the App Bar. */
title?: React.Node;
/** An array of props that will be used to create TopAppBarActionItems. */
actionItems?: Object[];
/** Props for the NavigationIcon, which is an instance of the Icon component. You can also set this to `true` and use the `onNav` prop to handle interactions.*/
navigationIcon?: Object | boolean;
/** Additional content to place in the start section. */
startContent?: React.Node;
/** Additional content to place in the end section. */
endContent?: React.Node;
}
/** A simplified syntax for creating an AppBar. */
declare export class SimpleTopAppBar extends React.Component<SimpleTopAppBarProps> {}
declare export interface TopAppBarProps {
/** Emits when the navigation icon is clicked. */
onNav?: (evt: RMWC.CustomEventT<{}>) => void;
/** Styles the top app bar as a fixed top app bar. */
fixed?: boolean;
/** Styles the top app bar as a prominent top app bar. */
prominent?: boolean;
/** Styles the top app bar as a short top app bar. */
short?: boolean;
/** Styles the top app bar to always be collapsed. */
shortCollapsed?: boolean;
/** Styles the top app bar to be dense. */
dense?: boolean;
}
declare export var TopAppBarRoot: React.ComponentType<TopAppBarProps & RMWC.ComponentProps>;
/** A row for the app bar. */
declare export var TopAppBarRow: React.ComponentType<RMWC.ComponentProps>;
declare export interface TopAppBarSectionProps {
/** Aligns the section to the start. */
alignStart?: boolean;
/** Aligns the section to the end. */
alignEnd?: boolean;
}
/** A section for the app bar. */
declare export var TopAppBarSection: React.ComponentType<TopAppBarSectionProps & RMWC.ComponentProps>;
/** A navigation icon for the top app bar. This is an instance of the Icon component. */
declare export var TopAppBarNavigationIcon: React.ComponentType<IconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
/** Action items for the top app bar. This is an instance of the Icon component.*/
declare export var TopAppBarActionItem: React.ComponentType<IconProps & RMWC.ComponentProps & RMWC.WithRippleProps>;
/** A title for the top app bar. */
declare export var TopAppBarTitle: React.ComponentType<RMWC.ComponentProps>;
declare export interface TopAppBarFixedAdjustProps {
/** Class used to style the content below the dense top app bar to prevent the top app bar from covering it. */
dense?: boolean;
/** Class used to style the content below the prominent top app bar to prevent the top app bar from covering it. */
prominent?: boolean;
/** Class used to style the content below the top app bar when styled as both prominent and dense, to prevent the top app bar from covering it. */
denseProminent?: boolean;
/** Class used to style the content below the short top app bar to prevent the top app bar from covering it. */
short?: boolean;
}
/** An optional component to fill the space when the TopAppBar is fixed. Place it directly after the TopAppBar. */
declare export var TopAppBarFixedAdjust: React.ComponentType<TopAppBarFixedAdjustProps & RMWC.ComponentProps>;
declare export var TopAppBar: (props: TopAppBarProps & RMWC.ComponentProps) => React.Node;
declare export interface SimpleTopAppBarProps extends TopAppBarProps {
/** The title for the App Bar. */
title?: React.Node;
/** An array of props that will be used to create TopAppBarActionItems. */
actionItems?: Object[];
/** Props for the NavigationIcon, which is an instance of the Icon component. You can also set this to `true` and use the `onNav` prop to handle interactions.*/
navigationIcon?: Object | boolean;
/** Additional content to place in the start section. */
startContent?: React.Node;
/** Additional content to place in the end section. */
endContent?: React.Node;
}
/** A simplified syntax for creating an AppBar. */
declare export class SimpleTopAppBar extends React.Component<SimpleTopAppBarProps> {}
}
// @flow
import * as React from 'react';
declare module '@rmwc/types' {
/**
* Utils
*/
declare export type MergeInterfacesT<A, B> = A & B
/**
* Theming
*/
declare export type ThemeOptionT = 'primary' | 'secondary' | 'background' | 'surface' | 'error' | 'primaryBg' | 'secondaryBg' | 'onPrimary' | 'onSecondary' | 'onSurface' | 'onError' | 'textPrimaryOnBackground' | 'textSecondaryOnBackground' | 'textHintOnBackground' | 'textDisabledOnBackground' | 'textIconOnBackground' | 'textPrimaryOnLight' | 'textSecondaryOnLight' | 'textHintOnLight' | 'textDisabledOnLight' | 'textIconOnLight' | 'textPrimaryOnDark' | 'textSecondaryOnDark' | 'textHintOnDark' | 'textDisabledOnDark' | 'textIconOnDark';
declare export type ThemePropT = ThemeOptionT | ThemeOptionT[];
/**
* Ripples
*/
declare export type RipplePropT = boolean | {
accent?: boolean;
surface?: boolean;
unbounded?: boolean;
};
declare export interface DeprecatedRippleProps {
/** DEPRECATED: pass an options object to the ripple prop `ripple={{accent: true}}` */
accent?: boolean;
/** DEPRECATED: pass an options object to the ripple prop `ripple={{surface: true}}` */
surface?: boolean;
/** DEPRECATED: pass an options object to the ripple prop `ripple={{unbounded: true}}` */
unbounded?: boolean;
}
declare export interface WithRippleProps extends DeprecatedRippleProps {
/** Adds a ripple effect to the component */
ripple?: RipplePropT;
}
/**
* Components
*/
declare export type TagT = string | React.ComponentType<any>;
declare export interface ComponentProps extends Object {
tag?: TagT;
theme?: ThemePropT;
}
declare export type CustomEventT<T> = CustomEvent & SyntheticEvent<EventTarget>;
import * as React from 'react';
/**
* Utils
*/
declare export type MergeInterfacesT<A, B> = A & B
/**
* Theming
*/
declare export type ThemeOptionT = 'primary' | 'secondary' | 'background' | 'surface' | 'error' | 'primaryBg' | 'secondaryBg' | 'onPrimary' | 'onSecondary' | 'onSurface' | 'onError' | 'textPrimaryOnBackground' | 'textSecondaryOnBackground' | 'textHintOnBackground' | 'textDisabledOnBackground' | 'textIconOnBackground' | 'textPrimaryOnLight' | 'textSecondaryOnLight' | 'textHintOnLight' | 'textDisabledOnLight' | 'textIconOnLight' | 'textPrimaryOnDark' | 'textSecondaryOnDark' | 'textHintOnDark' | 'textDisabledOnDark' | 'textIconOnDark';
declare export type ThemePropT = ThemeOptionT | ThemeOptionT[];
/**
* Ripples
*/
declare export type RipplePropT = boolean | {
accent?: boolean;
surface?: boolean;
unbounded?: boolean;
};
declare export interface DeprecatedRippleProps {
/** DEPRECATED: pass an options object to the ripple prop `ripple={{accent: true}}` */
accent?: boolean;
/** DEPRECATED: pass an options object to the ripple prop `ripple={{surface: true}}` */
surface?: boolean;
/** DEPRECATED: pass an options object to the ripple prop `ripple={{unbounded: true}}` */
unbounded?: boolean;
}
declare export interface WithRippleProps extends DeprecatedRippleProps {
/** Adds a ripple effect to the component */
ripple?: RipplePropT;
}
/**
* Components
*/
declare export type TagT = string | React.ComponentType<any>;
declare export interface ComponentProps extends Object {
tag?: TagT;
theme?: ThemePropT;
}
declare export type CustomEventT<T> = CustomEvent & SyntheticEvent<EventTarget>;
}

@@ -8,10 +8,13 @@ // @flow

declare export type TypographyT = 'headline1' | 'headline2' | 'headline3' | 'headline4' | 'headline5' | 'headline6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
declare export interface TypographyProps {
/** The typography style.*/
use: TypographyT;
}
/** The Typography Component */
declare export var Typography: React.ComponentType<TypographyProps & RMWC.ComponentProps>;
declare export type TypographyT = 'headline1' | 'headline2' | 'headline3' | 'headline4' | 'headline5' | 'headline6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
declare export interface TypographyProps {
/** The typography style.*/
use: TypographyT;
}
/** The Typography Component */
declare export var Typography: React.ComponentType<TypographyProps & RMWC.ComponentProps>;
}
{
"name": "@rmwc/types",
"version": "5.0.6-alpha.0",
"version": "5.0.7-alpha.0",
"description": "RMWC Shared Typescript Types",

@@ -29,3 +29,3 @@ "main": "dist/index.js",

"homepage": "https://github.com/jamesmfriedman/rmwc/tree/master/src/types#readme",
"gitHead": "596892ef6dc36dd8a1b284004b46835c25a0c23a"
"gitHead": "53a80a176f78081256894f691cb65c42897cf598"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc