How to use @uifabric/utilities - 10 common examples

let target = ev.target as HTMLElement
    const path = []

    while (target && target !== this._root.current) {
      path.push(target)
      target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement
    }

    while (path.length) {
      target = path.pop() as HTMLElement

      if (target && isElementTabbable(target)) {
        this.setActiveElement(target, true)
      }

      if (isElementFocusZone(target)) {
        // Stop here since the focus zone will take care of its own children.
        break
      }
    }
  }

this._activeElement = null
      }
    }

    // If active element changes state to disabled, set it to null.
    // Otherwise, we lose keyboard accessibility to other elements in focus zone.
    if (this._activeElement && !isElementTabbable(this._activeElement)) {
      this._activeElement = null
    }

    const childNodes = element && element.children

    for (let childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {
      const child = childNodes[childIndex] as HTMLElement

      if (!isElementFocusZone(child)) {
        // If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.
        if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {
          child.setAttribute(TABINDEX, '-1')
        }

        if (isElementTabbable(child)) {
          if (this.props.disabled) {
            child.setAttribute(TABINDEX, '-1')
          } else if (
            !this._isInnerZone &&
            ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)
          ) {
            this._defaultFocusElement = child
            if (child.getAttribute(TABINDEX) !== '0') {
              child.setAttribute(TABINDEX, '0')
            }

private _getReplicaSetDescription(): JSX.Element | null {
        if (this.props.replicaSet.metadata
            && this.props.replicaSet.metadata.creationTimestamp) {
            let des = "";
            const imageName = Utils.getPodImageName(this.props.replicaSet.spec && this.props.replicaSet.spec.template);
            if (imageName) {
                des = format(Resources.AgoBy, imageName)
            }

            return (
                <div>
                    {/* todo :: not good for localization */}
                    <span>{Resources.Created} </span>
                    
                    <span>{des}</span>
                </div>
            );
        }

        return null;
    }

break
          }
        }
      } else {
        candidateElement = element
        break
      }
    } while (element)

    // Focus the closest candidate
    if (candidateElement && candidateElement !== this._activeElement) {
      changedFocus = true
      this.focusElement(candidateElement)
    } else if (this.props.isCircularNavigation && useDefaultWrap) {
      if (isForward) {
        return this.focusElement(getNextElement(
          this._root.current,
          this._root.current.firstElementChild as HTMLElement,
          true,
        ) as HTMLElement)
      }
      return this.focusElement(getPreviousElement(
        this._root.current,
        this._root.current.lastElementChild as HTMLElement,
        true,
        true,
        true,
      ) as HTMLElement)
    }

    return changedFocus
  }

if (
      isInnerZoneKeystroke &&
      isInnerZoneKeystroke(ev) &&
      this.isImmediateDescendantOfZone(ev.target as HTMLElement)
    ) {
      // Try to focus
      const innerZone = this.getFirstInnerZone()

      if (innerZone) {
        if (!innerZone.focus(true)) {
          return
        }
      } else if (isElementFocusSubZone(ev.target as HTMLElement)) {
        if (
          !this.focusElement(getNextElement(
            ev.target as HTMLElement,
            (ev.target as HTMLElement).firstChild as HTMLElement,
            true,
          ) as HTMLElement)
        ) {
          return
        }
      } else {
        return
      }
    } else if (ev.altKey) {
      return
    } else {
      switch (ev.which) {
        case KeyCodes.space:
          if (this.tryInvokeClickForFocusable(ev.target as HTMLElement)) {

public componentDidMount(): void {
    _allInstances[this._id] = this
    if (this._root.current) {
      const windowElement = this._root.current.ownerDocument.defaultView

      let parentElement = getParent(this._root.current, ALLOW_VIRTUAL_ELEMENTS)

      while (parentElement && parentElement !== document.body && parentElement.nodeType === 1) {
        if (isElementFocusZone(parentElement)) {
          this._isInnerZone = true
          break
        }
        parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS)
      }

      if (!this._isInnerZone) {
        this._events.on(windowElement, 'keydown', this.onKeyDownCapture, true)
      }

      // Assign initial tab indexes so that we can set initial focus as appropriate.
      this.updateTabIndexes()

public componentDidMount(): void {
    _allInstances[this._id] = this
    if (this._root.current) {
      const windowElement = this._root.current.ownerDocument.defaultView

      let parentElement = getParent(this._root.current, ALLOW_VIRTUAL_ELEMENTS)

      while (parentElement && parentElement !== document.body && parentElement.nodeType === 1) {
        if (isElementFocusZone(parentElement)) {
          this._isInnerZone = true
          break
        }
        parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS)
      }

      if (!this._isInnerZone) {
        this._events.on(windowElement, 'keydown', this.onKeyDownCapture, true)
      }

      // Assign initial tab indexes so that we can set initial focus as appropriate.
      this.updateTabIndexes()

      if (this.props.defaultActiveElement) {
        this._activeElement = getDocument()!.querySelector(
          this.props.defaultActiveElement,
        ) as HTMLElement
        this.focus()
      }
    }

private _onMouseDown = (ev: React.MouseEvent): void => {
    const { disabled } = this.props

    if (disabled) {
      return
    }

    let target = ev.target as HTMLElement
    const path = []

    while (target && target !== this._root.current) {
      path.push(target)
      target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement
    }

    while (path.length) {
      target = path.pop() as HTMLElement

      if (target && isElementTabbable(target)) {
        this.setActiveElement(target, true)
      }

      if (isElementFocusZone(target)) {
        // Stop here since the focus zone will take care of its own children.
        break
      }
    }
  }

}
    } while (element)

    // Focus the closest candidate
    if (candidateElement && candidateElement !== this._activeElement) {
      changedFocus = true
      this.focusElement(candidateElement)
    } else if (this.props.isCircularNavigation && useDefaultWrap) {
      if (isForward) {
        return this.focusElement(getNextElement(
          this._root.current,
          this._root.current.firstElementChild as HTMLElement,
          true,
        ) as HTMLElement)
      }
      return this.focusElement(getPreviousElement(
        this._root.current,
        this._root.current.lastElementChild as HTMLElement,
        true,
        true,
        true,
      ) as HTMLElement)
    }

    return changedFocus
  }

if (this._activeElement && !isElementTabbable(this._activeElement)) {
      this._activeElement = null
    }

    const childNodes = element && element.children

    for (let childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {
      const child = childNodes[childIndex] as HTMLElement

      if (!isElementFocusZone(child)) {
        // If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.
        if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {
          child.setAttribute(TABINDEX, '-1')
        }

        if (isElementTabbable(child)) {
          if (this.props.disabled) {
            child.setAttribute(TABINDEX, '-1')
          } else if (
            !this._isInnerZone &&
            ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)
          ) {
            this._defaultFocusElement = child
            if (child.getAttribute(TABINDEX) !== '0') {
              child.setAttribute(TABINDEX, '0')
            }
          } else if (child.getAttribute(TABINDEX) !== '-1') {
            child.setAttribute(TABINDEX, '-1')
          }
        } else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {
          // Disgusting IE hack. Sad face.
          child.setAttribute('focusable', 'false')