shadcn_view_components 0.2.0

data/app/assets/javascripts/shadcn/controllers/navigation_menu_controller.js

@@ -0,0 +1,254 @@
+import { Controller } from "@hotwired/stimulus"
+
+import {
+  applyMenuTriggerState,
+  associateMenuElements,
+  isOwnedMenuElement,
+  MenuPopoverManager,
+  ownedMenuElements,
+  scopedMenuElement,
+} from "@supermomonga/shadcn-view-components/menu_popover"
+
+const ITEM_SCOPE_SELECTOR = "[data-slot='navigation-menu-item']"
+const CONTENT_SELECTOR = "[data-slot='navigation-menu-content'][popover]"
+
+// NavigationMenuはARIA menuではなく、通常のnav/linkと開閉領域を組み合わせる。
+// LinkのTab/Enter操作を保ちつつ、トップレベル移動とTriggerごとのContentを管理する。
+export default class NavigationMenuController extends Controller {
+  /** @type {HTMLElement[]} */
+  topControls = []
+
+  /** @type {Map<HTMLElement, HTMLElement>} */
+  triggerToPopover = new Map()
+
+  /** @type {Map<HTMLElement, HTMLElement>} */
+  popoverToTrigger = new Map()
+
+  /** @type {MenuPopoverManager | null} */
+  popovers = null
+
+  /** @type {(event: MouseEvent) => void} */
+  onClick = (event) => {
+    if (!(event.target instanceof Element) || !isOwnedMenuElement(this.root, event.target)) return
+
+    const link = event.target.closest("[data-slot='navigation-menu-link']")
+    if (link) this.closeAll()
+  }
+
+  /** @type {(event: KeyboardEvent) => void} */
+  onKeydown = (event) => this.navigate(event)
+
+  /** @type {(event: FocusEvent) => void} */
+  onFocusOut = (event) => {
+    const next = event.relatedTarget
+    if (next instanceof Node && this.popovers?.containsOpenPopover(next)) return
+    this.closeAll()
+  }
+
+  /** @type {(event: PointerEvent) => void} */
+  onDocPointerDown = (event) => {
+    if (!this.popovers) return
+    this.popovers.beginPointerDown()
+    if (!(event.target instanceof Node)) return
+
+    for (const popover of this.popovers.openPopovers().reverse()) {
+      const trigger = this.popoverToTrigger.get(popover)
+      if (popover.contains(event.target)) continue
+      if (trigger?.contains(event.target)) {
+        this.popovers.recordOpenTriggerPointerDown(event, popover, trigger)
+        continue
+      }
+      this.popovers.hide(popover)
+    }
+  }
+
+  connect() {
+    this.configurePairs()
+    this.popovers = new MenuPopoverManager(this.root, (popover, state) => this.syncState(popover, state))
+    this.popovers.connect()
+    this.root.addEventListener("click", this.onClick, true)
+    this.root.addEventListener("keydown", this.onKeydown, true)
+    this.root.addEventListener("focusout", this.onFocusOut)
+    document.addEventListener("pointerdown", this.onDocPointerDown)
+  }
+
+  disconnect() {
+    this.root.removeEventListener("click", this.onClick, true)
+    this.root.removeEventListener("keydown", this.onKeydown, true)
+    this.root.removeEventListener("focusout", this.onFocusOut)
+    document.removeEventListener("pointerdown", this.onDocPointerDown)
+    this.popovers?.disconnect()
+    this.popovers = null
+    this.topControls = []
+    this.triggerToPopover.clear()
+    this.popoverToTrigger.clear()
+  }
+
+  configurePairs() {
+    this.topControls = []
+    this.triggerToPopover.clear()
+    this.popoverToTrigger.clear()
+
+    for (const scope of ownedMenuElements(this.root, ITEM_SCOPE_SELECTOR)) {
+      const trigger = scopedMenuElement(
+        this.root,
+        scope,
+        ITEM_SCOPE_SELECTOR,
+        "[data-slot='navigation-menu-trigger']",
+      )
+      const popover = scopedMenuElement(this.root, scope, ITEM_SCOPE_SELECTOR, CONTENT_SELECTOR)
+      if (trigger && popover) {
+        associateMenuElements(trigger, popover, "shadcn-navigation-menu", { labelContent: false })
+        this.triggerToPopover.set(trigger, popover)
+        this.popoverToTrigger.set(popover, trigger)
+        this.topControls.push(trigger)
+        continue
+      }
+
+      const link = scopedMenuElement(
+        this.root,
+        scope,
+        ITEM_SCOPE_SELECTOR,
+        "[data-slot='navigation-menu-link']",
+      )
+      if (link && !link.closest(CONTENT_SELECTOR)) this.topControls.push(link)
+    }
+  }
+
+  /** @param {Event} event */
+  toggle(event) {
+    if (!(event.currentTarget instanceof HTMLElement)) return
+
+    const popover = this.triggerToPopover.get(event.currentTarget)
+    if (!popover || !this.popovers) return
+    if (this.popovers.consumeOpenTriggerPointer(event, event.currentTarget)) {
+      this.popovers.hide(popover)
+      return
+    }
+    if (this.popovers.isOpen(popover)) this.popovers.hide(popover)
+    else this.open(event.currentTarget, false, "first")
+  }
+
+  /** @param {KeyboardEvent} event */
+  navigate(event) {
+    const target = event.target
+    if (!(target instanceof Element) || !isOwnedMenuElement(this.root, target)) return
+
+    const content = /** @type {HTMLElement | null} */ (target.closest(CONTENT_SELECTOR))
+    if (content && this.popovers?.isOpen(content)) {
+      this.navigateContent(event, content)
+      return
+    }
+
+    const control = /** @type {HTMLElement | null} */ (
+      target.closest("[data-slot='navigation-menu-trigger'], [data-slot='navigation-menu-link']")
+    )
+    if (control && this.topControls.includes(control)) this.navigateTopLevel(event, control)
+  }
+
+  /** @param {KeyboardEvent} event @param {HTMLElement} control */
+  navigateTopLevel(event, control) {
+    const keys = ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End", "Escape"]
+    if (!keys.includes(event.key)) return
+    event.preventDefault()
+
+    const popover = this.triggerToPopover.get(control)
+    if (event.key === "Escape") {
+      if (popover) this.popovers?.hide(popover)
+      control.focus()
+      return
+    }
+    if ((event.key === "ArrowDown" || event.key === "ArrowUp") && popover) {
+      this.open(control, true, event.key === "ArrowDown" ? "first" : "last")
+      return
+    }
+
+    const next = this.topLevelDestination(control, event.key)
+    if (!next) return
+    const hadOpenPopover = this.popovers?.openPopovers().length !== 0
+    next.focus()
+    if (!hadOpenPopover) return
+
+    if (this.triggerToPopover.has(next)) this.open(next, false, "first")
+    else this.closeAll()
+  }
+
+  /** @param {KeyboardEvent} event @param {HTMLElement} content */
+  navigateContent(event, content) {
+    const keys = ["ArrowDown", "ArrowUp", "Home", "End", "Escape"]
+    if (!keys.includes(event.key)) return
+    event.preventDefault()
+
+    const trigger = this.popoverToTrigger.get(content)
+    if (event.key === "Escape") {
+      this.popovers?.hide(content)
+      trigger?.focus()
+      return
+    }
+
+    const links = this.contentControls(content)
+    if (links.length === 0) return
+    const target = event.target
+    const current = links.findIndex((link) => link === target || (target instanceof Node && link.contains(target)))
+    let next = current
+    if (event.key === "ArrowDown") next = (current + 1 + links.length) % links.length
+    if (event.key === "ArrowUp") next = (current - 1 + links.length) % links.length
+    if (event.key === "Home") next = 0
+    if (event.key === "End") next = links.length - 1
+    links[Math.max(0, next)]?.focus()
+  }
+
+  /** @param {HTMLElement} trigger @param {boolean} moveFocus @param {"first" | "last"} boundary */
+  open(trigger, moveFocus, boundary) {
+    const popover = this.triggerToPopover.get(trigger)
+    if (!popover || !this.popovers) return
+
+    this.popovers.hideAll([popover])
+    this.popovers.show(popover, trigger, { align: "start", side: "bottom", sideOffset: 8 })
+    if (!moveFocus) return
+
+    const controls = this.contentControls(popover)
+    const destination = boundary === "first" ? controls[0] : controls.at(-1)
+    destination?.focus()
+  }
+
+  closeAll() {
+    this.popovers?.hideAll()
+  }
+
+  /** @param {HTMLElement} popover @param {"open" | "closed"} state */
+  syncState(popover, state) {
+    applyMenuTriggerState(this.popoverToTrigger.get(popover), state)
+  }
+
+  /** @param {HTMLElement} content @returns {HTMLElement[]} */
+  contentControls(content) {
+    return ownedMenuElements(
+      this.root,
+      `${CONTENT_SELECTOR} a[href], ${CONTENT_SELECTOR} button:not([disabled]), ${CONTENT_SELECTOR} [tabindex]`,
+    )
+      .filter((element) => element.closest(CONTENT_SELECTOR) === content)
+      .filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true")
+  }
+
+  /** @param {HTMLElement} control @param {string} key @returns {HTMLElement | null} */
+  topLevelDestination(control, key) {
+    const controls = this.topControls.filter((candidate) => (
+      !candidate.hasAttribute("disabled") && candidate.getAttribute("aria-disabled") !== "true"
+    ))
+    const current = controls.indexOf(control)
+    if (current < 0 || controls.length === 0) return null
+    if (key === "Home") return controls[0]
+    if (key === "End") return controls.at(-1) ?? null
+    if (key !== "ArrowRight" && key !== "ArrowLeft") return null
+
+    const rtl = this.root.ownerDocument.defaultView?.getComputedStyle(this.root).direction === "rtl"
+    const forward = key === "ArrowRight" ? !rtl : rtl
+    return controls[(current + (forward ? 1 : -1) + controls.length) % controls.length]
+  }
+
+  /** @returns {HTMLElement} */
+  get root() {
+    return /** @type {HTMLElement} */ (this.element)
+  }
+}

data/app/assets/javascripts/shadcn/controllers/popover_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from "@hotwired/stimulus"
+
+import { startFloatingPosition } from "@supermomonga/shadcn-view-components/floating_position"
+import { hideAfterExit } from "@supermomonga/shadcn-view-components/hide_after_exit"
+import { applyStateAttrs } from "@supermomonga/shadcn-view-components/state_attrs"
+
+const noop = () => {}
+
+// Popover API(popover="auto")の開閉同期と位置合わせ。
+// 軽い外側クリック解散(light dismiss)はネイティブが担い、ここでは
+// data-state / aria-expanded の同期と、trigger 直下への位置合わせを行う。
+// trigger からの明示的な閉じ操作では退出アニメーションを待つ
+// (ネイティブの light dismiss は即時解散のためアニメーション無し)
+export default class PopoverController extends Controller {
+  /** @type {HTMLElement | null} */
+  content = null
+
+  /** @type {HTMLElement | null} */
+  trigger = null
+
+  /** @type {() => void} */
+  cancelExit = noop
+
+  /** @type {{ update: () => void, destroy: () => void } | null} */
+  positioning = null
+
+  /** @type {() => void} */
+  onToggle = () => this.syncState()
+
+  connect() {
+    this.cancelPendingExit()
+    this.stopPositioning()
+    this.content = this.element.querySelector("[popover]")
+    this.trigger = this.element.querySelector("[data-slot='popover-trigger']")
+    this.content?.addEventListener("toggle", this.onToggle)
+    this.syncState()
+  }
+
+  disconnect() {
+    const content = this.content
+    const finishExit = content?.dataset.state === "closed" && content.matches(":popover-open")
+    this.cancelPendingExit()
+    this.stopPositioning()
+    content?.removeEventListener("toggle", this.onToggle)
+    if (finishExit) content.hidePopover()
+    this.content = null
+    this.trigger = null
+  }
+
+  toggle() {
+    const content = this.content
+    if (!content) return
+
+    const exiting = content.dataset.state === "closed" && content.matches(":popover-open")
+    if (content.matches(":popover-open") && !exiting) {
+      this.cancelPendingExit()
+      this.applyState("closed")
+      this.cancelExit = hideAfterExit(content, () => {
+        if (this.content !== content || content.dataset.state === "open") return
+        this.stopPositioning()
+        content.hidePopover()
+      })
+      return
+    }
+
+    this.cancelPendingExit()
+    this.applyState("open")
+    if (!content.matches(":popover-open")) content.showPopover()
+    this.startPositioning()
+  }
+
+  syncState() {
+    const content = this.content
+    if (!content) return
+
+    const state = content.matches(":popover-open") ? "open" : "closed"
+    if (state === "open") this.cancelPendingExit()
+    this.applyState(state)
+    if (state === "open") this.startPositioning()
+    else this.stopPositioning()
+  }
+
+  /** @param {"open" | "closed"} state */
+  applyState(state) {
+    if (!this.content) return
+
+    this.content.dataset.state = state
+    applyStateAttrs(this.content, state)
+    this.trigger?.setAttribute("aria-expanded", String(state === "open"))
+  }
+
+  startPositioning() {
+    const content = this.content
+    const trigger = this.trigger
+    if (!content || !trigger) return
+
+    this.stopPositioning()
+    this.positioning = startFloatingPosition({
+      align: "center",
+      anchor: trigger,
+      collisionPadding: 5,
+      floating: content,
+      side: "bottom",
+      sideOffset: 4,
+    })
+  }
+
+  stopPositioning() {
+    this.positioning?.destroy()
+    this.positioning = null
+  }
+
+  cancelPendingExit() {
+    this.cancelExit()
+    this.cancelExit = noop
+  }
+}

data/app/assets/javascripts/shadcn/controllers/resizable_controller.js

@@ -0,0 +1,256 @@
+import { Controller } from "@hotwired/stimulus"
+
+import {
+  ensureId,
+  ensureRootId,
+  ownedElements,
+  setDefaultAttribute,
+} from "@supermomonga/shadcn-view-components/aria_relationships"
+
+const CONTROLLER = "shadcn--resizable"
+const DEFAULT_MIN = 10
+const DEFAULT_MAX = 90
+const STEP = 5
+
+/**
+ * @typedef {object} DragState
+ * @property {HTMLElement} before
+ * @property {HTMLElement} after
+ * @property {HTMLElement} handle
+ * @property {boolean} vertical
+ * @property {number} ratio
+ * @property {number} start
+ */
+
+// ハンドルのドラッグ/矢印キーで前後パネルの flex-basis を配分する
+/** @extends {Controller<HTMLElement>} */
+export default class ResizableController extends Controller {
+  /** @type {DragState | null} */
+  dragging = null
+
+  /** @type {(event: MouseEvent) => void} */
+  onMove = (event) => this.drag(event)
+
+  onUp = () => this.endDrag()
+
+  connect() {
+    this.ensureRelationships()
+    for (const handle of this.handles) this.syncValue(handle)
+  }
+
+  disconnect() {
+    this.endDrag()
+  }
+
+  /**
+   * @param {Event} event
+   * @returns {HTMLElement | null}
+   */
+  handleFor(event) {
+    if (!(event.currentTarget instanceof Element)) return null
+    const handle = /** @type {HTMLElement | null} */ (
+      event.currentTarget.closest("[data-slot='resizable-handle']")
+    )
+    if (!handle || handle.closest(`[data-controller~='${CONTROLLER}']`) !== this.element) return null
+
+    this.ensureHandleRelationship(handle)
+    return handle
+  }
+
+  // セパレータ自身が horizontal のとき縦積みグループ(上下方向にリサイズ)。
+  // aria-orientation はセパレータの向きであり、グループの向きの逆
+  /** @param {HTMLElement} handle */
+  isVerticalGroup(handle) {
+    return handle.getAttribute("aria-orientation") === "horizontal"
+  }
+
+  // 前後の対はハンドルより手前に何個パネルがあるかで決める
+  // (子要素全体の index だとハンドル数が挟まる3パネル以上で対がずれる)
+  /**
+   * @param {HTMLElement | null} handle
+   * @returns {{ before: HTMLElement, after: HTMLElement } | null}
+   */
+  pairFor(handle) {
+    if (!handle) return null
+    const group = handle.closest("[data-slot='resizable-panel-group']")
+    if (group !== this.element) return null
+    const panels = this.panels
+    let count = 0
+    for (let el = handle.previousElementSibling; el; el = el.previousElementSibling) {
+      if (el.matches("[data-slot='resizable-panel']")) count++
+    }
+    const before = panels[count - 1]
+    const after = panels[count]
+    return before && after ? { before, after } : null
+  }
+
+  /** @param {MouseEvent} event */
+  startDrag(event) {
+    const handle = this.handleFor(event)
+    if (!handle) return
+    const pair = this.pairFor(handle)
+    if (!pair) return
+    event.preventDefault()
+    // preventDefaultするとフォーカス移動が阻害されるため明示的に移す(キーボード操作のため)
+    handle.focus()
+
+    // 同じcontrollerでdragを開始し直した場合もlistenerを重複させない。
+    this.endDrag()
+
+    // 開始時の比率を基準に以降は移動量だけで追従する
+    // (カーソルの絶対位置をそのまま比率にすると、掴んだ瞬間パネルが跳ぶ)
+    const vertical = this.isVerticalGroup(handle)
+    const beforeRect = pair.before.getBoundingClientRect()
+    const afterRect = pair.after.getBoundingClientRect()
+    const beforeSize = vertical ? beforeRect.height : beforeRect.width
+    const total = beforeSize + (vertical ? afterRect.height : afterRect.width) || 1
+    this.dragging = {
+      ...pair,
+      handle,
+      vertical,
+      ratio: beforeSize / total,
+      start: vertical ? event.clientY : event.clientX,
+    }
+    document.addEventListener("mousemove", this.onMove)
+    document.addEventListener("mouseup", this.onUp)
+  }
+
+  endDrag() {
+    document.removeEventListener("mousemove", this.onMove)
+    document.removeEventListener("mouseup", this.onUp)
+    this.dragging = null
+  }
+
+  /** @param {MouseEvent} event */
+  drag(event) {
+    if (!this.dragging) return
+    const { before, after, handle, vertical, ratio, start } = this.dragging
+    const group = /** @type {HTMLElement | null} */ (
+      before.closest("[data-slot='resizable-panel-group']")
+    )
+    if (!group) return
+    const rect = group.getBoundingClientRect()
+    const size = vertical ? rect.height : rect.width
+    if (size === 0) return
+    const delta = ((vertical ? event.clientY : event.clientX) - start) / size
+    this.applySplit(handle, before, after, this.clampRatio(handle, ratio + delta))
+  }
+
+  /** @param {KeyboardEvent} event */
+  nudge(event) {
+    const handle = this.handleFor(event)
+    const pair = handle && this.pairFor(handle)
+    if (!pair) return
+    const vertical = this.isVerticalGroup(handle)
+    const keys = vertical ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"]
+    if (![...keys, "Home", "End"].includes(event.key)) return
+    event.preventDefault()
+
+    const { min, max } = this.limitsFor(handle)
+    let next
+    if (event.key === "Home") next = min / 100
+    else if (event.key === "End") next = max / 100
+    else {
+      const positive = vertical ? event.key === "ArrowDown" : event.key === "ArrowRight"
+      next = this.currentRatio(pair.before, pair.after, handle) + (positive ? STEP : -STEP) / 100
+    }
+    this.applySplit(handle, pair.before, pair.after, this.clampRatio(handle, next))
+  }
+
+  // %指定済みならそれを、初期レイアウトでは実寸を読み取る。jsdom等で寸法を
+  // 得られない場合だけSSR済みaria-valuenow（既定50）へ戻る。
+  /** @param {HTMLElement} before @param {HTMLElement} after @param {HTMLElement} handle */
+  currentRatio(before, after, handle) {
+    const basis = before.style.flexBasis
+    if (basis.endsWith("%")) {
+      const percent = parseFloat(basis)
+      if (Number.isFinite(percent) && percent > 0) return percent / 100
+    }
+
+    const beforeRect = before.getBoundingClientRect()
+    const afterRect = after.getBoundingClientRect()
+    const vertical = this.isVerticalGroup(handle)
+    const beforeSize = vertical ? beforeRect.height : beforeRect.width
+    const afterSize = vertical ? afterRect.height : afterRect.width
+    if (beforeSize + afterSize > 0) return beforeSize / (beforeSize + afterSize)
+
+    const value = Number.parseFloat(handle.getAttribute("aria-valuenow") ?? "")
+    return Number.isFinite(value) ? value / 100 : 0.5
+  }
+
+  /**
+   * @param {HTMLElement} handle
+   * @param {HTMLElement} before
+   * @param {HTMLElement} after
+   * @param {number} ratio
+   */
+  applySplit(handle, before, after, ratio) {
+    before.style.flexBasis = `${ratio * 100}%`
+    before.style.flexGrow = "0"
+    after.style.flexBasis = `${(1 - ratio) * 100}%`
+    after.style.flexGrow = "0"
+    handle.setAttribute("aria-valuenow", this.percentValue(ratio))
+  }
+
+  ensureRelationships() {
+    const rootId = ensureRootId(this.element, "resizable")
+    this.panels.forEach((panel, index) => ensureId(panel, `${rootId}-panel-${index + 1}`))
+    this.handles.forEach((handle, index) => {
+      ensureId(handle, `${rootId}-handle-${index + 1}`)
+      this.ensureHandleRelationship(handle)
+    })
+  }
+
+  /** @param {HTMLElement} handle */
+  ensureHandleRelationship(handle) {
+    const pair = this.pairFor(handle)
+    if (!pair) return
+
+    const rootId = ensureRootId(this.element, "resizable")
+    const panelIndex = this.panels.indexOf(pair.before)
+    ensureId(pair.before, `${rootId}-panel-${panelIndex + 1}`)
+    setDefaultAttribute(handle, "aria-controls", pair.before.id)
+    setDefaultAttribute(handle, "aria-valuemin", String(DEFAULT_MIN))
+    setDefaultAttribute(handle, "aria-valuemax", String(DEFAULT_MAX))
+    setDefaultAttribute(handle, "aria-valuenow", "50")
+  }
+
+  /** @param {HTMLElement} handle */
+  syncValue(handle) {
+    const pair = this.pairFor(handle)
+    if (!pair) return
+
+    const ratio = this.currentRatio(pair.before, pair.after, handle)
+    handle.setAttribute("aria-valuenow", this.percentValue(ratio))
+  }
+
+  /** @param {HTMLElement} handle */
+  limitsFor(handle) {
+    const rawMin = Number.parseFloat(handle.getAttribute("aria-valuemin") ?? "")
+    const rawMax = Number.parseFloat(handle.getAttribute("aria-valuemax") ?? "")
+    const min = Number.isFinite(rawMin) ? rawMin : DEFAULT_MIN
+    const max = Number.isFinite(rawMax) && rawMax > min ? rawMax : DEFAULT_MAX
+    return { min, max }
+  }
+
+  /** @param {HTMLElement} handle @param {number} ratio */
+  clampRatio(handle, ratio) {
+    const { min, max } = this.limitsFor(handle)
+    return Math.min(max / 100, Math.max(min / 100, ratio))
+  }
+
+  /** @param {number} ratio */
+  percentValue(ratio) {
+    return String(Math.round(ratio * 10000) / 100)
+  }
+
+  /** @returns {HTMLElement[]} */
+  get panels() {
+    return ownedElements(this.element, ":scope > [data-slot='resizable-panel']", CONTROLLER)
+  }
+
+  /** @returns {HTMLElement[]} */
+  get handles() {
+    return ownedElements(this.element, ":scope > [data-slot='resizable-handle']", CONTROLLER)
+  }
+}