Last active
October 3, 2019 23:22
-
-
Save clarkkozak/e516412bdfe9fde58acb082248238271 to your computer and use it in GitHub Desktop.
evergreen-ui/index.d.ts from https://github.com/segmentio/evergreen/issues/300#issuecomment-530258356
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* tslint:disable:interface-name max-classes-per-file no-empty-interface */ | |
declare module 'evergreen-ui' { | |
import * as React from 'react'; | |
type PositionTypes = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'; | |
type IntentTypes = 'none' | 'success' | 'warning' | 'danger'; | |
type IconNameTypes = | |
'' | |
| 'loading' | |
| 'error' | |
| 'tick-circle' | |
| 'caret-down' | |
| 'cross' | |
| 'menu' | |
| 'list' | |
| 'more' | |
| 'properties' | |
| 'diagram-tree' | |
| 'database' | |
| 'join-table' | |
| 'function' | |
| 'person' | |
| 'import' | |
| 'predictive-analysis' | |
| 'refresh' | |
| 'export'; | |
interface BoxBackground { | |
background?: string; | |
backgroundBlendMode?: string; | |
backgroundClip?: string; | |
backgroundColor?: string; | |
backgroundImage?: string; | |
backgroundOrigin?: string; | |
backgroundPosition?: string; | |
backgroundRepeat?: string; | |
backgroundSize?: string; | |
} | |
interface BoxBorderRadius { | |
borderBottomLeftRadius?: string | number; | |
borderBottomRightRadius?: string | number; | |
borderRadius?: string | number; | |
borderTopLeftRadius?: string | number; | |
borderTopRightRadius?: string | number; | |
} | |
interface BoxBorders { | |
border?: string; | |
borderBottom?: string; | |
borderBottomColor?: string; | |
borderBottomStyle?: string; | |
borderBottomWidth?: string | number; | |
borderColor?: string; | |
borderLeft?: string; | |
borderLeftColor?: string; | |
borderLeftStyle?: string; | |
borderLeftWidth?: string | number; | |
borderRight?: string; | |
borderRightColor?: string; | |
borderRightStyle?: string; | |
borderRightWidth?: string | number; | |
borderStyle?: string; | |
borderTop?: string; | |
borderTopColor?: string; | |
borderTopStyle?: string; | |
borderTopWidth?: string | number; | |
borderWidth?: string | number; | |
} | |
interface BoxShadow { | |
boxShadow?: string; | |
} | |
interface BoxDimensions { | |
height?: string | number; | |
maxHeight?: string | number; | |
maxWidth?: string | number; | |
minHeight?: string | number; | |
minWidth?: string | number; | |
width?: string | number; | |
} | |
interface BoxFlex { | |
alignContent?: string; | |
alignItems?: string; | |
alignSelf?: string; | |
flex?: string | number; | |
flexBasis?: string | number; | |
flexDirection?: string; | |
flexFlow?: string; | |
flexGrow?: string | number; | |
flexShrink?: string | number; | |
flexWrap?: string; | |
justifyContent?: string; | |
justifyItems?: string; | |
justifySelf?: string; | |
order?: string | number; | |
placeContent?: string; | |
placeItems?: string; | |
placeSelf?: string; | |
} | |
interface BoxGrid { | |
columnGap?: string | number; | |
gap?: string | number; | |
grid?: string; | |
gridArea?: string; | |
gridAutoColumns?: string | number; | |
gridAutoFlow?: string; | |
gridAutoRows?: string | number; | |
gridColumn?: string | number; | |
gridColumnEnd?: string | number; | |
gridColumnGap?: string | number; | |
gridColumnStart?: string | number; | |
gridGap?: string | number; | |
gridRow?: string | number; | |
gridRowEnd?: string | number; | |
gridRowGap?: string | number; | |
gridRowStart?: string | number; | |
gridTemplate?: string; | |
gridTemplateAreas?: string; | |
gridTemplateColumns?: string; | |
gridTemplateRows?: string; | |
rowGap?: string | number; | |
} | |
interface BoxInteraction { | |
cursor?: string; | |
pointerEvents?: string; | |
userSelect?: string; | |
visibility?: string; | |
} | |
interface BoxLayout { | |
boxSizing?: string; | |
clear?: string; | |
clearfix?: boolean; | |
display?: 'block' | |
| 'contents' | |
| 'flex' | |
| 'grid' | |
| 'inherit' | |
| 'initial' | |
| 'inline' | |
| 'inline-block' | |
| 'inline-flex' | |
| 'inline-grid' | |
| 'inline-table' | |
| 'list-item' | |
| 'none' | |
| 'table' | |
| 'table-caption' | |
| 'table-cell' | |
| 'table-columnr' | |
| 'table-column-group' | |
| 'table-header-group' | |
| 'table-footer-group' | |
| 'table-row' | |
| 'table-row-group' | |
| ''; | |
float?: string; | |
zIndex?: number; | |
} | |
interface BoxList { | |
listStyle?: string; | |
listStyleType?: string; | |
listStyleImage?: string; | |
listStylePosition?: string; | |
} | |
interface BoxOpacity { | |
opacity?: string | number; | |
} | |
interface BoxOverflow { | |
overflow?: 'auto' | 'hidden' | 'inherit' | 'initial' | 'revert' | 'scroll' | 'unset' | 'visible'; | |
overflowX?: 'auto' | 'hidden' | 'inherit' | 'initial' | 'revert' | 'scroll' | 'unset' | 'visible'; | |
overflowY?: 'auto' | 'hidden' | 'inherit' | 'initial' | 'revert' | 'scroll' | 'unset' | 'visible'; | |
} | |
interface BoxPosition { | |
bottom?: string | number; | |
left?: string | number; | |
position?: 'absolute' | 'fixed' | 'inherit' | 'initial' | 'relative' | 'revert' | 'static' | 'sticky' | 'unset'; | |
right?: string | number; | |
top?: string | number; | |
} | |
interface BoxSpacing { | |
margin?: string | number; | |
marginBottom?: string | number; | |
marginLeft?: string | number; | |
marginRight?: string | number; | |
marginTop?: string | number; | |
marginX?: string | number; | |
marginY?: string | number; | |
padding?: string | number; | |
paddingBottom?: string | number; | |
paddingLeft?: string | number; | |
paddingRight?: string | number; | |
paddingTop?: string | number; | |
paddingX?: string | number; | |
paddingY?: string | number; | |
} | |
interface BoxText { | |
color?: string; | |
font?: string; | |
fontFamily?: string; | |
fontSize?: string | number; | |
fontStyle?: string; | |
fontVariant?: string; | |
fontWeight?: string | number; | |
letterSpacing?: string | number; | |
lineHeight?: string | number; | |
textAlign?: 'center' | 'end' | 'inherit' | 'justify' | 'left' | 'match-parent' | 'revert' | 'right' | 'start' | 'unset'; | |
textDecoration?: string; | |
textOverflow?: string; | |
textShadow?: string; | |
textTransform?: string; | |
whiteSpace?: string; | |
wordBreak?: string; | |
wordWrap?: string; | |
} | |
interface BoxTransform { | |
transform?: string; | |
transformOrigin?: string; | |
} | |
interface BoxTransition { | |
transition?: string; | |
transitionDelay?: string; | |
transitionDuration?: string; | |
transitionProperty?: string; | |
transitionTimingFunction?: string; | |
} | |
interface UiBoxPropsType extends BoxBackground, | |
BoxBorderRadius, | |
BoxBorders, | |
BoxShadow, | |
BoxDimensions, | |
BoxFlex, | |
BoxGrid, | |
BoxInteraction, | |
BoxLayout, | |
BoxList, | |
BoxOpacity, | |
BoxOverflow, | |
BoxPosition, | |
BoxSpacing, | |
BoxText, | |
BoxTransform, | |
BoxTransition { | |
is?: React.ReactNode; | |
to?: string; | |
css?: object; | |
style?: object; | |
innerRef?: (ref: HTMLElement) => void; | |
onMouseDown?: (e: React.MouseEvent<HTMLInputElement>) => void; | |
onMouseUp?: (e: React.MouseEvent<HTMLInputElement>) => void; | |
} | |
export interface AlertProps extends BoxDimensions, BoxLayout, BoxPosition, BoxSpacing { | |
intent: IntentTypes; | |
title?: React.ReactNode; | |
hasTrim?: boolean; | |
hasIcon?: boolean; | |
isRemoveable?: boolean; | |
onRemove?: () => void; | |
appearance?: 'default' | 'card'; | |
children?: React.ReactNode; | |
} | |
export class Alert extends React.PureComponent<AlertProps> { | |
} | |
// https://github.com/downshift-js/downshift | |
export interface AutocompleteProps { | |
title?: React.ReactNode; | |
items: any[]; | |
itemToString?: (i: any) => string; | |
children: (props: { | |
toggle: () => void, | |
getRef: (ref: React.RefObject) => void, | |
isShown: NonNullable<PopoverProps['isShown']>, | |
getInputProps: () => { | |
onKeyDown: (e: React.ChangeEvent<any>) => void; | |
onChange: (e: React.ChangeEvent<any>) => void; | |
onBlur: (e: React.ChangeEvent<any>) => void; | |
}, | |
openMenu: () => any, | |
inputValue: string, | |
}, | |
) => React.ReactNode; | |
itemSize?: number; | |
position?: PositionTypes; | |
isFilterDisabled?: boolean; | |
popoverMinWidth?: number; | |
popoverMaxHeight?: number; | |
selectedItem?: any; | |
buttonProps?: buttonProps; | |
onChange: (selectedItem: any) => void; | |
} | |
export class Autocomplete extends React.PureComponent<AutocompleteProps> { | |
} | |
export interface AvatarProps { | |
src?: string; | |
size?: number; | |
name?: string; | |
hashValue?: string; | |
isSolid?: boolean; | |
color?: string; | |
getInitials?: (name: string) => string; | |
forceShowInitials?: boolean; | |
sizeLimitOneCharacter?: number; | |
} | |
export class Avatar extends React.PureComponent<AvatarProps> { | |
} | |
export interface CheckboxProps extends BoxDimensions, BoxLayout, BoxPosition, BoxSpacing, TextProps { | |
id?: string; | |
name?: string; | |
label?: React.ReactNode; | |
value?: string; | |
checked?: boolean; | |
indeterminate?: boolean; | |
onChange?: (e: React.ChangeEvent<string>) => void; | |
disabled?: boolean; | |
isInvalid?: boolean; | |
appearance?: 'default'; | |
} | |
export class Checkbox extends React.PureComponent<CheckboxProps> { | |
} | |
export interface ButtonProps extends BoxDimensions, BoxLayout, BoxPosition, BoxSpacing, TextProps { | |
type?: 'submit' | 'button'; | |
intent?: IntentTypes; | |
appearance?: 'default' | 'minimal' | 'primary' ; | |
isLoading?: boolean; | |
isActive?: boolean; | |
iconBefore?: IconNameTypes; | |
iconAfter?: IconNameTypes; | |
disabled?: boolean; | |
className?: string; | |
onClick?: (e: React.ChangeEvent<any>) => void | false | undefined; | |
} | |
export class Button extends React.PureComponent<ButtonProps> { | |
} | |
export class Card extends React.PureComponent<PaneProps> { | |
} | |
export interface IconProps { | |
color?: string; | |
icon: IconNameTypes; | |
size?: number; | |
title?: string; | |
style?: Record<string, string | number>; | |
} | |
export class Icon extends React.PureComponent<IconProps> { | |
} | |
export interface FormFieldProps extends BoxDimensions, BoxSpacing, BoxPosition, BoxLayout { | |
label: NonNullable<React.ReactNode>; | |
labelFor?: string; | |
description?: React.ReactNode; | |
hint?: React.ReactNode; | |
validationMessage?: React.ReactNode; | |
} | |
export class FormField extends React.PureComponent<FormFieldProps> { | |
} | |
export class FormFieldDescription extends React.PureComponent<ParagraphProps> { | |
} | |
export class FormFieldHint extends React.PureComponent<ParagraphProps> { | |
} | |
export interface FormFieldLabelProps extends LabelProps { | |
isAstrixShown?: boolean; | |
} | |
export class FormFieldLabel extends React.PureComponent<FormFieldLabelProps> { | |
} | |
export interface FormFieldValidationMessageProps extends PaneProps { | |
children?: React.ReactNode; | |
} | |
export class FormFieldValidationMessage extends React.PureComponent<FormFieldValidationMessageProps> { | |
} | |
export interface IconButtonProps extends ButtonProps { | |
icon: IconNameTypes; | |
iconAim?: 'down' | 'up'; | |
iconSize?: number; | |
} | |
export class IconButton extends React.PureComponent<IconButtonProps> { | |
} | |
export interface LabelProps extends TextProps { | |
htmlFor?: string; | |
className?: string; | |
} | |
export class Label extends React.PureComponent<LabelProps> { | |
} | |
export interface MenuProps { | |
children: React.ReactNode[]; | |
} | |
export interface MenuItemProps { | |
is?: string | (() => void); | |
onSelect?: () => void; | |
icon?: React.JSX; | |
children?: React.JSX; | |
secondaryText?: React.JSX; | |
appearance?: 'default'; | |
intent?: IntentTypes; | |
} | |
export class Menu extends React.PureComponent<MenuProps> { | |
public static Item = class MenuItem extends React.PureComponent<MenuItemProps> { | |
}; | |
public static Divider = class MenuDivider extends React.PureComponent { | |
}; | |
} | |
export interface PaneProps extends UiBoxPropsType { | |
background?: 'tint1' | 'tint2' | 'overlay' | 'yellowTint' | 'greenTint' | 'orangeTint' | 'redTint' | 'blueTint' | 'purpleTint' | 'tealTint'; | |
elevation?: 0 | 1 | 2 | 3 | 4; | |
hoverElevation?: 0 | 1 | 2 | 3 | 4; | |
activeElevation?: 0 | 1 | 2 | 3 | 4; | |
border?: string | boolean; | |
borderTop?: string | boolean; | |
borderRight?: string | boolean; | |
borderBottom?: string | boolean; | |
borderLeft?: string | boolean; | |
} | |
export class Pane extends React.PureComponent<PaneProps> { | |
} | |
export interface PopoverProps { | |
position?: PositionTypes; | |
isShown?: boolean; | |
trigger?: 'click' | 'hover'; | |
content: React.ReactNode | ((object: { close: () => void }) => React.ReactNode); | |
children: | |
((props: { toggle: () => void, getRef: (ref: React.RefObject) => void, isShow: NonNullable<PopoverProps['isShown']> }) => React.ReactNode) | |
| React.ReactNode; | |
display?: string; | |
minWidth?: number | string; | |
minHeight?: number | string; | |
animationDuration?: number; | |
onOpen?: () => void; | |
onClose?: () => void; | |
onOpenComplete?: () => void; | |
onCloseComplete?: () => void; | |
onBodyClick?: () => void; | |
bringFocusInside?: boolean; | |
shouldCloseOnExternalClick?: boolean; | |
} | |
export class Popover extends React.PureComponent<PopoverProps> { | |
} | |
export interface ParagraphProps extends UiBoxPropsType { | |
size?: 300 | 400 | 500; | |
fontFamily?: 'ui' | 'display' | 'mono'; | |
} | |
export class Paragraph extends React.PureComponent<ParagraphProps> { | |
} | |
export interface PositionerProps { | |
position?: PositionTypes; | |
isShown?: boolean; | |
children: (params: { | |
top: number, | |
left: number, | |
zIndex: NonNullable<StackProps['value']>, | |
css, | |
style: { | |
transformOrigin: string, | |
left: number, | |
top: number, | |
zIndex: NonNullable<StackProps['value']>, | |
}, | |
getRef: (ref: React.RefObject) => void, | |
animationDuration: PositionerProps['animationDuration'], | |
state: 'exited' | 'entering' | 'entered' | 'exiting'; | |
}) => React.ReactNode; | |
innerRef?: (ref: React.RefObject) => void; | |
bodyOffset?: number; | |
targetOffset?: number; | |
target: (params: { getRef: () => React.RefObject, isShow: boolean }) => React.ReactNode; | |
initialScale?: number; | |
animationDuration?: number; | |
onCloseComplete?: () => void; | |
onOpenComplete?: () => void; | |
} | |
export class Positioner extends React.PureComponent<PositionerProps> { | |
} | |
export interface RadioProps extends BoxSpacing, BoxPosition, BoxLayout, BoxDimensions { | |
id?: string; | |
name?: string; | |
label?: React.ReactNode; | |
value?: string; | |
onChange?: (e: React.ChangeEvent<any>) => void; | |
disabled?: boolean; | |
checked?: boolean; | |
size?: 12 | 16; | |
isRequired?: boolean; | |
isInvalid?: boolean; | |
appearance?: 'default'; | |
} | |
export class Radio extends React.PureComponent<RadioProps> { | |
} | |
export interface RadioGroupProps extends BoxSpacing, BoxPosition, BoxLayout, BoxDimensions { | |
options: Array<{ label: React.ReactNode, value: string, isDisabled?: boolean }>; | |
value?: string; | |
defaultValue?: string; | |
onChange: (value: string) => void; | |
label?: string; | |
size?: 12 | 16; | |
isRequired?: boolean; | |
} | |
export class RadioGroup extends React.PureComponent<RadioGroupProps> { | |
} | |
export class SearchInput extends React.PureComponent<TextInputProps> { | |
} | |
export interface SegmentedControlProps extends BoxSpacing, BoxPosition, BoxLayout, BoxDimensions { | |
options: Array<{ label: string, value: NonNullable<SegmentedControlProps['value']> }>; | |
value?: number | string | boolean; | |
defaultValue?: number | string | boolean; | |
onChange: (value: NonNullable<SegmentedControlProps['value']>) => void; | |
name?: string; | |
height?: number; | |
} | |
export class SegmentedControl extends React.PureComponent<SegmentedControlProps> { | |
} | |
export interface SelectMenuProps { | |
title?: string; | |
width?: string | number; | |
height?: string | number; | |
options: Array<{ label: string, value: string | null }>; | |
onSelect?: (item: { label: string, value: string }) => void; | |
onDeselect?: (item: { label: string, value: string }) => void; | |
selected?: string | string[]; | |
isMultiSelect?: boolean; | |
hasTitle?: boolean; | |
hasFilter?: boolean; | |
filterPlaceholder?: string; | |
filterIcon?: IconNameTypes; | |
onFilterChange?: (searchValue: string) => void; | |
position?: Omit<PositionTypes, 'left' | 'right'>; | |
detailView?: PopoverProps['content']; | |
titleView?: React.ReactNode | (() => React.ReactNode); | |
emptyView?: React.ReactNode | (() => React.ReactNode); | |
closeOnSelect?: boolean; | |
} | |
export class SelectMenu extends React.PureComponent<SelectMenuProps> { | |
} | |
export interface SideSheetProps { | |
children: React.ReactNode | (() => React.ReactNode); | |
isShown?: boolean; | |
onCloseComplete?: () => void; | |
onOpenComplete?: () => void; | |
onBeforeClose?: () => void; | |
shouldCloseOnOverlayClick?: boolean; | |
shouldCloseOnEscapePress?: boolean; | |
width?: string | number; | |
containerProps?: PaneProps; | |
position?: PICK<PositionTypes, 'top' | 'bottom' | 'left' | 'right'>; | |
preventBodyScrolling?: boolean; | |
} | |
export class SideSheet extends React.PureComponent<SideSheetProps> { | |
} | |
export interface SidebarTabProps extends TabProps { | |
} | |
export class SidebarTab extends React.PureComponent<SidebarTabProps> { | |
} | |
export interface StackProps { | |
children: (zIndex: number) => React.ReactNode; | |
value?: number; | |
} | |
export class Stack extends React.PureComponent<StackProps> { | |
} | |
export interface TabProps extends TextProps { | |
onSelect?: () => void; | |
isSelected?: boolean; | |
disabled?: boolean; | |
appearance?: 'default'; | |
} | |
export class Tab extends React.PureComponent<TabProps> { | |
} | |
export interface TablistProps extends UiBoxPropsType { | |
} | |
export class Tablist extends React.PureComponent<TablistProps> { | |
} | |
export interface TabNavigationProps extends UiBoxPropsType { | |
} | |
export class TabNavigation extends React.PureComponent<TabNavigationProps> { | |
} | |
export interface TextProps extends UiBoxPropsType { | |
size?: 300 | 400 | 500 | 600; | |
fontFamily?: 'ui' | 'display' | 'mono'; | |
} | |
export class Text extends React.PureComponent<TextProps> { | |
} | |
export interface HeadingProps extends UiBoxPropsType { | |
size?: 100 | 200| 300 | 400 | 500 | 600 | 700 | 800 | 900; | |
marginTop?: 'default'; | |
} | |
export class Heading extends React.PureComponent<HeadingProps> { | |
} | |
export interface TextInputProps extends TextProps { | |
id?: string; | |
name?: string; | |
type?: 'text' | 'number' | 'hidden' | 'email'; | |
required?: boolean; | |
disabled?: boolean; | |
readOnly?: boolean; | |
isInvalid?: boolean; | |
input?: string; | |
spellCheck?: boolean; | |
placeholder?: string; | |
appearance?: 'default' | 'primary'; | |
width?: string | number; | |
className?: string; | |
value?: string | number; | |
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void; | |
onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void; | |
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; | |
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void; | |
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void; | |
min?: string; | |
max?: string; | |
} | |
export class TextInput extends React.PureComponent<TextInputProps> { | |
} | |
export interface TextInputFieldProps extends TextInputProps, FormFieldProps { | |
inputHeight?: number; | |
inputWidth?: number | string; | |
} | |
export class TextInputField extends React.PureComponent<TextInputFieldProps> { | |
} | |
export interface TooltipProps extends TextProps { | |
appearance?: 'default' | 'card'; | |
position?: PositionTypes; | |
content: React.ReactNode; | |
hideDelay?: number; | |
isShown?: boolean; | |
children: React.ReactNode; | |
} | |
export class Tooltip extends React.PureComponent<TooltipProps> { | |
} | |
export interface SpinnerProps extends UiBoxPropsType { | |
delay?: number; | |
size: number; | |
} | |
export class Spinner extends React.PureComponent<SpinnerProps> { | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment