shadcn_view_component 0.3.3

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

@@ -0,0 +1,154 @@
+import { Controller } from "@hotwired/stimulus"
+import { uniqueId } from "shadcn/id"
+import { pushLayer, removeLayer } from "shadcn/dismiss"
+import { trapFocus, focusFirst, lockScroll, unlockScroll } from "shadcn/focus"
+import * as topLayer from "shadcn/top_layer"
+import { ExitQueue } from "shadcn/animation"
+
+// Radix's Dialog, shared by Dialog, AlertDialog and Sheet: focus is trapped in
+// the content, body scrolling is locked, and Escape closes it — except for
+// AlertDialog, which Radix keeps dismiss-proof on outside clicks.
+//
+// Radix portals the overlay and content onto `document.body`; we deliberately
+// leave them where they are. Both are `position: fixed` and the root is
+// `display: contents`, so they still lay out against the viewport, and keeping
+// them inside the controller's element is what lets the Stimulus actions on
+// the close buttons keep working. (The one case this gives up is a host page
+// that puts a `transform`/`filter`/`contain` ancestor above the dialog, which
+// would become the containing block.)
+export default class extends Controller {
+  static targets = [ "trigger", "overlay", "content" ]
+  static values = {
+    open: Boolean,
+    modal: { type: Boolean, default: true },
+    dismissable: { type: Boolean, default: true }
+  }
+
+  connect() {
+    this.releaseFocus = null
+    this.layer = null
+    this.exits = new ExitQueue()
+
+    this.render()
+    if (this.openValue) this.show()
+  }
+
+  disconnect() {
+    this.teardown()
+    // Turbo may be detaching the element; a continuation would then be
+    // operating on a subtree that has left the document.
+    this.exits.flushAll()
+  }
+
+  open() {
+    this.show()
+  }
+
+  close() {
+    this.hide()
+  }
+
+  toggle() {
+    this.openValue ? this.hide() : this.show()
+  }
+
+  show() {
+    if (!this.hasContentTarget || this.layer) return
+
+    this.previouslyFocused = document.activeElement
+    this.openValue = true
+    this.render()
+
+    if (this.modalValue) lockScroll()
+
+    this.releaseFocus = trapFocus(this.contentTarget, this.previouslyFocused)
+    focusFirst(this.contentTarget)
+
+    this.layer = pushLayer({
+      element: this.contentTarget,
+      anchors: this.hasTriggerTarget ? [ this.triggerTarget ] : [],
+      onDismiss: ({ reason }) => {
+        if (reason === "pointerdown" && !this.dismissableValue) return
+        this.hide()
+      }
+    })
+
+    this.dispatch("open")
+  }
+
+  hide() {
+    if (!this.layer) return
+
+    this.teardown()
+    this.openValue = false
+    this.render()
+    this.dispatch("close")
+  }
+
+  teardown() {
+    if (this.layer) removeLayer(this.layer)
+    this.layer = null
+
+    if (this.releaseFocus) this.releaseFocus()
+    this.releaseFocus = null
+
+    if (this.modalValue) unlockScroll()
+  }
+
+  render() {
+    const state = this.openValue ? "open" : "closed"
+
+    if (this.hasContentTarget) this.contentTarget.id ||= uniqueId("shadcn-dialog")
+
+    for (const element of this.layers) {
+      element.dataset.state = state
+
+      // A modal inside a `sticky z-40` header or an `isolate` card would
+      // otherwise be buried by whatever sits above that stacking context.
+      topLayer.enable(element)
+
+      if (this.openValue) {
+        // The overlay is faster than the content, so it can already have left
+        // the top layer while the content is still in it. Showing it again
+        // without taking the content out too would stack the backdrop *above*
+        // the dialog.
+        if (this.exits.has(element)) topLayer.hide(element)
+        this.exits.cancel(element)
+        element.hidden = false
+        topLayer.show(element)
+      } else if (element.hidden) {
+        // A morph can rewrite `hidden` back to true without going through an
+        // exit — `hidePopover()` on a never-shown popover costs nothing, so
+        // there is no reason to skip it just because nothing is animating.
+        topLayer.hide(element)
+      } else {
+        // Each element waits on its own animations: dialog content is
+        // `duration-200` (sheet content `duration-300`), while the overlay
+        // carries no `duration-*` class and falls back to `animate-out`'s
+        // default of 150ms.
+        this.exits.defer(element, () => {
+          element.hidden = true
+          topLayer.hide(element)
+        })
+      }
+    }
+
+    if (!this.hasTriggerTarget) return
+
+    this.triggerTarget.dataset.state = state
+    this.triggerTarget.setAttribute("aria-expanded", String(this.openValue))
+    // The id is generated above, so the server has nothing to point this at.
+    if (this.hasContentTarget) {
+      this.triggerTarget.setAttribute("aria-controls", this.contentTarget.id)
+    }
+  }
+
+  // Overlay first, content second: the top layer stacks in the order things are
+  // shown, so the dialog ends up above its own backdrop.
+  get layers() {
+    return [
+      this.hasOverlayTarget && this.overlayTarget,
+      this.hasContentTarget && this.contentTarget
+    ].filter(Boolean)
+  }
+}

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

@@ -0,0 +1,265 @@
+import { Controller } from "@hotwired/stimulus"
+
+// vaul's own numbers (vaul/src/constants.ts). A release counts as a throw above
+// 0.4 px/ms whatever the distance; below that it closes only once a quarter of
+// the drawer has been dragged off screen.
+const VELOCITY_THRESHOLD = 0.4
+const CLOSE_THRESHOLD = 0.25
+
+// After a scroll inside the drawer, a press within this window cannot start a
+// drag — otherwise the finish of a flick-scroll drags the drawer away.
+const SCROLL_LOCK_TIMEOUT = 100
+
+// A press landing while the drawer is still coming in scrolls rather than drags.
+const OPEN_GRACE = 500
+
+// Dragging *into* the drawer has nowhere to go, so it is rubber-banded rather
+// than stopped dead (vaul/src/helpers.ts:90-92).
+const dampen = (value) => 8 * (Math.log(value + 1) - 2)
+
+const VERTICAL = new Set([ "top", "bottom" ])
+
+// A press that lands on one of these means the control, not the panel. Vaul's
+// own `[data-vaul-no-drag]` is the escape hatch for anything else — it was
+// already honoured, but only in `shouldDrag`, which runs on the first *move*,
+// and by then the capture below has already happened.
+const CONTROLS = "a, button, input, select, textarea, label, [data-vaul-no-drag]"
+
+// The drag half of vaul's Drawer, which is the only half that is vaul's: the
+// rest of this component is Radix's Dialog, and runs on `shadcn--dialog`, whose
+// controller this one reaches for when a release means close.
+//
+// Four things vaul does are deliberately not here — snap points, scaling the
+// page behind the drawer, its iOS `position: fixed` workaround, and nested
+// drawers. See features/drawer.md for what each would cost and why.
+export default class extends Controller {
+  static targets = [ "content", "overlay" ]
+
+  connect() {
+    this.openedAt = null
+    this.scrollPreventedAt = null
+    this.reset()
+
+    // The press that opens the drawer arrives before the animation does, and a
+    // drag started during it reads a transform that is still moving.
+    this.opened = () => {
+      this.openedAt = Date.now()
+      this.reset()
+    }
+    this.element.addEventListener("shadcn--dialog:open", this.opened)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("shadcn--dialog:open", this.opened)
+  }
+
+  get direction() {
+    return this.hasContentTarget ? this.contentTarget.dataset.vaulDrawerDirection : "bottom"
+  }
+
+  get vertical() {
+    return VERTICAL.has(this.direction)
+  }
+
+  // Which way is "away". Bottom and right close by growing the coordinate, top
+  // and left by shrinking it, so one multiplier covers all four.
+  get multiplier() {
+    return this.direction === "bottom" || this.direction === "right" ? 1 : -1
+  }
+
+  press(event) {
+    if (!this.hasContentTarget || event.button !== 0) return
+    // Not a drag, and not merely "not worth dragging": the capture below
+    // retargets `pointerup` — and the compatibility `mouseup` with it — at the
+    // panel, and a click is dispatched at the common ancestor of down and up.
+    // Capturing on a button's press therefore means that button never gets a
+    // click at all. Typing kept working, because focus follows `pointerdown`,
+    // and so did Enter, because no pointer is involved: which is how this
+    // arrived — "with the keyboard it submits, with the mouse nothing happens".
+    if (event.target.closest?.(CONTROLS)) return
+
+    this.dragging = true
+    this.allowed = false
+    this.startedAt = Date.now()
+    this.start = this.vertical ? event.pageY : event.pageX
+    // Capture, which vaul does not do — and the one place this port knowingly
+    // adds something rather than leaving something out.
+    //
+    // A touch pointer is captured by the browser anyway, so on the device this
+    // component is designed for vaul already gets every move and every release.
+    // A mouse is not, and vaul binds its handlers to the panel, so with a mouse
+    // it loses the gesture the moment the cursor crosses the panel's edge —
+    // which a drag *upwards* does immediately, since the rubber band leaves the
+    // pointer above the panel by design. Both halves of that were reported here
+    // from the gallery: a drag that stopped following, and, before it, a drag
+    // released outside that never ended at all because the `pointerup` went to
+    // whatever was under the cursor.
+    //
+    // Capturing makes the mouse behave the way touch already does rather than
+    // changing what the component does. The one thing it costs is the target,
+    // recovered in `elementUnder` below.
+    this.contentTarget.setPointerCapture?.(event.pointerId)
+  }
+
+  move(event) {
+    if (!this.dragging) return
+
+
+    const moved = (this.start - (this.vertical ? event.pageY : event.pageX)) * this.multiplier
+    // Positive is *into* the drawer, which is the direction that scrolls.
+    const inward = moved > 0
+
+    if (!this.allowed && !this.shouldDrag(this.elementUnder(event), inward)) return
+    this.allowed = true
+
+    this.hold(this.contentTarget)
+    this.hold(this.overlayElement)
+
+    if (inward) {
+      this.translate(Math.min(dampen(moved) * -1, 0) * this.multiplier)
+      return
+    }
+
+    const distance = Math.abs(moved)
+    this.translate(distance * this.multiplier)
+    this.fade(1 - distance / this.size)
+  }
+
+  release(event) {
+    if (!this.dragging) return
+
+    this.dragging = false
+    if (!this.allowed) return
+    this.allowed = false
+
+    const moved = this.start - (this.vertical ? event.pageY : event.pageX)
+    const elapsed = Date.now() - this.startedAt
+    const velocity = elapsed > 0 ? Math.abs(moved) / elapsed : 0
+    const away = moved * this.multiplier < 0
+
+    if (!away) return this.reset()
+    if (velocity > VELOCITY_THRESHOLD) return this.dismiss()
+    if (Math.abs(moved) >= this.size * CLOSE_THRESHOLD) return this.dismiss()
+
+    this.reset()
+  }
+
+  // vaul's `shouldDrag`, minus the snap-point branches. It is what keeps a
+  // scrollable drawer usable: a press that means "scroll the list" must not
+  // also mean "throw the drawer away".
+  // What the pointer is really over. Capture retargets every move at the panel,
+  // and this is the one thing `shouldDrag` cannot do without: it climbs from
+  // there to find the scroller that owns the gesture, and a captured event says
+  // "the panel" every time.
+  elementUnder(event) {
+    return document.elementFromPoint(event.clientX, event.clientY) || event.target
+  }
+
+  shouldDrag(target, inward) {
+    let element = target
+
+    if (element.tagName === "SELECT") return false
+    if (element.closest("[data-vaul-no-drag]")) return false
+
+    // Sideways drawers have no scroll axis to compete with.
+    if (!this.vertical) return true
+
+    if (this.openedAt && Date.now() - this.openedAt < OPEN_GRACE) return false
+
+    // Already part-way out: keep dragging whatever is underneath.
+    if (this.translated !== 0) return true
+
+    if (window.getSelection()?.toString()) return false
+
+    if (this.scrollPreventedAt && Date.now() - this.scrollPreventedAt < SCROLL_LOCK_TIMEOUT) {
+      this.scrollPreventedAt = Date.now()
+      return false
+    }
+
+    if (inward) {
+      this.scrollPreventedAt = Date.now()
+      return false
+    }
+
+    // Climb to the first scrollable ancestor. One scrolled away from its top
+    // owns the gesture; the drawer itself is where the climb stops.
+    while (element && element !== this.element) {
+      if (element.scrollHeight > element.clientHeight) {
+        if (element.scrollTop !== 0) {
+          this.scrollPreventedAt = Date.now()
+          return false
+        }
+
+        if (element.getAttribute("role") === "dialog") return true
+      }
+
+      element = element.parentElement
+    }
+
+    return true
+  }
+
+  // How far the drawer has to travel to be gone, along the axis it moves on.
+  get size() {
+    const box = this.contentTarget.getBoundingClientRect()
+
+    return this.vertical
+      ? Math.min(box.height, window.innerHeight)
+      : Math.min(box.width, window.innerWidth)
+  }
+
+  // Read back rather than remembered: a `turbo:morph` or a second press can
+  // arrive between two drags, and the element is the only thing that knows.
+  get translated() {
+    const matrix = new DOMMatrixReadOnly(getComputedStyle(this.contentTarget).transform)
+
+    return this.vertical ? matrix.m42 : matrix.m41
+  }
+
+  get overlayElement() {
+    return this.hasOverlayTarget ? this.overlayTarget : null
+  }
+
+  translate(value) {
+    this.contentTarget.style.transform = this.vertical
+      ? `translate3d(0, ${value}px, 0)`
+      : `translate3d(${value}px, 0, 0)`
+  }
+
+  fade(opacity) {
+    if (this.overlayElement) this.overlayElement.style.opacity = String(opacity)
+  }
+
+  // The transition has to be off *while* a finger is on the drawer, or every
+  // frame chases the last one and the drawer lags behind the pointer.
+  hold(element) {
+    if (element) element.style.transition = "none"
+  }
+
+  reset() {
+    for (const element of [ this.hasContentTarget && this.contentTarget, this.overlayElement ]) {
+      if (!element) continue
+
+      element.style.transform = ""
+      element.style.opacity = ""
+      element.style.transition = ""
+    }
+  }
+
+  // The inline styles stay, which is vaul's own shape (`closeDrawer` cancels the
+  // drag and does not touch the transform, index.tsx:536-549). The exit is a CSS
+  // animation with no `from`, so it starts at whatever the element currently
+  // reads — which is exactly where the finger left the panel. Clearing first
+  // sent the panel back to full height for a frame and slid it away from there,
+  // which is what a person sees as it springing up before it goes.
+  //
+  // They are cleared on the way back *in* instead, so the next open is square
+  // rather than already pushed however far the last drag pushed it.
+  dismiss() {
+    this.dialog?.close()
+  }
+
+  get dialog() {
+    return this.application.getControllerForElementAndIdentifier(this.element, "shadcn--dialog")
+  }
+}

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

@@ -0,0 +1,259 @@
+import { Controller } from "@hotwired/stimulus"
+import { uniqueId } from "shadcn/id"
+import { FloatingLayer } from "shadcn/floating"
+import { Typeahead } from "shadcn/typeahead"
+
+// Radix's own: 100ms before a hovered sub-trigger opens (menu.tsx:1123), and
+// 300ms of grace after the pointer leaves it (menu.tsx:1157-1160).
+const SUB_OPEN_DELAY = 100
+const SUB_GRACE_DELAY = 300
+
+// Radix's DropdownMenu: a `role="menu"` layer with the ARIA menu keyboard
+// pattern — arrow keys move a `data-highlighted` cursor, typing jumps to a
+// matching item, Escape closes and returns focus to the trigger.
+export default class extends Controller {
+  static targets = [ "trigger", "content", "item" ]
+  static values = {
+    open: Boolean,
+    // The `--radix-*` custom properties the content's classes read. The context
+    // menu is this same controller with a different prefix and a different way
+    // in — its markup, its keyboard and its submenus are the dropdown's, which
+    // is why it has no controller of its own. The Sheet reuses the dialog's for
+    // the same reason.
+    prefix: { type: String, default: "dropdown-menu" },
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "start" },
+    sideOffset: { type: Number, default: 4 },
+    alignOffset: { type: Number, default: 0 },
+    loop: Boolean
+  }
+
+  connect() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+
+    this.typeahead = new Typeahead()
+
+    this.contentTarget.hidden = true
+    this.contentTarget.id ||= uniqueId("shadcn-dropdown")
+
+    // The id is generated here, so the server has nothing to point this at.
+    this.triggerTarget.setAttribute("aria-controls", this.contentTarget.id)
+    this.triggerTarget.dataset.state = "closed"
+
+    this.layer = new FloatingLayer({
+      trigger: this.triggerTarget,
+      content: this.contentTarget,
+      prefix: this.prefixValue,
+      side: this.sideValue,
+      align: this.alignValue,
+      sideOffset: this.sideOffsetValue,
+      alignOffset: this.alignOffsetValue,
+      onOpen: () => {
+        this.triggerTarget.setAttribute("aria-expanded", "true")
+        this.contentTarget.focus({ preventScroll: true })
+      },
+      onClose: () => {
+        this.triggerTarget.setAttribute("aria-expanded", "false")
+        this.clearHighlight()
+        // Radix's menu clears the buffer on blur rather than on close
+        // (vendor/radix/ui/menu.tsx:585-590). Closing is where the focus this
+        // layer owns actually leaves — nothing here listens for focusout, so a
+        // menu that lost focus *without* closing would keep its buffer, which
+        // Radix's would not. No path in this gem does that: Tab, Escape and an
+        // outside click all close first.
+        this.typeahead.reset()
+        this.triggerTarget.focus({ preventScroll: true })
+      }
+    })
+
+    if (this.openValue) this.layer.show()
+  }
+
+  disconnect() {
+    this.cancelSubTimers()
+    if (this.layer) this.layer.destroy()
+  }
+
+  toggle() {
+    this.layer.toggle()
+  }
+
+  // A right-click opens the menu *at the pointer*, so the layer is measured
+  // against a point rather than against the element that was pressed. Radix
+  // does the same with a virtual element; `popper.js` only ever calls
+  // `getBoundingClientRect`, so a zero-sized rect at the coordinates is the
+  // whole of it.
+  openAtPointer(event) {
+    event.preventDefault()
+
+    const { clientX: x, clientY: y } = event
+
+    this.layer.anchor = {
+      getBoundingClientRect: () => ({
+        top: y, bottom: y, left: x, right: x, width: 0, height: 0, x, y
+      })
+    }
+
+    this.layer.hide()
+    this.layer.show()
+  }
+
+  // Submenus open on hover, like Radix's SubTrigger — after 100ms, so crossing
+  // a trigger on the way somewhere else does not open it (menu.tsx:1123).
+  open() {
+    this.cancelSubTimers()
+    this.subTimer = setTimeout(() => this.layer.show(), SUB_OPEN_DELAY)
+  }
+
+  close() {
+    this.cancelSubTimers()
+    this.layer.hide()
+  }
+
+  // Leaving the trigger, or the panel, starts a close the other one can cancel
+  // by being arrived at. Without it a submenu opened by hovering stays open for
+  // as long as the menu does, because nothing else was ever going to shut it.
+  //
+  // Radix grants the same grace but shapes it: a polygon from the exit point to
+  // the panel's edges, honoured only while the pointer is *moving toward* it
+  // (menu.tsx:1136-1160). This is the time half without the direction half —
+  // more forgiving, never less. See features/README.md.
+  closeLater() {
+    this.cancelSubTimers()
+    this.subTimer = setTimeout(() => this.layer.hide(), SUB_GRACE_DELAY)
+  }
+
+  cancelSubTimers() {
+    if (this.subTimer) clearTimeout(this.subTimer)
+    this.subTimer = null
+  }
+
+  // Opening with ArrowDown/ArrowUp lands on the first/last item, like Radix.
+  triggerKeydown(event) {
+    if (![ "ArrowDown", "ArrowUp", "Enter", " " ].includes(event.key)) return
+
+    event.preventDefault()
+    this.layer.show()
+
+    const items = this.enabledItems
+    if (items.length === 0) return
+    this.highlight(event.key === "ArrowUp" ? items[items.length - 1] : items[0])
+  }
+
+  contentKeydown(event) {
+    const items = this.enabledItems
+    const current = items.indexOf(this.highlighted)
+
+    switch (event.key) {
+      // Clamp unless asked to wrap, which is how RovingFocusGroup branches:
+      // `context.loop ? wrapArray(...) : candidateNodes.slice(currentIndex + 1)`
+      // (vendor/radix/ui/roving-focus-group.tsx:324-326) — the slice is empty
+      // at the end, so focus stays put. `loop` is opt-in in Radix's menu too
+      // (vendor/radix/ui/menu.tsx:387), and vendor/shadcn/ui/dropdown-menu.tsx
+      // never passes it, so `false` is the shadcn default rather than a choice
+      // made here.
+      case "ArrowDown":
+        event.preventDefault()
+        this.highlight(this.step(items, current, 1))
+        return
+      // With nothing highlighted yet — which is where a click-open leaves the
+      // menu — ArrowUp enters at the *end*: Radix lists it in `LAST_KEYS` and
+      // reverses the candidates before `focusFirst`
+      // (vendor/radix/ui/menu.tsx:576-583).
+      case "ArrowUp":
+        event.preventDefault()
+        this.highlight(current === -1 ? items[items.length - 1] : this.step(items, current, -1))
+        return
+      case "Home":
+        event.preventDefault()
+        this.highlight(items[0])
+        return
+      case "End":
+        event.preventDefault()
+        this.highlight(items[items.length - 1])
+        return
+      case "Enter":
+      case " ":
+        if (!this.highlighted) return
+        event.preventDefault()
+        this.highlighted.click()
+        return
+      case "Tab":
+        this.layer.hide()
+        return
+    }
+
+    if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+      const match = this.typeahead.search(event.key, this.enabledItems, this.highlighted)
+      if (match) this.highlight(match)
+    }
+  }
+
+  pointerenter(event) {
+    this.highlight(event.currentTarget)
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    if (item.getAttribute("role") === "menuitemcheckbox") {
+      const checked = item.getAttribute("aria-checked") === "true"
+      this.setChecked(item, !checked)
+      return
+    }
+
+    if (item.getAttribute("role") === "menuitemradio") {
+      this.radioSiblings(item).forEach((sibling) => this.setChecked(sibling, sibling === item))
+      return
+    }
+
+    this.layer.hide()
+  }
+
+  // --- helpers -------------------------------------------------------------
+
+  get enabledItems() {
+    return this.itemTargets.filter((item) => item.dataset.disabled === undefined)
+  }
+
+  // One step along `items` from `current`, wrapping only when `loop` is set.
+  // With nothing highlighted `current` is -1, so a forward step lands on the
+  // first item either way.
+  step(items, current, delta) {
+    const next = current + delta
+    return this.loopValue
+      ? items[(next + items.length) % items.length]
+      : items[Math.min(Math.max(next, 0), items.length - 1)]
+  }
+
+  get highlighted() {
+    return this.itemTargets.find((item) => item.dataset.highlighted !== undefined) || null
+  }
+
+  highlight(item) {
+    this.clearHighlight()
+    if (!item) return
+
+    item.dataset.highlighted = ""
+    item.focus({ preventScroll: true })
+    item.scrollIntoView({ block: "nearest" })
+  }
+
+  clearHighlight() {
+    this.itemTargets.forEach((item) => delete item.dataset.highlighted)
+  }
+
+  setChecked(item, checked) {
+    item.setAttribute("aria-checked", String(checked))
+    item.dataset.state = checked ? "checked" : "unchecked"
+
+    const indicator = item.querySelector("[data-slot$='-item-indicator']")
+    if (indicator) indicator.hidden = !checked
+  }
+
+  radioSiblings(item) {
+    const group = item.closest("[data-slot='dropdown-menu-radio-group']") || this.contentTarget
+    return Array.from(group.querySelectorAll("[role='menuitemradio']"))
+  }
+}