shadcn_phlexcomponents 0.1.11 → 0.1.16

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

data/app/typescript/controllers/select_controller.ts

@@ -0,0 +1,341 @@
+import { useClickOutside } from 'stimulus-use'
+import { onKeydown, focusItemByIndex } from './dropdown_menu_controller'
+import { initFloatingUi } from '../utils/floating_ui'
+import {
+  getSameLevelItems,
+  focusTrigger,
+  hideContent,
+  showContent,
+  lockScroll,
+  unlockScroll,
+  onClickOutside,
+  setGroupLabelsId,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  focusElement,
+} from '../utils'
+import { Controller } from '@hotwired/stimulus'
+
+const SelectController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = [
+    'trigger',
+    'contentContainer',
+    'content',
+    'item',
+    'triggerText',
+    'group',
+    'select',
+  ]
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly itemTargets: HTMLElement[]
+  declare triggerTextTarget: HTMLElement
+  declare groupTargets: HTMLElement[]
+  declare selectTarget: HTMLSelectElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+  }
+  declare isOpenValue: boolean
+  declare selectedValue: string
+
+  // custom properties
+  declare searchString: string
+  declare searchTimeout: number
+  declare itemsInnerText: string[]
+  declare items: HTMLElement[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  connect() {
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: '[data-select-target="content"]',
+    })
+    this.itemsInnerText = this.items.map((i) => i.innerText.trim())
+    this.searchString = ''
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    setGroupLabelsId(this)
+  }
+
+  toggle(event: MouseEvent) {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open(event)
+    }
+  }
+
+  open(event: MouseEvent | KeyboardEvent) {
+    this.isOpenValue = true
+
+    let elementToFocus = null as HTMLElement | null
+
+    if (this.selectedValue) {
+      const item = this.itemTargets.find(
+        (i) => i.dataset.value === this.selectedValue,
+      )
+
+      if (item && !item.dataset.disabled) {
+        elementToFocus = item
+      }
+    }
+
+    if (!elementToFocus) {
+      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
+  }
+
+  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)
+  }
+
+  focusItem(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    const index = this.items.indexOf(item)
+
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+      let newIndex = 0
+
+      if (key === 'ArrowUp') {
+        newIndex = getPreviousEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      } else {
+        newIndex = getNextEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      }
+
+      this.items[newIndex].focus()
+    } else {
+      // item mouseover event
+      this.items[index].focus()
+    }
+  }
+
+  focusContent() {
+    this.contentTarget.focus()
+  }
+
+  select(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    const value = item.dataset.value as string
+    this.selectedValue = value
+    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: true,
+      })
+
+      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()
+    }
+  }
+
+  selectedValueChanged(value: string) {
+    const item = this.itemTargets.find((i) => i.dataset.value === value)
+
+    if (item) {
+      this.triggerTextTarget.textContent = item.textContent
+
+      this.itemTargets.forEach((i) => {
+        if (i.dataset.value === value) {
+          i.setAttribute('aria-selected', 'true')
+        } else {
+          i.setAttribute('aria-selected', 'false')
+        }
+      })
+
+      this.selectTarget.value = value
+    }
+
+    this.triggerTarget.dataset.hasValue = `${!!value && value.length > 0}`
+
+    const placeholder = this.triggerTarget.dataset.placeholder
+
+    if (placeholder && this.triggerTarget.dataset.hasValue === 'false') {
+      this.triggerTextTarget.textContent = placeholder
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    onKeydown(this, event)
+
+    const { key, altKey, ctrlKey, metaKey } = event
+
+    if (
+      key === 'Backspace' ||
+      key === 'Clear' ||
+      (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
+    ) {
+      this.handleSearch(key)
+    }
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+  protected handleSearch(char: string) {
+    const searchString = this.getSearchString(char)
+    const focusedItem = this.items.find(
+      (item) => document.activeElement === item,
+    )
+    const focusedIndex = focusedItem ? this.items.indexOf(focusedItem) : 0
+    const searchIndex = this.getIndexByLetter(searchString, focusedIndex + 1)
+
+    // if a match was found, go to it
+    if (searchIndex >= 0) {
+      this.focusItemByIndex(null, searchIndex)
+    }
+    // if no matches, clear the timeout and search string
+    else {
+      window.clearTimeout(this.searchTimeout)
+      this.searchString = ''
+    }
+  }
+
+  protected filterItemsInnerText(items: string[], filter: string) {
+    return items.filter((item) => {
+      const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0
+      return matches
+    })
+  }
+
+  protected getSearchString(char: string) {
+    // reset typing timeout and start new timeout
+    // this allows us to make multiple-letter matches, like a native select
+    if (typeof this.searchTimeout === 'number') {
+      window.clearTimeout(this.searchTimeout)
+    }
+
+    this.searchTimeout = window.setTimeout(() => {
+      this.searchString = ''
+    }, 500)
+
+    // add most recent letter to saved search string
+    this.searchString += char
+    return this.searchString
+  }
+
+  // return the index of an option from an array of options, based on a search string
+  // if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
+  protected getIndexByLetter(filter: string, startIndex: number) {
+    const orderedItems = [
+      ...this.itemsInnerText.slice(startIndex),
+      ...this.itemsInnerText.slice(0, startIndex),
+    ]
+
+    const firstMatch = this.filterItemsInnerText(orderedItems, filter)[0]
+
+    const allSameLetter = (array: string[]) =>
+      array.every((letter) => letter === array[0])
+
+    // first check if there is an exact match for the typed string
+    if (firstMatch) {
+      const index = this.itemsInnerText.indexOf(firstMatch)
+      return index
+    }
+
+    // if the same letter is being repeated, cycle through first-letter matches
+    else if (allSameLetter(filter.split(''))) {
+      const matches = this.filterItemsInnerText(orderedItems, filter[0])
+      const index = this.itemsInnerText.indexOf(matches[0])
+      return index
+    }
+
+    // if no matches, return -1
+    else {
+      return -1
+    }
+  }
+}
+
+type Select = InstanceType<typeof SelectController>
+
+export { SelectController }
+export type { Select }

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

@@ -1,17 +1,19 @@
 import { Controller } from '@hotwired/stimulus'
 import noUiSlider, { API, Options } from 'nouislider'
 
-export default class extends Controller<HTMLElement> {
+const SliderController = class extends Controller<HTMLElement> {
+  // targets
   static targets = ['slider', 'hiddenInput', 'endHiddenInput']
-
   declare readonly sliderTarget: HTMLInputElement
   declare readonly hiddenInputTarget: HTMLInputElement
   declare readonly endHiddenInputTarget: HTMLInputElement
   declare readonly hasEndHiddenInputTarget: boolean
-  declare onUpdateValuesListener: (values: (string | number)[]) => void
-  declare DOMClickListener: (event: MouseEvent) => void
+
+  // custom properties
   declare range: boolean
   declare slider: API
+  declare onUpdateValuesListener: (values: (string | number)[]) => void
+  declare DOMClickListener: (event: MouseEvent) => void
 
   connect() {
     this.range = this.element.dataset.range === 'true'
@@ -35,15 +37,11 @@ export default class extends Controller<HTMLElement> {
     document.addEventListener('click', this.DOMClickListener)
   }
 
-  onUpdateValues(values: (string | number)[]) {
-    this.hiddenInputTarget.value = `${values[0]}`
-
-    if (this.range && this.hasEndHiddenInputTarget) {
-      this.endHiddenInputTarget.value = `${values[1]}`
-    }
+  disconnect() {
+    document.removeEventListener('click', this.DOMClickListener)
   }
 
-  getOptions() {
+  protected getOptions() {
     const defaultOptions = {
       connect: this.range ? true : 'lower',
       tooltips: true,
@@ -84,7 +82,15 @@ export default class extends Controller<HTMLElement> {
     }
   }
 
-  onDOMClick(event: MouseEvent) {
+  protected onUpdateValues(values: (string | number)[]) {
+    this.hiddenInputTarget.value = `${values[0]}`
+
+    if (this.range && this.hasEndHiddenInputTarget) {
+      this.endHiddenInputTarget.value = `${values[1]}`
+    }
+  }
+
+  protected onDOMClick(event: MouseEvent) {
     const target = event.target
 
     // Focus handle of slider when label is clicked.
@@ -100,8 +106,9 @@ export default class extends Controller<HTMLElement> {
       }
     }
   }
-
-  disconnect() {
-    document.removeEventListener('click', this.DOMClickListener)
-  }
 }
+
+type Slider = InstanceType<typeof SliderController>
+
+export { SliderController }
+export type { Slider }

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

@@ -1,13 +1,15 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller<HTMLElement> {
+const SwitchController = class extends Controller<HTMLElement> {
+  // targets
   static targets = ['input', 'thumb']
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly thumbTarget: HTMLElement
+
+  // values
   static values = {
     isChecked: Boolean,
   }
-
-  declare readonly inputTarget: HTMLInputElement
-  declare readonly thumbTarget: HTMLElement
   declare isCheckedValue: boolean
 
   toggle() {
@@ -28,3 +30,8 @@ export default class extends Controller<HTMLElement> {
     }
   }
 }
+
+type Switch = InstanceType<typeof SwitchController>
+
+export { SwitchController }
+export type { Switch }