fix: make require props optional (#737)

packages/checkbox/NativeControl.tsx

@@ -24,7 +24,7 @@ import * as React from 'react';
 export interface NativeControlProps extends React.HTMLProps<HTMLInputElement>{
   checked: boolean;
   disabled: boolean;
-  id: string;
+  id?: string;
   rippleActivatorRef: React.RefObject<HTMLInputElement>;
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 };

packages/chips/ChipSet.tsx

@@ -29,13 +29,13 @@ import {ChipProps} from './Chip'; // eslint-disable-line no-unused-vars
 type ChipType = React.ReactElement<ChipProps>;
 
 export interface ChipSetProps {
-  className: string;
-  selectedChipIds: string[];
-  handleSelect: (selectedChipIds: string[]) => void;
-  updateChips: (chips: Partial<ChipProps>[]) => void;
-  choice: boolean;
-  filter: boolean;
-  input: boolean;
+  className?: string;
+  selectedChipIds?: string[];
+  handleSelect?: (selectedChipIds: string[]) => void;
+  updateChips?: (chips: Partial<ChipProps>[]) => void;
+  choice?: boolean;
+  filter?: boolean;
+  input?: boolean;
   children: ChipType | ChipType[];
 };
 
@@ -50,7 +50,7 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
   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<ChipSetProps, ChipSetState>
       this.initChipSelection();
     }
     if (selectedChipIds !== prevProps.selectedChipIds) {
-      this.setState({selectedChipIds});
+      this.setState({selectedChipIds: selectedChipIds!});
     }
   }
 
@@ -101,7 +101,7 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
       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<ChipSetProps, ChipSetState>
       }
     }
     const chipsArray = chips.length ? chips.map((chip) => chip.props) : [];
-    updateChips(chipsArray);
+    updateChips!(chipsArray);
   };
 
   setCheckmarkWidth = (checkmark: ChipCheckmark | null) => {

packages/drawer/index.tsx

@@ -40,15 +40,13 @@ import {FocusTrap} from 'focus-trap';
 const {cssClasses: listCssClasses} = MDCListFoundation;
 
 export interface DrawerProps extends React.HTMLProps<HTMLElement>{
-  className: string;
-  open: boolean;
-  onOpen: () => void;
-  onClose: () => void;
-  onTransitionEnd: React.TransitionEventHandler<HTMLElement>;
-  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
-  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<DrawerProps, DrawerState> {
   }
 
   handleKeyDown = (evt: React.KeyboardEvent<HTMLElement>) => {
-    this.props.onKeyDown(evt);
+    this.props.onKeyDown!(evt);
     if (!this.foundation) return;
     this.foundation.handleKeydown(evt);
   };
 
   handleTransitionEnd = (evt: React.TransitionEvent<HTMLElement>) => {
-    this.props.onTransitionEnd(evt);
+    this.props.onTransitionEnd!(evt);
     if (!this.foundation) return;
     this.foundation.handleTransitionEnd(evt);
   };

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<T> extends React.HTMLProps<T> {
-  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 {

packages/list/ListItem.tsx

@@ -32,10 +32,6 @@ export interface ListItemProps<T> extends React.HTMLProps<T> {
   shouldFocus: boolean;
   shouldFollowHref: boolean;
   shouldToggleCheckbox: boolean;
-  onKeyDown: React.KeyboardEventHandler<T>;
-  onClick: React.MouseEventHandler<T>;
-  onFocus: React.FocusEventHandler<T>;
-  onBlur: React.FocusEventHandler<T>;
   tag: string;
   children: React.ReactNode;
 };

packages/list/index.tsx

@@ -36,16 +36,16 @@ const VERTICAL = 'vertical';
 const CHECKBOX_TYPE = 'checkbox';
 
 export interface ListProps<T> extends React.HTMLProps<HTMLElement> {
-  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<T> | ListItem<T>[] | React.ReactNode;
 };
 
@@ -240,7 +240,7 @@ export default class List<T extends HTMLElement = HTMLElement> 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<T extends HTMLElement = HTMLElement> 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<T extends HTMLElement = HTMLElement> extends React.Com
     const props = {
       ...otherProps,
       onKeyDown: (e: React.KeyboardEvent<T>) => {
-        onKeyDown(e);
+        onKeyDown!(e);
         this.handleKeyDown(e, index);
       },
       onClick: (e: React.MouseEvent<T>) => {
-        onClick(e);
+        onClick!(e);
         this.handleClick(e, index);
       },
       onFocus: (e: React.FocusEvent<T>) => {
-        onFocus(e);
+        onFocus!(e);
         this.handleFocus(e, index);
       },
       onBlur: (e: React.FocusEvent<T>) => {
-        onBlur(e);
+        onBlur!(e);
         this.handleBlur(e, index);
       },
       shouldFocus: focusListItemAtIndex === index,

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<HTMLDivElement> {
-  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<MenuSurfaceProps, MenuSurfaceState> {
           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<MenuSurfaceProps, MenuSurfaceState> {
   };
 
   handleKeydown = (evt: React.KeyboardEvent) => {
-    this.props.onKeyDown(evt);
+    this.props.onKeyDown!(evt);
     this.foundation.handleKeydown(evt);
   };
 

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 {

packages/select/index.tsx

@@ -32,17 +32,17 @@ import NativeControl from './NativeControl';
 type SelectOptionsType = (string | React.HTMLProps<HTMLOptionElement>)[];
 
 export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
-  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<SelectProps, SelectState> {
     super(props);
     this.state = {
       classList: new Set(),
-      disabled: props.disabled,
+      disabled: props.disabled!,
       value: props.value,
       // floating label state
       labelIsFloated: false,

packages/switch/index.tsx

@@ -28,9 +28,9 @@ import ThumbUnderlay from './ThumbUnderlay';
 import NativeControl from './NativeControl';
 
 export interface SwitchProps extends React.HTMLProps<HTMLInputElement> {
-  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<SwitchProps, SwitchState> {
   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!,
     };
   }