diff --git a/packages/checkbox/NativeControl.tsx b/packages/checkbox/NativeControl.tsx index dbb6e4b16..eb14b7ef5 100644 --- a/packages/checkbox/NativeControl.tsx +++ b/packages/checkbox/NativeControl.tsx @@ -24,7 +24,7 @@ import * as React from 'react'; export interface NativeControlProps extends React.HTMLProps{ checked: boolean; disabled: boolean; - id: string; + id?: string; rippleActivatorRef: React.RefObject; onChange: (evt: React.ChangeEvent) => void; }; diff --git a/packages/chips/ChipSet.tsx b/packages/chips/ChipSet.tsx index 123156fd7..826093d90 100644 --- a/packages/chips/ChipSet.tsx +++ b/packages/chips/ChipSet.tsx @@ -29,13 +29,13 @@ import {ChipProps} from './Chip'; // eslint-disable-line no-unused-vars type ChipType = React.ReactElement; export interface ChipSetProps { - className: string; - selectedChipIds: string[]; - handleSelect: (selectedChipIds: string[]) => void; - updateChips: (chips: Partial[]) => void; - choice: boolean; - filter: boolean; - input: boolean; + className?: string; + selectedChipIds?: string[]; + handleSelect?: (selectedChipIds: string[]) => void; + updateChips?: (chips: Partial[]) => void; + choice?: boolean; + filter?: boolean; + input?: boolean; children: ChipType | ChipType[]; }; @@ -50,7 +50,7 @@ export default class ChipSet extends React.Component constructor(props: ChipSetProps) { super(props); this.state = { - selectedChipIds: props.selectedChipIds, + selectedChipIds: props.selectedChipIds!, foundation: null, hasInitialized: false, }; @@ -78,7 +78,7 @@ export default class ChipSet extends React.Component this.initChipSelection(); } if (selectedChipIds !== prevProps.selectedChipIds) { - this.setState({selectedChipIds}); + this.setState({selectedChipIds: selectedChipIds!}); } } @@ -101,7 +101,7 @@ export default class ChipSet extends React.Component setSelected: () => { const selectedChipIds = this.state.foundation.getSelectedChipIds().slice(); this.setState({selectedChipIds}, () => { - this.props.handleSelect(selectedChipIds); + this.props.handleSelect!(selectedChipIds); }); }, removeChip: this.removeChip, @@ -143,7 +143,7 @@ export default class ChipSet extends React.Component } } const chipsArray = chips.length ? chips.map((chip) => chip.props) : []; - updateChips(chipsArray); + updateChips!(chipsArray); }; setCheckmarkWidth = (checkmark: ChipCheckmark | null) => { diff --git a/packages/drawer/index.tsx b/packages/drawer/index.tsx index fed1f6de7..de962cbc6 100644 --- a/packages/drawer/index.tsx +++ b/packages/drawer/index.tsx @@ -40,15 +40,13 @@ import {FocusTrap} from 'focus-trap'; const {cssClasses: listCssClasses} = MDCListFoundation; export interface DrawerProps extends React.HTMLProps{ - className: string; - open: boolean; - onOpen: () => void; - onClose: () => void; - onTransitionEnd: React.TransitionEventHandler; - onKeyDown: React.KeyboardEventHandler; - tag: string; - dismissible: boolean; - modal: boolean; + className?: string; + open?: boolean; + onOpen?: () => void; + onClose?: () => void; + tag?: string; + dismissible?: boolean; + modal?: boolean; }; interface DrawerState { @@ -184,13 +182,13 @@ class Drawer extends React.Component { } handleKeyDown = (evt: React.KeyboardEvent) => { - this.props.onKeyDown(evt); + this.props.onKeyDown!(evt); if (!this.foundation) return; this.foundation.handleKeydown(evt); }; handleTransitionEnd = (evt: React.TransitionEvent) => { - this.props.onTransitionEnd(evt); + this.props.onTransitionEnd!(evt); if (!this.foundation) return; this.foundation.handleTransitionEnd(evt); }; diff --git a/packages/linear-progress/index.tsx b/packages/linear-progress/index.tsx index 85f7bf02d..e94d483c1 100644 --- a/packages/linear-progress/index.tsx +++ b/packages/linear-progress/index.tsx @@ -26,14 +26,14 @@ import * as React from 'react'; import {MDCLinearProgressFoundation} from '@material/linear-progress/dist/mdc.linearProgress'; export interface LinearProgressProps extends React.HTMLProps { - buffer: number; - bufferingDots: boolean; - className: string; - closed: boolean; - indeterminate: boolean; - progress: number; - reversed: boolean; - tag: string; + buffer?: number; + bufferingDots?: boolean; + className?: string; + closed?: boolean; + indeterminate?: boolean; + progress?: number; + reversed?: boolean; + tag?: string; }; interface LinearProgressState { diff --git a/packages/list/ListItem.tsx b/packages/list/ListItem.tsx index 4ed892082..cd360d96a 100644 --- a/packages/list/ListItem.tsx +++ b/packages/list/ListItem.tsx @@ -32,10 +32,6 @@ export interface ListItemProps extends React.HTMLProps { shouldFocus: boolean; shouldFollowHref: boolean; shouldToggleCheckbox: boolean; - onKeyDown: React.KeyboardEventHandler; - onClick: React.MouseEventHandler; - onFocus: React.FocusEventHandler; - onBlur: React.FocusEventHandler; tag: string; children: React.ReactNode; }; diff --git a/packages/list/index.tsx b/packages/list/index.tsx index 0435a73cb..aa27cac3f 100644 --- a/packages/list/index.tsx +++ b/packages/list/index.tsx @@ -36,16 +36,16 @@ const VERTICAL = 'vertical'; const CHECKBOX_TYPE = 'checkbox'; export interface ListProps extends React.HTMLProps { - className: string; - nonInteractive: boolean; - dense: boolean; - avatarList: boolean; - twoLine: boolean; - singleSelection: boolean; - selectedIndex: number; - handleSelect: (selectedIndex: number) => void; - wrapFocus: boolean; - tag: string; + className?: string; + nonInteractive?: boolean; + dense?: boolean; + avatarList?: boolean; + twoLine?: boolean; + singleSelection?: boolean; + selectedIndex?: number; + handleSelect?: (selectedIndex: number) => void; + wrapFocus?: boolean; + tag?: string; children: ListItem | ListItem[] | React.ReactNode; }; @@ -240,7 +240,7 @@ export default class List extends React.Com e.key === 'Space' || e.keyCode === 32) ) { - this.props.handleSelect(index); + this.props.handleSelect!(index); } }; @@ -251,7 +251,7 @@ export default class List extends React.Com // Work around until MDC Web issue is resolved: // https://github.com/material-components/material-components-web/issues/4053 if (index >= 0) { - this.props.handleSelect(index); + this.props.handleSelect!(index); } }; @@ -320,19 +320,19 @@ export default class List extends React.Com const props = { ...otherProps, onKeyDown: (e: React.KeyboardEvent) => { - onKeyDown(e); + onKeyDown!(e); this.handleKeyDown(e, index); }, onClick: (e: React.MouseEvent) => { - onClick(e); + onClick!(e); this.handleClick(e, index); }, onFocus: (e: React.FocusEvent) => { - onFocus(e); + onFocus!(e); this.handleFocus(e, index); }, onBlur: (e: React.FocusEvent) => { - onBlur(e); + onBlur!(e); this.handleBlur(e, index); }, shouldFocus: focusListItemAtIndex === index, diff --git a/packages/menu-surface/index.tsx b/packages/menu-surface/index.tsx index bb23ff10d..4e176cae5 100644 --- a/packages/menu-surface/index.tsx +++ b/packages/menu-surface/index.tsx @@ -26,26 +26,26 @@ import * as classnames from 'classnames'; import {MDCMenuSurfaceFoundation, MDCMenuSurfaceAdapter, Corner} from '@material/menu-surface/dist/mdc.menuSurface'; export interface MenuSurfaceProps extends React.HTMLProps { - className: string; + className?: string; anchorElement?: HTMLElement; - anchorCorner: number; + anchorCorner?: number; anchorMargin?: { top?: number; left?: number; bottom?: number; right?: number; }; - styles: React.CSSProperties; + styles?: React.CSSProperties; coordinates?: { x: number; y: number; }; - onClose: () => void; - onOpen: () => void; - onKeyDown: (event: React.KeyboardEvent) => void; - quickOpen: boolean; - open: boolean; - fixed: boolean; + onClose?: () => void; + onOpen?: () => void; + onKeyDown?: (event: React.KeyboardEvent) => void; + quickOpen?: boolean; + open?: boolean; + fixed?: boolean; }; export interface MenuSurfaceState { @@ -289,13 +289,13 @@ class MenuSurface extends React.Component { if (this.registerWindowClickListener) { this.registerWindowClickListener(); } - this.props.onOpen(); + this.props.onOpen!(); }, notifyClose: () => { if (this.deregisterWindowClickListener) { this.deregisterWindowClickListener(); } - this.props.onClose(); + this.props.onClose!(); }, isElementInContainer: (el: HTMLElement) => { if (!this.menuSurfaceElement.current) return false; @@ -337,7 +337,7 @@ class MenuSurface extends React.Component { }; handleKeydown = (evt: React.KeyboardEvent) => { - this.props.onKeyDown(evt); + this.props.onKeyDown!(evt); this.foundation.handleKeydown(evt); }; diff --git a/packages/notched-outline/index.tsx b/packages/notched-outline/index.tsx index d7ff4e264..eaf4305b3 100644 --- a/packages/notched-outline/index.tsx +++ b/packages/notched-outline/index.tsx @@ -25,10 +25,10 @@ import * as classnames from 'classnames'; import {MDCNotchedOutlineFoundation} from '@material/notched-outline/dist/mdc.notchedOutline'; export interface NotchedOutlineProps { - className: string, - isRtl: boolean, - notch: boolean, - notchWidth: number + className?: string, + isRtl?: boolean, + notch?: boolean, + notchWidth?: number }; interface NotchedOutlineState { diff --git a/packages/select/index.tsx b/packages/select/index.tsx index 1bca3d719..bc37a4dbf 100644 --- a/packages/select/index.tsx +++ b/packages/select/index.tsx @@ -32,17 +32,17 @@ import NativeControl from './NativeControl'; type SelectOptionsType = (string | React.HTMLProps)[]; export interface SelectProps extends React.HTMLProps { - box: boolean; - className: string; - disabled: boolean; + box?: boolean; + className?: string; + disabled?: boolean; floatingLabelClassName?: string; - isRtl: boolean; - label: string; - lineRippleClassName: string; - nativeControlClassName: string; - notchedOutlineClassName: string; - outlined: boolean; - options: SelectOptionsType; + isRtl?: boolean; + label?: string; + lineRippleClassName?: string; + nativeControlClassName?: string; + notchedOutlineClassName?: string; + outlined?: boolean; + options?: SelectOptionsType; value?: string; } @@ -64,7 +64,7 @@ export default class Select extends React.Component { super(props); this.state = { classList: new Set(), - disabled: props.disabled, + disabled: props.disabled!, value: props.value, // floating label state labelIsFloated: false, diff --git a/packages/switch/index.tsx b/packages/switch/index.tsx index 92fc7c0a8..060743c14 100644 --- a/packages/switch/index.tsx +++ b/packages/switch/index.tsx @@ -28,9 +28,9 @@ import ThumbUnderlay from './ThumbUnderlay'; import NativeControl from './NativeControl'; export interface SwitchProps extends React.HTMLProps { - checked: boolean; - className: string; - disabled: boolean; + checked?: boolean; + className?: string; + disabled?: boolean; nativeControlId?: string; } @@ -49,11 +49,11 @@ export default class Switch extends React.Component { constructor(props: SwitchProps) { super(props); this.state = { - checked: props.checked, + checked: props.checked!, classList: new Set(), - disabled: props.disabled, - nativeControlChecked: props.checked, - nativeControlDisabled: props.disabled, + disabled: props.disabled!, + nativeControlChecked: props.checked!, + nativeControlDisabled: props.disabled!, }; }