shadcn_view_component 0.3.3

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

@@ -0,0 +1,281 @@
+import { Controller } from "@hotwired/stimulus"
+import { ExitQueue } from "shadcn/animation"
+
+// sonner's own numbers, read from its source: four seconds of life, 200ms to
+// leave. The lifetime is a value so a caller can change it; the exit is not,
+// because it has to agree with the classes on the toast.
+const DEFAULT_DURATION = 4000
+
+// sonner's, read from its source: 14px between toasts.
+const GAP = 14
+
+// The toaster is a *list* and this is its clock. Toasts arrive three ways —
+// rendered with the page from a flash, appended by a Turbo Stream, or asked for
+// in JavaScript — and this treats all three the same: anything that appears in
+// the list starts its own timer and leaves when it runs out.
+//
+// Which is why there is a MutationObserver rather than a method every route has
+// to remember to call. A `turbo_stream.append` knows nothing about this
+// controller and should not have to.
+export default class extends Controller {
+  static targets = [ "list", "toast", "template" ]
+  static values = { duration: { type: Number, default: DEFAULT_DURATION } }
+
+  connect() {
+    this.timers = new Map()
+    this.exits = new ExitQueue()
+    this.hovering = false
+    this.focused = false
+    this.expanded = false
+    this.floor = 0
+
+    this.watch = new MutationObserver((records) => {
+      for (const record of records) {
+        for (const node of record.addedNodes) {
+          if (node.nodeType === Node.ELEMENT_NODE && node.dataset.slot === "toast") this.start(node)
+        }
+      }
+
+      this.place()
+    })
+    this.watch.observe(this.listTarget, { childList: true })
+
+    for (const toast of this.toastElements) this.start(toast)
+
+    // A toast's own height decides where the one behind it sits, and a height
+    // changes when the window narrows and a line wraps.
+    this.resizes = new ResizeObserver(() => this.place())
+    this.resizes.observe(this.listTarget)
+
+    this.place()
+  }
+
+  disconnect() {
+    this.watch.disconnect()
+    this.resizes.disconnect()
+    for (const timer of this.timers.values()) clearTimeout(timer)
+    this.timers.clear()
+    this.exits.flushAll()
+  }
+
+  // `document.dispatchEvent(new CustomEvent("shadcn--toast", { detail: … }))`.
+  // The detail is the component's own arguments, so the two routes read alike.
+  raise(event) {
+    const { title, description, variant = "default", duration } = event.detail ?? {}
+    // One template per variant: a variant carries an icon or does not, and an
+    // element that was never rendered cannot be brought back by an attribute.
+    const template = this.templateTargets.find((t) => t.dataset.variant === variant) ||
+      this.templateTargets.find((t) => t.dataset.variant === "default")
+    if (!template) return
+
+    const toast = template.content.firstElementChild.cloneNode(true)
+    // `if (duration)` would drop a 0, which is the one value that means
+    // something here: no clock. The same slip twice in one file.
+    if (duration !== undefined && duration !== null) toast.dataset.duration = duration
+    this.fill(toast, "toast-title", title)
+    this.fill(toast, "toast-description", description)
+
+    this.listTarget.appendChild(toast)
+  }
+
+  dismiss(event) {
+    this.close(event.currentTarget.closest("[data-slot=toast]"))
+  }
+
+  // Hovering does two things, and they are the same gesture: it stops every
+  // clock, and it opens the stack. On the list rather than on each toast — a
+  // pointer crossing from one to another must not restart the others, and must
+  // not collapse the stack under itself on the way.
+  //
+  // A pointer and a keyboard can hold it open at the same time, and they are
+  // tracked apart rather than as one flag: a `focusout` while the pointer is
+  // still on the stack is not the stack being let go.
+  hold(event) {
+    if (event?.type === "focusin") this.focused = true
+    else this.hovering = true
+
+    this.settle()
+  }
+
+  // Only the half the event is about. Closing a toast takes away the button the
+  // focus was on, and the browser reports that as focus leaving the stack — so
+  // a `focusout` that clears both would shut a stack the pointer is still on,
+  // which is what was reported. Focus moving *within* the stack needs nothing
+  // here: the `focusin` that follows it arrives in the same tick.
+  release(event) {
+    if (event?.type === "focusout") this.focused = false
+    else this.hovering = false
+
+    this.settle()
+  }
+
+  // Open while either a pointer or the keyboard is on it; counting down only
+  // once neither is.
+  settle() {
+    this.expanded = this.hovering || this.focused
+
+    for (const timer of this.timers.values()) clearTimeout(timer)
+    this.timers.clear()
+
+    this.place()
+
+    if (this.expanded) return
+
+    for (const toast of this.toastElements) this.start(toast)
+  }
+
+  // A toast on its way out is not one of these any more. It keeps the transform
+  // it had and fades where it stands, while the ones left take their new places
+  // — which is the difference between a stack that scrolls and one that jumps
+  // once the element finally goes.
+  get toastElements() {
+    return [ ...this.listTarget.querySelectorAll("[data-slot=toast]:not([data-state=closed])") ]
+  }
+
+  get lift() {
+    return this.element.dataset.position?.startsWith("top") ? 1 : -1
+  }
+
+  // Where every toast sits, collapsed and expanded, and how tall the box a
+  // pointer has to be inside is.
+  //
+  // sonner's arrangement, read from its stylesheet: collapsed, the newest is at
+  // the front at its own height and each one behind it is lifted by a gap,
+  // scaled down a twentieth per place, and has its content faded out — so a
+  // stack reads as one toast with others behind it. Expanded, each returns to
+  // its own height and is lifted past the ones in front of it.
+  place() {
+    const toasts = this.toastElements
+    if (toasts.length === 0) {
+      this.floor = 0
+      this.listTarget.style.height = "0px"
+      this.listTarget.style.pointerEvents = "none"
+      return
+    }
+
+    // Front first: the newest is nearest the edge, and for a stack anchored at
+    // the bottom that is the last one in the list.
+    const front = this.lift > 0 ? toasts : [ ...toasts ].reverse()
+    const heights = front.map((toast) => this.heightOf(toast))
+    const frontHeight = heights[0]
+    const edge = this.lift > 0 ? "top" : "bottom"
+    let stacked = 0
+    let reach = 0
+
+    front.forEach((toast, index) => {
+      const behind = index > 0
+      const offset = this.expanded ? stacked + GAP * index : GAP * index
+      const scale = this.expanded || !behind ? 1 : 1 - index * 0.05
+      const height = this.expanded || !behind ? heights[index] : frontHeight
+
+      toast.style.zIndex = String(front.length - index)
+      toast.style.transform = `translateY(${this.lift * offset}px) scale(${scale})`
+      // Scaled from the edge it is anchored to, not from its middle: a toast
+      // scaled about its centre grows *upwards* as well as inwards, and reaches
+      // past the box it is meant to be inside.
+      toast.style.transformOrigin = `${edge} center`
+      toast.style.height = this.expanded || !behind ? "" : `${frontHeight}px`
+      toast.style.opacity = behind && index > 2 && !this.expanded ? "0" : "1"
+      toast.style[edge] = "0px"
+
+      // Only the front one is readable while the stack is closed; the rest are
+      // shapes behind it, which is what makes a stack look like one toast.
+      for (const child of toast.children) {
+        child.style.opacity = behind && !this.expanded ? "0" : "1"
+      }
+
+      stacked += heights[index]
+      reach = Math.max(reach, offset + height * scale)
+    })
+
+    // The box has to hold every toast, because it is the box a pointer must stay
+    // inside for the stack to stay open. Computed from how far the toasts
+    // actually reach rather than from a sum that looked right.
+    this.listTarget.style.height = `${this.box(Math.round(reach))}px`
+
+    // And while the stack is open the box itself has to take the pointer.
+    //
+    // The region is `pointer-events: none` so the page underneath stays usable
+    // around a toast, and each toast turns them back on for itself — which
+    // leaves the gaps *between* toasts as holes. A pointer crossing one
+    // hit-tests straight through to the page, leaves the list, and the stack
+    // shuts and reopens as it lands on the next one: the flicker that was
+    // reported. Closed, the holes are wanted; open, they are the reason the
+    // stack keeps closing under the pointer that opened it.
+    this.listTarget.style.pointerEvents = this.expanded ? "auto" : "none"
+  }
+
+  // How tall the box is, which is not always how far the toasts reach: while the
+  // stack is open it may grow and must not shrink.
+  //
+  // The box is anchored at its edge, so a toast going away pulls the far end in
+  // by its own height and a gap — past the pointer that is holding the stack
+  // open, if that pointer was on the toast that went. The stack then shuts under
+  // the hand that opened it, which is what was reported. It is let back down on
+  // the way out, where the pointer has already gone.
+  box(reach) {
+    if (!this.expanded) {
+      this.floor = 0
+      return reach
+    }
+
+    this.floor = Math.max(this.floor, reach)
+    return this.floor
+  }
+
+  // Measured with the toast at its own size, and remembered: once it is scaled
+  // and clipped to the front one's height, the box no longer knows how tall it
+  // wants to be.
+  heightOf(toast) {
+    if (toast.dataset.height) return Number(toast.dataset.height)
+
+    const height = Math.round(toast.getBoundingClientRect().height)
+    if (height > 0) toast.dataset.height = String(height)
+
+    return height
+  }
+
+  start(toast) {
+    if (this.timers.has(toast)) clearTimeout(this.timers.get(toast))
+
+    // `||` would read a `0` as "not given" and hand back the default, which is
+    // the opposite of what 0 means here: no clock at all.
+    const asked = toast.dataset.duration
+    const duration = asked === undefined || asked === "" ? this.durationValue : Number(asked)
+    // A toast that is still loading has no business disappearing on a clock.
+    if (toast.dataset.variant === "loading" || duration <= 0) return
+
+    this.timers.set(toast, setTimeout(() => this.close(toast), duration))
+  }
+
+  close(toast) {
+    if (!toast || toast.dataset.state === "closed") return
+
+    clearTimeout(this.timers.get(toast))
+    this.timers.delete(toast)
+    toast.dataset.state = "closed"
+    // `place()` wrote an inline opacity on every toast, and an inline style
+    // beats the class that fades this one out. Handing the property back is what
+    // lets `data-[state=closed]:opacity-0` play at all — and the queue below
+    // waits on that animation, so without this the toast is gone in the same
+    // tick rather than on its way out.
+    toast.style.opacity = ""
+    // And the rest close the gap it leaves while it fades, rather than after.
+    this.place()
+
+    // The element waits on its own animation rather than on a number here, so
+    // the exit and the classes that draw it cannot drift apart.
+    this.exits.defer(toast, () => {
+      toast.remove()
+      this.place()
+    })
+  }
+
+  fill(toast, slot, text) {
+    const element = toast.querySelector(`[data-slot=${slot}]`)
+    if (!element) return
+
+    if (text) element.textContent = text
+    else element.remove()
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Radix's Toggle: an `aria-pressed` button whose styling keys off
+// `data-state="on" | "off"`.
+export default class extends Controller {
+  static values = { pressed: Boolean, disabled: Boolean }
+
+  connect() {
+    this.render()
+  }
+
+  toggle() {
+    if (this.disabledValue) return
+
+    this.pressedValue = !this.pressedValue
+    this.render()
+    this.dispatch("change", { detail: { pressed: this.pressedValue } })
+  }
+
+  render() {
+    this.element.dataset.state = this.pressedValue ? "on" : "off"
+    this.element.setAttribute("aria-pressed", String(this.pressedValue))
+  }
+}

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

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus"
+import { directionAwareKey, readDirection } from "shadcn/direction"
+
+// Radix's ToggleGroup, in both `single` and `multiple` modes, with the roving
+// tabindex its items use.
+export default class extends Controller {
+  static targets = [ "item", "input" ]
+  static values = { type: { type: String, default: "single" }, value: String }
+
+  connect() {
+    this.render()
+  }
+
+  get multiple() {
+    return this.typeValue === "multiple"
+  }
+
+  get selected() {
+    if (!this.valueValue) return []
+    return this.valueValue.split(",").filter(Boolean)
+  }
+
+  set selected(values) {
+    this.valueValue = values.join(",")
+  }
+
+  toggle(event) {
+    const item = event.currentTarget
+    if (item.disabled) return
+
+    const value = item.dataset.value || ""
+    const current = this.selected
+
+    if (this.multiple) {
+      this.selected = current.includes(value)
+        ? current.filter((v) => v !== value)
+        : current.concat(value)
+    } else {
+      this.selected = current.includes(value) ? [] : [ value ]
+    }
+
+    this.render()
+    this.dispatch("change", { detail: { value: this.valueValue } })
+  }
+
+  keydown(event) {
+    const key = directionAwareKey(event.key, readDirection(this.element))
+    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[key]
+    if (!step) return
+
+    event.preventDefault()
+
+    const items = this.itemTargets.filter((item) => !item.disabled)
+    if (items.length === 0) return
+
+    const current = items.indexOf(event.currentTarget)
+    items[(current + step + items.length) % items.length].focus({ preventScroll: true })
+  }
+
+  render() {
+    const selected = this.selected
+    const enabled = this.itemTargets.filter((item) => !item.disabled)
+
+    this.itemTargets.forEach((item) => {
+      const on = selected.includes(item.dataset.value || "")
+      item.dataset.state = on ? "on" : "off"
+      item.setAttribute("aria-pressed", String(on))
+      item.setAttribute("tabindex", item === (enabled.find((i) => selected.includes(i.dataset.value)) || enabled[0]) ? "0" : "-1")
+    })
+
+    if (this.hasInputTarget) this.inputTarget.value = this.valueValue
+  }
+}

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

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+import { uniqueId } from "shadcn/id"
+import { FloatingLayer } from "shadcn/floating"
+
+// Radix's Tooltip: opens on hover or focus, closes on leave, blur or Escape,
+// and never takes focus itself.
+export default class extends Controller {
+  static targets = [ "trigger", "content" ]
+  static values = {
+    side: { type: String, default: "top" },
+    align: { type: String, default: "center" },
+    sideOffset: { type: Number, default: 0 },
+    delay: { type: Number, default: 0 }
+  }
+
+  connect() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+
+    this.contentTarget.hidden = true
+    this.contentTarget.setAttribute("role", "tooltip")
+    this.contentTarget.id ||= uniqueId("shadcn-tooltip")
+
+    this.layer = new FloatingLayer({
+      trigger: this.triggerTarget,
+      content: this.contentTarget,
+      prefix: "tooltip",
+      side: this.sideValue,
+      align: this.alignValue,
+      sideOffset: this.sideOffsetValue,
+      onOpen: () => this.triggerTarget.setAttribute("aria-describedby", this.contentTarget.id),
+      onClose: () => this.triggerTarget.removeAttribute("aria-describedby")
+    })
+  }
+
+  disconnect() {
+    this.cancel()
+    if (this.layer) this.layer.destroy()
+  }
+
+  show() {
+    this.cancel()
+    if (this.delayValue > 0) {
+      this.timer = setTimeout(() => this.layer.show(), this.delayValue)
+    } else {
+      this.layer.show()
+    }
+  }
+
+  hide() {
+    this.cancel()
+    this.layer.hide()
+  }
+
+  cancel() {
+    if (this.timer) clearTimeout(this.timer)
+    this.timer = null
+  }
+}

data/app/javascript/shadcn/direction.js

@@ -0,0 +1,41 @@
+// Reading direction, for the controllers whose arrow keys depend on it.
+//
+// This is the port of shadcn's `direction.tsx`, and the port is a module rather
+// than a component because there is nothing to render: upstream's
+// `DirectionProvider` wraps Radix's, which is a React context and emits no DOM
+// at all (vendor/shadcn/ui/direction.tsx). React needs that context because a
+// component cannot easily read inherited DOM state while rendering. A Stimulus
+// controller has no such problem — the browser has already resolved `dir` for
+// every element by the time one runs.
+//
+// So a host writes `<html dir="rtl">`, or `dir` on any ancestor, and these
+// controllers follow. There is no provider to mount and no value to thread
+// through, which is the whole of what this component becomes here.
+
+// `getComputedStyle().direction` rather than walking up looking for a `dir`
+// attribute: it resolves inheritance, the CSS `direction` property, and
+// `dir="auto"` — which has no fixed answer until the browser has looked at the
+// text. Reading the attribute would get the first two wrong and the third
+// impossible.
+export function readDirection(element) {
+  if (!element) return "ltr"
+
+  return window.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr"
+}
+
+// Radix's `getDirectionAwareKey` (vendor/radix/ui/roving-focus-group.tsx:359).
+// Right-to-left swaps the two horizontal arrows and nothing else — `ArrowUp`
+// and `ArrowDown` are unaffected, because reading direction is horizontal and
+// a column is a column either way.
+//
+// Applied *before* a key is mapped to an intent, never after: the point is that
+// in RTL the key labelled Left is the one that means "next", so every caller
+// can keep one map and translate the key on the way in.
+export function directionAwareKey(key, direction) {
+  if (direction !== "rtl") return key
+
+  if (key === "ArrowLeft") return "ArrowRight"
+  if (key === "ArrowRight") return "ArrowLeft"
+
+  return key
+}

data/app/javascript/shadcn/dismiss.js

@@ -0,0 +1,73 @@
+// Port of Radix's DismissableLayer.
+//
+// Layers form a stack. Escape only closes the topmost one; a pointer press
+// outside a layer closes it and everything above it. Elements registered as
+// "anchors" (the trigger that opened the layer) do not count as outside, so a
+// click on the trigger toggles rather than close-then-reopen.
+
+const layers = []
+let listening = false
+
+function topLayer() {
+  return layers[layers.length - 1]
+}
+
+function isInside(layer, target) {
+  if (!target) return false
+  if (layer.element.contains(target)) return true
+  return layer.anchors.some((anchor) => anchor && anchor.contains(target))
+}
+
+function onPointerDown(event) {
+  // Close from the top down, stopping at the first layer that owns the target.
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const layer = layers[i]
+    if (isInside(layer, event.target)) break
+    layer.onDismiss({ reason: "pointerdown", originalEvent: event })
+  }
+}
+
+function onKeyDown(event) {
+  if (event.key !== "Escape") return
+
+  const layer = topLayer()
+  if (!layer) return
+
+  layer.onDismiss({ reason: "escape", originalEvent: event })
+}
+
+function startListening() {
+  if (listening) return
+  // Capture phase so a layer closes before the click reaches the page.
+  document.addEventListener("pointerdown", onPointerDown, true)
+  // Escape listens on the bubble phase, and deliberately does not stop
+  // propagation: a capture-phase `stopPropagation` here would swallow Escape
+  // for the whole document — including the host application's own handlers —
+  // whenever any layer, even a tooltip, happened to be open.
+  document.addEventListener("keydown", onKeyDown)
+  listening = true
+}
+
+function stopListening() {
+  if (!listening) return
+  document.removeEventListener("pointerdown", onPointerDown, true)
+  document.removeEventListener("keydown", onKeyDown)
+  listening = false
+}
+
+export function pushLayer({ element, anchors = [], onDismiss }) {
+  const layer = { element, anchors: [].concat(anchors), onDismiss }
+  layers.push(layer)
+  startListening()
+  return layer
+}
+
+export function removeLayer(layer) {
+  const index = layers.indexOf(layer)
+  if (index !== -1) layers.splice(index, 1)
+  if (layers.length === 0) stopListening()
+}
+
+export function isTopLayer(layer) {
+  return topLayer() === layer
+}