openproject-primer_view_components 0.64.0 → 0.65.0

data/app/components/primer/open_project/tree_view/sub_tree_node.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A `TreeView` sub-tree node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class SubTreeNode < Primer::Component
+        DEFAULT_SELECT_STRATEGY = :descendants
+        SELECT_STRATEGIES = [
+          :self,
+          DEFAULT_SELECT_STRATEGY
+        ]
+
+        # @!parse
+        #   # Adds a leading visual icon rendered to the left of the node's label.
+        #   #
+        #   # @param label [String] A label describing the visual, displayed only to screen readers.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   def with_leading_visual_icon(label: nil, **system_arguments, &block)
+        #   end
+
+        # @!parse
+        #   # Adds a pair of leading visual icon rendered to the left of the node's label.
+        #   #
+        #   # @param label [String] A label describing the visual, displayed only to screen readers.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::IconPair) %>.
+        #   def with_leading_visual_icons(label: nil, **system_arguments, &block)
+        #   end
+
+        renders_one :leading_visual, types: {
+          icon: lambda { |label: nil, **system_arguments|
+            merge_system_arguments!(
+              aria: { describedby: leading_visual_label_id }
+            )
+
+            Visual.new(
+              id: leading_visual_label_id,
+              label: label,
+              visual: Icon.new(**system_arguments)
+            )
+          },
+
+          icons: lambda { |label: nil, **system_arguments|
+            merge_system_arguments!(
+              aria: { describedby: leading_visual_label_id }
+            )
+
+            system_arguments[:data] = merge_data(
+              system_arguments,
+              { data: { target: "tree-view-sub-tree-node.iconPair" } }
+            )
+
+            Visual.new(
+              id: leading_visual_label_id,
+              label: label,
+              visual: IconPair.new(
+                **system_arguments,
+                expanded: @sub_tree.expanded?,
+              )
+            )
+          }
+        }
+
+        # @!parse
+        #   # Adds a leading action rendered to the left of the node's label and any leading visuals or checkboxes.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::IconButton) %>.
+        #   def with_leading_action_button(**system_arguments, &block)
+        #   end
+
+        renders_one :leading_action, types: {
+          button: lambda { |**system_arguments|
+            LeadingAction.new(
+              action: Primer::Beta::IconButton.new(
+                scheme: :invisible,
+                **system_arguments
+              )
+            )
+          }
+        }
+
+        # @!parse
+        #   # Adds a trailing visual icon rendered to the right of the node's label.
+        #   #
+        #   # @param label [String] A label describing the visual, displayed only to screen readers.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   def with_trailing_visual_icon(label: nil, **system_arguments, &block)
+        #   end
+
+        renders_one :trailing_visual, types: {
+          icon: lambda { |**system_arguments|
+            label = system_arguments.delete(:label)
+
+            Visual.new(
+              id: nil,
+              visual: Icon.new(**system_arguments),
+              label: label
+            )
+          }
+        }
+
+        delegate :with_leaf, :with_sub_tree, :with_loading_spinner, :with_loading_skeleton, to: :@sub_tree
+        delegate :current?, :merge_system_arguments!, to: :@node
+
+        # @param label [String] The node's label, i.e. it's textual content.
+        # @param path [Array<String>] The node's "path," i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.
+        # @param expanded [Boolean] Whether or not this sub-tree should be rendered expanded.
+        # @param select_strategy [Symbol] What should happen when this sub-tree node is checked. <%= one_of(Primer::OpenProject::TreeView::SubTreeNode::SELECT_STRATEGIES) %>
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Node) %>.
+        def initialize(label:, path:, expanded: false, select_strategy: DEFAULT_SELECT_STRATEGY, **system_arguments)
+          @label = label
+          @system_arguments = system_arguments
+          @select_strategy = fetch_or_fallback(SELECT_STRATEGIES, select_strategy, DEFAULT_SELECT_STRATEGY)
+
+          @system_arguments[:aria] = merge_aria(
+            @system_arguments,
+            { aria: { expanded: expanded } }
+          )
+
+          @system_arguments[:data] = merge_data(
+            @system_arguments, {
+              data: {
+                target: "tree-view-sub-tree-node.node",
+                "node-type": "sub-tree"
+              }
+            }
+          )
+
+          sub_tree_arguments = @system_arguments.delete(:sub_tree_arguments) || {}
+
+          @sub_tree = SubTree.new(
+            expanded: expanded,
+            path: path,
+            **sub_tree_arguments
+          )
+
+          @node = Primer::OpenProject::TreeView::Node.new(**@system_arguments, path: @sub_tree.path)
+
+          return if @node.select_variant == :none
+
+          @node.merge_system_arguments!(
+            data: {
+              "select-strategy": @select_strategy
+            }
+          )
+        end
+
+        def render_in(*args, &block)
+          super.tap do
+            # check this _after_ rendering so @sub_tree's slots are defined
+            if @node.select_variant != :none && @sub_tree.defer?
+              raise ArgumentError, "TreeView does not currently support select variants for sub-trees loaded asynchronously."
+            end
+          end
+        end
+
+        private
+
+        def base_id
+          @base_id ||= self.class.generate_id
+        end
+
+        def leading_visual_label_id
+          @leading_visual_id ||= "#{base_id}-leading-visual-label"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/tree_view.d.ts

@@ -0,0 +1,29 @@
+import { TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
+import type { TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo } from '../../shared_events';
+export declare class TreeViewElement extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    getNodePath(node: Element): string[];
+    getNodeType(node: Element): TreeViewNodeType | null;
+    markCurrentAtPath(path: string[]): void;
+    get currentNode(): HTMLLIElement | null;
+    expandAtPath(path: string[]): void;
+    collapseAtPath(path: string[]): void;
+    toggleAtPath(path: string[]): void;
+    checkAtPath(path: string[]): void;
+    uncheckAtPath(path: string[]): void;
+    toggleCheckedAtPath(path: string[]): void;
+    checkedValueAtPath(path: string[]): TreeViewCheckedValue;
+    nodeAtPath(path: string[], selector?: string): Element | null;
+    subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null;
+    leafAtPath(path: string[]): HTMLLIElement | null;
+    getNodeCheckedValue(node: Element): TreeViewCheckedValue;
+    infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
+}
+declare global {
+    interface Window {
+        TreeViewElement: typeof TreeViewElement;
+    }
+}

data/app/components/primer/open_project/tree_view/tree_view.js

@@ -0,0 +1,238 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_setNodeCheckedValue;
+import { controller } from '@github/catalyst';
+import { useRovingTabIndex } from './tree_view_roving_tab_index';
+let TreeViewElement = class TreeViewElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _TreeViewElement_instances.add(this);
+        _TreeViewElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        const { signal } = (__classPrivateFieldSet(this, _TreeViewElement_abortController, new AbortController(), "f"));
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('focusin', this, { signal });
+        this.addEventListener('keydown', this, { signal });
+        useRovingTabIndex(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _TreeViewElement_abortController, "f").abort();
+    }
+    handleEvent(event) {
+        const node = __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_nodeForEvent).call(this, event);
+        if (node) {
+            __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeEvent).call(this, node, event);
+        }
+    }
+    getNodePath(node) {
+        const rawPath = node.getAttribute('data-path');
+        if (rawPath) {
+            return JSON.parse(rawPath);
+        }
+        return [];
+    }
+    getNodeType(node) {
+        return node.getAttribute('data-node-type');
+    }
+    markCurrentAtPath(path) {
+        const pathStr = JSON.stringify(path);
+        const nodeToMark = this.querySelector(`[data-path="${CSS.escape(pathStr)}"`);
+        if (!nodeToMark)
+            return;
+        this.currentNode?.setAttribute('aria-current', 'false');
+        nodeToMark.setAttribute('aria-current', 'true');
+    }
+    get currentNode() {
+        return this.querySelector('[aria-current=true]');
+    }
+    expandAtPath(path) {
+        const node = this.subTreeAtPath(path);
+        if (!node)
+            return;
+        node.expand();
+    }
+    collapseAtPath(path) {
+        const node = this.subTreeAtPath(path);
+        if (!node)
+            return;
+        node.collapse();
+    }
+    toggleAtPath(path) {
+        const node = this.subTreeAtPath(path);
+        if (!node)
+            return;
+        node.toggle();
+    }
+    checkAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return;
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+    }
+    uncheckAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return;
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+    }
+    toggleCheckedAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return;
+        if (this.getNodeType(node) === 'leaf') {
+            if (this.getNodeCheckedValue(node) === 'true') {
+                this.uncheckAtPath(path);
+            }
+            else {
+                this.checkAtPath(path);
+            }
+        }
+    }
+    checkedValueAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return 'false';
+        return this.getNodeCheckedValue(node);
+    }
+    nodeAtPath(path, selector) {
+        const pathStr = JSON.stringify(path);
+        return this.querySelector(`${selector || ''}[data-path="${CSS.escape(pathStr)}"]`);
+    }
+    subTreeAtPath(path) {
+        const node = this.nodeAtPath(path, '[data-node-type=sub-tree]');
+        if (!node)
+            return null;
+        return node.closest('tree-view-sub-tree-node');
+    }
+    leafAtPath(path) {
+        return this.nodeAtPath(path, '[data-node-type=leaf]');
+    }
+    getNodeCheckedValue(node) {
+        return (node.getAttribute('aria-checked') || 'false');
+    }
+    // PRIVATE API METHOD
+    //
+    // This would normally be marked private, but it's called by TreeViewSubTreeNodes
+    // and thus must be public.
+    infoFromNode(node, newCheckedValue) {
+        const type = this.getNodeType(node);
+        if (!type)
+            return null;
+        const checkedValue = this.getNodeCheckedValue(node);
+        return {
+            node,
+            type,
+            path: this.getNodePath(node),
+            checkedValue: newCheckedValue || checkedValue,
+            previousCheckedValue: checkedValue,
+        };
+    }
+};
+_TreeViewElement_abortController = new WeakMap();
+_TreeViewElement_instances = new WeakSet();
+_TreeViewElement_eventIsActivation = function _TreeViewElement_eventIsActivation(event) {
+    return event.type === 'click';
+};
+_TreeViewElement_nodeForEvent = function _TreeViewElement_nodeForEvent(event) {
+    const target = event.target;
+    const node = target.closest('[role=treeitem]');
+    if (!node)
+        return null;
+    if (target.closest('.TreeViewItemToggle'))
+        return null;
+    if (target.closest('.TreeViewItemLeadingAction'))
+        return null;
+    return node;
+};
+_TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(node, event) {
+    if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsCheckboxToggle).call(this, event)) {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleCheckboxToggle).call(this, node);
+    }
+    else if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsActivation).call(this, event)) {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeActivated).call(this, node);
+    }
+    else if (event.type === 'focusin') {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeFocused).call(this, node);
+    }
+    else if (event instanceof KeyboardEvent) {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeKeyboardEvent).call(this, event, node);
+    }
+};
+_TreeViewElement_eventIsCheckboxToggle = function _TreeViewElement_eventIsCheckboxToggle(event) {
+    return event.type === 'click' && event.target.closest('.TreeViewItemCheckbox') !== null;
+};
+_TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckboxToggle(node) {
+    // only handle checking of leaf nodes
+    const type = this.getNodeType(node);
+    if (type !== 'leaf')
+        return;
+    if (this.getNodeCheckedValue(node) === 'true') {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+    }
+    else {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+    }
+};
+_TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActivated(node) {
+    const path = this.getNodePath(node);
+    const activationSuccess = this.dispatchEvent(new CustomEvent('treeViewBeforeNodeActivated', {
+        bubbles: true,
+        cancelable: true,
+        detail: this.infoFromNode(node),
+    }));
+    if (!activationSuccess)
+        return;
+    this.toggleAtPath(path);
+    this.dispatchEvent(new CustomEvent('treeViewNodeActivated', {
+        bubbles: true,
+        detail: this.infoFromNode(node),
+    }));
+};
+_TreeViewElement_handleNodeFocused = function _TreeViewElement_handleNodeFocused(node) {
+    const previousNode = this.querySelector('[aria-selected=true]');
+    previousNode?.setAttribute('aria-selected', 'false');
+    node.setAttribute('aria-selected', 'true');
+};
+_TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeKeyboardEvent(event, node) {
+    if (!node || this.getNodeType(node) !== 'leaf') {
+        return;
+    }
+    switch (event.key) {
+        case ' ':
+            event.preventDefault();
+            if (this.getNodeCheckedValue(node) === 'true') {
+                __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+            }
+            else {
+                __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+            }
+            break;
+    }
+};
+_TreeViewElement_setNodeCheckedValue = function _TreeViewElement_setNodeCheckedValue(node, value) {
+    node.setAttribute('aria-checked', value.toString());
+};
+TreeViewElement = __decorate([
+    controller
+], TreeViewElement);
+export { TreeViewElement };
+if (!window.customElements.get('tree-view')) {
+    window.TreeViewElement = TreeViewElement;
+    window.customElements.define('tree-view', TreeViewElement);
+}

data/app/components/primer/open_project/tree_view/tree_view.ts

@@ -0,0 +1,257 @@
+import {controller} from '@github/catalyst'
+import {TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
+import {useRovingTabIndex} from './tree_view_roving_tab_index'
+import type {TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo} from '../../shared_events'
+
+@controller
+export class TreeViewElement extends HTMLElement {
+  #abortController: AbortController
+
+  connectedCallback() {
+    const {signal} = (this.#abortController = new AbortController())
+    this.addEventListener('click', this, {signal})
+    this.addEventListener('focusin', this, {signal})
+    this.addEventListener('keydown', this, {signal})
+
+    useRovingTabIndex(this)
+  }
+
+  disconnectedCallback() {
+    this.#abortController.abort()
+  }
+
+  handleEvent(event: Event) {
+    const node = this.#nodeForEvent(event)
+
+    if (node) {
+      this.#handleNodeEvent(node, event)
+    }
+  }
+
+  #eventIsActivation(event: Event): boolean {
+    return event.type === 'click'
+  }
+
+  #nodeForEvent(event: Event): Element | null {
+    const target = event.target as Element
+    const node = target.closest('[role=treeitem]')
+    if (!node) return null
+
+    if (target.closest('.TreeViewItemToggle')) return null
+    if (target.closest('.TreeViewItemLeadingAction')) return null
+
+    return node
+  }
+
+  #handleNodeEvent(node: Element, event: Event) {
+    if (this.#eventIsCheckboxToggle(event)) {
+      this.#handleCheckboxToggle(node)
+    } else if (this.#eventIsActivation(event)) {
+      this.#handleNodeActivated(node)
+    } else if (event.type === 'focusin') {
+      this.#handleNodeFocused(node)
+    } else if (event instanceof KeyboardEvent) {
+      this.#handleNodeKeyboardEvent(event, node)
+    }
+  }
+
+  #eventIsCheckboxToggle(event: Event) {
+    return event.type === 'click' && (event.target as HTMLElement).closest('.TreeViewItemCheckbox') !== null
+  }
+
+  #handleCheckboxToggle(node: Element) {
+    // only handle checking of leaf nodes
+    const type = this.getNodeType(node)
+    if (type !== 'leaf') return
+
+    if (this.getNodeCheckedValue(node) === 'true') {
+      this.#setNodeCheckedValue(node, 'false')
+    } else {
+      this.#setNodeCheckedValue(node, 'true')
+    }
+  }
+
+  #handleNodeActivated(node: Element) {
+    const path = this.getNodePath(node)
+
+    const activationSuccess = this.dispatchEvent(
+      new CustomEvent('treeViewBeforeNodeActivated', {
+        bubbles: true,
+        cancelable: true,
+        detail: this.infoFromNode(node),
+      }),
+    )
+
+    if (!activationSuccess) return
+
+    this.toggleAtPath(path)
+
+    this.dispatchEvent(
+      new CustomEvent('treeViewNodeActivated', {
+        bubbles: true,
+        detail: this.infoFromNode(node),
+      }),
+    )
+  }
+
+  #handleNodeFocused(node: Element) {
+    const previousNode = this.querySelector('[aria-selected=true]')
+    previousNode?.setAttribute('aria-selected', 'false')
+    node.setAttribute('aria-selected', 'true')
+  }
+
+  #handleNodeKeyboardEvent(event: KeyboardEvent, node: Element) {
+    if (!node || this.getNodeType(node) !== 'leaf') {
+      return
+    }
+
+    switch (event.key) {
+      case ' ':
+        event.preventDefault()
+
+        if (this.getNodeCheckedValue(node) === 'true') {
+          this.#setNodeCheckedValue(node, 'false')
+        } else {
+          this.#setNodeCheckedValue(node, 'true')
+        }
+
+        break
+    }
+  }
+
+  getNodePath(node: Element): string[] {
+    const rawPath = node.getAttribute('data-path')
+
+    if (rawPath) {
+      return JSON.parse(rawPath)
+    }
+
+    return []
+  }
+
+  getNodeType(node: Element): TreeViewNodeType | null {
+    return node.getAttribute('data-node-type') as TreeViewNodeType | null
+  }
+
+  markCurrentAtPath(path: string[]) {
+    const pathStr = JSON.stringify(path)
+    const nodeToMark = this.querySelector(`[data-path="${CSS.escape(pathStr)}"`)
+    if (!nodeToMark) return
+
+    this.currentNode?.setAttribute('aria-current', 'false')
+    nodeToMark.setAttribute('aria-current', 'true')
+  }
+
+  get currentNode(): HTMLLIElement | null {
+    return this.querySelector('[aria-current=true]')
+  }
+
+  expandAtPath(path: string[]) {
+    const node = this.subTreeAtPath(path)
+    if (!node) return
+
+    node.expand()
+  }
+
+  collapseAtPath(path: string[]) {
+    const node = this.subTreeAtPath(path)
+    if (!node) return
+
+    node.collapse()
+  }
+
+  toggleAtPath(path: string[]) {
+    const node = this.subTreeAtPath(path)
+    if (!node) return
+
+    node.toggle()
+  }
+
+  checkAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    this.#setNodeCheckedValue(node, 'true')
+  }
+
+  uncheckAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    this.#setNodeCheckedValue(node, 'false')
+  }
+
+  toggleCheckedAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    if (this.getNodeType(node) === 'leaf') {
+      if (this.getNodeCheckedValue(node) === 'true') {
+        this.uncheckAtPath(path)
+      } else {
+        this.checkAtPath(path)
+      }
+    }
+  }
+
+  checkedValueAtPath(path: string[]): TreeViewCheckedValue {
+    const node = this.nodeAtPath(path)
+    if (!node) return 'false'
+
+    return this.getNodeCheckedValue(node)
+  }
+
+  nodeAtPath(path: string[], selector?: string): Element | null {
+    const pathStr = JSON.stringify(path)
+    return this.querySelector(`${selector || ''}[data-path="${CSS.escape(pathStr)}"]`)
+  }
+
+  subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null {
+    const node = this.nodeAtPath(path, '[data-node-type=sub-tree]')
+    if (!node) return null
+
+    return node.closest('tree-view-sub-tree-node') as TreeViewSubTreeNodeElement | null
+  }
+
+  leafAtPath(path: string[]): HTMLLIElement | null {
+    return this.nodeAtPath(path, '[data-node-type=leaf]') as HTMLLIElement | null
+  }
+
+  #setNodeCheckedValue(node: Element, value: TreeViewCheckedValue) {
+    node.setAttribute('aria-checked', value.toString())
+  }
+
+  getNodeCheckedValue(node: Element): TreeViewCheckedValue {
+    return (node.getAttribute('aria-checked') || 'false') as TreeViewCheckedValue
+  }
+
+  // PRIVATE API METHOD
+  //
+  // This would normally be marked private, but it's called by TreeViewSubTreeNodes
+  // and thus must be public.
+  infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null {
+    const type = this.getNodeType(node)
+    if (!type) return null
+
+    const checkedValue = this.getNodeCheckedValue(node)
+
+    return {
+      node,
+      type,
+      path: this.getNodePath(node),
+      checkedValue: newCheckedValue || checkedValue,
+      previousCheckedValue: checkedValue,
+    }
+  }
+}
+
+if (!window.customElements.get('tree-view')) {
+  window.TreeViewElement = TreeViewElement
+  window.customElements.define('tree-view', TreeViewElement)
+}
+
+declare global {
+  interface Window {
+    TreeViewElement: typeof TreeViewElement
+  }
+}