shadcn-rails 0.1.0 → 0.2.0

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

@@ -1,43 +1,65 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseMenuController from "./base_menu_controller"
 
 /**
  * Context Menu controller for right-click menus
- * Handles opening at mouse position, closing, keyboard navigation, and item selection
+ * Extends BaseMenuController with context menu-specific positioning and event handling
  */
-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,117 +74,51 @@ 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() {

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

@@ -1,185 +1,23 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseMenuController from "./base_menu_controller"
 
 /**
  * Dropdown controller for dropdown menus
- * Handles opening, closing, keyboard navigation, and item selection
+ * Extends BaseMenuController with dropdown-specific positioning
  */
-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,
     align: { type: String, default: "end" },
     side: { type: String, default: "bottom" }
   }
 
-  connect() {
-    this.focusedIndex = -1
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
-    this.boundHandleKeydown = this.handleKeydown.bind(this)
-
-    if (this.openValue) {
-      this.show()
-    }
-  }
-
-  disconnect() {
-    this.hide()
-  }
-
-  toggle(event) {
-    event?.preventDefault()
-    if (this.openValue) {
-      this.hide()
-    } else {
-      this.show()
-    }
-  }
-
-  show() {
-    if (this.openValue) return
-
-    this.openValue = true
-
+  show(event) {
+    // Store side value for positioning before showing
     if (this.hasContentTarget) {
-      this.contentTarget.hidden = false
-      this.contentTarget.dataset.state = "open"
       this.contentTarget.dataset.side = this.sideValue
-      this.positionContent()
-    }
-
-    if (this.hasTriggerTarget) {
-      this.triggerTarget.setAttribute("aria-expanded", "true")
-    }
-
-    // Add event listeners
-    document.addEventListener("click", this.boundHandleClickOutside)
-    document.addEventListener("keydown", this.boundHandleKeydown)
-
-    // Focus first item
-    this.focusedIndex = -1
-    this.focusNextItem()
-
-    this.dispatch("opened")
-  }
-
-  hide() {
-    if (!this.openValue) return
-
-    this.openValue = false
-
-    if (this.hasContentTarget) {
-      this.contentTarget.dataset.state = "closed"
-      // Hide after animation
-      setTimeout(() => {
-        if (!this.openValue) {
-          this.contentTarget.hidden = true
-        }
-      }, 150)
-    }
-
-    if (this.hasTriggerTarget) {
-      this.triggerTarget.setAttribute("aria-expanded", "false")
-    }
-
-    // Remove event listeners
-    document.removeEventListener("click", 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) {
-    if (!this.element.contains(event.target)) {
-      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
-    }
-  }
-
-  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)
+    super.show(event)
   }
 
   positionContent() {
@@ -222,4 +60,45 @@ export default class extends Controller {
         break
     }
   }
+
+  toggleCheckbox(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    const isChecked = item.dataset.state === "checked"
+    item.dataset.state = isChecked ? "unchecked" : "checked"
+    item.setAttribute("aria-checked", (!isChecked).toString())
+
+    // Toggle the check icon visibility
+    const indicator = item.querySelector("span svg")
+    if (indicator) {
+      indicator.style.display = isChecked ? "none" : "block"
+    }
+
+    this.dispatch("check", { detail: { item, checked: !isChecked } })
+  }
+
+  selectRadio(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    const group = item.closest("[role='group']")
+    if (group) {
+      // Uncheck all radio items in the group
+      group.querySelectorAll("[role='menuitemradio']").forEach(radio => {
+        radio.dataset.state = "unchecked"
+        radio.setAttribute("aria-checked", "false")
+        const indicator = radio.querySelector("span svg")
+        if (indicator) indicator.style.display = "none"
+      })
+    }
+
+    // Check this item
+    item.dataset.state = "checked"
+    item.setAttribute("aria-checked", "true")
+    const indicator = item.querySelector("span svg")
+    if (indicator) indicator.style.display = "block"
+
+    this.dispatch("radioChange", { detail: { item, value: item.dataset.value } })
+  }
 }

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

@@ -1,8 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 /**
  * Menubar controller
  * Handles menu opening/closing, keyboard navigation, hover behavior
+ * Uses stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["menu", "trigger", "content", "item", "sub", "subTrigger", "subContent"]
@@ -13,14 +15,15 @@ export default class extends Controller {
   connect() {
     this.focusedIndex = -1
     this.isMenuOpen = false
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
     this.boundHandleKeydown = this.handleKeydown.bind(this)
     this.closeSubTimer = null
+
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
   }
 
   disconnect() {
     this.closeAll()
-    document.removeEventListener("click", this.boundHandleClickOutside)
     document.removeEventListener("keydown", this.boundHandleKeydown)
   }
 
@@ -72,8 +75,7 @@ export default class extends Controller {
     this.isMenuOpen = true
     this.focusedIndex = -1
 
-    // Add event listeners
-    document.addEventListener("click", this.boundHandleClickOutside)
+    // Add keydown event listener (click outside is handled by stimulus-use)
     document.addEventListener("keydown", this.boundHandleKeydown)
 
     // Focus first item
@@ -100,7 +102,7 @@ export default class extends Controller {
     this.isMenuOpen = false
     this.focusedIndex = -1
 
-    document.removeEventListener("click", this.boundHandleClickOutside)
+    // Remove keydown listener (click outside is handled by stimulus-use)
     document.removeEventListener("keydown", this.boundHandleKeydown)
   }
 
@@ -198,8 +200,9 @@ export default class extends Controller {
     })
   }
 
-  handleClickOutside(event) {
-    if (!this.element.contains(event.target)) {
+  // Called by stimulus-use when clicking outside the element
+  clickOutside(event) {
+    if (this.isMenuOpen) {
       this.closeAll()
     }
   }

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

@@ -1,8 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 /**
  * Navigation Menu Controller
  * Handles navigation menu interactions with dropdown content areas
+ * Uses stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["list", "item", "trigger", "content", "viewport"]
@@ -19,8 +21,10 @@ export default class extends Controller {
     this.closeTimer = null
     this.wasClickOpened = false
 
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
     this.boundHandleKeydown = this.handleKeydown.bind(this)
+
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
   }
 
   disconnect() {
@@ -125,8 +129,7 @@ export default class extends Controller {
 
     this.isOpen = true
 
-    // Add event listeners
-    document.addEventListener("click", this.boundHandleClickOutside)
+    // Add keydown event listener (click outside is handled by stimulus-use)
     document.addEventListener("keydown", this.boundHandleKeydown)
   }
 
@@ -183,12 +186,13 @@ export default class extends Controller {
     this.isOpen = false
     this.wasClickOpened = false
 
-    document.removeEventListener("click", this.boundHandleClickOutside)
+    // Remove keydown listener (click outside is handled by stimulus-use)
     document.removeEventListener("keydown", this.boundHandleKeydown)
   }
 
-  handleClickOutside(event) {
-    if (!this.element.contains(event.target)) {
+  // Called by stimulus-use when clicking outside the element
+  clickOutside(event) {
+    if (this.isOpen) {
       this.closeAll()
     }
   }

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

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 /**
  * Popover controller for rich content overlays
+ * Uses stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["trigger", "content"]
@@ -13,7 +15,8 @@ export default class extends Controller {
   }
 
   connect() {
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
 
     if (this.openValue) {
       this.show()
@@ -45,8 +48,6 @@ export default class extends Controller {
       this.positionContent()
     }
 
-    document.addEventListener("click", this.boundHandleClickOutside)
-
     if (this.modalValue) {
       document.body.style.pointerEvents = "none"
       this.contentTarget.style.pointerEvents = "auto"
@@ -69,8 +70,6 @@ export default class extends Controller {
       }, 150)
     }
 
-    document.removeEventListener("click", this.boundHandleClickOutside)
-
     if (this.modalValue) {
       document.body.style.pointerEvents = ""
     }
@@ -82,8 +81,9 @@ export default class extends Controller {
     this.hide()
   }
 
-  handleClickOutside(event) {
-    if (!this.element.contains(event.target)) {
+  // Called by stimulus-use when clicking outside the element
+  clickOutside(event) {
+    if (this.openValue) {
       this.hide()
     }
   }

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

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 /**
  * Select controller for custom select dropdowns
+ * Uses stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "item", "display", "checkIcon"]
@@ -12,7 +14,9 @@ export default class extends Controller {
   connect() {
     this.isOpen = false
     this.focusedIndex = -1
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
 
     // Set initial value display
     if (this.valueValue) {
@@ -53,8 +57,6 @@ export default class extends Controller {
       this.triggerTarget.setAttribute("aria-expanded", "true")
     }
 
-    document.addEventListener("click", this.boundHandleClickOutside)
-
     // Focus current value or first item
     this.focusedIndex = -1
     const currentItem = this.itemTargets.find(item => item.dataset.value === this.valueValue)
@@ -86,12 +88,18 @@ export default class extends Controller {
       this.triggerTarget.setAttribute("aria-expanded", "false")
     }
 
-    document.removeEventListener("click", this.boundHandleClickOutside)
     this.focusedIndex = -1
 
     this.dispatch("closed")
   }
 
+  // Called by stimulus-use when clicking outside the element
+  clickOutside(event) {
+    if (this.isOpen) {
+      this.close()
+    }
+  }
+
   select(event) {
     const item = event.currentTarget
     if (item.dataset.disabled !== undefined) return
@@ -132,12 +140,6 @@ export default class extends Controller {
     }
   }
 
-  handleClickOutside(event) {
-    if (!this.element.contains(event.target)) {
-      this.close()
-    }
-  }
-
   handleKeydown(event) {
     if (!this.isOpen) {
       if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {