refactor(list): Refactor list item management

packages/list/ListGroup.js

@@ -41,7 +41,7 @@ const ListGroup = (props) => {
 
 ListGroup.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.element,
+  children: PropTypes.node,
   tag: PropTypes.string,
 };
 

packages/list/ListItem.js

@@ -27,18 +27,26 @@ import classnames from 'classnames';
 export default class ListItem extends Component {
   listItemElement_ = React.createRef();
 
-  componentDidMount() {
-    const {init} = this.props;
-    init && init();
-  }
-
-  get listItemElement() {
-    return this.listItemElement_.current;
+  componentDidUpdate(prevProps) {
+    const {
+      shouldFocus,
+      shouldFollowHref,
+      shouldToggleCheckbox,
+    } = this.props;
+    if (shouldFocus !== prevProps.shouldFocus && shouldFocus) {
+      this.focus();
+    }
+    if (shouldFollowHref !== prevProps.shouldFollowHref && shouldFollowHref) {
+      this.followHref();
+    }
+    if (shouldToggleCheckbox !== prevProps.shouldToggleCheckbox && shouldToggleCheckbox) {
+      this.toggleCheckbox();
+    }
   }
 
   get classes() {
-    const {className} = this.props;
-    return classnames('mdc-list-item', className);
+    const {className, classNamesFromList} = this.props;
+    return classnames('mdc-list-item', className, classNamesFromList);
   }
 
   focus() {
@@ -64,19 +72,23 @@ export default class ListItem extends Component {
     const {
       /* eslint-disable */
       className,
+      classNamesFromList,
       childrenTabIndex,
-      init,
-      id,
+      shouldFocus,
+      shouldFollowHref,
+      shouldToggleCheckbox,
       /* eslint-enable */
+      attributesFromList,
       children,
       ...otherProps
     } = this.props;
 
     return (
       <li
         className={this.classes}
-        ref={this.listItemElement_}
         {...otherProps}
+        {...attributesFromList} // overrides attributes in otherProps
+        ref={this.listItemElement_}
       >
         {React.Children.map(children, this.renderChild)}
       </li>
@@ -93,15 +105,32 @@ export default class ListItem extends Component {
 }
 
 ListItem.propTypes = {
-  id: PropTypes.string,
-  childrenTabIndex: PropTypes.number,
   children: PropTypes.node,
   className: PropTypes.string,
-  init: PropTypes.func,
+  classNamesFromList: PropTypes.array,
+  attributesFromList: PropTypes.object,
+  childrenTabIndex: PropTypes.number,
+  tabIndex: PropTypes.number,
+  shouldFocus: PropTypes.bool,
+  shouldFollowHref: PropTypes.bool,
+  shouldToggleCheckbox: PropTypes.bool,
+  onKeyDown: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
 };
 
 ListItem.defaultProps = {
-  id: '',
-  childrenTabIndex: -1,
   className: '',
+  classNamesFromList: [],
+  attributesFromList: {},
+  childrenTabIndex: -1,
+  tabIndex: -1,
+  shouldFocus: false,
+  shouldFollowHref: false,
+  shouldToggleCheckbox: false,
+  onKeyDown: () => {},
+  onClick: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
 };

packages/list/README.md

@@ -49,6 +49,8 @@ class MyApp extends Component {
 }
 ```
 
+> _NOTE_: Please use the `ListItem` component to specify list items. `List` will not recognize custom list item components.
+
 ## Variants
 
 ### Two-Line List
@@ -142,6 +144,8 @@ class MyApp extends Component {
 
 You can use the `singleSelection` Boolean prop for `List` to allow for selection of list items. You can also set the `selectedIndex` of the list programmatically.
 
+> _NOTE_: If you are inserting or removing list items, you must update the `selectedIndex` accordingly.
+
 ```js
 class MyApp extends React.Component {
   state = {