How to use @material/list - 10 common examples

focusActiveNavigationItem: function () {
                var activeNavItemEl = _this.root_.querySelector("." + MDCListFoundation.cssClasses.LIST_ITEM_ACTIVATED_CLASS);
                if (activeNavItemEl) {
                    activeNavItemEl.focus();
                }
            },
            notifyClose: function () { return _this.emit(strings.CLOSE_EVENT, {}, true /* shouldBubble */); },

getListItem_(target) {
    let isListItem = this.adapter_.elementContainsClass(target, MDCListFoundation.cssClasses.LIST_ITEM_CLASS);

    while (!isListItem) {
      target = this.adapter_.getParentElement(target);
      if (target) {
        isListItem = this.adapter_.elementContainsClass(target, MDCListFoundation.cssClasses.LIST_ITEM_CLASS);
      } else { // target has no parent element.
        return null;
      }
    }

    return target;
  }

getSelectionGroup_(listItem) {
    let parent = this.adapter_.getParentElement(listItem);
    let isGroup = this.adapter_.elementContainsClass(parent, cssClasses.MENU_SELECTION_GROUP);

    // Iterate through ancestors until we find the group or get to the list.
    while (!isGroup && !this.adapter_.elementContainsClass(parent, MDCListFoundation.cssClasses.ROOT)) {
      parent = this.adapter_.getParentElement(listItem);
      isGroup = this.adapter_.elementContainsClass(parent, cssClasses.MENU_SELECTION_GROUP);
    }

    if (isGroup) {
      return parent;
    } else {
      return null;
    }
  }

getListItem_(target) {
    let isListItem = this.adapter_.elementContainsClass(target, MDCListFoundation.cssClasses.LIST_ITEM_CLASS);

    while (!isListItem) {
      target = this.adapter_.getParentElement(target);
      if (target) {
        isListItem = this.adapter_.elementContainsClass(target, MDCListFoundation.cssClasses.LIST_ITEM_CLASS);
      } else { // target has no parent element.
        return null;
      }
    }

    return target;
  }

lists.forEach((list, index) => {
        const listControl = new MDCList(list)
        listControl.listElements.map((listItemEl) => new MDCRipple(listItemEl))
        listControl.singleSelection = this.props.singleSelection
        listControl.listen('MDCList:action', (evt: any) => {
          this.fire('itemclick', { item: this.props.items[evt.detail.index], index: evt.detail.index })
          // if(this.listAll[index][evt.detail.index]) {
          //   this.fire('change', this.listAll[index][evt.detail.index])
          // } else {
          //   this.fire('change', this.listAll[index+1][evt.detail.index])
          // }
        })
      })
    })

getListItemIndex(
    evt: React.FocusEvent | React.KeyboardEvent | React.MouseEvent
  ) {
    let eventTarget = evt.target as HTMLElement | null;
    let index = -1;

    // Find the first ancestor that is a list item or the list.
    while (
      eventTarget &&
      !eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      ) &&
      !eventTarget.classList.contains(MDCListFoundation.cssClasses.ROOT)
    ) {
      eventTarget = eventTarget.parentElement as HTMLLIElement;
    }

    // Get the index of the element if it is a list item.
    if (
      eventTarget &&
      eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      )
    ) {
      index = this.listElements.indexOf(eventTarget as HTMLLIElement);
    }

// Find the first ancestor that is a list item or the list.
    while (
      eventTarget &&
      !eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      ) &&
      !eventTarget.classList.contains(MDCListFoundation.cssClasses.ROOT)
    ) {
      eventTarget = eventTarget.parentElement as HTMLLIElement;
    }

    // Get the index of the element if it is a list item.
    if (
      eventTarget &&
      eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      )
    ) {
      index = this.listElements.indexOf(eventTarget as HTMLLIElement);
    }

    return index;
  }

(evt: React.MouseEvent) => {
      props.onClick?.(evt);

      const index = getListItemIndex(evt);

      // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
      const toggleCheckbox = !matches(
        evt.target as HTMLElement,
        MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
      );

      foundation.handleClick(index, toggleCheckbox);
    },
    [getListItemIndex, foundation, props.onClick]

handleClick(evt: React.MouseEvent) {
    this.props.onClick && this.props.onClick(evt);

    const index = this.getListItemIndex(evt);

    // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
    const toggleCheckbox = !matches(
      evt.target as HTMLElement,
      MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
    );

    this.foundation.handleClick(index, toggleCheckbox);
  }

getDefaultFoundation() {
    return new MDCListFoundation(
      /** @type {!MDCListAdapter} */ (Object.assign({
        getListItemCount: () => this.listElements.length,
        getFocusedElementIndex: () =>
          this.listElements.indexOf(document.activeElement as HTMLLIElement),
        setAttributeForElementIndex: (
          index: number,
          attr: string,
          value: string | number
        ) => {
          // This value is getting set and never getting set back
          // This is causing list items to be un-tabbable
          if (attr === 'tabindex' && value === -1) {
            return;
          }

          const element = this.listElements[index];