shadcn_view_component 0.3.3

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

@@ -0,0 +1,320 @@
+import { Controller } from "@hotwired/stimulus"
+import { uniqueId } from "shadcn/id"
+import { FloatingLayer } from "shadcn/floating"
+import { Typeahead } from "shadcn/typeahead"
+
+// Radix's Select: a `role="combobox"` trigger driving a `role="listbox"` layer.
+//
+// The chosen item's label is copied into `[data-slot=select-value]` and the
+// value is mirrored onto a hidden input so the control submits with the form,
+// exactly like Radix's BubbleSelect.
+export default class extends Controller {
+  // `input` is the hidden field that submits with the form, which is why the
+  // search box is `search`.
+  static targets = [ "trigger", "content", "item", "value", "input", "search", "list", "empty",
+                     "scrollUpButton", "scrollDownButton", "viewport" ]
+  static values = {
+    open: Boolean,
+    value: String,
+    placeholder: String,
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "center" },
+    sideOffset: { type: Number, default: 4 },
+    searchable: Boolean
+  }
+
+  connect() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+
+    this.typeahead = new Typeahead()
+
+    this.contentTarget.hidden = true
+    this.contentTarget.id ||= uniqueId("shadcn-select")
+
+    // 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"
+
+    if (this.searchableValue && this.hasSearchTarget && this.hasListTarget) {
+      this.listTarget.id ||= uniqueId("shadcn-select-list")
+      this.searchTarget.setAttribute("aria-controls", this.listTarget.id)
+    }
+
+    this.layer = new FloatingLayer({
+      trigger: this.triggerTarget,
+      content: this.contentTarget,
+      prefix: "select",
+      side: this.sideValue,
+      align: this.alignValue,
+      sideOffset: this.sideOffsetValue,
+      matchAnchorWidth: true,
+      onOpen: () => {
+        this.triggerTarget.setAttribute("aria-expanded", "true")
+        // Radix resets here rather than on close (vendor/radix/ui/select.tsx:331-336),
+        // so characters typed before this panel was last dismissed cannot join
+        // the next search.
+        this.typeahead.reset()
+        // Focus goes to the search field, not the popover: a searchable select
+        // is typed into the moment it opens.
+        if (this.searchableValue && this.hasSearchTarget) {
+          this.searchTarget.focus({ preventScroll: true })
+        } else {
+          this.contentTarget.focus({ preventScroll: true })
+        }
+        this.highlight(this.selectedItem || this.enabledItems[0])
+        this.syncScrollButtons()
+      },
+      onClose: () => {
+        this.triggerTarget.setAttribute("aria-expanded", "false")
+        this.clearHighlight()
+        // Clearing through `search()` rather than by hand keeps one definition
+        // of what the list looks like for a given query — the empty state and
+        // the list's own `hidden` included.
+        if (this.searchableValue && this.hasSearchTarget) {
+          this.searchTarget.value = ""
+          this.search()
+        }
+        this.triggerTarget.focus({ preventScroll: true })
+      }
+    })
+
+    this.render()
+    if (this.openValue) this.layer.show()
+  }
+
+  disconnect() {
+    this.stopAutoScroll()
+    if (this.layer) this.layer.destroy()
+  }
+
+  toggle() {
+    this.layer.toggle()
+  }
+
+  triggerKeydown(event) {
+    if (![ "ArrowDown", "ArrowUp", "Enter", " " ].includes(event.key)) return
+
+    event.preventDefault()
+    this.layer.show()
+  }
+
+  contentKeydown(event) {
+    const items = this.enabledItems
+    const current = items.indexOf(this.highlighted)
+
+    switch (event.key) {
+      // Clamp rather than wrap: Radix's own keydown handler slices the
+      // candidate list from the current index and never wraps it back around
+      // (vendor/radix/ui/select.tsx:904's
+      // `candidateNodes = candidateNodes.slice(currentIndex + 1)`).
+      case "ArrowDown":
+        event.preventDefault()
+        this.highlight(items[Math.min(current + 1, items.length - 1)])
+        return
+      // Radix reverses the candidates for ArrowUp before slicing
+      // (vendor/radix/ui/select.tsx:898-904), so an index of -1 slices nothing
+      // off the reversed list and focus enters at the end. `onOpen` always
+      // highlights, which leaves one way to be here with items to move
+      // through: a selected item that is *disabled*, which is what
+      // `selectedItem` finds and what `enabledItems` leaves out.
+      case "ArrowUp":
+        event.preventDefault()
+        this.highlight(current === -1 ? items[items.length - 1] : items[Math.max(current - 1, 0)])
+        return
+      // Home and End move the caret when a search field has focus. Jumping the
+      // highlight instead would make the field uneditable at either end.
+      case "Home":
+        if (this.searchableValue) return
+        event.preventDefault()
+        this.highlight(items[0])
+        return
+      case "End":
+        if (this.searchableValue) return
+        event.preventDefault()
+        this.highlight(items[items.length - 1])
+        return
+      case "Enter":
+      case " ":
+        // A space is a character while the search field has focus; Enter still
+        // chooses. Without this, typing a space picks an option and closes.
+        if (event.key === " " && this.searchableValue) return
+        if (!this.highlighted) return
+        event.preventDefault()
+        this.highlighted.click()
+        return
+      case "Tab":
+        event.preventDefault()
+        return
+    }
+
+    // The search field owns the characters when there is one; running the
+    // typeahead too would accumulate a second, invisible query alongside it.
+    if (!this.searchableValue && event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+      const match = this.typeahead.search(event.key, this.enabledItems, this.highlighted)
+      if (match) this.highlight(match)
+    }
+  }
+
+  // shadcn's aria variant filters on substring rather than prefix — "err"
+  // reaches Blueberry — and drops non-matching options from the DOM. Here they
+  // are hidden instead: the options are server-rendered ERB, and one removed
+  // cannot be put back.
+  search() {
+    const query = this.searchTarget.value.trim().toLowerCase()
+
+    this.itemTargets.forEach((item) => {
+      item.hidden = query !== "" && !item.textContent.trim().toLowerCase().includes(query)
+    })
+
+    const matches = this.enabledItems
+    if (this.hasListTarget) this.listTarget.hidden = matches.length === 0
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = matches.length > 0
+
+    this.highlight(matches[0])
+  }
+
+  // Radix mounts each button only while the viewport can scroll that way and
+  // recomputes on every scroll (vendor/radix/ui/select.tsx:1585, :1630-1634).
+  // `Math.ceil` is theirs too: zoomed in, `scrollTop` is not always an integer.
+  syncScrollButtons() {
+    if (!this.hasScrollUpButtonTarget || !this.hasScrollDownButtonTarget) return
+
+    const box = this.scrollContainer
+    const maxScroll = box.scrollHeight - box.clientHeight
+
+    this.scrollUpButtonTarget.hidden = box.scrollTop <= 0
+    this.scrollDownButtonTarget.hidden = Math.ceil(box.scrollTop) >= maxScroll
+  }
+
+  // Pointer only. Radix starts the same 50ms interval on pointerdown and on
+  // pointermove (vendor/radix/ui/select.tsx:1697-1706) — move as well as down,
+  // so hovering scrolls without pressing.
+  startAutoScroll(event) {
+    if (this.autoScrollTimer) return
+
+    const up = event.currentTarget === this.scrollUpButtonTarget
+    this.autoScrollTimer = setInterval(() => this.autoScroll(up ? -1 : 1), 50)
+  }
+
+  stopAutoScroll() {
+    clearInterval(this.autoScrollTimer)
+    this.autoScrollTimer = null
+  }
+
+  autoScroll(direction) {
+    // One item per tick, as Radix does: it steps by the selected item's
+    // offsetHeight (vendor/radix/ui/select.tsx:1601, :1647). With nothing
+    // selected there is still a list to measure.
+    const step = (this.selectedItem || this.itemTargets[0])?.offsetHeight || 0
+
+    this.scrollContainer.scrollTop += direction * step
+    this.syncScrollButtons()
+  }
+
+  pointerenter(event) {
+    this.highlight(event.currentTarget)
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    this.valueValue = item.dataset.value || ""
+    this.render()
+    this.layer.hide()
+    this.dispatch("change", { detail: { value: this.valueValue } })
+
+    if (this.hasInputTarget) {
+      this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  }
+
+  // --- helpers -------------------------------------------------------------
+
+  // `!item.hidden` is what keeps the arrows, Home, End and `selectedItem` out
+  // of rows the filter has taken away. Nothing hides items unless `searchable`,
+  // so the plain select is unaffected.
+  // The viewport scrolls, as Radix's does (vendor/radix/ui/select.tsx:1247) —
+  // which is what keeps the scroll buttons pinned outside it. A searchable
+  // panel moves the scrolling one level further in, onto the list, so the
+  // search field stays put while the options move.
+  get scrollContainer() {
+    if (this.searchableValue && this.hasListTarget) return this.listTarget
+
+    return this.hasViewportTarget ? this.viewportTarget : this.contentTarget
+  }
+
+  get enabledItems() {
+    return this.itemTargets.filter((item) => item.dataset.disabled === undefined && !item.hidden)
+  }
+
+  get selectedItem() {
+    return this.itemTargets.find((item) => (item.dataset.value || "") === this.valueValue) || null
+  }
+
+  get highlighted() {
+    return this.itemTargets.find((item) => item.dataset.highlighted !== undefined) || null
+  }
+
+  highlight(item) {
+    this.clearHighlight()
+    if (!item) return
+
+    item.dataset.highlighted = ""
+
+    // Moving DOM focus would take it out of the search field and typing would
+    // stop, so a searchable select points at the item instead of focusing it.
+    if (this.searchableValue) {
+      // Assigned here rather than in `connect`, which only ever saw the items
+      // the server rendered. Anything added afterwards — a dependent select
+      // refilling its options when another one changes — arrived without an id,
+      // and `aria-activedescendant` then pointed at nothing: the highlight moved
+      // on screen and a screen reader followed none of it. Silent, and invisible
+      // to anyone not listening.
+      //
+      // `uniqueId` rather than `crypto.randomUUID()`, which is secure-context
+      // only and `undefined` over plain HTTP.
+      item.id ||= uniqueId("shadcn-select-item")
+      this.searchTarget.setAttribute("aria-activedescendant", item.id)
+    } else {
+      item.focus({ preventScroll: true })
+    }
+
+    item.scrollIntoView({ block: "nearest" })
+  }
+
+  clearHighlight() {
+    this.itemTargets.forEach((item) => delete item.dataset.highlighted)
+    if (this.searchableValue && this.hasSearchTarget) {
+      this.searchTarget.removeAttribute("aria-activedescendant")
+    }
+  }
+
+  render() {
+    const selected = this.selectedItem
+
+    this.itemTargets.forEach((item) => {
+      const isSelected = item === selected
+      item.setAttribute("aria-selected", String(isSelected))
+      item.dataset.state = isSelected ? "checked" : "unchecked"
+
+      const indicator = item.querySelector("[data-slot='select-item-indicator'] > *")
+      if (indicator) indicator.hidden = !isSelected
+    })
+
+    if (this.hasValueTarget) {
+      this.valueTarget.textContent = selected
+        ? selected.querySelector("[data-slot='select-item-text']")?.textContent.trim() ||
+          selected.textContent.trim()
+        : this.placeholderValue
+    }
+
+    if (selected) {
+      delete this.triggerTarget.dataset.placeholder
+    } else {
+      this.triggerTarget.dataset.placeholder = ""
+    }
+
+    if (this.hasInputTarget) this.inputTarget.value = this.valueValue
+  }
+}

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

@@ -0,0 +1,273 @@
+import { Controller } from "@hotwired/stimulus"
+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"
+
+// Upstream's own name and lifetime (vendor/shadcn/ui/sidebar.tsx:28-29).
+const COOKIE = "sidebar_state"
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SHORTCUT = "b"
+
+// Not a number this port chose: upstream's desktop tree carries `md:block`
+// (vendor/shadcn/ui/sidebar.tsx:210), and `md` is 768px in Tailwind's default
+// scale. Nothing had to be vendored to learn it.
+const MOBILE_QUERY = "(max-width: 767px)"
+
+// Radix has no Sidebar — shadcn builds it on its own React context
+// (vendor/shadcn/ui/sidebar.tsx:56), so this controller has no Radix source to
+// answer to, only shadcn's own.
+//
+// The state is small: expanded or collapsed on desktop, and a separate
+// ephemeral flag on mobile that is deliberately never persisted.
+export default class extends Controller {
+  static targets = [ "sidebar", "trigger", "container", "overlay", "sheetHeader" ]
+  static values = { open: Boolean, openMobile: Boolean }
+
+  connect() {
+    // Holds the DOM half of a close until the sheet's slide-out has played.
+    // Same module and the same reason as `dialog_controller.js`.
+    this.exits = new ExitQueue()
+
+    // Bound on `window` rather than on the element, so it fires wherever focus
+    // happens to be — which is what upstream does (sidebar.tsx:96-111), and the
+    // point of a shortcut. Removed again in `disconnect()`: Turbo tears
+    // controllers down on every navigation, and a listener left behind would
+    // accumulate one per visit.
+    this.onKeydown = (event) => {
+      if (event.key !== SHORTCUT) return
+      // A bare "b" is a character somebody may be typing.
+      if (!event.metaKey && !event.ctrlKey) return
+
+      event.preventDefault()
+      this.toggle()
+    }
+
+    window.addEventListener("keydown", this.onKeydown)
+
+    // Feature-detected the way `top_layer.js` treats the Popover API: without
+    // matchMedia the desktop branch is the whole component.
+    this.media = typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_QUERY) : null
+    this.onMediaChange = () => this.render()
+    this.media?.addEventListener("change", this.onMediaChange)
+
+    this.render()
+  }
+
+  disconnect() {
+    window.removeEventListener("keydown", this.onKeydown)
+    this.media?.removeEventListener("change", this.onMediaChange)
+    this.closeMobile()
+    // Turbo may be detaching the element: there is nothing to animate for, and
+    // the deferred teardown still has to run.
+    this.exits.flushAll()
+  }
+
+  get isMobile() {
+    return this.media?.matches === true
+  }
+
+  toggle() {
+    // Upstream branches here rather than in the state: mobile moves an
+    // ephemeral flag, desktop moves the persisted one
+    // (vendor/shadcn/ui/sidebar.tsx:92-95). A phone must not overwrite what the
+    // desktop remembered.
+    if (this.isMobile) {
+      this.openMobileValue = !this.openMobileValue
+    } else {
+      this.openValue = !this.openValue
+      this.persist()
+    }
+
+    this.render()
+  }
+
+  // Written, never read. A Rails layout reads it and passes the result back as
+  // the `open` value, the way a Next.js layout does with `defaultOpen`
+  // (vendor/shadcn/ui/sidebar.tsx:86) — which is the whole reason this is a
+  // cookie and not `localStorage`: the server has to be able to render the
+  // sidebar already collapsed, and on this component the alternative is a
+  // full-width layout shift on every page.
+  //
+  // `samesite=lax` is this port's one addition. Upstream's line carries no
+  // SameSite, and `theme.js` here already writes its cookie with it, so
+  // matching upstream character for character would leave one library
+  // disagreeing with itself.
+  //
+  // No `try`/`catch`: a blocked cookie assignment is a silent no-op, not an
+  // exception. `theme.js` wraps `localStorage`, which does throw in private
+  // browsing, and leaves its own cookie line outside the guard for this reason.
+  persist() {
+    document.cookie =
+      `${COOKIE}=${this.openValue}; path=/; max-age=${COOKIE_MAX_AGE}; samesite=lax`
+  }
+
+  // Named `render` because `index.js` re-runs exactly that on every `shadcn--*`
+  // controller after `turbo:morph`, which is what puts a controller back in
+  // agreement with markup the server has just rewritten underneath it.
+  render() {
+    if (!this.hasSidebarTarget) return
+
+    const sidebar = this.sidebarTarget
+
+    sidebar.dataset.state = this.openValue ? "expanded" : "collapsed"
+
+    // Upstream writes this empty while expanded and fills it only when
+    // collapsed (vendor/shadcn/ui/sidebar.tsx:212). The classes match on
+    // `group-data-[collapsible=offcanvas]:…`, so filling it always would style
+    // an open sidebar as a closed one. The value to collapse *to* therefore
+    // cannot live here; it lives in `data-sidebar-collapsible`.
+    //
+    // Empty on the mobile branch for a second reason: upstream's mobile tree
+    // has no collapsed state to carry (sidebar.tsx:182-204), and here the same
+    // element serves both, so a `collapsed` left over from the desktop would
+    // style the sheet as a rail of icons — or, with `offcanvas`, slide it off
+    // the screen it was just opened on.
+    sidebar.dataset.collapsible =
+      this.openValue || this.isMobile ? "" : (sidebar.dataset.sidebarCollapsible || "offcanvas")
+
+    if (this.isMobile && this.openMobileValue) this.openMobile()
+    else this.closeMobile()
+  }
+
+  // Everything a Sheet does, applied to markup the server already sent. The
+  // element never moves, so the Stimulus actions on the links inside it stay
+  // bound — which is why this port does not build a Sheet and relocate the
+  // content into it, the way React renders a different tree.
+  // `dialog_controller.js` composes the same three modules.
+  openMobile() {
+    const sidebar = this.sidebarTarget
+    if (sidebar.dataset.mobile === "true") return
+
+    // Reopened before the slide-out finished: both teardowns are still queued
+    // and would undo an open sheet a moment after it appeared.
+    if (this.hasContainerTarget) this.exits.cancel(this.containerTarget)
+    if (this.hasOverlayTarget) this.exits.cancel(this.overlayTarget)
+
+    sidebar.dataset.mobile = "true"
+    this.announceSheet()
+    // Undoes upstream's `hidden … md:block`, which is CSS-hidden below the
+    // breakpoint because React renders a different tree there rather than
+    // showing this one. Inline beats the utility without having to out-specify
+    // `md:block` at every other width, and removing the property below restores
+    // the class exactly.
+    sidebar.style.display = "block"
+
+    // `sheet-content` and `sheet-overlay` are animated by their own
+    // `data-[state=…]` classes, exactly as upstream writes them; nothing else
+    // here reads these two attributes.
+    this.setSheetState("open")
+
+    topLayer.enable(sidebar)
+    topLayer.show(sidebar)
+    lockScroll()
+
+    // The panel, not the sheet: the overlay is a child of `sidebar`, so a layer
+    // registered on `sidebar` counts a click on the dimmed backdrop as a click
+    // *inside* itself and never dismisses. Upstream has no such problem — its
+    // overlay is the content's sibling, portalled beside it. Here the two share
+    // a parent, and the layer has to be the half that is not the backdrop.
+    const panel = this.hasContainerTarget ? this.containerTarget : sidebar
+
+    this.releaseFocus = trapFocus(panel, this.hasTriggerTarget ? this.triggerTarget : undefined)
+    focusFirst(panel)
+    this.layer = pushLayer({
+      element: panel,
+      // Without the trigger as an anchor, the very click that opens the sheet
+      // reaches the dismiss layer as an outside click and closes it again.
+      anchors: this.hasTriggerTarget ? [ this.triggerTarget ] : [],
+      onDismiss: () => {
+        this.openMobileValue = false
+        this.render()
+      }
+    })
+  }
+
+  // A sheet is a modal dialog, and this one traps focus, locks the page's
+  // scroll and dims what is behind it while announcing nothing at all —
+  // upstream gets `role="dialog"`, `aria-modal` and a name for free by
+  // rendering a real Sheet below `md`, and this port has one tree instead.
+  //
+  // Applied here rather than in the markup because the server cannot know the
+  // viewport: on desktop this panel is not a dialog, and saying it is would be
+  // worse than saying nothing.
+  announceSheet() {
+    if (!this.hasContainerTarget) return
+
+    const panel = this.containerTarget
+
+    panel.setAttribute("role", "dialog")
+    panel.setAttribute("aria-modal", "true")
+    if (panel.dataset.sheetTitle) panel.setAttribute("aria-labelledby", panel.dataset.sheetTitle)
+    if (panel.dataset.sheetDescription) panel.setAttribute("aria-describedby", panel.dataset.sheetDescription)
+    if (this.hasSheetHeaderTarget) this.sheetHeaderTarget.hidden = false
+  }
+
+  silenceSheet() {
+    if (!this.hasContainerTarget) return
+
+    const panel = this.containerTarget
+
+    for (const name of [ "role", "aria-modal", "aria-labelledby", "aria-describedby" ]) {
+      panel.removeAttribute(name)
+    }
+    if (this.hasSheetHeaderTarget) this.sheetHeaderTarget.hidden = true
+  }
+
+  closeMobile() {
+    if (!this.hasSidebarTarget) return
+
+    const sidebar = this.sidebarTarget
+    if (sidebar.dataset.mobile !== "true") return
+
+    // Interaction state goes now: a sheet that is sliding out must not answer
+    // Escape, keep the page's scroll locked or hold focus. Only what is still
+    // being *looked at* waits — the same split `floating.js` makes.
+    unlockScroll()
+    this.releaseFocus?.()
+    this.releaseFocus = null
+    if (this.layer) removeLayer(this.layer)
+    this.layer = null
+
+    this.setSheetState("closed")
+
+    // Each element waits on its *own* animations, as the dialog's layers do.
+    // Hiding the backdrop on the container's clock instead looks broken rather
+    // than merely late: nothing in the compiled bundle sets
+    // `animation-fill-mode`, so the moment `fade-out-0` ends the overlay snaps
+    // back to a full `bg-black/50` and sits there — the panel gone, a grey
+    // sheet of glass left over it — until the longer animation finishes.
+    // Upstream's two clocks differ the same way, 150ms against `duration-300`.
+    if (this.hasOverlayTarget) {
+      this.exits.defer(this.overlayTarget, () => { this.overlayTarget.hidden = true })
+    }
+
+    // What ends the sheet is `data-mobile` going away — it is what
+    // `group-data-[mobile=true]:flex` reads — so it has to outlast the
+    // slide-out rather than start it.
+    const finish = () => {
+      this.silenceSheet()
+      delete sidebar.dataset.mobile
+      sidebar.style.removeProperty("display")
+
+      topLayer.hide(sidebar)
+      // Paired with the `enable` above, and not optional: this element is laid
+      // out around, so leaving it a popover leaves it `position: fixed` and the
+      // page draws over the desktop sidebar from then on.
+      topLayer.disable(sidebar)
+    }
+
+    if (this.hasContainerTarget) this.exits.defer(this.containerTarget, finish)
+    else finish()
+  }
+
+  // The overlay is `hidden` in the server's markup and stays that way on
+  // desktop, where nothing ever opens a sheet.
+  setSheetState(state) {
+    if (this.hasContainerTarget) this.containerTarget.dataset.state = state
+    if (!this.hasOverlayTarget) return
+
+    if (state === "open") this.overlayTarget.hidden = false
+    this.overlayTarget.dataset.state = state
+  }
+}