@hakumi-dev/hakumi-components 0.1.18-pre → 0.1.19-pre

package/app/javascript/hakumi_components/controllers/hakumi/tree_controller.js

@@ -30,6 +30,8 @@ export default class extends RegistryController {
     this.sortables = new Map()
     this.searching = false
     this.previousExpandedKeys = null
+    this.typeaheadBuffer = ""
+    this.typeaheadTimeout = null
 
     this.expandedKeys = new Set(this.hasExpandedKeysValue ? this.expandedKeysValue : this.defaultExpandKeysValue)
     this.selectedKeys = new Set(this.hasSelectedKeysValue ? this.selectedKeysValue : this.defaultSelectedKeysValue)
@@ -40,6 +42,12 @@ export default class extends RegistryController {
     this.applyExpandedStates()
     this.applySelectedStates()
     this.applyCheckedStates(true)
+    this.syncRovingTabindex()
+
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.boundHandleFocusin = this.handleFocusin.bind(this)
+    this.element.addEventListener("keydown", this.boundHandleKeydown)
+    this.element.addEventListener("focusin", this.boundHandleFocusin)
 
     if (this.draggableValue) {
       this.setupSortables()
@@ -47,7 +55,16 @@ export default class extends RegistryController {
   }
 
   teardown() {
+    if (this.boundHandleKeydown) {
+      this.element.removeEventListener("keydown", this.boundHandleKeydown)
+      this.boundHandleKeydown = null
+    }
+    if (this.boundHandleFocusin) {
+      this.element.removeEventListener("focusin", this.boundHandleFocusin)
+      this.boundHandleFocusin = null
+    }
     this.destroySortables()
+    this.clearTypeahead()
   }
 
   disconnect() {
@@ -199,6 +216,7 @@ export default class extends RegistryController {
     }
 
     this.applyExpandedStates()
+    this.syncRovingTabindex()
     this.dispatch("expand", { detail: { expandedKeys: Array.from(this.expandedKeys), key } })
   }
 
@@ -296,6 +314,7 @@ export default class extends RegistryController {
   setExpandedKeys(keys) {
     this.expandedKeys = new Set(keys || [])
     this.applyExpandedStates()
+    this.syncRovingTabindex()
   }
 
   expandAll() {
@@ -305,11 +324,13 @@ export default class extends RegistryController {
       }
     })
     this.applyExpandedStates()
+    this.syncRovingTabindex()
   }
 
   collapseAll() {
     this.expandedKeys.clear()
     this.applyExpandedStates()
+    this.syncRovingTabindex()
   }
 
   getDescendants(key) {
@@ -331,61 +352,71 @@ export default class extends RegistryController {
 
   maybeLoadAsync(key) {
     const node = this.nodeMap.get(key)
-    if (!node) return
-
-    const isAsync = node.element.dataset.async === "true"
-    const hasChildren = node.element.querySelector(".hakumi-tree-children")
-
-    if (!isAsync || hasChildren) return
+    if (!this.shouldLoadAsyncNode(node)) return
 
     this.setLoading(key, true)
     this.dispatch("load", { detail: { key, node: node.element } })
   }
 
+  shouldLoadAsyncNode(node) {
+    if (!node) return false
+
+    return node.element.dataset.async === "true" && !node.element.querySelector(".hakumi-tree-children")
+  }
+
   setLoading(key, loading) {
     const node = this.nodeMap.get(key)
     if (!node) return
 
-    node.element.dataset.loading = loading ? "true" : "false"
-    node.element.classList.toggle("hakumi-tree-node-loading", loading)
-
-
     if (loading) {
       this.setError(key, false)
     }
 
+    this.applyLoadingState(node.element, loading)
+    this.syncLoadingSwitcher(node.element, loading)
+  }
 
-    const switcher = node.element.querySelector(".hakumi-tree-switcher")
+  applyLoadingState(element, loading) {
+    element.dataset.loading = loading ? "true" : "false"
+    element.classList.toggle("hakumi-tree-node-loading", loading)
+  }
+
+  syncLoadingSwitcher(element, loading) {
+    const switcher = element.querySelector(".hakumi-tree-switcher")
     if (!switcher) return
 
     if (loading) {
-
-      const switcherIcon = switcher.querySelector(".hakumi-tree-switcher-icon")
-      if (switcherIcon) {
-        switcherIcon.style.display = "none"
-      }
-
-
-      if (!switcher.querySelector(".hakumi-tree-loading-icon")) {
-        const loadingIcon = document.createElement("span")
-        loadingIcon.className = "hakumi-tree-loading-icon"
-        loadingIcon.innerHTML = `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
-          <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"/>
-        </svg>`
-        switcher.appendChild(loadingIcon)
-      }
+      this.showLoadingSwitcher(switcher)
     } else {
+      this.hideLoadingSwitcher(switcher)
+    }
+  }
 
-      const switcherIcon = switcher.querySelector(".hakumi-tree-switcher-icon")
-      if (switcherIcon) {
-        switcherIcon.style.display = ""
-      }
+  showLoadingSwitcher(switcher) {
+    const switcherIcon = switcher.querySelector(".hakumi-tree-switcher-icon")
+    if (switcherIcon) {
+      switcherIcon.style.display = "none"
+    }
 
+    if (!switcher.querySelector(".hakumi-tree-loading-icon")) {
+      const loadingIcon = document.createElement("span")
+      loadingIcon.className = "hakumi-tree-loading-icon"
+      loadingIcon.innerHTML = `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"/>
+      </svg>`
+      switcher.appendChild(loadingIcon)
+    }
+  }
 
-      const loadingIcon = switcher.querySelector(".hakumi-tree-loading-icon")
-      if (loadingIcon) {
-        loadingIcon.remove()
-      }
+  hideLoadingSwitcher(switcher) {
+    const switcherIcon = switcher.querySelector(".hakumi-tree-switcher-icon")
+    if (switcherIcon) {
+      switcherIcon.style.display = ""
+    }
+
+    const loadingIcon = switcher.querySelector(".hakumi-tree-loading-icon")
+    if (loadingIcon) {
+      loadingIcon.remove()
     }
   }
 
@@ -420,7 +451,6 @@ export default class extends RegistryController {
   }
 
   addNodes(parentKey, nodes) {
-
     if (!nodes || nodes.length === 0) {
       this.markAsLeaf(parentKey)
       this.setLoading(parentKey, false)
@@ -430,50 +460,58 @@ export default class extends RegistryController {
     const parent = this.nodeMap.get(parentKey)
     if (!parent) return
 
-    if (parent.element.dataset.leaf === "true") {
-      parent.element.dataset.leaf = "false"
-      parent.element.classList.remove("hakumi-tree-node-leaf")
-      const switcher = parent.element.querySelector(".hakumi-tree-switcher")
-      if (switcher) {
-        switcher.classList.remove("hakumi-tree-switcher-leaf")
-        switcher.dataset.action = "click->hakumi--tree#toggle"
-        if (switcher && !switcher.querySelector(".hakumi-tree-switcher-icon")) {
-
-
-
-
-
+    this.ensureAsyncParentCanContainChildren(parent)
+    const container = this.ensureChildrenContainer(parent.element)
+    this.appendNodeElements(container, nodes, parent, parentKey)
+    this.refreshAfterNodesAdded()
+  }
 
+  ensureAsyncParentCanContainChildren(parent) {
+    if (parent.element.dataset.leaf !== "true") return
 
+    parent.element.dataset.leaf = "false"
+    parent.element.classList.remove("hakumi-tree-node-leaf")
+    const switcher = parent.element.querySelector(".hakumi-tree-switcher")
+    if (!switcher) return
 
-          const tmpl = this.nodeTemplateTarget.content.cloneNode(true)
-          const tmplSwitcher = tmpl.querySelector(".hakumi-tree-switcher")
-          const tmplIcon = tmplSwitcher.querySelector(".hakumi-tree-switcher-icon")
-          if (tmplIcon) switcher.appendChild(tmplIcon.cloneNode(true))
-        }
-      }
+    switcher.classList.remove("hakumi-tree-switcher-leaf")
+    switcher.dataset.action = "click->hakumi--tree#toggle"
+    if (!switcher.querySelector(".hakumi-tree-switcher-icon")) {
+      const tmpl = this.nodeTemplateTarget.content.cloneNode(true)
+      const tmplSwitcher = tmpl.querySelector(".hakumi-tree-switcher")
+      const tmplIcon = tmplSwitcher.querySelector(".hakumi-tree-switcher-icon")
+      if (tmplIcon) switcher.appendChild(tmplIcon.cloneNode(true))
     }
+  }
 
-    let container = parent.element.querySelector(".hakumi-tree-children")
+  ensureChildrenContainer(parentElement) {
+    let container = parentElement.querySelector(".hakumi-tree-children")
     if (!container) {
       container = document.createElement("div")
       container.className = "hakumi-tree-children"
       container.setAttribute("role", "group")
       container.dataset.hakumiTreeTarget = "children"
-      parent.element.appendChild(container)
+      parentElement.appendChild(container)
     }
 
+    return container
+  }
+
+  appendNodeElements(container, nodes, parent, parentKey) {
     const parentLevel = parseInt(parent.element.dataset.level || "0", 10)
     nodes.forEach((node, index) => {
       const hasNext = index < nodes.length - 1
       const nodeElement = this.createNodeElement(node, parentLevel + 1, parentKey, hasNext)
       container.appendChild(nodeElement)
     })
+  }
 
+  refreshAfterNodesAdded() {
     this.buildNodeMap()
     this.applyExpandedStates()
     this.applySelectedStates()
     this.applyCheckedStates(true)
+    this.syncRovingTabindex()
     if (this.draggableValue) this.setupSortables()
   }
 
@@ -588,13 +626,7 @@ export default class extends RegistryController {
   setupSortables() {
     this.destroySortables()
 
-    const containers = new Set()
-    if (this.hasListTarget) {
-      containers.add(this.listTarget)
-    }
-    this.childrenTargets.forEach((child) => containers.add(child))
-
-    containers.forEach((container) => {
+    this.sortableContainers().forEach((container) => {
       const sortable = Sortable.create(container, {
         animation: 150,
         group: "hakumi-tree",
@@ -603,27 +635,43 @@ export default class extends RegistryController {
         ghostClass: "hakumi-tree-node-ghost",
         chosenClass: "hakumi-tree-node-chosen",
         dragClass: "hakumi-tree-node-drag",
-        onEnd: (evt) => {
-          const item = evt.item
-          const parentNode = item.closest(".hakumi-tree-node")
-          const parentKey = parentNode ? parentNode.dataset.key : null
-          item.dataset.parentKey = parentKey || ""
-          this.buildNodeMap()
-          this.dispatch("dragEnd", {
-            detail: {
-              key: item.dataset.key,
-              parentKey,
-              oldIndex: evt.oldIndex,
-              newIndex: evt.newIndex
-            }
-          })
-        }
+        onEnd: (evt) => this.handleDragEnd(evt)
       })
 
       this.sortables.set(container, sortable)
     })
   }
 
+  sortableContainers() {
+    const containers = new Set()
+    if (this.hasListTarget) {
+      containers.add(this.listTarget)
+    }
+    this.childrenTargets.forEach((child) => containers.add(child))
+    return containers
+  }
+
+  handleDragEnd(event) {
+    const item = event.item
+    const parentKey = this.dragParentKey(event, item)
+    item.dataset.parentKey = parentKey || ""
+    this.buildNodeMap()
+    this.dispatch("dragEnd", {
+      detail: {
+        key: item.dataset.key,
+        parentKey,
+        oldIndex: event.oldIndex,
+        newIndex: event.newIndex
+      }
+    })
+  }
+
+  dragParentKey(event, item) {
+    const parentContainer = event.to || item.parentElement
+    const parentNode = parentContainer ? parentContainer.closest(".hakumi-tree-node") : null
+    return parentNode ? parentNode.dataset.key : null
+  }
+
   destroySortables() {
     this.sortables.forEach((sortable) => sortable.destroy())
     this.sortables.clear()
@@ -636,6 +684,7 @@ export default class extends RegistryController {
 
   applySearch(query) {
     const term = query.trim().toLowerCase()
+    this.clearTypeahead()
 
     if (!term) {
       if (this.searching && this.previousExpandedKeys) {
@@ -649,6 +698,7 @@ export default class extends RegistryController {
         if (titleEl) titleEl.textContent = titleEl.dataset.title || ""
       })
       this.applyExpandedStates()
+      this.syncRovingTabindex()
       return
     }
 
@@ -698,9 +748,244 @@ export default class extends RegistryController {
     })
 
     this.applyExpandedStates()
+    this.syncRovingTabindex()
   }
 
   closestNode(event) {
     return event.currentTarget.closest(".hakumi-tree-node")
   }
+
+  handleFocusin(event) {
+    const node = event.target.closest(".hakumi-tree-node")
+    if (!node || !this.element.contains(node) || !this.isVisibleNode(node)) return
+
+    this.setFocusedNode(node, { focus: false })
+  }
+
+  handleKeydown(event) {
+    const currentNode = event.target.closest(".hakumi-tree-node")
+    if (!currentNode || !this.element.contains(currentNode)) return
+
+    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End", "Enter", " "].includes(event.key) && !this.isTypeaheadKey(event)) return
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.focusRelativeNode(currentNode, 1)
+      return
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.focusRelativeNode(currentNode, -1)
+      return
+    }
+
+    if (event.key === "Home") {
+      event.preventDefault()
+      this.focusFirstVisibleNode()
+      return
+    }
+
+    if (event.key === "End") {
+      event.preventDefault()
+      this.focusLastVisibleNode()
+      return
+    }
+
+    if (event.key === "ArrowRight") {
+      event.preventDefault()
+      this.expandOrFocusChild(currentNode)
+      return
+    }
+
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      this.collapseOrFocusParent(currentNode)
+      return
+    }
+
+    if (this.isTypeaheadKey(event)) {
+      event.preventDefault()
+      this.focusTypeaheadMatch(currentNode, event.key)
+      return
+    }
+
+    event.preventDefault()
+    this.selectKeyboardNode(currentNode)
+  }
+
+  focusRelativeNode(currentNode, offset) {
+    const visibleNodes = this.visibleNodes()
+    const currentIndex = visibleNodes.indexOf(currentNode)
+    if (currentIndex === -1) return
+
+    const nextNode = visibleNodes[currentIndex + offset]
+    if (nextNode) this.setFocusedNode(nextNode)
+  }
+
+  focusFirstVisibleNode() {
+    const firstNode = this.visibleNodes()[0]
+    if (firstNode) this.setFocusedNode(firstNode)
+  }
+
+  focusLastVisibleNode() {
+    const visibleNodes = this.visibleNodes()
+    const lastNode = visibleNodes[visibleNodes.length - 1]
+    if (lastNode) this.setFocusedNode(lastNode)
+  }
+
+  focusTypeaheadMatch(currentNode, key) {
+    this.typeaheadBuffer += key.toLowerCase()
+    this.scheduleTypeaheadReset()
+
+    const visibleNodes = this.visibleNodes()
+    if (visibleNodes.length === 0) return
+
+    const currentIndex = visibleNodes.indexOf(currentNode)
+    const startIndex = currentIndex >= 0 ? currentIndex + 1 : 0
+    const candidates = visibleNodes.slice(startIndex).concat(visibleNodes.slice(0, startIndex))
+    const match = candidates.find((node) => this.nodeTitle(node).toLowerCase().startsWith(this.typeaheadBuffer))
+
+    if (match) this.setFocusedNode(match)
+  }
+
+  isTypeaheadKey(event) {
+    return event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey
+  }
+
+  scheduleTypeaheadReset() {
+    if (this.typeaheadTimeout) clearTimeout(this.typeaheadTimeout)
+
+    this.typeaheadTimeout = setTimeout(() => {
+      this.typeaheadBuffer = ""
+      this.typeaheadTimeout = null
+    }, 500)
+  }
+
+  clearTypeahead() {
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout)
+      this.typeaheadTimeout = null
+    }
+    this.typeaheadBuffer = ""
+  }
+
+  nodeTitle(node) {
+    return node.dataset.title || node.querySelector(".hakumi-tree-title-text")?.textContent || ""
+  }
+
+  expandOrFocusChild(node) {
+    if (node.dataset.leaf === "true") return
+
+    const key = node.dataset.key
+    if (!this.expandedKeys.has(key)) {
+      this.toggleNodeByKey(key)
+      this.setFocusedNode(node)
+      return
+    }
+
+    const firstChild = this.firstVisibleChild(node)
+    if (firstChild) this.setFocusedNode(firstChild)
+  }
+
+  collapseOrFocusParent(node) {
+    if (node.dataset.leaf !== "true" && this.expandedKeys.has(node.dataset.key)) {
+      this.toggleNodeByKey(node.dataset.key)
+      this.setFocusedNode(node)
+      return
+    }
+
+    const parent = this.parentNode(node)
+    if (parent) this.setFocusedNode(parent)
+  }
+
+  selectKeyboardNode(node) {
+    if (!this.canSelectNode(node)) return
+
+    this.selectNodeByKey(node.dataset.key)
+  }
+
+  canSelectNode(node) {
+    return (
+      this.selectableValue &&
+      node.dataset.selectable !== "false" &&
+      node.dataset.disabled !== "true" &&
+      !this.disabledValue
+    )
+  }
+
+  visibleNodes() {
+    return this.navigationNodeTargets().filter((node) => this.isVisibleNode(node))
+  }
+
+  navigationNodeTargets() {
+    if (this.hasHeightValue) return this.virtualHeightNodeTargets()
+
+    return this.nodeTargets
+  }
+
+  virtualHeightNodeTargets() {
+    return this.nodeTargets
+  }
+
+  isVisibleNode(node) {
+    if (node.classList.contains("hakumi-tree-node-hidden")) return false
+
+    let parent = this.parentNode(node)
+    while (parent) {
+      if (parent.classList.contains("hakumi-tree-node-hidden")) return false
+      if (!this.expandedKeys.has(parent.dataset.key)) return false
+      parent = this.parentNode(parent)
+    }
+
+    return true
+  }
+
+  firstVisibleChild(node) {
+    const entry = this.nodeMap.get(node.dataset.key)
+    if (!entry) return null
+
+    const childKey = entry.children.find((key) => {
+      const child = this.nodeMap.get(key)
+      return child && this.isVisibleNode(child.element)
+    })
+
+    return childKey ? this.nodeMap.get(childKey).element : null
+  }
+
+  parentNode(node) {
+    const parentKey = node.dataset.parentKey || null
+    if (!parentKey || !this.nodeMap.has(parentKey)) return null
+
+    return this.nodeMap.get(parentKey).element
+  }
+
+  syncRovingTabindex() {
+    const visibleNodes = this.visibleNodes()
+    const current = visibleNodes.find((node) => node.getAttribute("tabindex") === "0")
+    const selected = visibleNodes.find((node) => this.selectedKeys.has(node.dataset.key))
+    const focused = current || selected || visibleNodes[0] || null
+
+    this.nodeTargets.forEach((node) => {
+      node.setAttribute("tabindex", node === focused ? "0" : "-1")
+      this.syncNodeControlTabindex(node)
+    })
+
+    return focused
+  }
+
+  setFocusedNode(node, { focus = true } = {}) {
+    this.nodeTargets.forEach((target) => {
+      target.setAttribute("tabindex", target === node ? "0" : "-1")
+      this.syncNodeControlTabindex(target)
+    })
+
+    if (focus) node.focus()
+  }
+
+  syncNodeControlTabindex(node) {
+    node.querySelectorAll(".hakumi-tree-switcher, .hakumi-tree-checkbox, .hakumi-tree-title").forEach((control) => {
+      control.setAttribute("tabindex", "-1")
+    })
+  }
 }

package/app/javascript/hakumi_components/controllers/hakumi/typography_controller.js

@@ -30,11 +30,11 @@ export default class extends RegistryController {
 
     async copy(event) {
 
-        const copyIcon = event.target?.closest('.hakumi-typography-copy')
+        const copyIcon = event?.target?.closest?.('.hakumi-typography-copy') || this.element.querySelector('.hakumi-typography-copy')
         if (!copyIcon) return
 
-        event.preventDefault()
-        event.stopPropagation()
+        event?.preventDefault?.()
+        event?.stopPropagation?.()
 
 
         const clone = this.element.cloneNode(true)