How to use @instructure/ui-dom-utils - 10 common examples

!((function verifySpanMargin (element, margin) {
        if (!element) {
          return
        }
        const marginValues = margin ? margin.split(' ') : null
        const display = getComputedStyle(element).display

        let verticalMargin = false

        // either top or bottom margin are set
        if (margin) {
          if (marginValues[0] && (marginValues[0] !== 'none' && marginValues[0] !== '0')) {
            verticalMargin = true
          }
          if (marginValues[2] && (marginValues[2] !== 'none' && marginValues[2] !== '0')) {
            verticalMargin = true
          }
        }

        return verticalMargin && display === 'inline'
      })(this._element, this.props.margin)),
      `[View] display style is set to 'inline' and will allow for horizontal margins only.`

toggleLocatorAttributes (set) {
    // We have to find the actual DOM nodes and append the attributes
    // directly, as we can't be sure when safe cloning the child that
    // it will accept the data attribute as a prop
    this.toggleLocatorAttribute(
      findDOMNode(this._content),
      Position.contentLocatorAttribute,
      set
    )

    this.toggleLocatorAttribute(
      findDOMNode(this._target),
      Position.targetLocatorAttribute,
      set
    )
  }

handleKeyUp = e => {
    const spaceKey = e.keyCode === keycode.codes.space
    const enterKey = e.keyCode === keycode.codes.enter

    if (spaceKey || enterKey) {
      e.preventDefault()
      e.stopPropagation()

      if (spaceKey) {
        findDOMNode(this._node).click() // eslint-disable-line react/no-find-dom-node
      }
    }
  }

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") {

handleKeyDown = (event) => {
    const {
      filterText,
      selectedOption,
      selectedOption: { length }
    } = this.state

    // If the user pressed backspace while focusing on input, input is emtpy and there's selectedOptions
    if (
      (event.key === 'Backspace' || event.key === 'Delete') &&
      length > 0 &&
      filterText === '' &&
      isActiveElement(this._input)
    ) {
      this.dismiss(event, selectedOption[length - 1])
    }

    this.props.onKeyDown(event)
  }

event.preventDefault()
    return
  }

  // Account for a changing tabindex of the active element
  // (a case that happens with Menu for KO a11y)
  if (containsActiveElement(element)) {
    const activeElement = getActiveElement()
    if (tabbable.indexOf(activeElement) === -1) {
      tabbable.push(activeElement)
    }
  }

  const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1]
  const leavingFinalTabbable = (
    isActiveElement(finalTabbable) ||
    // handle immediate shift+tab after opening with mouse
    isActiveElement(node) ||
    // already left final tabbable
    !containsActiveElement(element)
  )

  if (!leavingFinalTabbable) return

  if (typeof onLeavingFinalTabbable === 'function') {
    onLeavingFinalTabbable()
    return
  }

  event.preventDefault()
  const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0]
  target.focus()