shadcn_phlexcomponents 0.1.11 → 0.1.16

data/app/{javascript → typescript}/controllers/dialog_controller.ts

@@ -1,113 +1,115 @@
 import { Controller } from '@hotwired/stimulus'
-import { useClickOutside } from 'stimulus-use'
 import {
-  ON_OPEN_FOCUS_DELAY,
-  openWithOverlay,
-  closeWithOverlay,
+  focusElement,
   focusTrigger,
   showContent,
   hideContent,
   getFocusableElements,
+  anyNestedComponentsOpen,
+  handleTabNavigation,
 } from '../utils'
 
-export default class extends Controller<HTMLElement> {
-  static targets = ['trigger', 'content']
+const DialogController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'content', 'overlay']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly overlayTarget: HTMLElement
+
+  // values
   static values = {
     isOpen: Boolean,
   }
-
-  declare readonly triggerTarget: HTMLElement
-  declare readonly contentTarget: HTMLElement
-  declare readonly hasContentTarget: boolean
   declare isOpenValue: boolean
+
+  // custom properties
+  declare trigger: HTMLElement
   declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare DOMClickListener: (event: MouseEvent) => void
 
   connect() {
     this.DOMKeydownListener = this.onDOMKeydown.bind(this)
-    useClickOutside(this, { element: this.contentTarget })
+    this.DOMClickListener = this.onDOMClick.bind(this)
   }
 
   open() {
     this.isOpenValue = true
-
-    setTimeout(() => {
-      this.onOpenFocusedElement().focus()
-    }, ON_OPEN_FOCUS_DELAY)
-  }
-
-  onOpenFocusedElement() {
-    const focusableElements = getFocusableElements(this.contentTarget)
-    return focusableElements[0]
   }
 
   close() {
     this.isOpenValue = false
   }
 
-  onDOMKeydown(event: KeyboardEvent) {
-    if (!this.isOpenValue) return
-
-    const key = event.key
-
-    if (key === 'Escape') {
-      this.close()
-    } else if (key === 'Tab') {
-      const focusableElements = getFocusableElements(this.contentTarget)
-
-      const firstElement = focusableElements[0]
-      const lastElement = focusableElements[focusableElements.length - 1]
-
-      // If Shift + Tab pressed on first element, go to last element
-      if (event.shiftKey && document.activeElement === firstElement) {
-        event.preventDefault()
-        lastElement.focus()
-      }
-      // If Tab pressed on last element, go to first element
-      else if (!event.shiftKey && document.activeElement === lastElement) {
-        event.preventDefault()
-        firstElement.focus()
-      }
-    }
-  }
-
   isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
     if (isOpen) {
-      openWithOverlay(this.contentTarget.id)
-
       showContent({
         trigger: this.triggerTarget,
         content: this.contentTarget,
         contentContainer: this.contentTarget,
+        appendToBody: true,
+        overlay: this.overlayTarget,
       })
 
+      const focusableElements = getFocusableElements(this.contentTarget)
+      focusElement(focusableElements[0])
+
       this.setupEventListeners()
     } else {
-      closeWithOverlay(this.contentTarget.id)
-
       hideContent({
         trigger: this.triggerTarget,
         content: this.contentTarget,
         contentContainer: this.contentTarget,
+        overlay: this.overlayTarget,
       })
 
-      this.cleanupEventListeners()
-
-      // Only focus trigger when is previously opened
       if (previousIsOpen) {
         focusTrigger(this.triggerTarget)
       }
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMClick(event: MouseEvent) {
+    if (!this.isOpenValue) return
+
+    const target = event.target as HTMLElement
+    if (target === this.triggerTarget) return
+    if (this.contentTarget.contains(target)) return
+
+    const shouldClose = !anyNestedComponentsOpen(this.contentTarget)
+    if (shouldClose) this.close()
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      const shouldClose = !anyNestedComponentsOpen(this.contentTarget)
+      if (shouldClose) this.close()
+    } else if (key === 'Tab') {
+      handleTabNavigation(this.contentTarget, event)
     }
   }
 
   setupEventListeners() {
     document.addEventListener('keydown', this.DOMKeydownListener)
+    document.addEventListener('pointerdown', this.DOMClickListener)
   }
 
   cleanupEventListeners() {
     document.removeEventListener('keydown', this.DOMKeydownListener)
-  }
-
-  disconnect() {
-    this.cleanupEventListeners()
+    document.removeEventListener('pointerdown', this.DOMClickListener)
   }
 }
+
+type Dialog = InstanceType<typeof DialogController>
+
+export { DialogController }
+export type { Dialog }

data/app/typescript/controllers/dropdown_menu_controller.ts

@@ -0,0 +1,309 @@
+import { DropdownMenuSub } from './dropdown_menu_sub_controller'
+import { Select } from './select_controller'
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+import { initFloatingUi } from '../utils/floating_ui'
+import {
+  getSameLevelItems,
+  focusTrigger,
+  hideContent,
+  showContent,
+  lockScroll,
+  unlockScroll,
+  getStimulusInstance,
+  onClickOutside,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  focusElement,
+} from '../utils'
+
+const onKeydown = (controller: DropdownMenu | Select, event: KeyboardEvent) => {
+  const key = event.key
+
+  if (['Tab', 'Enter', ' '].includes(key)) event.preventDefault()
+  if (key === 'Home') {
+    controller.focusItemByIndex(null, 0)
+  } else if (key === 'End') {
+    controller.focusItemByIndex(null, controller.items.length - 1)
+  } else if (key === 'Escape') {
+    controller.close()
+  }
+}
+
+const focusItemByIndex = (
+  controller: DropdownMenu | Select,
+  event: KeyboardEvent | null = null,
+  index: number | null = null,
+) => {
+  if (event !== null) {
+    const key = event.key
+
+    if (key === 'ArrowUp') {
+      controller.items[controller.items.length - 1].focus()
+    } else {
+      controller.items[0].focus()
+    }
+  } else if (index !== null) {
+    controller.items[index].focus()
+  }
+}
+
+const DropdownMenuController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'contentContainer', 'content', 'item']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly itemTargets: HTMLElement[]
+
+  // values
+  static values = {
+    isOpen: Boolean,
+  }
+  declare isOpenValue: boolean
+
+  // custom properties
+  declare closestContentSelector: string
+  declare items: HTMLElement[]
+  declare subMenuControllers: DropdownMenuSub[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  connect() {
+    this.closestContentSelector =
+      '[data-dropdown-menu-target="content"], [data-dropdown-menu-sub-target="content"]'
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: this.closestContentSelector,
+    })
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+  }
+
+  toggle(event: MouseEvent) {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open(event)
+    }
+  }
+
+  open(event: MouseEvent | KeyboardEvent) {
+    this.isOpenValue = true
+
+    // Sub menus are not connected to the DOM yet when dropdown menu is connected.
+    // So we initialize them here instead of in connect().
+    if (this.subMenuControllers === undefined) {
+      const subMenuControllers = [] as DropdownMenuSub[]
+
+      const subMenus = Array.from(
+        this.contentTarget.querySelectorAll(
+          '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+        ),
+      ) as HTMLElement[]
+
+      subMenus.forEach((subMenu) => {
+        const subMenuController = getStimulusInstance<DropdownMenuSub>(
+          'dropdown-menu-sub',
+          subMenu,
+        )
+
+        if (subMenuController) {
+          subMenuControllers.push(subMenuController)
+        }
+      })
+
+      this.subMenuControllers = subMenuControllers
+    }
+
+    let elementToFocus = null as HTMLElement | null
+
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+
+      if (['ArrowDown', 'Enter', ' '].includes(key)) {
+        elementToFocus = this.items[0]
+      }
+    } else {
+      elementToFocus = this.contentTarget
+    }
+
+    focusElement(elementToFocus)
+  }
+
+  close() {
+    this.isOpenValue = false
+    this.subMenuControllers.forEach((subMenuController) => {
+      subMenuController.closeImmediately()
+    })
+  }
+
+  focusItem(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    let items = [] as HTMLElement[]
+    const content = item.closest(this.closestContentSelector) as HTMLElement
+
+    const isSubMenu =
+      content.dataset.shadcnPhlexcomponents === 'dropdown-menu-sub-content'
+
+    if (isSubMenu) {
+      const subMenu = content.closest(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      )
+      const subMenuController = this.subMenuControllers.find(
+        (subMenuController) => subMenuController.element == subMenu,
+      )
+      if (subMenuController) {
+        items = subMenuController.items
+      }
+    } else {
+      items = this.items
+    }
+
+    const index = items.indexOf(item)
+
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+      let newIndex = 0
+
+      if (key === 'ArrowUp') {
+        newIndex = getPreviousEnabledIndex({
+          items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      } else {
+        newIndex = getNextEnabledIndex({
+          items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      }
+
+      items[newIndex].focus()
+    } else {
+      // item mouseover event
+      items[index].focus()
+    }
+
+    // Close submenus on the same level
+    const subMenusInContent = Array.from(
+      content.querySelectorAll(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      ),
+    ) as HTMLElement[]
+
+    subMenusInContent.forEach((subMenu) => {
+      const subMenuController = this.subMenuControllers.find(
+        (subMenuController) => subMenuController.element == subMenu,
+      )
+
+      if (subMenuController) {
+        subMenuController.closeImmediately()
+      }
+    })
+  }
+
+  onItemFocus(event: FocusEvent) {
+    const item = event.currentTarget as HTMLElement
+    item.tabIndex = 0
+  }
+
+  onItemBlur(event: FocusEvent) {
+    const item = event.currentTarget as HTMLElement
+    item.tabIndex = -1
+  }
+
+  focusItemByIndex(
+    event: KeyboardEvent | null = null,
+    index: number | null = null,
+  ) {
+    focusItemByIndex(this, event, index)
+  }
+
+  focusContent(event: MouseEvent) {
+    const item = event.currentTarget as HTMLElement
+    const content = item.closest(this.closestContentSelector) as HTMLElement
+    content.focus()
+  }
+
+  select(event: MouseEvent | KeyboardEvent) {
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+      const item = (event.currentTarget || event.target) as HTMLElement
+
+      // For rails button_to
+      if (item && (key === 'Enter' || key === ' ')) {
+        item.click()
+      }
+    }
+
+    this.close()
+  }
+
+  clickOutside(event: MouseEvent) {
+    onClickOutside(this, event)
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      lockScroll(this.contentTarget.id)
+
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+        setEqualWidth: false,
+      })
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      })
+
+      this.setupEventListeners()
+    } else {
+      unlockScroll(this.contentTarget.id)
+
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    onKeydown(this, event)
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+}
+
+type DropdownMenu = InstanceType<typeof DropdownMenuController>
+
+export { DropdownMenuController, onKeydown, focusItemByIndex }
+export type { DropdownMenu }

data/app/{javascript → typescript}/controllers/dropdown_menu_sub_controller.ts

@@ -1,27 +1,31 @@
 import { Controller } from '@hotwired/stimulus'
+import { initFloatingUi } from '../utils/floating_ui'
 import {
-  initFloatingUi,
   ON_OPEN_FOCUS_DELAY,
   getSameLevelItems,
   showContent,
   hideContent,
+  getStimulusInstance,
 } from '../utils'
 
-export default class extends Controller<HTMLElement> {
+const DropdownMenuSubController = class extends Controller<HTMLElement> {
+  // targets
   static targets = ['trigger', 'contentContainer', 'content']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
 
+  // values
   static values = {
     isOpen: Boolean,
   }
-
   declare isOpenValue: boolean
-  declare readonly triggerTarget: HTMLElement
-  declare readonly contentContainerTarget: HTMLElement
-  declare readonly contentTarget: HTMLElement
-  declare DOMKeydownListener: (event: KeyboardEvent) => void
-  declare cleanup: () => void
+
+  // custom properties
   declare closeTimeout: number
   declare items: HTMLElement[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
 
   connect() {
     this.items = getSameLevelItems({
@@ -31,14 +35,10 @@ export default class extends Controller<HTMLElement> {
           '[data-dropdown-menu-target="item"], [data-dropdown-menu-sub-target="trigger"]',
         ),
       ),
-      closestContentSelector: this.closestContentSelector(),
+      closestContentSelector: '[data-dropdown-menu-sub-target="content"]',
     })
   }
 
-  closestContentSelector() {
-    return '[data-dropdown-menu-sub-target="content"]'
-  }
-
   open(event: MouseEvent | KeyboardEvent | null = null) {
     clearTimeout(this.closeTimeout)
     this.isOpenValue = true
@@ -60,7 +60,7 @@ export default class extends Controller<HTMLElement> {
     }, 250)
   }
 
-  closeOnLeftKeydown(event: KeyboardEvent) {
+  closeOnLeftKeydown() {
     this.closeImmediately()
     this.triggerTarget.focus()
   }
@@ -87,22 +87,17 @@ export default class extends Controller<HTMLElement> {
     if (parentContent) {
       const subMenu = parentContent.closest(
         '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
-      )
+      ) as HTMLElement
 
       if (subMenu) {
-        const subMenuController =
-          window.Stimulus.getControllerForElementAndIdentifier(
-            subMenu,
-            'dropdown-menu-sub',
-          )
+        const subMenuController = getStimulusInstance<DropdownMenuSub>(
+          'dropdown-menu-sub',
+          subMenu,
+        )
 
         if (subMenuController) {
-          // @ts-ignore
           subMenuController.closeImmediately()
           setTimeout(() => {
-            // @ts-ignore
-            // weird bug where focus goes to body element after closing, and setting focus
-            // manually doesn't work
             subMenuController.triggerTarget.focus()
           }, 100)
         }
@@ -114,11 +109,7 @@ export default class extends Controller<HTMLElement> {
     this.isOpenValue = false
   }
 
-  cleanupEventListeners() {
-    if (this.cleanup) this.cleanup()
-  }
-
-  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+  isOpenValueChanged(isOpen: boolean) {
     if (isOpen) {
       showContent({
         trigger: this.triggerTarget,
@@ -141,10 +132,21 @@ export default class extends Controller<HTMLElement> {
           contentContainer: this.contentContainerTarget,
         })
       })
+
+      this.cleanupEventListeners()
     }
   }
 
   disconnect() {
     this.cleanupEventListeners()
   }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+  }
 }
+
+type DropdownMenuSub = InstanceType<typeof DropdownMenuSubController>
+
+export { DropdownMenuSubController }
+export type { DropdownMenuSub }

data/app/{javascript → typescript}/controllers/form_field_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+const FormFieldController = class extends Controller {
   connect() {
     const hintContainer = this.element.querySelector('[data-remove-label]')
     const labelContainer = this.element.querySelector('[data-remove-hint]')
@@ -20,3 +20,8 @@ export default class extends Controller {
     }
   }
 }
+
+type FormField = InstanceType<typeof FormFieldController>
+
+export { FormFieldController }
+export type { FormField }

data/app/{javascript → typescript}/controllers/hover_card_controller.ts

@@ -1,20 +1,25 @@
 import { Controller } from '@hotwired/stimulus'
 import { useHover } from 'stimulus-use'
-import { initFloatingUi, showContent, hideContent } from '../utils'
+import { initFloatingUi } from '../utils/floating_ui'
+import { showContent, hideContent } from '../utils'
 
-export default class extends Controller<HTMLElement> {
+const HoverCardController = class extends Controller<HTMLElement> {
+  // targets
   static targets = ['trigger', 'content', 'contentContainer']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+
+  // values
   static values = {
     isOpen: Boolean,
   }
-
   declare isOpenValue: boolean
-  declare readonly triggerTarget: HTMLElement
-  declare readonly contentTarget: HTMLElement
-  declare readonly contentContainerTarget: HTMLElement
-  declare cleanup: () => void
+
+  // custom properties
   declare closeTimeout: number
   declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
 
   connect() {
     this.DOMKeydownListener = this.onDOMKeydown.bind(this)
@@ -42,25 +47,6 @@ export default class extends Controller<HTMLElement> {
     this.close()
   }
 
-  setupEventListeners() {
-    document.addEventListener('keydown', this.DOMKeydownListener)
-  }
-
-  cleanupEventListeners() {
-    if (this.cleanup) this.cleanup()
-    document.removeEventListener('keydown', this.DOMKeydownListener)
-  }
-
-  onDOMKeydown(event: KeyboardEvent) {
-    if (!this.isOpenValue) return
-
-    const key = event.key
-
-    if (key === 'Escape') {
-      this.close()
-    }
-  }
-
   isOpenValueChanged(isOpen: boolean) {
     if (isOpen) {
       showContent({
@@ -90,4 +76,28 @@ export default class extends Controller<HTMLElement> {
   disconnect() {
     this.cleanupEventListeners()
   }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
 }
+
+type HoverCard = InstanceType<typeof HoverCardController>
+
+export { HoverCardController }
+export type { HoverCard }