@material/react-list - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

dist/index.d.ts

@@ -1,2 +0,5 @@
-import * as React from 'react';
+import React from 'react';
+import { MDCListFoundation } from '@material/list/foundation';
+import { MDCListIndex } from '@material/list/types';
+import { MDCListAdapter } from '@material/list/adapter';
 import ListItem, { ListItemProps } from './ListItem';
@@ -9,4 +12,6 @@ import ListItemGraphic from './ListItemGraphic';
 import ListGroupSubheader from './ListGroupSubheader';
-export interface ListProps<T> extends React.HTMLProps<HTMLElement> {
+export interface ListProps extends React.HTMLProps<HTMLElement> {
     className?: string;
+    checkboxList?: boolean;
+    radioList?: boolean;
     nonInteractive?: boolean;
@@ -17,51 +22,64 @@ dense?: boolean;
     singleSelection?: boolean;
-    selectedIndex?: number;
-    handleSelect?: (selectedIndex: number) => void;
+    selectedIndex?: MDCListIndex;
+    handleSelect?: (activatedItemIndex: number, selected: MDCListIndex) => void;
     wrapFocus?: boolean;
     tag?: string;
-    children: ListItem<T> | ListItem<T>[] | React.ReactNode;
+    ref?: React.Ref<any>;
 }
 interface ListState {
-    focusListItemAtIndex: number;
-    followHrefAtIndex: number;
-    toggleCheckboxAtIndex: number;
-    listItemAttributes: {
-        [N: number]: any;
-    };
     listItemClassNames: {
-        [N: number]: string[];
+        [listItemIndex: number]: string[];
     };
-    listItemChildrenTabIndex: {
-        [N: number]: number;
-    };
 }
-export default class List<T extends HTMLElement = HTMLElement> extends React.Component<ListProps<T>, ListState> {
-    listItemCount: number;
-    foundation: any;
+export interface ListItemContextShape {
+    checkboxList?: boolean;
+    radioList?: boolean;
+    handleClick?: (e: React.MouseEvent<any>, index: number) => void;
+    handleKeyDown?: (e: React.KeyboardEvent<any>, index: number) => void;
+    handleBlur?: (e: React.FocusEvent<any>, index: number) => void;
+    handleFocus?: (e: React.FocusEvent<any>, index: number) => void;
+    onDestroy?: (index: number) => void;
+    getListItemInitialTabIndex?: (index: number) => number;
+    getClassNamesFromList?: () => ListState['listItemClassNames'];
+    tabIndex?: number;
+}
+export declare const defaultListItemContext: ListItemContextShape;
+export declare const ListItemContext: React.Context<ListItemContextShape>;
+export default class List extends React.Component<ListProps, ListState> {
+    foundation: MDCListFoundation;
+    hasInitializedListItemTabIndex: boolean;
+    private listElement;
     state: ListState;
-    static defaultProps: Partial<ListProps<HTMLElement>>;
+    static defaultProps: Partial<ListProps>;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: ListProps<T>): void;
+    componentDidUpdate(prevProps: ListProps): void;
     componentWillUnmount(): void;
+    initializeListType: () => void;
+    readonly listElements: Element[];
     readonly classes: string;
-    readonly adapter: {
-        getListItemCount: () => number;
-        getFocusedElementIndex: () => number;
-        setAttributeForElementIndex: (index: number, attr: string, value: string) => void;
-        removeAttributeForElementIndex: (index: number, attr: string) => void;
-        addClassForElementIndex: (index: number, className: string) => void;
-        removeClassForElementIndex: (index: number, className: string) => void;
-        setTabIndexForListItemChildren: (listItemIndex: number, tabIndexValue: number) => void;
-        focusItemAtIndex: (index: number) => void;
-        followHref: (index: number) => void;
-        toggleCheckbox: (index: number) => void;
-    };
+    readonly adapter: MDCListAdapter;
+    readonly role: string | null;
+    /**
+     * Called from ListItem.
+     * Initializes the tabIndex prop for the listItems. tabIndex is determined by:
+     * 1. if selectedIndex is an array, and the index === selectedIndex[0]
+     * 2. if selectedIndex is a number, and the the index === selectedIndex
+     * 3. if there is no selectedIndex
+     */
+    getListItemInitialTabIndex: (index: number) => number;
+    /**
+     * Method checks if the list item at `index` contains classes. If true,
+     * method merges state.listItemClassNames[index] with listItem.props.className.
+     * The return value is used as the listItem's className.
+     */
+    private getListItemClassNames;
     handleKeyDown: (e: React.KeyboardEvent<any>, index: number) => void;
-    handleClick: (e: React.MouseEvent<any>, index: number) => void;
+    handleClick: (_e: React.MouseEvent<any>, index: number) => void;
     handleFocus: (e: React.FocusEvent<Element>, index: number) => void;
     handleBlur: (e: React.FocusEvent<Element>, index: number) => void;
+    onDestroy: (index: number) => void;
+    private getListProps;
+    getListPropsMemoized: any;
     render(): JSX.Element;
-    renderChild: (child: string | number | React.ReactElement<any> | React.ReactElement<ListItemProps<T>>) => string | number | React.ReactElement<any> | React.ReactElement<ListItemProps<T>>;
-    renderListItem: (listItem: React.ReactElement<ListItemProps<T>>, index: number) => React.ReactElement<ListItemProps<T>>;
 }
 export { ListItem, ListItemGraphic, ListItemText, ListItemMeta, ListDivider, ListGroup, ListGroupSubheader, ListItemProps, };

dist/index.min.js

@@ -1,1 +0,67 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"),require("classnames"),require("@material/list/dist/mdc.list.js"));else if("function"==typeof define&&define.amd)define(["react","classnames","@material/list/dist/mdc.list.js"],e);else{var n="object"==typeof exports?e(require("react"),require("classnames"),require("@material/list/dist/mdc.list.js")):e(t.react,t.classnames,t["@material/list/dist/mdc.list.js"]);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}("undefined"!=typeof self?self:this,function(t,e,n){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=56)}({0:function(e,n){e.exports=t},1:function(t,n){t.exports=e},5:function(t,e){t.exports=n},56:function(t,e,n){"use strict";function r(t){return t.type===O}function o(t){return"string"==typeof t||"number"==typeof t}function s(t){return t&&t.type===d.default}var i=this&&this.__extends||function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),a=this&&this.__assign||function(){return a=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},a.apply(this,arguments)},l=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var c=n(0),u=n(1),f=n(5),d=n(57);e.ListItem=d.default;var p=n(58);e.ListItemGraphic=p.default;var h=n(59);e.ListItemText=h.default;var m=n(60);e.ListItemMeta=m.default;var b=n(61);e.ListDivider=b.default;var y=n(62);e.ListGroup=y.default;var v=n(63);e.ListGroupSubheader=v.default;var O="checkbox",g=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.listItemCount=0,e.foundation=f.MDCListFoundation,e.state={focusListItemAtIndex:-1,followHrefAtIndex:-1,toggleCheckboxAtIndex:-1,listItemAttributes:{0:{tabIndex:0}},listItemClassNames:{},listItemChildrenTabIndex:{}},e.handleKeyDown=function(t,n){t.persist(),e.foundation.handleKeydown(t,!0,n),n>=0&&("Enter"===t.key||13===t.keyCode||"Space"===t.key||32===t.keyCode)&&e.props.handleSelect(n)},e.handleClick=function(t,n){var o=r(t.target);e.foundation.handleClick(n,o),n>=0&&e.props.handleSelect(n)},e.handleFocus=function(t,n){e.foundation.handleFocusIn(t,n)},e.handleBlur=function(t,n){e.foundation.handleFocusOut(t,n)},e.renderChild=function(t){return!o(t)&&s(t)?e.renderListItem(t,e.listItemCount++):t},e.renderListItem=function(t,n){var r=t.props,o=r.onKeyDown,s=r.onClick,i=r.onFocus,u=r.onBlur,f=l(r,["onKeyDown","onClick","onFocus","onBlur"]),d=e.state,p=d.focusListItemAtIndex,h=d.followHrefAtIndex,m=d.toggleCheckboxAtIndex,b=d.listItemAttributes,y=d.listItemClassNames,v=d.listItemChildrenTabIndex,O=a({},f,{onKeyDown:function(t){o(t),e.handleKeyDown(t,n)},onClick:function(t){s(t),e.handleClick(t,n)},onFocus:function(t){i(t),e.handleFocus(t,n)},onBlur:function(t){u(t),e.handleBlur(t,n)},shouldFocus:p===n,shouldFollowHref:h===n,shouldToggleCheckbox:m===n,attributesFromList:b[n],classNamesFromList:y[n],childrenTabIndex:v[n]});return c.cloneElement(t,O)},e}return i(e,t),e.prototype.componentDidMount=function(){var t=this.props,e=t.singleSelection,n=t.wrapFocus,r=t.selectedIndex;this.foundation=new f.MDCListFoundation(this.adapter),this.foundation.init(),this.foundation.setSingleSelection(e),e&&"number"==typeof r&&!isNaN(r)&&this.foundation.setSelectedIndex(r),this.foundation.setWrapFocus(n),this.foundation.setVerticalOrientation("vertical"===this.props["aria-orientation"])},e.prototype.componentDidUpdate=function(t){var e=this.props,n=e.singleSelection,r=e.wrapFocus,o=e.selectedIndex;n!==t.singleSelection&&this.foundation.setSingleSelection(n),o===t.selectedIndex||"number"!=typeof o||isNaN(o)||this.foundation.setSelectedIndex(o),r!==t.wrapFocus&&this.foundation.setWrapFocus(r),this.props["aria-orientation"]!==t["aria-orientation"]&&this.foundation.setVerticalOrientation("vertical"===this.props["aria-orientation"])},e.prototype.componentWillUnmount=function(){this.foundation.destroy()},Object.defineProperty(e.prototype,"classes",{get:function(){var t=this.props,e=t.className,n=t.nonInteractive,r=t.dense,o=t.avatarList,s=t.twoLine;return u.default("mdc-list",e,{"mdc-list--non-interactive":n,"mdc-list--dense":r,"mdc-list--avatar-list":o,"mdc-list--two-line":s})},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"adapter",{get:function(){var t=this;return{getListItemCount:function(){return t.listItemCount},getFocusedElementIndex:function(){return-1},setAttributeForElementIndex:function(e,n,r){var o=t.state.listItemAttributes;n="tabindex"===n?"tabIndex":n,o[e]||(o[e]={}),o[e][n]=r,t.setState({listItemAttributes:o})},removeAttributeForElementIndex:function(e,n){var r=t.state.listItemAttributes;n="tabindex"===n?"tabIndex":n,r[e]&&(delete r[e][n],t.setState({listItemAttributes:r}))},addClassForElementIndex:function(e,n){var r=t.state.listItemClassNames;r[e]||(r[e]=[]),r[e].push(n),t.setState({listItemClassNames:r})},removeClassForElementIndex:function(e,n){var r=t.state.listItemClassNames;if(r[e]){var o=r[e].indexOf(n);o>=0&&(r[e].splice(o,1),t.setState({listItemClassNames:r}))}},setTabIndexForListItemChildren:function(e,n){var r=t.state.listItemChildrenTabIndex;r[e]=n,t.setState({listItemChildrenTabIndex:r})},focusItemAtIndex:function(e){t.setState({focusListItemAtIndex:e})},followHref:function(e){t.setState({followHrefAtIndex:e})},toggleCheckbox:function(e){t.setState({toggleCheckboxAtIndex:e})}}},enumerable:!0,configurable:!0}),e.prototype.render=function(){var t=this.props,e=(t.className,t.nonInteractive,t.dense,t.avatarList,t.twoLine,t.singleSelection,t.selectedIndex,t.handleSelect,t.wrapFocus,t.children),n=t.tag,r=l(t,["className","nonInteractive","dense","avatarList","twoLine","singleSelection","selectedIndex","handleSelect","wrapFocus","children","tag"]);return this.listItemCount=0,c.createElement(n,a({className:this.classes},r),c.Children.map(e,this.renderChild))},e.defaultProps={className:"",nonInteractive:!1,dense:!1,avatarList:!1,twoLine:!1,singleSelection:!1,selectedIndex:-1,handleSelect:function(){},wrapFocus:!0,"aria-orientation":"vertical",tag:"ul"},e}(c.Component);e.default=g},57:function(t,e,n){"use strict";function r(t){return!!t.href}function o(t){return"function"==typeof t.focus}var s=this&&this.__extends||function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},i.apply(this,arguments)},a=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var l=n(0),c=n(1),u=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.listItemElement_=l.createRef(),e.renderChild=function(t){if("string"==typeof t||"number"==typeof t||null===t)return t;var n=e.props.childrenTabIndex,r=i({},t.props,{tabIndex:n});return l.cloneElement(t,r)},e}return s(e,t),e.prototype.componentDidUpdate=function(t){var e=this.props,n=e.shouldFocus,r=e.shouldFollowHref,o=e.shouldToggleCheckbox;n&&!t.shouldFocus&&this.focus(),r&&!t.shouldFollowHref&&this.followHref(),o&&!t.shouldToggleCheckbox&&this.toggleCheckbox()},Object.defineProperty(e.prototype,"classes",{get:function(){var t=this.props,e=t.className,n=t.classNamesFromList;return c.default("mdc-list-item",e,n)},enumerable:!0,configurable:!0}),e.prototype.focus=function(){var t=this.listItemElement_.current;o(t)&&t.focus()},e.prototype.followHref=function(){var t=this.listItemElement_.current;r(t)&&t.click()},e.prototype.toggleCheckbox=function(){},e.prototype.render=function(){var t=this.props,e=(t.className,t.classNamesFromList,t.childrenTabIndex,t.shouldFocus,t.shouldFollowHref,t.shouldToggleCheckbox,t.attributesFromList),n=t.children,r=t.tag,o=a(t,["className","classNamesFromList","childrenTabIndex","shouldFocus","shouldFollowHref","shouldToggleCheckbox","attributesFromList","children","tag"]);return l.createElement(r,i({className:this.classes},o,e,{ref:this.listItemElement_}),l.Children.map(n,this.renderChild))},e.defaultProps={className:"",classNamesFromList:[],attributesFromList:{},childrenTabIndex:-1,tabIndex:-1,shouldFocus:!1,shouldFollowHref:!1,shouldToggleCheckbox:!1,onKeyDown:function(){},onClick:function(){},onFocus:function(){},onBlur:function(){},tag:"li"},e}(l.Component);e.default=u},58:function(t,e,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},r.apply(this,arguments)},o=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var s=n(0),i=n(1),a=function(t){var e=t.tabIndex,n=void 0===e?-1:e,a=t.graphic,l=t.tabbableOnListItemFocus,c=void 0!==l&&l,u=t.className,f=void 0===u?"":u,d=o(t,["tabIndex","graphic","tabbableOnListItemFocus","className"]),p=r({className:i.default("mdc-list-item__graphic",f),tabIndex:c?n:-1},d);return s.cloneElement(a,p)};e.default=a},59:function(t,e,n){"use strict";function r(t){return null!==t&&void 0!==t.props}var o=this&&this.__assign||function(){return o=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},o.apply(this,arguments)},s=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var i=n(0),a=n(1),l=function(t){var e=t.primaryText,n=void 0===e?"":e,l=t.secondaryText,c=void 0===l?"":l,u=t.tabbableOnListItemFocus,f=void 0!==u&&u,d=t.tabIndex,p=void 0===d?-1:d,h=t.className,m=void 0===h?"":h,b=s(t,["primaryText","secondaryText","tabbableOnListItemFocus","tabIndex","className"]),y=function(t,e){if(void 0===t)return null;if("string"==typeof t||"number"==typeof t)return i.createElement("span",{className:e,tabIndex:f?p:-1},t);if(!r(t))return null;var n=t.props,l=n.className,c=s(n,["className"]);e=a.default(e,l);var u=o({},c,{className:e});return i.cloneElement(t,u)};return c?i.createElement("span",o({className:a.default("mdc-list-item__text",m),tabIndex:f?p:-1},b),y(n,"mdc-list-item__primary-text"),y(c,"mdc-list-item__secondary-text")):y(n,a.default("mdc-list-item__text",m))};e.default=l},60:function(t,e,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},r.apply(this,arguments)},o=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var s=n(0),i=n(1),a=function(t){var e,n=t.tabIndex,a=void 0===n?-1:n,l=t.meta,c=t.className,u=void 0===c?"":c,f=t.tabbableOnListItemFocus,d=void 0!==f&&f,p=o(t,["tabIndex","meta","className","tabbableOnListItemFocus"]);e="string"==typeof l?s.createElement("span",null,l):l;var h=r({className:i.default("mdc-list-item__meta",u,e.props.className),tabIndex:d?a:-1},p);return s.cloneElement(e,h)};e.default=a},61:function(t,e,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},r.apply(this,arguments)},o=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var s=n(0),i=n(1),a=function(t){var e=t.tag,n=void 0===e?"li":e,a=t.className,l=void 0===a?"":a,c=t.role,u=void 0===c?"separator":c,f=o(t,["tag","className","role"]);return s.createElement(n,r({className:i.default("mdc-list-divider",l),role:u},f))};e.default=a},62:function(t,e,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},r.apply(this,arguments)},o=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var s=n(0),i=n(1),a=function(t){var e=t.tag,n=void 0===e?"div":e,a=t.className,l=void 0===a?"":a,c=t.children,u=o(t,["tag","className","children"]);return s.createElement(n,r({className:i.default("mdc-list-group",l)},u),c)};e.default=a},63:function(t,e,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},r.apply(this,arguments)},o=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]]);return n};Object.defineProperty(e,"__esModule",{value:!0});var s=n(0),i=n(1),a=function(t){var e=t.tag,n=void 0===e?"h3":e,a=t.className,l=void 0===a?"":a,c=t.children,u=o(t,["tag","className","children"]);return s.createElement(n,r({className:i.default("mdc-list-group__subheader",l)},u),c)};e.default=a}})});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"),require("classnames"));else if("function"==typeof define&&define.amd)define(["react","classnames"],e);else{var n="object"==typeof exports?e(require("react"),require("classnames")):e(t.react,t.classnames);for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}("undefined"!=typeof self?self:this,function(t,e){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=38)}({0:function(e,n){e.exports=t},1:function(t,n){t.exports=e},125:function(t,e,n){"use strict";function i(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}e.b=i,n.d(e,"a",function(){return o});var r=("function"==typeof Symbol&&Symbol.iterator,function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)}),o=function(){return o=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},o.apply(this,arguments)}},126:function(t,e,n){"use strict";n.d(e,"a",function(){return i});/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var i=function(){function t(t){void 0===t&&(t={}),this.adapter_=t}return Object.defineProperty(t,"cssClasses",{get:function(){return{}},enumerable:!0,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return{}},enumerable:!0,configurable:!0}),Object.defineProperty(t,"numbers",{get:function(){return{}},enumerable:!0,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{}},enumerable:!0,configurable:!0}),t.prototype.init=function(){},t.prototype.destroy=function(){},t}()},127:function(t,e,n){"use strict";n.d(e,"c",function(){return r}),n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o});/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var i={LIST_ITEM_ACTIVATED_CLASS:"mdc-list-item--activated",LIST_ITEM_CLASS:"mdc-list-item",LIST_ITEM_SELECTED_CLASS:"mdc-list-item--selected",ROOT:"mdc-list"},r={ACTION_EVENT:"MDCList:action",ARIA_CHECKED:"aria-checked",ARIA_CHECKED_CHECKBOX_SELECTOR:'[role="checkbox"][aria-checked="true"]',ARIA_CHECKED_RADIO_SELECTOR:'[role="radio"][aria-checked="true"]',ARIA_CURRENT:"aria-current",ARIA_ORIENTATION:"aria-orientation",ARIA_ORIENTATION_HORIZONTAL:"horizontal",ARIA_ROLE_CHECKBOX_SELECTOR:'[role="checkbox"]',ARIA_SELECTED:"aria-selected",CHECKBOX_RADIO_SELECTOR:'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',CHECKBOX_SELECTOR:'input[type="checkbox"]:not(:disabled)',CHILD_ELEMENTS_TO_TOGGLE_TABINDEX:"\n    ."+i.LIST_ITEM_CLASS+" button:not(:disabled),\n    ."+i.LIST_ITEM_CLASS+" a\n  ",ENABLED_ITEMS_SELECTOR:".mdc-list-item:not(.mdc-list-item--disabled)",FOCUSABLE_CHILD_ELEMENTS:"\n    ."+i.LIST_ITEM_CLASS+" button:not(:disabled),\n    ."+i.LIST_ITEM_CLASS+" a,\n    ."+i.LIST_ITEM_CLASS+' input[type="radio"]:not(:disabled),\n    .'+i.LIST_ITEM_CLASS+' input[type="checkbox"]:not(:disabled)\n  ',RADIO_SELECTOR:'input[type="radio"]:not(:disabled)'},o={UNSET_INDEX:-1}},128:function(t,e,n){"use strict";function i(t,e){if(t.length!==e.length)return!1;for(var n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}function r(t,e){void 0===e&&(e=i);var n,r,o=[],s=!1;return function(){for(var i=arguments.length,a=new Array(i),l=0;l<i;l++)a[l]=arguments[l];return s&&n===this&&e(a,o)?r:(r=t.apply(this,a),s=!0,n=this,o=a,r)}}t.exports=r},129:function(t,e,n){"use strict";var i=this&&this.__extends||function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function i(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}}(),r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},r.apply(this,arguments)},o=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},s=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var a=s(n(0)),l=s(n(1)),c=n(39),u=n(38),d=n(130),f=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.listItemElement=a.default.createRef(),e.state={tabIndex:e.props.tabIndex},e.initializeTabIndex=function(){if(e.listItemElement.current){var t=e.getIndex(e.listItemElement.current),n=e.props.getListItemInitialTabIndex(t);e.setState({tabIndex:n})}},e.getIndex=function(t){return e.listElements.indexOf(t)},e.handleClick=function(t){(0,e.props.onClick)(t),e.props.handleClick(t,e.getIndex(t.currentTarget))},e.handleKeyDown=function(t){(0,e.props.onKeyDown)(t),e.props.handleKeyDown(t,e.getIndex(t.currentTarget))},e.handleFocus=function(t){(0,e.props.onFocus)(t),e.props.handleFocus(t,e.getIndex(t.currentTarget))},e.handleBlur=function(t){(0,e.props.onBlur)(t),e.props.handleBlur(t,e.getIndex(t.currentTarget))},e}return i(e,t),Object.defineProperty(e.prototype,"listElements",{get:function(){if(this.listItemElement.current){var t=d.closest(this.listItemElement.current,"."+c.MDCListFoundation.cssClasses.ROOT);return t?[].slice.call(t.querySelectorAll(c.MDCListFoundation.strings.ENABLED_ITEMS_SELECTOR)):[]}return[]},enumerable:!0,configurable:!0}),e.prototype.componentDidMount=function(){this.initializeTabIndex()},e.prototype.componentDidUpdate=function(t){t.tabIndex!==this.props.tabIndex&&this.setState({tabIndex:this.props.tabIndex})},e.prototype.componentWillUnmount=function(){if(this.listItemElement.current){var t=this.getIndex(this.listItemElement.current);this.props.onDestroy(t)}},Object.defineProperty(e.prototype,"classes",{get:function(){var t,e=this.props,n=e.className,i=e.activated,r=e.disabled,o=e.selected,s=e.getClassNamesFromList,a=[""];if(this.listItemElement.current){var u=this.getIndex(this.listItemElement.current);a=s()[u]}return l.default("mdc-list-item",n,a,(t={},t[c.MDCListFoundation.cssClasses.LIST_ITEM_ACTIVATED_CLASS]=i,t[c.MDCListFoundation.cssClasses.LIST_ITEM_SELECTED_CLASS]=o,t["mdc-list-item--disabled"]=r,t))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"role",{get:function(){var t=this.props,e=t.checkboxList,n=t.radioList,i=t.role;return i||(e?"checkbox":n?"radio":null)},enumerable:!0,configurable:!0}),e.prototype.render=function(){var t=this.props,e=(t.className,t.children),n=(t.role,t.checkboxList,t.radioList,t.onDestroy,t.onClick,t.onKeyDown,t.onFocus,t.onBlur,t.handleClick,t.handleKeyDown,t.handleFocus,t.handleBlur,t.getListItemInitialTabIndex,t.getClassNamesFromList,t.tabIndex,t.tag),i=o(t,["className","children","role","checkboxList","radioList","onDestroy","onClick","onKeyDown","onFocus","onBlur","handleClick","handleKeyDown","handleFocus","handleBlur","getListItemInitialTabIndex","getClassNamesFromList","tabIndex","tag"]);return a.default.createElement(n,r({},i,this.context,{role:this.role,className:this.classes,ref:this.listItemElement,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:this.state.tabIndex}),e)},e.defaultProps={checkboxList:!1,radioList:!1,className:"",tabIndex:-1,onKeyDown:function(){},onClick:function(){},onFocus:function(){},onBlur:function(){},onDestroy:function(){},tag:"li",handleClick:function(){},handleKeyDown:function(){},handleBlur:function(){},handleFocus:function(){},getListItemInitialTabIndex:function(){return-1},getClassNamesFromList:function(){return{}}},e}(a.default.Component);e.ListItemBase=f;var p=function(t){return a.default.createElement(u.ListItemContext.Consumer,null,function(e){return a.default.createElement(f,r({},e,t))})};e.default=p},130:function(t,e,n){"use strict";/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+function i(t,e){if(t.closest)return t.closest(e);for(var n=t;n;){if(r(n,e))return n;n=n.parentElement}return null}function r(t,e){return(t.matches||t.webkitMatchesSelector||t.msMatchesSelector).call(t,e)}Object.defineProperty(e,"__esModule",{value:!0}),e.closest=i,e.matches=r},131:function(t,e,n){"use strict";var i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},i.apply(this,arguments)},r=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=o(n(0)),a=o(n(1)),l=function(t){var e=t.tabIndex,n=void 0===e?-1:e,o=t.graphic,l=t.className,c=void 0===l?"":l,u=r(t,["tabIndex","graphic","className"]),d=i({className:a.default("mdc-list-item__graphic",c),tabIndex:void 0!==n?n:-1},u);return s.default.cloneElement(o,d)};e.default=l},132:function(t,e,n){"use strict";function i(t){return null!==t&&void 0!==t.props}var r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},r.apply(this,arguments)},o=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},s=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var a=s(n(0)),l=s(n(1)),c=function(t){var e=t.primaryText,n=void 0===e?"":e,s=t.secondaryText,c=void 0===s?"":s,u=t.tabIndex,d=void 0===u?-1:u,f=t.className,p=void 0===f?"":f,h=o(t,["primaryText","secondaryText","tabIndex","className"]),_=function(t,e){if(void 0===t)return null;if("string"==typeof t||"number"==typeof t)return a.default.createElement("span",{className:e,tabIndex:void 0!==d?d:-1},t);if(!i(t))return null;var n=t.props,s=n.className,c=o(n,["className"]);e=l.default(e,s);var u=r({},c,{className:e});return a.default.cloneElement(t,u)};return c?a.default.createElement("span",r({className:l.default("mdc-list-item__text",p),tabIndex:void 0!==d?d:-1},h),_(n,"mdc-list-item__primary-text"),_(c,"mdc-list-item__secondary-text")):_(n,l.default("mdc-list-item__text",p))};e.default=c},133:function(t,e,n){"use strict";var i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},i.apply(this,arguments)},r=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=o(n(0)),a=o(n(1)),l=function(t){var e,n=t.tabIndex,o=t.meta,l=t.className,c=void 0===l?"":l,u=r(t,["tabIndex","meta","className"]);e="string"==typeof o?s.default.createElement("span",null,o):o;var d=i({className:a.default("mdc-list-item__meta",c,e.props.className),tabIndex:void 0!==n?n:-1},u);return s.default.cloneElement(e,d)};e.default=l},134:function(t,e,n){"use strict";var i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},i.apply(this,arguments)},r=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=o(n(0)),a=o(n(1)),l=function(t){var e=t.tag,n=void 0===e?"li":e,o=t.className,l=void 0===o?"":o,c=t.role,u=void 0===c?"separator":c,d=r(t,["tag","className","role"]);return s.default.createElement(n,i({className:a.default("mdc-list-divider",l),role:u},d))};e.default=l},135:function(t,e,n){"use strict";var i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},i.apply(this,arguments)},r=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=o(n(0)),a=o(n(1)),l=function(t){var e=t.tag,n=void 0===e?"div":e,o=t.className,l=void 0===o?"":o,c=t.children,u=r(t,["tag","className","children"]);return s.default.createElement(n,i({className:a.default("mdc-list-group",l)},u),c)};e.default=l},136:function(t,e,n){"use strict";var i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},i.apply(this,arguments)},r=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=o(n(0)),a=o(n(1)),l=function(t){var e=t.tag,n=void 0===e?"h3":e,o=t.className,l=void 0===o?"":o,c=t.children,u=r(t,["tag","className","children"]);return s.default.createElement(n,i({className:a.default("mdc-list-group__subheader",l)},u),c)};e.default=l},38:function(t,e,n){"use strict";function i(t){return"number"==typeof t&&!isNaN(t)||Array.isArray(t)}var r=this&&this.__extends||function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function i(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}}(),o=this&&this.__assign||function(){return o=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},o.apply(this,arguments)},s=this&&this.__rest||function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(n[i[r]]=t[i[r]]);return n},a=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var l=a(n(0)),c=a(n(1)),u=n(39),d=a(n(128)),f=a(n(129));e.ListItem=f.default;var p=a(n(131));e.ListItemGraphic=p.default;var h=a(n(132));e.ListItemText=h.default;var _=a(n(133));e.ListItemMeta=_.default;var m=a(n(134));e.ListDivider=m.default;var I=a(n(135));e.ListGroup=I.default;var b=a(n(136));e.ListGroupSubheader=b.default;e.defaultListItemContext={handleClick:function(){},handleKeyDown:function(){},handleBlur:function(){},handleFocus:function(){},onDestroy:function(){},getListItemInitialTabIndex:function(){return-1},getClassNamesFromList:function(){return{}}},e.ListItemContext=l.default.createContext(e.defaultListItemContext);var y=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.hasInitializedListItemTabIndex=!1,e.listElement=l.default.createRef(),e.state={listItemClassNames:{}},e.initializeListType=function(){var t=e.props.singleSelection,n=u.MDCListFoundation.cssClasses,i=u.MDCListFoundation.strings;if(e.listElement.current){var r=e.listElement.current.querySelectorAll(i.ARIA_ROLE_CHECKBOX_SELECTOR),o=e.listElement.current.querySelector(i.ARIA_CHECKED_RADIO_SELECTOR);if(r.length){var s=e.listElement.current.querySelectorAll(i.ARIA_CHECKED_CHECKBOX_SELECTOR),a=[].map.call(s,function(t){return e.listElements.indexOf(t)});e.foundation.setSelectedIndex(a)}else if(t){var l=e.listElement.current.querySelector(n.LIST_ITEM_ACTIVATED_CLASS);l&&e.foundation.setUseActivatedClass(!0)}else o&&e.foundation.setSelectedIndex(e.listElements.indexOf(o))}},e.getListItemInitialTabIndex=function(t){var n=e.props.selectedIndex,i=-1;if(!e.hasInitializedListItemTabIndex){var r=Array.isArray(n)&&n.length>0&&t===n[0],o=n===t;(r||o||-1===n)&&(i=0,e.hasInitializedListItemTabIndex=!0)}return i},e.getListItemClassNames=function(){return e.state.listItemClassNames},e.handleKeyDown=function(t,n){t.persist(),e.foundation.handleKeydown(t.nativeEvent,!0,n)},e.handleClick=function(t,n){e.foundation.handleClick(n,!1)},e.handleFocus=function(t,n){e.foundation.handleFocusIn(t.nativeEvent,n)},e.handleBlur=function(t,n){e.foundation.handleFocusOut(t.nativeEvent,n)},e.onDestroy=function(t){var n=e.state.listItemClassNames;delete n[t],e.setState({listItemClassNames:n})},e.getListProps=function(t,n){return{checkboxList:Boolean(t),radioList:Boolean(n),handleKeyDown:e.handleKeyDown,handleClick:e.handleClick,handleFocus:e.handleFocus,handleBlur:e.handleBlur,onDestroy:e.onDestroy,getClassNamesFromList:e.getListItemClassNames,getListItemInitialTabIndex:e.getListItemInitialTabIndex}},e.getListPropsMemoized=d.default(e.getListProps),e}return r(n,t),n.prototype.componentDidMount=function(){var t=this.props,e=t.singleSelection,n=t.wrapFocus,r=t.selectedIndex;this.foundation=new u.MDCListFoundation(this.adapter),this.foundation.init(),this.foundation.setSingleSelection(e),this.foundation.layout(),i(r)&&this.foundation.setSelectedIndex(r),this.foundation.setWrapFocus(n),this.foundation.setVerticalOrientation("vertical"===this.props["aria-orientation"]),this.initializeListType()},n.prototype.componentDidUpdate=function(t){var e=this.props,n=e.singleSelection,r=e.wrapFocus,o=e.selectedIndex,s=o!==t.selectedIndex;n!==t.singleSelection&&this.foundation.setSingleSelection(n),s&&i(o)&&this.foundation.setSelectedIndex(o),r!==t.wrapFocus&&this.foundation.setWrapFocus(r),this.props["aria-orientation"]!==t["aria-orientation"]&&this.foundation.setVerticalOrientation("vertical"===this.props["aria-orientation"])},n.prototype.componentWillUnmount=function(){this.foundation.destroy()},Object.defineProperty(n.prototype,"listElements",{get:function(){return this.listElement.current?[].slice.call(this.listElement.current.querySelectorAll(u.MDCListFoundation.strings.ENABLED_ITEMS_SELECTOR)):[]},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"classes",{get:function(){var t=this.props,e=t.className,n=t.nonInteractive,i=t.dense,r=t.avatarList,o=t.twoLine;return c.default("mdc-list",e,{"mdc-list--non-interactive":n,"mdc-list--dense":i,"mdc-list--avatar-list":r,"mdc-list--two-line":o})},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"adapter",{get:function(){var t=this;return{getListItemCount:function(){return t.listElements.length},getFocusedElementIndex:function(){return t.listElements.indexOf(document.activeElement)},setAttributeForElementIndex:function(e,n,i){var r=t.listElements[e];r&&r.setAttribute(n,i)},getAttributeForElementIndex:function(){return""},addClassForElementIndex:function(e,n){var i=t.state.listItemClassNames;i[e]&&-1===i[e].indexOf(n)?i[e].push(n):i[e]=[n],t.setState({listItemClassNames:i})},removeClassForElementIndex:function(e,n){var i=t.state.listItemClassNames;if(i[e]){var r=i[e].indexOf(n);-1!==r&&(i[e].splice(r,1),t.setState({listItemClassNames:i}))}},setTabIndexForListItemChildren:function(e,n){var i=t.listElements[e],r=u.MDCListFoundation.strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX;[].slice.call(i.querySelectorAll(r)).forEach(function(t){return t.setAttribute("tabindex",n)})},focusItemAtIndex:function(e){var n=t.listElements[e];n&&n.focus()},setCheckedCheckboxOrRadioAtIndex:function(){},hasCheckboxAtIndex:function(e){return!!t.listElements[e].querySelector(u.MDCListFoundation.strings.CHECKBOX_SELECTOR)},hasRadioAtIndex:function(e){return!!t.listElements[e].querySelector(u.MDCListFoundation.strings.RADIO_SELECTOR)},isCheckboxCheckedAtIndex:function(e){var n=t.listElements[e],i=u.MDCListFoundation.strings.CHECKBOX_SELECTOR;return n.querySelector(i).checked},isFocusInsideList:function(){return!!t.listElement.current&&t.listElement.current.contains(document.activeElement)},notifyAction:function(e){t.props.handleSelect(e,t.foundation.getSelectedIndex())}}},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"role",{get:function(){var t=this.props,e=t.checkboxList,n=t.radioList,i=t.role;return i||(e?"group":n?"radiogroup":null)},enumerable:!0,configurable:!0}),n.prototype.render=function(){var t=this.props,n=(t.className,t.checkboxList),i=t.radioList,r=(t.nonInteractive,t.dense,t.avatarList,t.twoLine,t.singleSelection,t.role,t.selectedIndex,t.handleSelect,t.wrapFocus,t.children),a=t.tag,c=s(t,["className","checkboxList","radioList","nonInteractive","dense","avatarList","twoLine","singleSelection","role","selectedIndex","handleSelect","wrapFocus","children","tag"]);return l.default.createElement(a,o({className:this.classes,ref:this.listElement,role:this.role},c),l.default.createElement(e.ListItemContext.Provider,{value:this.getListPropsMemoized(n,i)},r))},n.defaultProps={className:"",checkboxList:!1,radioList:!1,nonInteractive:!1,dense:!1,avatarList:!1,twoLine:!1,singleSelection:!1,selectedIndex:-1,handleSelect:function(){},wrapFocus:!0,"aria-orientation":"vertical",tag:"ul"},n}(l.default.Component);e.default=y},39:function(t,e,n){"use strict";function i(t){return t instanceof Array}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCListFoundation",function(){return l});var r=n(125),o=n(126),s=n(127),a=["input","button","textarea","select"],l=function(t){function e(n){var i=t.call(this,r.a({},e.defaultAdapter,n))||this;return i.wrapFocus_=!1,i.isVertical_=!0,i.isSingleSelectionList_=!1,i.selectedIndex_=s.b.UNSET_INDEX,i.focusedItemIndex_=s.b.UNSET_INDEX,i.useActivatedClass_=!1,i.ariaCurrentAttrValue_=null,i.isCheckboxList_=!1,i.isRadioList_=!1,i}return r.b(e,t),Object.defineProperty(e,"strings",{get:function(){return s.c},enumerable:!0,configurable:!0}),Object.defineProperty(e,"cssClasses",{get:function(){return s.a},enumerable:!0,configurable:!0}),Object.defineProperty(e,"numbers",{get:function(){return s.b},enumerable:!0,configurable:!0}),Object.defineProperty(e,"defaultAdapter",{get:function(){return{addClassForElementIndex:function(){},focusItemAtIndex:function(){},getAttributeForElementIndex:function(){return null},getFocusedElementIndex:function(){return 0},getListItemCount:function(){return 0},hasCheckboxAtIndex:function(){return!1},hasRadioAtIndex:function(){return!1},isCheckboxCheckedAtIndex:function(){return!1},isFocusInsideList:function(){return!1},notifyAction:function(){},removeClassForElementIndex:function(){},setAttributeForElementIndex:function(){},setCheckedCheckboxOrRadioAtIndex:function(){},setTabIndexForListItemChildren:function(){}}},enumerable:!0,configurable:!0}),e.prototype.layout=function(){0!==this.adapter_.getListItemCount()&&(this.adapter_.hasCheckboxAtIndex(0)?this.isCheckboxList_=!0:this.adapter_.hasRadioAtIndex(0)&&(this.isRadioList_=!0))},e.prototype.setWrapFocus=function(t){this.wrapFocus_=t},e.prototype.setVerticalOrientation=function(t){this.isVertical_=t},e.prototype.setSingleSelection=function(t){this.isSingleSelectionList_=t},e.prototype.setUseActivatedClass=function(t){this.useActivatedClass_=t},e.prototype.getSelectedIndex=function(){return this.selectedIndex_},e.prototype.setSelectedIndex=function(t){this.isIndexValid_(t)&&(this.isCheckboxList_?this.setCheckboxAtIndex_(t):this.isRadioList_?this.setRadioAtIndex_(t):this.setSingleSelectionAtIndex_(t))},e.prototype.handleFocusIn=function(t,e){e>=0&&this.adapter_.setTabIndexForListItemChildren(e,"0")},e.prototype.handleFocusOut=function(t,e){var n=this;e>=0&&this.adapter_.setTabIndexForListItemChildren(e,"-1"),setTimeout(function(){n.adapter_.isFocusInsideList()||n.setTabindexToFirstSelectedItem_()},0)},e.prototype.handleKeydown=function(t,e,n){var i="ArrowLeft"===t.key||37===t.keyCode,r="ArrowUp"===t.key||38===t.keyCode,o="ArrowRight"===t.key||39===t.keyCode,a="ArrowDown"===t.key||40===t.keyCode,l="Home"===t.key||36===t.keyCode,c="End"===t.key||35===t.keyCode,u="Enter"===t.key||13===t.keyCode,d="Space"===t.key||32===t.keyCode,f=this.adapter_.getFocusedElementIndex(),p=s.b.UNSET_INDEX;if(!(f===s.b.UNSET_INDEX&&(f=n)<0)){if(this.isVertical_&&a||!this.isVertical_&&o)this.preventDefaultEvent_(t),p=this.focusNextElement(f);else if(this.isVertical_&&r||!this.isVertical_&&i)this.preventDefaultEvent_(t),p=this.focusPrevElement(f);else if(l)this.preventDefaultEvent_(t),p=this.focusFirstElement();else if(c)this.preventDefaultEvent_(t),p=this.focusLastElement();else if((u||d)&&e){var h=t.target;if(h&&"A"===h.tagName&&u)return;this.preventDefaultEvent_(t),this.isSelectableList_()&&this.setSelectedIndexOnAction_(f),this.adapter_.notifyAction(f)}this.focusedItemIndex_=f,p>=0&&(this.setTabindexAtIndex_(p),this.focusedItemIndex_=p)}},e.prototype.handleClick=function(t,e){t!==s.b.UNSET_INDEX&&(this.isSelectableList_()&&this.setSelectedIndexOnAction_(t,e),this.adapter_.notifyAction(t),this.setTabindexAtIndex_(t),this.focusedItemIndex_=t)},e.prototype.focusNextElement=function(t){var e=this.adapter_.getListItemCount(),n=t+1;if(n>=e){if(!this.wrapFocus_)return t;n=0}return this.adapter_.focusItemAtIndex(n),n},e.prototype.focusPrevElement=function(t){var e=t-1;if(e<0){if(!this.wrapFocus_)return t;e=this.adapter_.getListItemCount()-1}return this.adapter_.focusItemAtIndex(e),e},e.prototype.focusFirstElement=function(){return this.adapter_.focusItemAtIndex(0),0},e.prototype.focusLastElement=function(){var t=this.adapter_.getListItemCount()-1;return this.adapter_.focusItemAtIndex(t),t},e.prototype.preventDefaultEvent_=function(t){var e=t.target,n=(""+e.tagName).toLowerCase();-1===a.indexOf(n)&&t.preventDefault()},e.prototype.setSingleSelectionAtIndex_=function(t){if(this.selectedIndex_!==t){var e=s.a.LIST_ITEM_SELECTED_CLASS;this.useActivatedClass_&&(e=s.a.LIST_ITEM_ACTIVATED_CLASS),this.selectedIndex_!==s.b.UNSET_INDEX&&this.adapter_.removeClassForElementIndex(this.selectedIndex_,e),this.adapter_.addClassForElementIndex(t,e),this.setAriaForSingleSelectionAtIndex_(t),this.selectedIndex_=t}},e.prototype.setAriaForSingleSelectionAtIndex_=function(t){this.selectedIndex_===s.b.UNSET_INDEX&&(this.ariaCurrentAttrValue_=this.adapter_.getAttributeForElementIndex(t,s.c.ARIA_CURRENT));var e=null!==this.ariaCurrentAttrValue_,n=e?s.c.ARIA_CURRENT:s.c.ARIA_SELECTED;this.selectedIndex_!==s.b.UNSET_INDEX&&this.adapter_.setAttributeForElementIndex(this.selectedIndex_,n,"false");var i=e?this.ariaCurrentAttrValue_:"true";this.adapter_.setAttributeForElementIndex(t,n,i)},e.prototype.setRadioAtIndex_=function(t){this.adapter_.setCheckedCheckboxOrRadioAtIndex(t,!0),this.selectedIndex_!==s.b.UNSET_INDEX&&this.adapter_.setAttributeForElementIndex(this.selectedIndex_,s.c.ARIA_CHECKED,"false"),this.adapter_.setAttributeForElementIndex(t,s.c.ARIA_CHECKED,"true"),this.selectedIndex_=t},e.prototype.setCheckboxAtIndex_=function(t){for(var e=0;e<this.adapter_.getListItemCount();e++){var n=!1;t.indexOf(e)>=0&&(n=!0),this.adapter_.setCheckedCheckboxOrRadioAtIndex(e,n),this.adapter_.setAttributeForElementIndex(e,s.c.ARIA_CHECKED,n?"true":"false")}this.selectedIndex_=t},e.prototype.setTabindexAtIndex_=function(t){this.focusedItemIndex_===s.b.UNSET_INDEX&&0!==t?this.adapter_.setAttributeForElementIndex(0,"tabindex","-1"):this.focusedItemIndex_>=0&&this.focusedItemIndex_!==t&&this.adapter_.setAttributeForElementIndex(this.focusedItemIndex_,"tabindex","-1"),this.adapter_.setAttributeForElementIndex(t,"tabindex","0")},e.prototype.isSelectableList_=function(){return this.isSingleSelectionList_||this.isCheckboxList_||this.isRadioList_},e.prototype.setTabindexToFirstSelectedItem_=function(){var t=0;this.isSelectableList_()&&("number"==typeof this.selectedIndex_&&this.selectedIndex_!==s.b.UNSET_INDEX?t=this.selectedIndex_:i(this.selectedIndex_)&&this.selectedIndex_.length>0&&(t=this.selectedIndex_.reduce(function(t,e){return Math.min(t,e)}))),this.setTabindexAtIndex_(t)},e.prototype.isIndexValid_=function(t){var e=this;if(t instanceof Array){if(!this.isCheckboxList_)throw new Error("MDCListFoundation: Array of index is only supported for checkbox based list");return 0===t.length||t.some(function(t){return e.isIndexInRange_(t)})}if("number"==typeof t){if(this.isCheckboxList_)throw new Error("MDCListFoundation: Expected array of index for checkbox based list but got number: "+t);return this.isIndexInRange_(t)}return!1},e.prototype.isIndexInRange_=function(t){var e=this.adapter_.getListItemCount();return t>=0&&t<e},e.prototype.setSelectedIndexOnAction_=function(t,e){void 0===e&&(e=!0),this.isCheckboxList_?this.toggleCheckboxAtIndex_(t,e):this.setSelectedIndex(t)},e.prototype.toggleCheckboxAtIndex_=function(t,e){var n=this.adapter_.isCheckboxCheckedAtIndex(t);e&&(n=!n,this.adapter_.setCheckedCheckboxOrRadioAtIndex(t,n)),this.adapter_.setAttributeForElementIndex(t,s.c.ARIA_CHECKED,n?"true":"false");var i=this.selectedIndex_===s.b.UNSET_INDEX?[]:this.selectedIndex_.slice();n?i.push(t):i=i.filter(function(e){return e!==t}),this.selectedIndex_=i},e}(o.a);e.default=l}})});

dist/ListDivider.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 export interface ListDividerProps extends React.HTMLProps<HTMLElement> {
@@ -3,0 +3,0 @@ className?: string;

dist/ListGroup.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 export interface ListGroupProps extends React.HTMLProps<HTMLElement> {
@@ -3,0 +3,0 @@ className?: string;

dist/ListGroupSubheader.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 export interface ListGroupSubheaderProps extends React.HTMLProps<HTMLElement> {
@@ -3,0 +3,0 @@ className?: string;

dist/ListItem.d.ts

@@ -1,24 +0,35 @@
-import * as React from 'react';
-export interface ListItemProps<T> extends React.HTMLProps<T> {
-    className: string;
-    classNamesFromList: string[];
-    attributesFromList: object;
-    childrenTabIndex: number;
-    tabIndex: number;
-    shouldFocus: boolean;
-    shouldFollowHref: boolean;
-    shouldToggleCheckbox: boolean;
-    tag: string;
-    children: React.ReactNode;
+import React from 'react';
+import { ListItemContextShape } from './index';
+export interface ListItemProps<T extends HTMLElement = HTMLElement> extends React.HTMLProps<T>, ListItemContextShape {
+    checkboxList?: boolean;
+    radioList?: boolean;
+    tag?: string;
+    activated?: boolean;
+    selected?: boolean;
+    ref?: React.Ref<any>;
 }
-export default class ListItem<T extends {} = HTMLElement> extends React.Component<ListItemProps<T>, {}> {
-    listItemElement_: React.RefObject<T>;
+export interface ListItemState {
+    tabIndex?: number;
+}
+export declare class ListItemBase<T extends HTMLElement = HTMLElement> extends React.Component<ListItemProps<T>, ListItemState> {
+    private listItemElement;
     static defaultProps: Partial<ListItemProps<HTMLElement>>;
-    componentDidUpdate(prevProps: ListItemProps<T>): void;
+    state: {
+        tabIndex: number | undefined;
+    };
+    readonly listElements: Element[];
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ListItemProps): void;
+    componentWillUnmount(): void;
     readonly classes: string;
-    focus(): void;
-    followHref(): void;
-    toggleCheckbox(): void;
+    readonly role: string | null;
+    private initializeTabIndex;
+    getIndex: (listElement: Element) => number;
+    handleClick: (e: React.MouseEvent<any>) => void;
+    handleKeyDown: (e: React.KeyboardEvent<any>) => void;
+    handleFocus: (e: React.FocusEvent<any>) => void;
+    handleBlur: (e: React.FocusEvent<any>) => void;
     render(): JSX.Element;
-    renderChild: (child: React.ReactChild) => React.ReactChild;
 }
+declare const ListItem: React.FunctionComponent<ListItemProps>;
+export default ListItem;

dist/ListItemGraphic.d.ts

@@ -1,4 +0,3 @@
-import * as React from 'react';
+import React from 'react';
 export interface ListItemGraphicProps {
-    tabbableOnListItemFocus?: boolean;
     className?: string;
@@ -5,0 +4,0 @@ tabIndex?: number;

dist/ListItemMeta.d.ts

@@ -1,4 +0,3 @@
-import * as React from 'react';
+import React from 'react';
 export interface ListItemMetaProps {
-    tabbableOnListItemFocus?: boolean;
     className?: string;
@@ -5,0 +4,0 @@ tabIndex?: number;

dist/ListItemText.d.ts

@@ -1,4 +0,3 @@
-import * as React from 'react';
+import React from 'react';
 export interface ListItemTextProps {
-    tabbableOnListItemFocus?: boolean;
     tabIndex?: number;
@@ -5,0 +4,0 @@ className?: string;

package.json

 {
   "name": "@material/react-list",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Material Components React List",
@@ -19,4 +19,8 @@ "license": "MIT",
   "dependencies": {
-    "@material/list": "^0.41.0",
+    "@material/dom": "^1.1.0",
+    "@material/list": "^1.0.0",
+    "@material/react-checkbox": "^0.10.0",
+    "@material/react-radio": "^0.10.0",
     "classnames": "^2.2.6",
+    "memoize-one": "^5.0.4",
     "react": "^16.4.2"
@@ -26,3 +30,6 @@ },
     "access": "public"
+  },
+  "devDependencies": {
+    "@types/memoize-one": "^4.1.1"
   }
 }

README.md

@@ -122,3 +122,3 @@ # React List
 import List, {
-  ListItem, ListItemText, ListGroup, 
+  ListItem, ListItemText, ListGroup,
   ListGroupSubheader,ListDivider
@@ -189,2 +189,93 @@ } from '@material/react-list';
 
+### Checkbox Lists
+
+You can use the `checkboxList` Boolean prop for `List` to enable the checkbox list logic. You must also set `selectedIndex` of the list to an array. `selectedIndex` will be an empty array if there is no initial selection. Setting `selectedIndex` will initialize the list with the correct `tabIndex`. Changing this programatically will not affect the checkboxes -- you must programatically change the checkbox via it's `checked` prop and update `selectedIndex` to keep a11y up to date. See the [Checkbox Readme](../checkbox/README.md) for more details.
+
+```jsx
+import React, {Component} from 'react';
+import List, {ListItem, ListItemText} from '@material/react-list';
+import Checkbox from '@material/react-checkbox';
+
+class MyApp extends Component {
+  state = {
+    selectedIndex: [1],
+  };
+
+  render() {
+    return (
+      <List
+        checkboxList
+        selectedIndex={this.state.selectedIndex}
+        handleSelect={(activatedIndex, allSelected) => this.setState({selectedIndex: allSelected})}
+      >
+        <ListItem>
+          <Checkbox />
+          <ListItemText primaryText='Photos'/>
+        </ListItem>
+        <ListItem>
+          <Checkbox checked />
+          <ListItemText primaryText='Recipes'/>
+        </ListItem>
+        <ListItem>
+          <Checkbox />
+          <ListItemText primaryText='Work'/>
+        </ListItem>
+      </List>
+    );
+  }
+}
+```
+
+### Radio Lists
+
+You can use the `radioList` Boolean prop for `List` to enable the radio list logic. Set `selectedIndex` to the index of the listItem initially selected to accurately setup the component for a11y. Changing `selectedIndex` programatically will not affect the radio element -- you must instead programatically change the radio via it's `checked` prop. Interactions (click/arrow keys) will update the radios as expected. To get the selectedIndex, setup the radio's `onChange` method as shown below. See the [Radio Readme](../radio/README.md) for more details.
+
+> Note: We know this API is inconsistent with checkbox list. This is because the implementations of radio and checkbox differ. In the coming months, we will try to normalize the design. 
+
+```jsx
+import React, {Component} from 'react';
+import List, {ListItem, ListItemText} from '@material/react-list';
+import Radio, {NativeRadioControl} from '@material/react-radio';
+
+class MyApp extends Component {
+  state = {
+    selectedItem: 'Milk',
+  };
+
+  handleChange = (e) => {
+    this.setState({selectedItem: e.target.value});
+  }
+
+  render() {
+    const listItems = ['Photos', 'Recipes', 'Work'];
+
+    return (
+      <List
+        radioList
+        selectedIndex={0}
+      >
+        {
+          listItems.map((item, index) => {
+            return (
+              <ListItem key={index}>
+                <Radio>
+                  <NativeRadioControl
+                    name={item}
+                    checked={this.state.selectedItem === item}
+                    value={item}
+                    id={`${index}-${item}`}
+                    onChange={this.handleChange}
+                  />
+                </Radio>
+                <ListItemText primaryText='Photos'/>
+              </ListItem>
+            );
+          })
+        }
+      </List>
+    );
+  }
+}
+```
+
 ## Props
@@ -194,75 +285,67 @@
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list element
-nonInteractive | Boolean | Disables interactivity affordances
-dense | Boolean | Styles the density of the list, making it appear more compact
-avatarList | Boolean | Configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger
-twoLine | Boolean | Styles the list with two lines
-singleSelection | Boolean | Allows for single selection of list items
-wrapFocus | Boolean | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa
-selectedIndex | Number | Toggles the selected state of the list item at the given index
-handleSelect | Function(selectedIndex: Number) => void | Callback for handling a list item selection event
-aria-orientation | String | Indicates the list orientation
-tag | String | Customizes the list tag type (defaults to `'ul'`)
+| Prop Name        | Type                                    | Description                                                                                                                       |
+| ---------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| className        | String                                  | Classes to be applied to the list element                                                                                         |
+| nonInteractive   | Boolean                                 | Disables interactivity affordances                                                                                                |
+| dense            | Boolean                                 | Styles the density of the list, making it appear more compact                                                                     |
+| avatarList       | Boolean                                 | Configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger |
+| twoLine          | Boolean                                 | Styles the list with two lines                                                                                                    |
+| singleSelection  | Boolean                                 | Allows for single selection of list items                                                                                         |
+| wrapFocus        | Boolean                                 | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa                     |
+| checkboxList     | Boolean                                 | Set the list to act as a checkbox list |
+| radioList        | Boolean                                 | Set the list to act as a radio list |
+| selectedIndex    | Number | Array<Number>       | Toggles the selected state of the list item at the given index. Behaves differently for checkboxList and radioList (see sections above for more detail). |
+| handleSelect     | Function(activatedItemIndex: Number, selected: Number | Array<Number>) => void | Callback for handling a list item selection event. `selected` will be an Array,Number> for checkbox lists. |
+| aria-orientation | String                                  | Indicates the list orientation                                                                                                    |
+| tag              | String                                  | Customizes the list tag type (defaults to `'ul'`)                                                                                 |
 
 ### ListItem
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list item element
-classNamesFromList | Array<String> | Additional classes to be applied to the list item element, passed down from list
-attributesFromList | Array | Additional attributes to be applied to the list item element, passed down from list
-childrenTabIndex | Number | Tab index to be applied to all children of the list item
-shouldFocus | Boolean | Whether to focus the list item
-shouldFollowHref | Boolean | Whether to follow the link indicated by the list item
-shouldToggleCheckbox | Boolean | Whether to toggle the checkbox on the list item
-onClick | Function(evt: Event) => void | Callback for handling a click event
-onKeyDown | Function(evt: Event) => void | Callback for handling a keydown event
-onFocus | Function(evt: Event) => void | Callback for handling a focus event
-onBlur | Function(evt: Event) => void | Callback for handling a blur event
-tag | String | Customizes the list tag type (defaults to `'li'`)
+| Prop Name            | Type                         | Description                                                                         |
+| -------------------- | ---------------------------- | ----------------------------------------------------------------------------------- |
+| tag                  | String                       | Customizes the list tag type (defaults to `'li'`)                                   |
+| checkboxList | Boolean | Set the list item to act as a checkbox list |
+| radioList | Boolean | Set the list item to act as a radio list |
+| activated | Boolean | Sets the list item to the activated state |
+| selected | Boolean | Sets the list item to the selected state |
 
 ### ListItemText
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list item text element
-tabIndex | Number | Tab index of the list item text
-tabbableOnListItemFocus | Boolean | Whether focusing list item will toggle tab index of the list item text. If false, the tab index will always be -1
-primaryText | String | Primary text for the list item
-secondaryText | String | Secondary text for the list item
+| Prop Name               | Type    | Description                                                                                                       |
+| ----------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| className               | String  | Classes to be applied to the list item text element                                                               |
+| tabIndex                | Number  | Tab index of the list item text                                                                                   |
+| primaryText             | String  | Primary text for the list item                                                                                    |
+| secondaryText           | String  | Secondary text for the list item                                                                                  |
 
 ### ListItemGraphic
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list item graphic element
-tabIndex | Number | Tab index of the list item graphic
-tabbableOnListItemFocus | Boolean | Whether focusing list item will toggle tab index of the list item graphic. If false, the tab index will always be -1
-graphic | Element | The graphic element to be displayed in front of list item text
+| Prop Name               | Type    | Description                                                                                                          |
+| ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
+| className               | String  | Classes to be applied to the list item graphic element                                                               |
+| tabIndex                | Number  | Tab index of the list item graphic                                                                                   |
+| graphic                 | Element | The graphic element to be displayed in front of list item text                                                       |
 
 ### ListItemMeta
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list item meta element
-tabIndex | Number | Tab index of the list item meta
-tabbableOnListItemFocus | Boolean | Whether focusing list item will toggle tab index of the list item meta. If false, the tab index will always be -1
-meta | Element or String | The meta element or string to be displayed behind list item text
+| Prop Name               | Type              | Description                                                                                                       |
+| ----------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------- |
+| className               | String            | Classes to be applied to the list item meta element                                                               |
+| tabIndex                | Number            | Tab index of the list item meta                                                                                   |
+| meta                    | Element or String | The meta element or string to be displayed behind list item text                                                  |
 
 ### ListDivider
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list divider
-tag | String | Element tag of the list divider, defaults to `li`
-role | String | ARIA role of the list divider, defaults to `separator`
+| Prop Name | Type   | Description                                            |
+| --------- | ------ | ------------------------------------------------------ |
+| className | String | Classes to be applied to the list divider              |
+| tag       | String | Element tag of the list divider, defaults to `li`      |
+| role      | String | ARIA role of the list divider, defaults to `separator` |
 
 ### ListGroup
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list group
-tag | String | Element tag of the list group, defaults to `div`
+| Prop Name | Type   | Description                                      |
+| --------- | ------ | ------------------------------------------------ |
+| className | String | Classes to be applied to the list group          |
+| tag       | String | Element tag of the list group, defaults to `div` |
 
@@ -272,6 +355,6 @@
 
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the list group subheader
-tag | String | Element tag of the list group subheader, defaults to `h3`
+| Prop Name | Type   | Description                                               |
+| --------- | ------ | --------------------------------------------------------- |
+| className | String | Classes to be applied to the list group subheader         |
+| tag       | String | Element tag of the list group subheader, defaults to `h3` |
 
@@ -278,0 +361,0 @@ ## Sass Mixins

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

346998

increased by76.45%

Lines of code

3152

increased by27.3%

Number of lines in readme file

362

increased by29.75%

Worsened metrics

Dependency count

7

increased by133.33%

Dev dependency count

1

increased byInfinity%

Dependency changes

• + Added@material/dom@^1.1.0

• + Added@material/react-checkbox@^0.10.0

• + Added@material/react-radio@^0.10.0

• + Addedmemoize-one@^5.0.4

• + Added@material/animation@1.0.0(transitive)

• + Added@material/base@1.0.0(transitive)

• + Added@material/checkbox@0.41.0(transitive)

• + Added@material/dom@1.1.0(transitive)

• + Added@material/feature-targeting@0.44.1(transitive)

• + Added@material/form-field@0.41.0(transitive)

• + Added@material/list@1.1.1(transitive)

• + Added@material/radio@0.41.0(transitive)

• + Added@material/react-checkbox@0.10.0(transitive)

• + Added@material/react-radio@0.10.0(transitive)

• + Added@material/react-ripple@0.10.0(transitive)

• + Added@material/ripple@1.1.0(transitive)

• + Added@material/rtl@0.42.0(transitive)

• + Added@material/selection-control@0.41.0(transitive)

• + Added@material/shape@1.1.1(transitive)

• + Added@material/theme@1.1.0(transitive)

• + Added@material/typography@1.0.0(transitive)

• + Addedmemoize-one@5.2.1(transitive)

• + Addedtslib@1.14.1(transitive)

• + Addedutility-types@3.11.0(transitive)

• - Removed@material/dom@0.41.0(transitive)

• - Removed@material/list@0.41.0(transitive)

• - Removed@material/shape@0.41.0(transitive)

• Updated@material/list@^1.0.0