How to use the @instructure/ui-dom-utils.getBoundingClientRect function in @instructure/ui-dom-utils

const item = this._nodeMap[i]
      if (truncate === 'word' && item.data[item.data.length - 1] === ' ') {
        // remove random whitespace data between nodes
        item.data.length -= 1
      }
      stringData[i] = item.data
      for (let j = 0; j < item.data.length; j++) {
        // map each word or character datum index to its corresponding node
        nodeDataIndexes.push(i)
      }
    }

    this._defaultStringData = cloneArray(stringData)
    this._nodeDataIndexes = cloneArray(nodeDataIndexes)
    this._maxHeight = maxLines === 'auto'
      ? getBoundingClientRect(this._parent).height
      : maxLines * actualLineHeight
    this._maxWidth = measureText(this._nodeMap.map(item => item.node), this._parent)
    this._maxLines = maxLines === 'auto'
      ? Math.round(this._maxHeight / actualLineHeight)
      : maxLines
  }

// If the element container is within a positioned
    // element, it will position absolutely with respect to that
    // ancestor. We calculate the offset between the child and
    // positioned parent so we can negate that distance
    const parents = getOffsetParents(this.node)
    const doc = ownerDocument(this.node)

    // If there is more than one parent, the offset on the
    // documentElement should be calculated appropriately.
    // Otherwise we need to explictly account for that offset
    let offsetY = parents.length > 1 ? 0 : doc.documentElement.offsetTop
    let offsetX = 0
    let scrollY = 0

    for (let i = 1; i < parents.length; i++) {
      const parent = getBoundingClientRect(parents[i])
      const child = getBoundingClientRect(parents[i - 1])

      offsetY = offsetY + (child.top - parent.top)
      offsetX = offsetX + (child.left - parent.left)

      if (parents[i] === doc.body) {
        // accounts for any margin on body
        offsetY = offsetY + parent.top
        offsetX = offsetX + parent.left
      }

      scrollY = scrollY + this.normalizeScrollTop(parents[i])
    }
    // Account for any scrolling on positioned parents
    // Without this, unnecessary scroll offset could be applied
    // to our target element

// we only call back if the matches have changed
    if (matches.length !== newMatches.length) {
      matches = newMatches
      cb(matches)
    }

    if (matches.filter(match => newMatches.indexOf(match) === -1).length > 0) {
      matches = newMatches
      cb(matches)
    }
  }

  const debounced = debounce(updateElementMatches, 100, { leading: false, trailing: true })
  const elementResizeListener = addResizeListener(node, debounced)
  const { width, height } = getBoundingClientRect(node)

  updateElementMatches({ width, height })

  return {
    remove () {
      if (elementResizeListener) {
        elementResizeListener.remove()
      }

      if (debounced) {
        debounced.cancel()
      }
    }
  }
}

overflow (element) {
    const parentWindow = ownerWindow(element)
    const elementBounds = getBoundingClientRect(element)
    const windowBounds = getBoundingClientRect(parentWindow)
    const offsets = addOffsets([this.target.position, this.offset])
    const parentOffset = {
      top: this.element.positionedParentsOffset.top + this.element.scrollParentsOffset.top,
      left: this.element.positionedParentsOffset.left + this.element.scrollParentsOffset.left
    }

    let left = offsets.left + parentOffset.left
    let right = offsets.left + this.element.width + parentOffset.left

    let top = offsets.top + parentOffset.top
    let bottom = offsets.top + this.element.height + parentOffset.top

    // adjust for vertical placements
    if (this.element.placement[0] === "bottom") {
      top -= this.element.height + this.target.height

overflow (element) {
    const parentWindow = ownerWindow(element)
    const elementBounds = getBoundingClientRect(element)
    const windowBounds = getBoundingClientRect(parentWindow)
    const offsets = addOffsets([this.target.position, this.offset])
    const parentOffset = {
      top: this.element.positionedParentsOffset.top + this.element.scrollParentsOffset.top,
      left: this.element.positionedParentsOffset.left + this.element.scrollParentsOffset.left
    }

    let left = offsets.left + parentOffset.left
    let right = offsets.left + this.element.width + parentOffset.left

    let top = offsets.top + parentOffset.top
    let bottom = offsets.top + this.element.height + parentOffset.top

    // adjust for vertical placements
    if (this.element.placement[0] === "bottom") {
      top -= this.element.height + this.target.height
    } else if (this.element.placement[0] === "top") {

scrollToOption (id) {
    if (this._listView) {
      const option = this._listView.querySelector(`[id="${id}"]`)
      if (!option) return

      const listItem = option.parentNode
      const parentTop = getBoundingClientRect(this._listView).top
      const elemTop = getBoundingClientRect(listItem).top
      const parentBottom = parentTop + this._listView.clientHeight
      const elemBottom = elemTop + listItem.clientHeight

      if (elemBottom > parentBottom) {
        this._listView.scrollTop += elemBottom - parentBottom
      } else if (elemTop < parentTop) {
        this._listView.scrollTop -= parentTop - elemTop
      }
    }
  }

scrollToOption (id) {
    if (this._listView) {
      const option = this._listView.querySelector(`[id="${id}"]`)
      if (!option) return

      const listItem = option.parentNode
      const parentTop = getBoundingClientRect(this._listView).top
      const elemTop = getBoundingClientRect(listItem).top
      const parentBottom = parentTop + this._listView.clientHeight
      const elemBottom = elemTop + listItem.clientHeight

      if (elemBottom > parentBottom) {
        this._listView.scrollTop += elemBottom - parentBottom
      } else if (elemTop < parentTop) {
        this._listView.scrollTop -= parentTop - elemTop
      }
    }
  }

handleTrayTransitionEnter = () => {
    let width = 0

    if (this._tray) {
      width = getBoundingClientRect(this._tray).width
    }

    this.handleTraySizeChange({ width })
  }