shadcn-rails 0.1.0 → 0.2.1

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

@@ -1,225 +1,95 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseMenuController from "./base_menu_controller"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Dropdown controller for dropdown menus
- * Handles opening, closing, keyboard navigation, and item selection
+ * Extends BaseMenuController with Floating UI 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()
-    }
+    this.cleanupFloating = null
+    super.connect()
   }
 
   disconnect() {
-    this.hide()
+    this.cleanupPositioning()
+    super.disconnect()
   }
 
-  toggle(event) {
-    event?.preventDefault()
-    if (this.openValue) {
-      this.hide()
-    } else {
-      this.show()
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
     }
   }
 
-  show() {
-    if (this.openValue) return
-
-    this.openValue = true
-
-    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")
+  get placement() {
+    // Convert side/align to Floating UI placement
+    const align = this.alignValue === "center" ? "" : `-${this.alignValue}`
+    return `${this.sideValue}${align}`
   }
 
-  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
+  positionContent() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
 
-    this.dispatch("closed")
+    // Use Floating UI for smart positioning
+    this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+      placement: this.placement,
+      offset: 4,
+      sameWidth: false
+    })
   }
 
-  close() {
-    this.hide()
+  hideMenu() {
+    this.cleanupPositioning()
+    super.hideMenu()
   }
 
-  selectItem(event) {
+  toggleCheckbox(event) {
     const item = event.currentTarget
     if (item.dataset.disabled !== undefined) return
 
-    this.dispatch("select", { detail: { item } })
-    this.hide()
-  }
+    const isChecked = item.dataset.state === "checked"
+    item.dataset.state = isChecked ? "unchecked" : "checked"
+    item.setAttribute("aria-checked", (!isChecked).toString())
 
-  handleClickOutside(event) {
-    if (!this.element.contains(event.target)) {
-      this.hide()
+    // Toggle the check icon visibility
+    const indicator = item.querySelector("span svg")
+    if (indicator) {
+      indicator.style.display = isChecked ? "none" : "block"
     }
-  }
 
-  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
-    }
+    this.dispatch("check", { detail: { item, checked: !isChecked } })
   }
 
-  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()
-  }
+  selectRadio(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
 
-  selectFocusedItem() {
-    const items = this.enabledItems
-    if (this.focusedIndex >= 0 && this.focusedIndex < items.length) {
-      items[this.focusedIndex].click()
+    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"
+      })
     }
-  }
-
-  get enabledItems() {
-    return this.itemTargets.filter(item => item.dataset.disabled === undefined)
-  }
 
-  positionContent() {
-    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+    // Check this item
+    item.dataset.state = "checked"
+    item.setAttribute("aria-checked", "true")
+    const indicator = item.querySelector("span svg")
+    if (indicator) indicator.style.display = "block"
 
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const content = this.contentTarget
-
-    // Position based on side and align
-    content.style.position = "absolute"
-    content.style.minWidth = `${trigger.width}px`
-
-    switch (this.sideValue) {
-      case "top":
-        content.style.bottom = "100%"
-        content.style.top = "auto"
-        content.style.marginBottom = "4px"
-        break
-      case "bottom":
-      default:
-        content.style.top = "100%"
-        content.style.bottom = "auto"
-        content.style.marginTop = "4px"
-        break
-    }
-
-    switch (this.alignValue) {
-      case "start":
-        content.style.left = "0"
-        content.style.right = "auto"
-        break
-      case "center":
-        content.style.left = "50%"
-        content.style.transform = "translateX(-50%)"
-        break
-      case "end":
-      default:
-        content.style.right = "0"
-        content.style.left = "auto"
-        break
-    }
+    this.dispatch("radioChange", { detail: { item, value: item.dataset.value } })
   }
 }

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

@@ -1,20 +1,25 @@
 import { Controller } from "@hotwired/stimulus"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Hover Card Controller
  * Handles showing/hiding content on hover with delays
+ * Uses Floating UI for smart positioning
  */
 export default class extends Controller {
   static targets = ["trigger", "content"]
   static values = {
     openDelay: { type: Number, default: 700 },
-    closeDelay: { type: Number, default: 300 }
+    closeDelay: { type: Number, default: 300 },
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "center" }
   }
 
   connect() {
     this.openTimeout = null
     this.closeTimeout = null
     this.isOpen = false
+    this.cleanupFloating = null
 
     this.triggerTarget.addEventListener("mouseenter", this.scheduleOpen.bind(this))
     this.triggerTarget.addEventListener("mouseleave", this.scheduleClose.bind(this))
@@ -27,6 +32,20 @@ export default class extends Controller {
 
   disconnect() {
     this.clearTimeouts()
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
+  }
+
+  get placement() {
+    // Convert side/align to Floating UI placement
+    const align = this.alignValue === "center" ? "" : `-${this.alignValue}`
+    return `${this.sideValue}${align}`
   }
 
   scheduleOpen() {
@@ -67,7 +86,12 @@ export default class extends Controller {
     this.isOpen = true
     this.contentTarget.style.display = "block"
     this.contentTarget.setAttribute("data-state", "open")
-    this.positionContent()
+
+    // Use Floating UI for smart positioning
+    this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+      placement: this.placement,
+      offset: 8
+    })
 
     this.dispatch("open")
   }
@@ -78,6 +102,9 @@ export default class extends Controller {
     this.isOpen = false
     this.contentTarget.setAttribute("data-state", "closed")
 
+    // Cleanup Floating UI
+    this.cleanupPositioning()
+
     // Wait for animation to complete
     setTimeout(() => {
       if (!this.isOpen) {
@@ -87,57 +114,4 @@ export default class extends Controller {
 
     this.dispatch("close")
   }
-
-  positionContent() {
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const content = this.contentTarget
-    const side = content.dataset.side || "bottom"
-    const align = content.dataset.align || "center"
-
-    // Reset position
-    content.style.top = ""
-    content.style.left = ""
-    content.style.right = ""
-    content.style.bottom = ""
-
-    const gap = 8 // Gap between trigger and content
-
-    switch (side) {
-      case "top":
-        content.style.bottom = "100%"
-        content.style.marginBottom = `${gap}px`
-        break
-      case "bottom":
-        content.style.top = "100%"
-        content.style.marginTop = `${gap}px`
-        break
-      case "left":
-        content.style.right = "100%"
-        content.style.marginRight = `${gap}px`
-        content.style.top = "0"
-        break
-      case "right":
-        content.style.left = "100%"
-        content.style.marginLeft = `${gap}px`
-        content.style.top = "0"
-        break
-    }
-
-    // Handle alignment for top/bottom
-    if (side === "top" || side === "bottom") {
-      switch (align) {
-        case "start":
-          content.style.left = "0"
-          break
-        case "end":
-          content.style.right = "0"
-          break
-        case "center":
-        default:
-          content.style.left = "50%"
-          content.style.transform = "translateX(-50%)"
-          break
-      }
-    }
-  }
 }

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,10 @@
 import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Popover controller for rich content overlays
+ * Uses Floating UI for smart positioning and stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["trigger", "content"]
@@ -13,7 +16,10 @@ export default class extends Controller {
   }
 
   connect() {
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+    this.cleanupFloating = null
+
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
 
     if (this.openValue) {
       this.show()
@@ -22,6 +28,20 @@ export default class extends Controller {
 
   disconnect() {
     this.hide()
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
+  }
+
+  get placement() {
+    // Convert side/align to Floating UI placement
+    const align = this.alignValue === "center" ? "" : `-${this.alignValue}`
+    return `${this.sideValue}${align}`
   }
 
   toggle(event) {
@@ -41,11 +61,15 @@ export default class extends Controller {
     if (this.hasContentTarget) {
       this.contentTarget.hidden = false
       this.contentTarget.dataset.state = "open"
-      this.contentTarget.dataset.side = this.sideValue
-      this.positionContent()
-    }
 
-    document.addEventListener("click", this.boundHandleClickOutside)
+      // Use Floating UI for smart positioning
+      if (this.hasTriggerTarget) {
+        this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+          placement: this.placement,
+          offset: 8
+        })
+      }
+    }
 
     if (this.modalValue) {
       document.body.style.pointerEvents = "none"
@@ -60,6 +84,9 @@ export default class extends Controller {
 
     this.openValue = false
 
+    // Cleanup Floating UI auto-update
+    this.cleanupPositioning()
+
     if (this.hasContentTarget) {
       this.contentTarget.dataset.state = "closed"
       setTimeout(() => {
@@ -69,8 +96,6 @@ export default class extends Controller {
       }, 150)
     }
 
-    document.removeEventListener("click", this.boundHandleClickOutside)
-
     if (this.modalValue) {
       document.body.style.pointerEvents = ""
     }
@@ -82,60 +107,10 @@ 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()
     }
   }
-
-  positionContent() {
-    if (!this.hasContentTarget || !this.hasTriggerTarget) return
-
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const content = this.contentTarget
-
-    content.style.position = "absolute"
-
-    const gap = 8
-
-    switch (this.sideValue) {
-      case "top":
-        content.style.bottom = "100%"
-        content.style.top = "auto"
-        content.style.marginBottom = `${gap}px`
-        break
-      case "bottom":
-        content.style.top = "100%"
-        content.style.bottom = "auto"
-        content.style.marginTop = `${gap}px`
-        break
-      case "left":
-        content.style.right = "100%"
-        content.style.left = "auto"
-        content.style.marginRight = `${gap}px`
-        break
-      case "right":
-        content.style.left = "100%"
-        content.style.right = "auto"
-        content.style.marginLeft = `${gap}px`
-        break
-    }
-
-    switch (this.alignValue) {
-      case "start":
-        content.style.left = "0"
-        content.style.right = "auto"
-        break
-      case "center":
-        if (this.sideValue === "top" || this.sideValue === "bottom") {
-          content.style.left = "50%"
-          content.style.transform = "translateX(-50%)"
-        }
-        break
-      case "end":
-        content.style.right = "0"
-        content.style.left = "auto"
-        break
-    }
-  }
 }