shadcn_phlexcomponents 0.1.11 → 0.1.14

data/app/javascript/controllers/select_controller.ts

@@ -1,6 +1,23 @@
-import DropdownMenuRootController from './dropdown_menu_root_controller'
-
-export default class extends DropdownMenuRootController {
+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',
@@ -8,49 +25,57 @@ export default class extends DropdownMenuRootController {
     'item',
     'triggerText',
     'group',
-    'label',
     '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,
-    setEqualWidth: { type: Boolean, default: true },
-    closestContentSelector: {
-      type: String,
-      default: '[data-select-target="content"]',
-    },
   }
-
+  declare isOpenValue: boolean
   declare selectedValue: string
+
+  // custom properties
   declare searchString: string
   declare searchTimeout: number
-  declare groupTargets: HTMLElement[]
-  declare triggerTextTarget: HTMLElement
-  declare selectTarget: HTMLSelectElement
   declare itemsInnerText: string[]
+  declare items: HTMLElement[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
 
   connect() {
-    super.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.setAriaLabelledby()
     this.searchString = ''
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    setGroupLabelsId(this)
   }
 
-  setAriaLabelledby() {
-    this.groupTargets.forEach((g) => {
-      const label = g.querySelector(
-        '[data-select-target="label"]',
-      ) as HTMLElement
-
-      if (label) {
-        label.id = g.getAttribute('aria-labelledby') as string
-      }
-    })
+  toggle(event: MouseEvent) {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open(event)
+    }
   }
 
-  onOpenFocusedElement(event: MouseEvent | KeyboardEvent) {
-    let itemIndex = null as number | null
+  open(event: MouseEvent | KeyboardEvent) {
+    this.isOpenValue = true
+
+    let elementToFocus = null as HTMLElement | null
 
     if (this.selectedValue) {
       const item = this.itemTargets.find(
@@ -58,33 +83,161 @@ export default class extends DropdownMenuRootController {
       )
 
       if (item && !item.dataset.disabled) {
-        itemIndex = this.items.indexOf(item)
+        elementToFocus = item
       }
-    } else {
+    }
+
+    if (!elementToFocus) {
       if (event instanceof KeyboardEvent) {
         const key = event.key
 
         if (['ArrowDown', 'Enter', ' '].includes(key)) {
-          itemIndex = 0
+          elementToFocus = this.items[0]
         }
+      } else {
+        elementToFocus = this.contentTarget
       }
     }
 
-    if (itemIndex !== null) {
-      return this.items[itemIndex]
+    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 {
-      return this.contentTarget
+      // item mouseover event
+      this.items[index].focus()
     }
   }
 
-  onSelect(event: MouseEvent | KeyboardEvent) {
+  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()
+    }
   }
 
-  onDOMKeydown(event: KeyboardEvent) {
-    super.onDOMKeydown(event)
+  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
 
@@ -97,8 +250,17 @@ export default class extends DropdownMenuRootController {
     }
   }
 
+  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/
-  handleSearch(char: string) {
+  protected handleSearch(char: string) {
     const searchString = this.getSearchString(char)
     const focusedItem = this.items.find(
       (item) => document.activeElement === item,
@@ -117,14 +279,14 @@ export default class extends DropdownMenuRootController {
     }
   }
 
-  filterItemsInnerText(items: string[], filter: string) {
+  protected filterItemsInnerText(items: string[], filter: string) {
     return items.filter((item) => {
       const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0
       return matches
     })
   }
 
-  getSearchString(char: string) {
+  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') {
@@ -142,7 +304,7 @@ export default class extends DropdownMenuRootController {
 
   // 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
-  getIndexByLetter(filter: string, startIndex: number) {
+  protected getIndexByLetter(filter: string, startIndex: number) {
     const orderedItems = [
       ...this.itemsInnerText.slice(startIndex),
       ...this.itemsInnerText.slice(0, startIndex),
@@ -171,30 +333,9 @@ export default class extends DropdownMenuRootController {
       return -1
     }
   }
+}
 
-  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}`
+type Select = InstanceType<typeof SelectController>
 
-    const placeholder = this.triggerTarget.dataset.placeholder
-
-    if (placeholder && this.triggerTarget.dataset.hasValue === 'false') {
-      this.triggerTextTarget.textContent = placeholder
-    }
-  }
-}
+export { SelectController }
+export type { Select }

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

data/app/javascript/controllers/tabs_controller.ts

@@ -1,18 +1,21 @@
 import { Controller } from '@hotwired/stimulus'
+import { getNextEnabledIndex, getPreviousEnabledIndex } from '../utils'
 
-export default class extends Controller {
+const TabsController = class extends Controller {
+  // targets
   static targets = ['trigger', 'content']
+  declare readonly triggerTargets: HTMLButtonElement[]
+  declare readonly contentTargets: HTMLElement[]
+
+  // values
   static values = {
     active: String,
   }
-
-  declare readonly triggerTargets: HTMLButtonElement[]
-  declare readonly contentTargets: HTMLElement[]
-  declare activeValue: string | undefined
+  declare activeValue: string
 
   connect() {
     if (!this.activeValue) {
-      this.activeValue = this.triggerTargets[0].dataset.value
+      this.activeValue = this.triggerTargets[0].dataset.value as string
     }
   }
 
@@ -20,7 +23,7 @@ export default class extends Controller {
     const target = event.currentTarget as HTMLButtonElement
 
     if (event instanceof MouseEvent) {
-      this.activeValue = target.dataset.value
+      this.activeValue = target.dataset.value as string
     } else {
       const key = event.key
 
@@ -32,20 +35,20 @@ export default class extends Controller {
       let newIndex = 0
 
       if (key === 'ArrowLeft') {
-        newIndex = index - 1
-
-        if (newIndex < 0) {
-          newIndex = focusableTriggers.length - 1
-        }
+        newIndex = getPreviousEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
+        })
       } else {
-        newIndex = index + 1
-
-        if (newIndex > focusableTriggers.length - 1) {
-          newIndex = 0
-        }
+        newIndex = getNextEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
+        })
       }
 
-      this.activeValue = focusableTriggers[newIndex].dataset.value
+      this.activeValue = focusableTriggers[newIndex].dataset.value as string
       focusableTriggers[newIndex].focus()
     }
   }
@@ -77,3 +80,8 @@ export default class extends Controller {
     })
   }
 }
+
+type Tabs = InstanceType<typeof TabsController>
+
+export { TabsController }
+export type { Tabs }

data/app/javascript/controllers/theme_switcher_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+const ThemeSwitcherController = class extends Controller {
   initialize() {
     if (
       localStorage.theme === 'dark' ||
@@ -33,3 +33,8 @@ export default class extends Controller {
     document.documentElement.style.colorScheme = 'dark'
   }
 }
+
+type ThemeSwitcher = InstanceType<typeof ThemeSwitcherController>
+
+export { ThemeSwitcherController }
+export type { ThemeSwitcher }

data/app/javascript/controllers/toast_container_controller.ts

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 import DOMPurify from 'dompurify'
 
-export default class extends Controller<HTMLElement> {
+const ToastContainerController = class extends Controller<HTMLElement> {
   addToast({
     title,
     description,
@@ -60,3 +60,8 @@ export default class extends Controller<HTMLElement> {
     this.element.append(clone)
   }
 }
+
+type ToastContainer = InstanceType<typeof ToastContainerController>
+
+export { ToastContainerController }
+export type { ToastContainer }

data/app/javascript/controllers/toast_controller.ts

@@ -1,7 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 import { ANIMATION_OUT_DELAY } from '../utils'
 
-export default class extends Controller<HTMLElement> {
+const ToastController = class extends Controller<HTMLElement> {
+  // custom properties
   declare duration: number
   declare closeTimeout: number
 
@@ -26,3 +27,8 @@ export default class extends Controller<HTMLElement> {
     }
   }
 }
+
+type Toast = InstanceType<typeof ToastController>
+
+export { ToastController }
+export type { Toast }

data/app/javascript/controllers/toggle_controller.ts

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+const ToggleController = class extends Controller<HTMLElement> {
+  // values
+  static values = {
+    isOn: Boolean,
+  }
+  declare isOnValue: boolean
+
+  toggle() {
+    this.isOnValue = !this.isOnValue
+  }
+
+  isOnValueChanged(isOn: boolean) {
+    if (isOn) {
+      this.element.dataset.state = 'on'
+      this.element.ariaPressed = 'true'
+    } else {
+      this.element.dataset.state = 'off'
+      this.element.ariaPressed = 'false'
+    }
+  }
+}
+
+type Toggle = InstanceType<typeof ToggleController>
+
+export { ToggleController }
+export type { Toggle }

data/app/javascript/controllers/toggle_group_controller.ts

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+const ToggleController = class extends Controller<HTMLElement> {
+  // values
+  static values = {
+    isOn: Boolean,
+  }
+  declare isOnValue: boolean
+
+  toggle() {
+    this.isOnValue = !this.isOnValue
+  }
+
+  isOnValueChanged(isOn: boolean) {
+    if (isOn) {
+      this.element.dataset.state = 'on'
+      this.element.ariaPressed = 'true'
+    } else {
+      this.element.dataset.state = 'off'
+      this.element.ariaPressed = 'false'
+    }
+  }
+}
+
+type Toggle = InstanceType<typeof ToggleController>
+
+export { ToggleController }
+export type { Toggle }