shadcn_phlexcomponents 0.1.11 → 0.1.14

data/app/javascript/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 }

data/app/javascript/controllers/loading_button_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller<HTMLButtonElement> {
+const LoadingButtonController = class extends Controller<HTMLButtonElement> {
   connect() {
     const el = this.element
     const form = el.closest('form')
@@ -13,3 +13,8 @@ export default class extends Controller<HTMLButtonElement> {
     }
   }
 }
+
+type LoadingButton = InstanceType<typeof LoadingButtonController>
+
+export { LoadingButtonController }
+export type { LoadingButton }

data/app/javascript/controllers/popover_controller.ts

@@ -1,22 +1,28 @@
 import { Controller } from '@hotwired/stimulus'
 import { useClickOutside } from 'stimulus-use'
+import { initFloatingUi } from '../utils/floating_ui'
 import {
-  initFloatingUi,
   focusTrigger,
-  ON_OPEN_FOCUS_DELAY,
   getFocusableElements,
   showContent,
   hideContent,
+  onClickOutside,
+  handleTabNavigation,
+  focusElement,
 } from '../utils'
 
-export default class extends Controller<HTMLElement> {
+const PopoverController = class extends Controller<HTMLElement> {
+  // targets
   static targets = ['trigger', 'contentContainer', 'content']
-  static values = { isOpen: Boolean }
-
-  declare isOpenValue: boolean
   declare readonly triggerTarget: HTMLElement
   declare readonly contentContainerTarget: HTMLElement
   declare readonly contentTarget: HTMLElement
+
+  // values
+  static values = { isOpen: Boolean }
+  declare isOpenValue: boolean
+
+  // custom properties
   declare DOMKeydownListener: (event: KeyboardEvent) => void
   declare cleanup: () => void
 
@@ -35,67 +41,18 @@ export default class extends Controller<HTMLElement> {
 
   open() {
     this.isOpenValue = true
-    this.onOpen()
-
-    setTimeout(() => {
-      this.onOpenFocusedElement().focus()
-    }, ON_OPEN_FOCUS_DELAY)
   }
 
   close() {
     this.isOpenValue = false
-    this.onClose()
-  }
-
-  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()
-      }
-    }
   }
 
   clickOutside(event: MouseEvent) {
-    const target = event.target
-    // Let #toggle to handle state when clicked on trigger
-    if (target === this.triggerTarget) return
-
-    this.close()
-  }
-
-  onOpen() {}
-
-  onOpenFocusedElement() {
-    const focusableElements = getFocusableElements(this.contentTarget)
-    return focusableElements[0]
-  }
-
-  onClose() {}
-
-  referenceElement() {
-    return this.triggerTarget
+    onClickOutside(this, event)
   }
 
   isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
-    if (isOpen === true) {
+    if (isOpen) {
       showContent({
         trigger: this.triggerTarget,
         content: this.contentTarget,
@@ -103,12 +60,16 @@ export default class extends Controller<HTMLElement> {
       })
 
       this.cleanup = initFloatingUi({
-        referenceElement: this.referenceElement(),
+        referenceElement: this.triggerTarget,
         floatingElement: this.contentContainerTarget,
         side: this.contentTarget.dataset.side,
         align: this.contentTarget.dataset.align,
         sideOffset: 4,
       })
+
+      const focusableElements = getFocusableElements(this.contentTarget)
+      focusElement(focusableElements[0])
+
       this.setupEventListeners()
     } else {
       hideContent({
@@ -117,25 +78,41 @@ export default class extends Controller<HTMLElement> {
         contentContainer: this.contentContainerTarget,
       })
 
-      this.cleanupEventListeners()
-
-      // Only focus trigger when is previously opened
       if (previousIsOpen) {
         focusTrigger(this.triggerTarget)
       }
+
+      this.cleanupEventListeners()
     }
   }
 
-  setupEventListeners() {
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected setupEventListeners() {
     document.addEventListener('keydown', this.DOMKeydownListener)
   }
 
-  cleanupEventListeners() {
+  protected cleanupEventListeners() {
     if (this.cleanup) this.cleanup()
     document.removeEventListener('keydown', this.DOMKeydownListener)
   }
 
-  disconnect() {
-    this.cleanupEventListeners()
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    } else if (key === 'Tab') {
+      handleTabNavigation(this.contentTarget, event)
+    }
   }
 }
+
+type Popover = InstanceType<typeof PopoverController>
+
+export { PopoverController }
+export type { Popover }

data/app/javascript/controllers/progress_controller.ts

@@ -1,13 +1,14 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+const ProgressController = class extends Controller {
+  // targets
   static targets = ['indicator']
+  declare readonly indicatorTarget: HTMLElement
 
+  // values
   static values = {
     percent: Number,
   }
-
-  declare readonly indicatorTarget: HTMLElement
   declare percentValue: number
 
   percentValueChanged(value: number) {
@@ -15,3 +16,8 @@ export default class extends Controller {
     this.indicatorTarget.style.transform = `translateX(-${100 - value}%)`
   }
 }
+
+type Progress = InstanceType<typeof ProgressController>
+
+export { ProgressController }
+export type { Progress }

data/app/javascript/controllers/radio_group_controller.ts

@@ -1,14 +1,16 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller<HTMLElement> {
+const RadioGroupController = class extends Controller<HTMLElement> {
+  // targets
   static targets = ['item', 'input', 'indicator']
-  static values = {
-    selected: String,
-  }
-
   declare readonly itemTargets: HTMLInputElement[]
   declare readonly inputTargets: HTMLInputElement[]
   declare readonly indicatorTargets: HTMLInputElement[]
+
+  // values
+  static values = {
+    selected: String,
+  }
   declare selectedValue: string
 
   connect() {
@@ -22,10 +24,6 @@ export default class extends Controller<HTMLElement> {
     this.selectedValue = item.dataset.value as string
   }
 
-  preventDefault(event: KeyboardEvent) {
-    event.preventDefault()
-  }
-
   selectItem(event: KeyboardEvent) {
     const focusableItems = this.itemTargets.filter(
       (t) => !t.disabled,
@@ -53,6 +51,10 @@ export default class extends Controller<HTMLElement> {
     this.selectedValue = focusableItems[newIndex].dataset.value as string
   }
 
+  preventDefault(event: KeyboardEvent) {
+    event.preventDefault()
+  }
+
   focusItem() {
     const item = this.itemTargets.find(
       (i) => i.dataset.value === this.selectedValue,
@@ -104,3 +106,8 @@ export default class extends Controller<HTMLElement> {
     this.focusItem()
   }
 }
+
+type RadioGroup = InstanceType<typeof RadioGroupController>
+
+export { RadioGroupController }
+export type { RadioGroup }