shadcn_view_component 0.3.3

data/app/javascript/shadcn/controllers/hover_card_controller.js

@@ -0,0 +1,85 @@
+import { Controller } from "@hotwired/stimulus"
+import { FloatingLayer } from "shadcn/floating"
+
+// Radix's HoverCard (vendor/radix/ui/hover-card.tsx): a card that opens on
+// hover after a pause and closes after a longer one.
+//
+// The closing delay is the whole design. It is the window in which the pointer
+// crosses the gap between the trigger and the card — and the card carries the
+// same enter and leave handlers as the trigger, so arriving on it cancels the
+// close that leaving the trigger started.
+export default class extends Controller {
+  static targets = [ "trigger", "content" ]
+  static values = {
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "center" },
+    sideOffset: { type: Number, default: 4 },
+    // Radix's own (hover-card.tsx:59-60).
+    openDelay: { type: Number, default: 700 },
+    closeDelay: { type: Number, default: 300 }
+  }
+
+  connect() {
+    if (!this.hasTriggerTarget || !this.hasContentTarget) return
+
+    this.contentTarget.hidden = true
+
+    // The card is not reachable by keyboard — it opens on the trigger's focus
+    // and there is nowhere to tab to — so anything inside it that would be a
+    // tab stop is taken out of the order. Radix does this on every render
+    // (hover-card.tsx:324-327); here the content is the host's markup and does
+    // not change under us, so once is enough.
+    this.excludeTabbables()
+
+    this.layer = new FloatingLayer({
+      trigger: this.triggerTarget,
+      content: this.contentTarget,
+      prefix: "hover-card",
+      side: this.sideValue,
+      align: this.alignValue,
+      sideOffset: this.sideOffsetValue
+    })
+  }
+
+  disconnect() {
+    this.cancel()
+    this.layer?.destroy()
+  }
+
+  // `pointerenter` rather than `mouseenter`, because that is the event that
+  // carries a `pointerType`: Radix excludes touch, where there is no hovering
+  // to do and a tap would open a card the same tap is trying to activate.
+  open(event) {
+    if (this.isTouch(event)) return
+
+    this.cancel()
+    this.timer = setTimeout(() => this.layer.show(), this.openDelayValue)
+  }
+
+  close(event) {
+    if (this.isTouch(event)) return
+
+    this.cancel()
+    this.timer = setTimeout(() => this.layer.hide(), this.closeDelayValue)
+  }
+
+  cancel() {
+    if (this.timer) clearTimeout(this.timer)
+    this.timer = null
+  }
+
+  // `focus` and `blur` are not pointer events and have no `pointerType`, so an
+  // absent one is a real interaction rather than a touch.
+  isTouch(event) {
+    return event?.pointerType === "touch"
+  }
+
+  excludeTabbables() {
+    const selector =
+      "a[href], button, input, select, textarea, [tabindex]:not([tabindex='-1'])"
+
+    for (const element of this.contentTarget.querySelectorAll(selector)) {
+      element.setAttribute("tabindex", "-1")
+    }
+  }
+}

data/app/javascript/shadcn/controllers/input_group_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+// The one piece of behaviour in an otherwise markup-only family: clicking an
+// addon focuses the group's control, so the whole bordered box behaves like the
+// input it wraps. A click that landed on a button is left alone — the button is
+// what the user meant.
+//
+// The controller sits on the group rather than on the addon, so `this.element`
+// is the group and the lookup matches upstream's
+// `currentTarget.parentElement.querySelector("input")`.
+export default class extends Controller {
+  focusControl(event) {
+    if (event.target.closest("button")) return
+
+    this.element.querySelector("input")?.focus()
+  }
+}

data/app/javascript/shadcn/controllers/input_otp_controller.js

@@ -0,0 +1,80 @@
+import { Controller } from "@hotwired/stimulus"
+
+// The three values `input-otp.tsx` reads per box, and the rule the package
+// computes them with (input.tsx:596-618):
+//
+//   char         value[i], or nothing
+//   isActive     focused, and i is where the selection is — the caret's box, or
+//                any box inside a range
+//   hasFakeCaret active and empty
+//
+// Everything under them is one real `<input>` lying over the boxes, so the
+// browser owns typing, paste, backspace, the arrows and the one-time-code
+// autofill, and this owns painting.
+export default class extends Controller {
+  static targets = [ "input", "slot", "char", "caret" ]
+  static values = { length: { type: Number, default: 6 } }
+
+  connect() {
+    // The input's font size is the boxes' height, so its (invisible) text lines
+    // up with them and a native selection paints where a person would expect.
+    // Read rather than assumed: the boxes are sized by classes a caller may
+    // change.
+    this.element.style.setProperty("--shadcn-input-otp-height", `${this.boxHeight}px`)
+
+    this.refresh()
+  }
+
+  get boxHeight() {
+    return this.hasSlotTarget ? Math.round(this.slotTargets[0].getBoundingClientRect().height) : 36
+  }
+
+  // The caret never sits past the last box. The package clamps the selection on
+  // focus and after every change — `min(value.length, maxLength - 1)` to
+  // `value.length` (input.tsx:432, 472) — which is what keeps the last box lit
+  // when the code is complete instead of leaving none of them lit.
+  clamp() {
+    const input = this.inputTarget
+    const length = input.value.length
+    const start = Math.min(length, this.lengthValue - 1)
+
+    if (input.selectionStart !== start || input.selectionEnd !== length) {
+      input.setSelectionRange(start, length)
+    }
+  }
+
+  focus() {
+    this.clamp()
+    this.refresh()
+  }
+
+  // `onComplete` in upstream's API, which has no counterpart in markup: an
+  // event, so an app can submit the form or move on without this component
+  // deciding which.
+  entered() {
+    this.clamp()
+    this.refresh()
+
+    if (this.inputTarget.value.length === this.lengthValue) {
+      this.dispatch("complete", { detail: { value: this.inputTarget.value } })
+    }
+  }
+
+  refresh() {
+    const input = this.inputTarget
+    const value = input.value
+    const focused = document.activeElement === input
+    const start = input.selectionStart
+    const end = input.selectionEnd
+
+    this.slotTargets.forEach((slot, index) => {
+      const char = value[index]
+      const active = focused && start !== null && end !== null &&
+        ((start === end && index === start) || (index >= start && index < end))
+
+      slot.dataset.active = String(active)
+      if (this.charTargets[index]) this.charTargets[index].textContent = char ?? ""
+      if (this.caretTargets[index]) this.caretTargets[index].hidden = !(active && char === undefined)
+    })
+  }
+}

data/app/javascript/shadcn/controllers/menubar_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+import { directionAwareKey, readDirection } from "shadcn/direction"
+
+// Radix's Menubar (vendor/radix/ui/menubar.tsx).
+//
+// Every menu in the bar is a `shadcn--dropdown-menu` of its own, as a context
+// menu's submenus are. This controller is the *bar*: one menu open at a time,
+// arrows moving between the names, and — the part that makes it feel like a
+// menubar rather than a row of dropdowns — a menu already open turning the rest
+// into things you merely hover to reach.
+export default class extends Controller {
+  static targets = [ "trigger", "menu" ]
+  static values = {
+    // Radix's default here is `true` (vendor/radix/ui/menubar.tsx:76), unlike the dropdown's.
+    // A bar is a ring; a list is not.
+    loop: { type: Boolean, default: true }
+  }
+
+  // Which menu is open, if any. Read from the DOM rather than held, so the
+  // answer cannot drift from what the menus themselves did.
+  get openTrigger() {
+    return this.triggerTargets.find((trigger) => trigger.dataset.state === "open") || null
+  }
+
+  // Once one is open, crossing another name switches to it — no click, and the
+  // focus follows so the keyboard carries on from where the pointer left off
+  // (vendor/radix/ui/menubar.tsx:255-260).
+  pointerEnter(event) {
+    const trigger = event.currentTarget
+    const open = this.openTrigger
+
+    if (!open || open === trigger) return
+
+    this.closeAll(trigger)
+    this.menuFor(trigger)?.toggle()
+    trigger.focus()
+  }
+
+  keydown(event) {
+    const key = directionAwareKey(event.key, readDirection(this.element))
+    const triggers = this.triggerTargets
+    const index = triggers.indexOf(event.currentTarget)
+
+    if (index === -1) return
+
+    switch (key) {
+      case "ArrowRight":
+        event.preventDefault()
+        this.move(index, 1)
+        return
+      case "ArrowLeft":
+        event.preventDefault()
+        this.move(index, -1)
+        return
+      case "Home":
+        event.preventDefault()
+        triggers[0].focus()
+        return
+      case "End":
+        event.preventDefault()
+        triggers[triggers.length - 1].focus()
+    }
+  }
+
+  // The arrows keep working from inside an open panel, which is how you walk
+  // the whole bar without closing anything. Around a submenu they give way —
+  // but only in the one direction that already means something there, which is
+  // the half easy to get wrong (vendor/radix/ui/menubar.tsx:355-359):
+  //
+  //   on a sub-trigger, "next" opens the submenu — so only "next" gives way,
+  //   and "previous" still walks the bar;
+  //   inside a submenu, "previous" closes it — so only "previous" gives way,
+  //   and "next" still walks the bar.
+  contentKeydown(event) {
+    const key = directionAwareKey(event.key, readDirection(this.element))
+    if (key !== "ArrowRight" && key !== "ArrowLeft") return
+
+    const panel = event.currentTarget
+    const next = key === "ArrowRight"
+
+    if (next && event.target.closest("[data-slot=menubar-sub-trigger]")) return
+    if (!next && event.target.closest("[data-slot=menubar-sub-content]")) return
+
+    const trigger = this.triggerFor(panel)
+    const index = this.triggerTargets.indexOf(trigger)
+    if (index === -1) return
+
+    event.preventDefault()
+    this.move(index, next ? 1 : -1, { open: true })
+  }
+
+  // Focus alone does not open anything — it only moves the tab stop. Radix
+  // manages that stop by hand rather than through the roving group, because the
+  // group would fight the menu for it (vendor/radix/ui/menubar.tsx:89-92).
+  focused(event) {
+    for (const trigger of this.triggerTargets) {
+      trigger.tabIndex = trigger === event.currentTarget ? 0 : -1
+    }
+  }
+
+  move(index, step, { open = false } = {}) {
+    const triggers = this.triggerTargets
+    const last = triggers.length - 1
+    let next = index + step
+
+    if (next > last) next = this.loopValue ? 0 : last
+    if (next < 0) next = this.loopValue ? last : 0
+
+    const target = triggers[next]
+    const opening = open || this.openTrigger
+
+    if (opening) {
+      this.closeAll(target)
+      this.menuFor(target)?.toggle()
+
+      // and nothing else: the panel that just opened has taken focus, and
+      // focusing the name would take it straight back off it. Radix goes out of
+      // its way to leave the trigger unfocused on the way in — pointerdown
+      // calls `preventDefault` for exactly this reason
+      // (vendor/radix/ui/menubar.tsx:245-252) — and this is the same move by
+      // another route.
+      return
+    }
+
+    target.focus()
+  }
+
+  closeAll(except) {
+    for (const trigger of this.triggerTargets) {
+      if (trigger === except || trigger.dataset.state !== "open") continue
+
+      this.menuFor(trigger)?.toggle()
+    }
+  }
+
+  // Reaching the menu's own controller rather than poking its DOM: it owns the
+  // layer, the dismiss registration and the exit, and setting attributes behind
+  // its back would leave all three out of step.
+  menuFor(trigger) {
+    const element = trigger.closest("[data-slot=menubar-menu]")
+    if (!element) return null
+
+    return this.application.getControllerForElementAndIdentifier(element, "shadcn--dropdown-menu")
+  }
+
+  triggerFor(panel) {
+    const element = panel.closest("[data-slot=menubar-menu]")
+
+    return this.triggerTargets.find((trigger) => element?.contains(trigger)) || null
+  }
+}