@oicl/openbridge-webcomponents 2.0.0-next.59 → 2.0.0-next.60

package/dist/internal/tree-roving-navigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-roving-navigator.js","sources":["../../src/internal/tree-roving-navigator.ts"],"sourcesContent":["import {ObcTreeNavigationItem} from '../components/tree-navigation-item/tree-navigation-item.js';\n\n/**\n * Host-specific row resolution. The two tree hosts differ only in row tags,\n * expand-state storage, and DOM shape, so injecting these hooks lets one\n * navigator drive both.\n */\nexport interface TreeRovingAdapter<Row extends HTMLElement = HTMLElement> {\n  /** Top-level rows, in document order. */\n  getRows(): Row[];\n  /** Direct child rows of a row, in document order. */\n  childRows(row: Row): Row[];\n  isGroup(row: Row): boolean;\n  isExpanded(row: Row): boolean;\n  setExpanded(row: Row, expanded: boolean): void;\n  /** The focusable `obc-tree-navigation-item` for a row (a leaf is itself). */\n  innerItem(row: Row): ObcTreeNavigationItem | null;\n  /** Defaults to false when omitted. */\n  isDisabled?(row: Row): boolean;\n}\n\n/**\n * Implements the [WAI-ARIA Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)\n * keyboard pattern for a tree host: a single tab stop (roving tabindex) plus\n * Up/Down, Left/Right (collapse/expand → parent/child), and Home/End. Type-ahead\n * and `*` are intentionally out of scope.\n *\n * The host owns the DOM and the event wiring; this class owns the navigation\n * logic. The host calls {@link handleKeydown} from its `keydown` listener and\n * {@link refresh} whenever the structure changes, and supplies a\n * {@link TreeRovingAdapter} for row resolution. Focus only moves on user keys;\n * `refresh` re-points the roving tabindex without stealing focus.\n */\nexport class TreeRovingNavigator<Row extends HTMLElement = HTMLElement> {\n  private readonly adapter: TreeRovingAdapter<Row>;\n  private readonly host: HTMLElement;\n\n  /** The row that currently holds the single tab stop (roving tabindex). */\n  private activeRow?: Row;\n\n  constructor(host: HTMLElement, adapter: TreeRovingAdapter<Row>) {\n    this.adapter = adapter;\n    this.host = host;\n  }\n\n  private isDisabled(row: Row): boolean {\n    return this.adapter.isDisabled?.(row) ?? false;\n  }\n\n  /**\n   * Depth-first list of every visible row: descend into a group only when it is\n   * expanded. Disabled rows are included so {@link refresh} can re-point to a\n   * visible ancestor; arrow navigation filters them out via {@link navigableRows}.\n   */\n  private visibleRows(): Row[] {\n    const out: Row[] = [];\n    const walk = (rows: Row[]) => {\n      for (const row of rows) {\n        out.push(row);\n        if (this.adapter.isGroup(row) && this.adapter.isExpanded(row)) {\n          walk(this.adapter.childRows(row));\n        }\n      }\n    };\n    walk(this.adapter.getRows());\n    return out;\n  }\n\n  /** Visible rows that arrow navigation can land on (enabled rows). */\n  private navigableRows(): Row[] {\n    return this.visibleRows().filter((row) => !this.isDisabled(row));\n  }\n\n  /** The parent row of a row within this tree, or undefined for a top-level row. */\n  private parentRow(target: Row): Row | undefined {\n    let found: Row | undefined;\n    const walk = (rows: Row[], parent?: Row) => {\n      for (const row of rows) {\n        if (row === target) {\n          found = parent;\n          return;\n        }\n        if (this.adapter.isGroup(row)) {\n          walk(this.adapter.childRows(row), row);\n          if (found !== undefined) return;\n        }\n      }\n    };\n    walk(this.adapter.getRows(), undefined);\n    return found;\n  }\n\n  /**\n   * Rebuild the roving tabindex: exactly one navigable row is `focusable`. Keeps\n   * the active row if still navigable; else falls back to its nearest navigable\n   * ancestor, else the first navigable row. Never moves focus.\n   */\n  refresh(): void {\n    const navigable = this.navigableRows();\n    if (navigable.length === 0) {\n      this.activeRow = undefined;\n      return;\n    }\n\n    let next: Row | undefined;\n    if (this.activeRow && navigable.includes(this.activeRow)) {\n      next = this.activeRow;\n    } else if (this.activeRow) {\n      let ancestor = this.parentRow(this.activeRow);\n      while (ancestor && !navigable.includes(ancestor)) {\n        ancestor = this.parentRow(ancestor);\n      }\n      next = ancestor ?? navigable[0];\n    } else {\n      next = navigable[0];\n    }\n\n    this.setActiveRow(next, false);\n  }\n\n  private setActiveRow(row: Row, moveFocus: boolean): void {\n    this.activeRow = row;\n    for (const candidate of this.visibleRows()) {\n      const item = this.adapter.innerItem(candidate);\n      if (item) item.focusable = candidate === row;\n    }\n    if (!moveFocus) return;\n    // A row's header may render asynchronously (e.g. right after expanding a\n    // group), so fall back to a microtask if it isn't present yet.\n    const item = this.adapter.innerItem(row);\n    if (item) item.focus();\n    else queueMicrotask(() => this.adapter.innerItem(row)?.focus());\n  }\n\n  /**\n   * The originating tree row for a keydown. A group's header lives in the\n   * group's own shadow root, so the host-root check resolves a header to its\n   * group rather than the inner header item.\n   */\n  private rowFromEvent(event: KeyboardEvent): Row | undefined {\n    // Read the root live: the navigator is constructed before the host connects.\n    const root = this.host.getRootNode();\n    for (const target of event.composedPath()) {\n      if (\n        target instanceof HTMLElement &&\n        target.getRootNode() === root &&\n        this.isRow(target)\n      ) {\n        return target as Row;\n      }\n    }\n    return undefined;\n  }\n\n  /** Whether an element is one of this tree's rows (group or leaf). */\n  private isRow(el: HTMLElement): boolean {\n    const tops = this.adapter.getRows();\n    const stack = [...tops];\n    while (stack.length) {\n      const row = stack.pop()!;\n      if (row === el) return true;\n      if (this.adapter.isGroup(row)) stack.push(...this.adapter.childRows(row));\n    }\n    return false;\n  }\n\n  /** Handle a `keydown`; returns true if the key was consumed. */\n  handleKeydown(event: KeyboardEvent): boolean {\n    const row = this.rowFromEvent(event);\n    if (!row) return false;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        this.moveByOffset(row, 1);\n        return true;\n      case 'ArrowUp':\n        this.moveByOffset(row, -1);\n        return true;\n      case 'ArrowRight':\n        this.onArrowRight(row);\n        return true;\n      case 'ArrowLeft':\n        this.onArrowLeft(row);\n        return true;\n      case 'Home':\n        this.moveToEdge(true);\n        return true;\n      case 'End':\n        this.moveToEdge(false);\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  private moveByOffset(row: Row, offset: number): void {\n    const rows = this.navigableRows();\n    const index = rows.indexOf(row);\n    if (index === -1) return;\n    const target = rows[index + offset];\n    if (target) this.setActiveRow(target, true);\n  }\n\n  private moveToEdge(first: boolean): void {\n    const rows = this.navigableRows();\n    if (rows.length === 0) return;\n    this.setActiveRow(first ? rows[0] : rows[rows.length - 1], true);\n  }\n\n  private onArrowRight(row: Row): void {\n    if (!this.adapter.isGroup(row)) return;\n    if (!this.adapter.isExpanded(row)) {\n      this.adapter.setExpanded(row, true);\n      // Re-point the roving set for hosts that don't observe expansion themselves.\n      this.refresh();\n      return;\n    }\n    const child = this.adapter.childRows(row).find((c) => !this.isDisabled(c));\n    if (child) this.setActiveRow(child, true);\n  }\n\n  private onArrowLeft(row: Row): void {\n    if (this.adapter.isGroup(row) && this.adapter.isExpanded(row)) {\n      this.adapter.setExpanded(row, false);\n      this.refresh();\n      return;\n    }\n    const parent = this.parentRow(row);\n    if (parent) this.setActiveRow(parent, true);\n  }\n}\n"],"names":["item"],"mappings":"AAiCO,MAAM,oBAA2D;AAAA,EAOtE,YAAY,MAAmB,SAAiC;AAC9D,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACd;AAAA,EAEQ,WAAW,KAAmB;AACpC,WAAO,KAAK,QAAQ,aAAa,GAAG,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,cAAqB;AAC3B,UAAM,MAAa,CAAA;AACnB,UAAM,OAAO,CAAC,SAAgB;AAC5B,iBAAW,OAAO,MAAM;AACtB,YAAI,KAAK,GAAG;AACZ,YAAI,KAAK,QAAQ,QAAQ,GAAG,KAAK,KAAK,QAAQ,WAAW,GAAG,GAAG;AAC7D,eAAK,KAAK,QAAQ,UAAU,GAAG,CAAC;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AACA,SAAK,KAAK,QAAQ,SAAS;AAC3B,WAAO;AAAA,EACT;AAAA;AAAA,EAGQ,gBAAuB;AAC7B,WAAO,KAAK,YAAA,EAAc,OAAO,CAAC,QAAQ,CAAC,KAAK,WAAW,GAAG,CAAC;AAAA,EACjE;AAAA;AAAA,EAGQ,UAAU,QAA8B;AAC9C,QAAI;AACJ,UAAM,OAAO,CAAC,MAAa,WAAiB;AAC1C,iBAAW,OAAO,MAAM;AACtB,YAAI,QAAQ,QAAQ;AAClB,kBAAQ;AACR;AAAA,QACF;AACA,YAAI,KAAK,QAAQ,QAAQ,GAAG,GAAG;AAC7B,eAAK,KAAK,QAAQ,UAAU,GAAG,GAAG,GAAG;AACrC,cAAI,UAAU,OAAW;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AACA,SAAK,KAAK,QAAQ,QAAA,GAAW,MAAS;AACtC,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAgB;AACd,UAAM,YAAY,KAAK,cAAA;AACvB,QAAI,UAAU,WAAW,GAAG;AAC1B,WAAK,YAAY;AACjB;AAAA,IACF;AAEA,QAAI;AACJ,QAAI,KAAK,aAAa,UAAU,SAAS,KAAK,SAAS,GAAG;AACxD,aAAO,KAAK;AAAA,IACd,WAAW,KAAK,WAAW;AACzB,UAAI,WAAW,KAAK,UAAU,KAAK,SAAS;AAC5C,aAAO,YAAY,CAAC,UAAU,SAAS,QAAQ,GAAG;AAChD,mBAAW,KAAK,UAAU,QAAQ;AAAA,MACpC;AACA,aAAO,YAAY,UAAU,CAAC;AAAA,IAChC,OAAO;AACL,aAAO,UAAU,CAAC;AAAA,IACpB;AAEA,SAAK,aAAa,MAAM,KAAK;AAAA,EAC/B;AAAA,EAEQ,aAAa,KAAU,WAA0B;AACvD,SAAK,YAAY;AACjB,eAAW,aAAa,KAAK,eAAe;AAC1C,YAAMA,QAAO,KAAK,QAAQ,UAAU,SAAS;AAC7C,UAAIA,MAAMA,OAAK,YAAY,cAAc;AAAA,IAC3C;AACA,QAAI,CAAC,UAAW;AAGhB,UAAM,OAAO,KAAK,QAAQ,UAAU,GAAG;AACvC,QAAI,WAAW,MAAA;AAAA,QACV,gBAAe,MAAM,KAAK,QAAQ,UAAU,GAAG,GAAG,OAAO;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,aAAa,OAAuC;AAE1D,UAAM,OAAO,KAAK,KAAK,YAAA;AACvB,eAAW,UAAU,MAAM,gBAAgB;AACzC,UACE,kBAAkB,eAClB,OAAO,YAAA,MAAkB,QACzB,KAAK,MAAM,MAAM,GACjB;AACA,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA;AAAA,EAGQ,MAAM,IAA0B;AACtC,UAAM,OAAO,KAAK,QAAQ,QAAA;AAC1B,UAAM,QAAQ,CAAC,GAAG,IAAI;AACtB,WAAO,MAAM,QAAQ;AACnB,YAAM,MAAM,MAAM,IAAA;AAClB,UAAI,QAAQ,GAAI,QAAO;AACvB,UAAI,KAAK,QAAQ,QAAQ,GAAG,EAAG,OAAM,KAAK,GAAG,KAAK,QAAQ,UAAU,GAAG,CAAC;AAAA,IAC1E;AACA,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,cAAc,OAA+B;AAC3C,UAAM,MAAM,KAAK,aAAa,KAAK;AACnC,QAAI,CAAC,IAAK,QAAO;AAEjB,YAAQ,MAAM,KAAA;AAAA,MACZ,KAAK;AACH,aAAK,aAAa,KAAK,CAAC;AACxB,eAAO;AAAA,MACT,KAAK;AACH,aAAK,aAAa,KAAK,EAAE;AACzB,eAAO;AAAA,MACT,KAAK;AACH,aAAK,aAAa,GAAG;AACrB,eAAO;AAAA,MACT,KAAK;AACH,aAAK,YAAY,GAAG;AACpB,eAAO;AAAA,MACT,KAAK;AACH,aAAK,WAAW,IAAI;AACpB,eAAO;AAAA,MACT,KAAK;AACH,aAAK,WAAW,KAAK;AACrB,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,aAAa,KAAU,QAAsB;AACnD,UAAM,OAAO,KAAK,cAAA;AAClB,UAAM,QAAQ,KAAK,QAAQ,GAAG;AAC9B,QAAI,UAAU,GAAI;AAClB,UAAM,SAAS,KAAK,QAAQ,MAAM;AAClC,QAAI,OAAQ,MAAK,aAAa,QAAQ,IAAI;AAAA,EAC5C;AAAA,EAEQ,WAAW,OAAsB;AACvC,UAAM,OAAO,KAAK,cAAA;AAClB,QAAI,KAAK,WAAW,EAAG;AACvB,SAAK,aAAa,QAAQ,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,GAAG,IAAI;AAAA,EACjE;AAAA,EAEQ,aAAa,KAAgB;AACnC,QAAI,CAAC,KAAK,QAAQ,QAAQ,GAAG,EAAG;AAChC,QAAI,CAAC,KAAK,QAAQ,WAAW,GAAG,GAAG;AACjC,WAAK,QAAQ,YAAY,KAAK,IAAI;AAElC,WAAK,QAAA;AACL;AAAA,IACF;AACA,UAAM,QAAQ,KAAK,QAAQ,UAAU,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,WAAW,CAAC,CAAC;AACzE,QAAI,MAAO,MAAK,aAAa,OAAO,IAAI;AAAA,EAC1C;AAAA,EAEQ,YAAY,KAAgB;AAClC,QAAI,KAAK,QAAQ,QAAQ,GAAG,KAAK,KAAK,QAAQ,WAAW,GAAG,GAAG;AAC7D,WAAK,QAAQ,YAAY,KAAK,KAAK;AACnC,WAAK,QAAA;AACL;AAAA,IACF;AACA,UAAM,SAAS,KAAK,UAAU,GAAG;AACjC,QAAI,OAAQ,MAAK,aAAa,QAAQ,IAAI;AAAA,EAC5C;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.59",
+  "version": "2.0.0-next.60",
   "type": "module",
   "repository": {
     "type": "git",