@progress/kendo-react-common/navigation.mjs

React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
class l {
  constructor(t) {
    this.rovingTabIndex = !0, this.update = () => {
    }, this.setFocusClass = (s) => {
      s.target.classList.add(this.focusClass);
    }, this.disableTabindexForRest = (s) => {
      this.elements.forEach((e) => {
        e !== s && e.setAttribute("tabindex", "-1");
      });
    }, this.focusNextIndex = (s, e, i) => {
      const n = e === 1 ? this.next(s, i) : this.previous(s, i);
      return this.focusElement(n, s), n;
    }, this.tabIndex = t.tabIndex || 0, this.root = t.root, this.selectors = t.selectors, this.focusOptions = t.focusOptions || { preventScroll: !0 }, this.rovingTabIndex = t.rovingTabIndex !== void 0 ? t.rovingTabIndex : !0, this.mouseEvents = t.mouseEvents || {}, this.keyboardEvents = t.keyboardEvents || {}, this.focusClass = t.focusClass, this.lastFocused = null;
  }
  /**
   * Returns the collection of DOM elements which the module will navigate in.
   */
  get elements() {
    return this.root.current ? Array.from(this.root.current.querySelectorAll(this.selectors.join(","))) : [];
  }
  /**
   * Returns the first navigation DOM element.
   */
  get first() {
    return this.root.current && this.root.current.querySelector(this.selectors.join(",")) || null;
  }
  /**
   * Returns the last navigation DOM element.
   */
  get last() {
    const t = this.elements;
    return t[t.length - 1] || null;
  }
  /**
   * Returns the focused DOM element from the navigation collection of DOM elements.
   */
  get current() {
    return this.elements.find((t) => t.matches(":focus")) || null;
  }
  /**
   * Returns the next DOM element from the navigation collection of DOM elements.
   */
  next(t, s) {
    const e = s ? this.customElements(s) : this.elements;
    let i = e.indexOf(t) + 1;
    return i = i < 0 ? e.length - 1 : i, e[i % e.length];
  }
  /**
   * Returns the previous DOM element from the navigation collection of DOM elements.
   */
  previous(t, s) {
    const e = s ? this.customElements(s) : this.elements;
    let i = e.indexOf(t) - 1;
    return i = i < 0 ? e.length - 1 : i, e[i % e.length];
  }
  /**
   * Focuses the next element from the navigation collection of DOM elements.
   */
  focusNext(t, s) {
    return this.focusNextIndex(t, 1, s);
  }
  /**
   * Focuses the previous element from the navigation collection of DOM elements.
   */
  focusPrevious(t, s) {
    return this.focusNextIndex(t, -1, s);
  }
  /**
   * The keyboard events handler.
   */
  triggerKeyboardEvent(t, s) {
    const e = this.target(t.target), i = e && e.closest(this.selectors.join(",")), n = t.key === " " ? "Space" : t.key, r = t.nativeEvent.type;
    i && this.keyboardEvents[r][n] && this.keyboardEvents[r][n].call(void 0, i, this, t, s);
  }
  /**
   * The mouse events handler.
   */
  triggerMouseEvent(t) {
    const s = this.target(t.target), e = s && s.closest(this.selectors.join(",")), i = t.nativeEvent.type;
    e && this.mouseEvents[i].call(void 0, e, this, t);
  }
  /**
   * Focuses the passed element from the navigation collection of DOM elements.
   */
  focusElement(t, s) {
    t && (s && (this.rovingTabIndex && s.setAttribute("tabindex", "-1"), this.focusClass && (this.removeFocusClass(s), s.removeEventListener("focus", this.setFocusClass))), this.rovingTabIndex && t.setAttribute("tabindex", String(this.tabIndex)), this.focusClass && (t.classList.add(this.focusClass), t.addEventListener("focus", this.setFocusClass)), t.focus(this.focusOptions), this.lastFocused = t);
  }
  /**
   * Set the first element tabIndex to `1` and `-1` for the rest.
   */
  initializeRovingTab(t) {
    const s = t ? this.elements[t] : this.first;
    s && (this.focusClass && s.addEventListener("focus", this.setFocusClass), s.setAttribute("tabindex", String(this.tabIndex)), this.disableTabindexForRest(s));
  }
  /**
   * Remove a focus listener.
   */
  removeFocusListener() {
    this.lastFocused && this.lastFocused.removeEventListener("focus", this.setFocusClass);
  }
  /**
   * Remove a focus class.
   */
  removeFocusClass(t) {
    this.focusClass && t.classList.remove(this.focusClass);
  }
  customElements(t) {
    return this.root.current ? Array.from(this.root.current.querySelectorAll(t.join(","))) : [];
  }
  target(t) {
    var n;
    const s = t, e = s && s.ownerDocument || null, i = e && ((n = e == null ? void 0 : e.defaultView) == null ? void 0 : n.Element) || Element;
    return t instanceof i ? t : null;
  }
}
export {
  l as Navigation
};