shadcn-rails 0.1.0 → 0.2.1

data/__mocks__/@floating-ui/dom.js

@@ -0,0 +1,67 @@
+/**
+ * Mock for @floating-ui/dom
+ * Used in tests since JSDOM doesn't properly support the DOM APIs Floating UI needs
+ */
+
+// Store references for size middleware to apply
+let _computeRef = null
+let _computeFloating = null
+
+export const computePosition = async (reference, floating, options = {}) => {
+  _computeRef = reference
+  _computeFloating = floating
+
+  // Call size middleware apply if present
+  if (options.middleware) {
+    for (const mw of options.middleware) {
+      if (mw.name === 'size' && mw.applyFn) {
+        mw.applyFn({
+          availableWidth: 400,
+          availableHeight: 300,
+          elements: { floating },
+          rects: {
+            reference: {
+              width: reference?.getBoundingClientRect?.()?.width || 100,
+              height: reference?.getBoundingClientRect?.()?.height || 40
+            }
+          }
+        })
+      }
+    }
+  }
+
+  return {
+    x: 100,
+    y: 140,
+    placement: options.placement || 'bottom-start',
+    middlewareData: {}
+  }
+}
+
+export const autoUpdate = (reference, floating, update) => {
+  // Call update once immediately
+  update()
+  // Return cleanup function
+  return () => {}
+}
+
+export const flip = (options = {}) => ({
+  name: 'flip',
+  options
+})
+
+export const shift = (options = {}) => ({
+  name: 'shift',
+  options
+})
+
+export const offset = (value = 0) => ({
+  name: 'offset',
+  options: { mainAxis: value }
+})
+
+export const size = (options = {}) => ({
+  name: 'size',
+  options,
+  applyFn: options.apply
+})

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

@@ -0,0 +1,266 @@
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
+
+/**
+ * Base Menu Controller
+ *
+ * A base controller for menu-like components (dropdown, context menu, select, etc.)
+ * that provides common functionality for:
+ * - Opening/closing menus
+ * - Keyboard navigation (arrow keys, home, end, enter, space, escape)
+ * - Focus management
+ * - Click outside to close (using stimulus-use)
+ * - Item selection
+ *
+ * Subclasses can override specific methods to customize behavior:
+ * - positionContent() - Custom positioning logic
+ * - showMenu() - Additional show behavior
+ * - hideMenu() - Additional hide behavior
+ * - shouldCloseOnClickOutside(event) - Custom click outside logic
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "item"]
+  static values = {
+    open: { type: Boolean, default: false },
+    hideDelay: { type: Number, default: 150 }
+  }
+
+  // Lifecycle hooks
+  connect() {
+    this.focusedIndex = -1
+    this.hideTimeoutId = null
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
+
+    if (this.openValue) {
+      this.show()
+    }
+  }
+
+  disconnect() {
+    this.hide()
+  }
+
+  // Public API
+  toggle(event) {
+    event?.preventDefault()
+    if (this.openValue) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  show(event) {
+    if (this.openValue) return
+
+    // Cancel any pending hide timeout
+    this.cancelHideTimeout()
+
+    this.openValue = true
+
+    if (this.hasContentTarget) {
+      this.contentTarget.hidden = false
+      this.contentTarget.dataset.state = "open"
+      this.positionContent(event)
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "true")
+    }
+
+    // Add event listeners
+    this.addEventListeners()
+
+    // Allow subclasses to add custom show behavior
+    this.showMenu(event)
+
+    // Focus first item
+    this.focusedIndex = -1
+    this.focusNextItem()
+
+    this.dispatch("opened")
+  }
+
+  hide() {
+    if (!this.openValue) return
+
+    this.openValue = false
+
+    // Remove event listeners immediately to prevent double-triggering
+    this.removeEventListeners()
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = "closed"
+      // Hide after animation completes
+      this.hideTimeoutId = setTimeout(() => {
+        if (!this.openValue && this.hasContentTarget) {
+          this.contentTarget.hidden = true
+        }
+        this.hideTimeoutId = null
+        // Allow subclasses to add custom hide behavior
+        this.hideMenu()
+      }, this.hideDelayValue)
+    } else {
+      this.hideMenu()
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "false")
+    }
+
+    // Reset focus index
+    this.focusedIndex = -1
+
+    this.dispatch("closed")
+  }
+
+  close() {
+    this.hide()
+  }
+
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    this.dispatch("select", { detail: { item } })
+    this.hide()
+  }
+
+  // Event handling - clickOutside is called by stimulus-use
+  clickOutside(event) {
+    // Only close if menu is open and shouldCloseOnClickOutside returns true
+    if (this.openValue && this.shouldCloseOnClickOutside(event)) {
+      this.hide()
+    }
+  }
+
+  handleKeydown(event) {
+    switch (event.key) {
+      case "Escape":
+        this.hide()
+        this.triggerTarget?.focus()
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        this.focusNextItem()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.focusPreviousItem()
+        break
+      case "Home":
+        event.preventDefault()
+        this.focusFirstItem()
+        break
+      case "End":
+        event.preventDefault()
+        this.focusLastItem()
+        break
+      case "Enter":
+      case " ":
+        event.preventDefault()
+        this.selectFocusedItem()
+        break
+    }
+  }
+
+  // Focus management
+  focusNextItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = (this.focusedIndex + 1) % items.length
+    items[this.focusedIndex].focus()
+  }
+
+  focusPreviousItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1
+    items[this.focusedIndex].focus()
+  }
+
+  focusFirstItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = 0
+    items[0].focus()
+  }
+
+  focusLastItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = items.length - 1
+    items[this.focusedIndex].focus()
+  }
+
+  selectFocusedItem() {
+    const items = this.enabledItems
+    if (this.focusedIndex >= 0 && this.focusedIndex < items.length) {
+      items[this.focusedIndex].click()
+    }
+  }
+
+  get enabledItems() {
+    return this.itemTargets.filter(item => item.dataset.disabled === undefined)
+  }
+
+  // Protected methods that subclasses can override
+
+  /**
+   * Position the content element. Override in subclasses for custom positioning.
+   * @param {Event} event - The event that triggered the show (optional)
+   */
+  positionContent(event) {
+    // Default: no positioning (subclasses should override)
+  }
+
+  /**
+   * Called after showing the menu. Override in subclasses for additional behavior.
+   * @param {Event} event - The event that triggered the show (optional)
+   */
+  showMenu(event) {
+    // Default: no-op (subclasses can override)
+  }
+
+  /**
+   * Called after hiding the menu. Override in subclasses for additional behavior.
+   */
+  hideMenu() {
+    // Default: no-op (subclasses can override)
+  }
+
+  /**
+   * Determine if the menu should close on click outside.
+   * Override in subclasses for custom behavior (e.g., context menu).
+   * @param {Event} event - The click event
+   * @returns {boolean} - True if the menu should close
+   */
+  shouldCloseOnClickOutside(event) {
+    // Default: close if clicking outside the entire element
+    return !this.element.contains(event.target)
+  }
+
+  // Private helpers
+  // Note: click outside is handled by stimulus-use's useClickOutside
+  addEventListeners() {
+    document.addEventListener("keydown", this.boundHandleKeydown)
+  }
+
+  removeEventListeners() {
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+  }
+
+  cancelHideTimeout() {
+    if (this.hideTimeoutId) {
+      clearTimeout(this.hideTimeoutId)
+      this.hideTimeoutId = null
+    }
+  }
+}

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

@@ -1,23 +1,43 @@
 import { Controller } from "@hotwired/stimulus"
+import { useClickOutside, useDebounce } from "stimulus-use"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Combobox controller for searchable select dropdown
  * Handles open/close, filtering, keyboard navigation, and item selection
+ * Uses Floating UI for smart positioning and stimulus-use for utilities
  */
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "list", "item", "empty", "displayValue", "hiddenInput"]
   static values = {
     open: { type: Boolean, default: false },
     value: { type: String, default: "" },
-    selectedIndex: { type: Number, default: -1 }
+    selectedIndex: { type: Number, default: -1 },
+    debounceWait: { type: Number, default: 150 },
+    placement: { type: String, default: "bottom-start" }
   }
+  static debounces = ["filter"]
 
   connect() {
     this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.cleanupFloating = null
+
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
+    // Use stimulus-use for debounced filtering
+    useDebounce(this, { wait: this.debounceWaitValue })
   }
 
   disconnect() {
     document.removeEventListener("keydown", this.boundHandleKeydown)
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
   }
 
   toggle() {
@@ -36,6 +56,13 @@ export default class extends Controller {
     this.contentTarget.dataset.state = "open"
     this.triggerTarget.setAttribute("aria-expanded", "true")
 
+    // Use Floating UI for smart positioning
+    this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+      placement: this.placementValue,
+      sameWidth: true,
+      maxHeight: 384 // max-h-96
+    })
+
     // Focus the input
     requestAnimationFrame(() => {
       if (this.hasInputTarget) {
@@ -58,6 +85,9 @@ export default class extends Controller {
     this.contentTarget.dataset.state = "closed"
     this.triggerTarget.setAttribute("aria-expanded", "false")
 
+    // Cleanup Floating UI
+    this.cleanupPositioning()
+
     // Hide after animation completes, then reset filter state
     const hideAndReset = () => {
       this.contentTarget.hidden = true
@@ -221,13 +251,9 @@ export default class extends Controller {
     return this.itemTargets.filter((item) => item.style.display !== "none")
   }
 
-  /**
-   * Handle click outside to close
-   */
-  handleClickOutside(event) {
-    if (!this.openValue) return
-
-    if (!this.element.contains(event.target)) {
+  // Called by stimulus-use when clicking outside the element
+  clickOutside(event) {
+    if (this.openValue) {
       this.close()
     }
   }

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

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { useDebounce } from "stimulus-use"
 
 /**
  * Command controller for command palette functionality
@@ -7,10 +8,13 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["input", "list", "empty", "group", "item"]
   static values = {
-    selectedIndex: { type: Number, default: -1 }
+    selectedIndex: { type: Number, default: -1 },
+    debounceWait: { type: Number, default: 150 }
   }
+  static debounces = ["filter"]
 
   connect() {
+    useDebounce(this, { wait: this.debounceWaitValue })
     this.updateSelection()
   }
 

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

@@ -1,43 +1,66 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseMenuController from "./base_menu_controller"
+import { positionAtPoint } from "../utils/floating"
 
 /**
  * Context Menu controller for right-click menus
- * Handles opening at mouse position, closing, keyboard navigation, and item selection
+ * Extends BaseMenuController with Floating UI positioning at cursor location
  */
-export default class extends Controller {
-  static targets = ["trigger", "content", "item"]
+export default class extends BaseMenuController {
+  static targets = [...BaseMenuController.targets]
   static values = {
-    open: { type: Boolean, default: false }
+    ...BaseMenuController.values,
+    hideDelay: { type: Number, default: 100 }
   }
 
   connect() {
-    this.focusedIndex = -1
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
-    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    super.connect()
+    this.boundHandleContextMenu = this.handleContextMenu.bind(this)
+    this.originalOverflow = null
+    this.mouseX = 0
+    this.mouseY = 0
+    this._ignoreClickOutside = false
   }
 
-  disconnect() {
-    this.hide()
+  // Override clickOutside to handle the deferred close behavior
+  // Context menus need to ignore clicks in the same frame as the right-click
+  clickOutside(event) {
+    if (this._ignoreClickOutside) return
+    super.clickOutside(event)
   }
 
   show(event) {
     event?.preventDefault()
 
+    // Cancel any pending hide timeout from a previous close
+    this.cancelHideTimeout()
+
     // Store mouse position for positioning
     this.mouseX = event?.clientX || 0
     this.mouseY = event?.clientY || 0
 
     this.openValue = true
 
+    // Lock scroll (only if not already locked)
+    if (document.body.style.overflow !== "hidden") {
+      this.originalOverflow = document.body.style.overflow
+      document.body.style.overflow = "hidden"
+    }
+
     if (this.hasContentTarget) {
       this.contentTarget.hidden = false
       this.contentTarget.dataset.state = "open"
       this.positionContent()
     }
 
-    // Add event listeners
-    document.addEventListener("click", this.boundHandleClickOutside)
-    document.addEventListener("contextmenu", this.boundHandleClickOutside)
+    // Defer click outside detection to prevent immediate close from right-click
+    // The contextmenu event can sometimes trigger a click in the same event cycle
+    this._ignoreClickOutside = true
+    requestAnimationFrame(() => {
+      this._ignoreClickOutside = false
+      if (this.openValue) {
+        document.addEventListener("contextmenu", this.boundHandleContextMenu)
+      }
+    })
     document.addEventListener("keydown", this.boundHandleKeydown)
 
     // Focus first item
@@ -52,151 +75,57 @@ export default class extends Controller {
 
     this.openValue = false
 
+    // Remove event listeners immediately to prevent double-triggering
+    document.removeEventListener("contextmenu", this.boundHandleContextMenu)
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+
     if (this.hasContentTarget) {
       this.contentTarget.dataset.state = "closed"
-      // Hide after animation
-      setTimeout(() => {
+      // Wait for animation to complete before hiding and restoring scroll
+      // Animation duration is 100ms, add buffer for smooth transition
+      this.hideTimeoutId = setTimeout(() => {
         if (!this.openValue) {
           this.contentTarget.hidden = true
+          // Restore scroll only after menu is fully hidden
+          document.body.style.overflow = this.originalOverflow || ""
         }
-      }, 150)
+        this.hideTimeoutId = null
+      }, this.hideDelayValue)
+    } else {
+      // No content target, restore scroll immediately
+      document.body.style.overflow = this.originalOverflow || ""
     }
 
-    // Remove event listeners
-    document.removeEventListener("click", this.boundHandleClickOutside)
-    document.removeEventListener("contextmenu", this.boundHandleClickOutside)
-    document.removeEventListener("keydown", this.boundHandleKeydown)
-
     // Reset focus index
     this.focusedIndex = -1
 
     this.dispatch("closed")
   }
 
-  close() {
-    this.hide()
-  }
-
-  selectItem(event) {
-    const item = event.currentTarget
-    if (item.dataset.disabled !== undefined) return
-
-    this.dispatch("select", { detail: { item } })
-    this.hide()
-  }
-
-  handleClickOutside(event) {
-    // Don't close if clicking inside the content
-    if (this.hasContentTarget && this.contentTarget.contains(event.target)) {
+  handleContextMenu(event) {
+    // Don't close if right-clicking on the trigger element
+    // This allows show() to be called again to reposition the menu
+    if (this.hasTriggerTarget && this.triggerTarget.contains(event.target)) {
       return
     }
-    this.hide()
-  }
-
-  handleKeydown(event) {
-    switch (event.key) {
-      case "Escape":
-        this.hide()
-        break
-      case "ArrowDown":
-        event.preventDefault()
-        this.focusNextItem()
-        break
-      case "ArrowUp":
-        event.preventDefault()
-        this.focusPreviousItem()
-        break
-      case "Home":
-        event.preventDefault()
-        this.focusFirstItem()
-        break
-      case "End":
-        event.preventDefault()
-        this.focusLastItem()
-        break
-      case "Enter":
-      case " ":
-        event.preventDefault()
-        this.selectFocusedItem()
-        break
+    // Close if right-clicking outside the content
+    if (this.hasContentTarget && !this.contentTarget.contains(event.target)) {
+      this.hide()
     }
   }
 
-  focusNextItem() {
-    const items = this.enabledItems
-    if (items.length === 0) return
-
-    this.focusedIndex = (this.focusedIndex + 1) % items.length
-    items[this.focusedIndex].focus()
-  }
-
-  focusPreviousItem() {
-    const items = this.enabledItems
-    if (items.length === 0) return
-
-    this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1
-    items[this.focusedIndex].focus()
-  }
-
-  focusFirstItem() {
-    const items = this.enabledItems
-    if (items.length === 0) return
-
-    this.focusedIndex = 0
-    items[0].focus()
-  }
-
-  focusLastItem() {
-    const items = this.enabledItems
-    if (items.length === 0) return
-
-    this.focusedIndex = items.length - 1
-    items[this.focusedIndex].focus()
-  }
-
-  selectFocusedItem() {
-    const items = this.enabledItems
-    if (this.focusedIndex >= 0 && this.focusedIndex < items.length) {
-      items[this.focusedIndex].click()
+  shouldCloseOnClickOutside(event) {
+    // Don't close if clicking inside the content
+    if (this.hasContentTarget && this.contentTarget.contains(event.target)) {
+      return false
     }
-  }
-
-  get enabledItems() {
-    return this.itemTargets.filter(item => item.dataset.disabled === undefined)
+    return true
   }
 
   positionContent() {
     if (!this.hasContentTarget) return
 
-    const content = this.contentTarget
-    const viewportWidth = window.innerWidth
-    const viewportHeight = window.innerHeight
-
-    // Reset position to measure actual size
-    content.style.left = "0"
-    content.style.top = "0"
-
-    const contentRect = content.getBoundingClientRect()
-
-    // Calculate position, keeping menu within viewport
-    let x = this.mouseX
-    let y = this.mouseY
-
-    // Adjust if menu would overflow right edge
-    if (x + contentRect.width > viewportWidth) {
-      x = viewportWidth - contentRect.width - 8
-    }
-
-    // Adjust if menu would overflow bottom edge
-    if (y + contentRect.height > viewportHeight) {
-      y = viewportHeight - contentRect.height - 8
-    }
-
-    // Ensure menu doesn't go off left or top edge
-    x = Math.max(8, x)
-    y = Math.max(8, y)
-
-    content.style.left = `${x}px`
-    content.style.top = `${y}px`
+    // Use Floating UI for smart positioning at cursor location
+    positionAtPoint(this.contentTarget, this.mouseX, this.mouseY)
   }
 }