shadcn_phlexcomponents 0.1.5 → 0.1.9

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -1,17 +1,17 @@
 import { Controller } from '@hotwired/stimulus'
 import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-} from '@floating-ui/dom'
+  ANIMATION_OUT_DELAY,
+  FOCUS_DELAY,
+  lockScroll,
+  unlockScroll,
+  initFloatingUi,
+  focusTrigger,
+} from '../utils'
 
 export default class extends Controller {
   static targets = ['trigger', 'contentWrapper', 'content', 'item']
 
   connect() {
-    this.contentTarget.dataset.state = this.isOpen() ? 'open' : 'closed'
     this.DOMClickListener = this.onDOMClick.bind(this)
     this.DOMKeydownListener = this.onDOMKeydown.bind(this)
     this.items = this.itemTargets.filter(
@@ -32,7 +32,7 @@ export default class extends Controller {
       if (['ArrowDown', 'Enter', ' '].includes(key)) {
         setTimeout(() => {
           this.focusItem(null, 0)
-        }, 100)
+        }, FOCUS_DELAY)
       }
     }
   }
@@ -42,6 +42,7 @@ export default class extends Controller {
   }
 
   open() {
+    lockScroll()
     this.contentWrapperTarget.classList.remove('hidden')
     this.triggerTarget.ariaExpanded = true
     this.triggerTarget.dataset.state = 'open'
@@ -49,53 +50,30 @@ export default class extends Controller {
 
     setTimeout(() => {
       this.focusContent()
-    }, 100)
+    }, FOCUS_DELAY * 1.25)
 
     this.setupEventListeners()
 
-    if (window.innerHeight < document.documentElement.scrollHeight) {
-      document.body.dataset.scrollLocked = 1
-    }
-
-    this.cleanup = autoUpdate(
+    this.cleanup = initFloatingUi(
       this.triggerTarget,
       this.contentWrapperTarget,
-      () => {
-        computePosition(this.triggerTarget, this.contentWrapperTarget, {
-          placement: this.element.dataset.side,
-          strategy: 'fixed',
-          middleware: [flip(), shift(), offset(4)],
-        }).then(({ x, y }) => {
-          Object.assign(this.contentWrapperTarget.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        })
-      },
+      this.element.dataset.side,
     )
   }
 
   close() {
+    unlockScroll()
     this.triggerTarget.ariaExpanded = false
     this.triggerTarget.dataset.state = 'closed'
     this.contentTarget.dataset.state = 'closed'
     this.cleanup()
     this.cleanupEventListeners()
-    delete document.body.dataset.scrollLocked
 
     setTimeout(() => {
       this.contentWrapperTarget.classList.add('hidden')
-    }, 100)
-
-    this.focusTrigger()
-  }
+    }, ANIMATION_OUT_DELAY)
 
-  focusTrigger() {
-    if (this.triggerTarget.dataset.asChild === 'false') {
-      this.triggerTarget.firstElementChild.focus()
-    } else {
-      this.triggerTarget.focus()
-    }
+    focusTrigger(this.triggerTarget)
   }
 
   focusItem(event = null, index = null) {

data/app/javascript/controllers/form_field_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['trigger', 'content', 'item']
+
+  connect() {
+    const hintContainer = this.element.querySelector('[data-remove-label]')
+    const labelContainer = this.element.querySelector('[data-remove-hint]')
+
+    if (hintContainer) {
+      const label = hintContainer.querySelector('label')
+      const hint = hintContainer.querySelector('p')
+      label.remove()
+      hintContainer.replaceWith(hint)
+    }
+
+    if (labelContainer) {
+      const hint = labelContainer.querySelector('p')
+      const label = labelContainer.querySelector('label')
+      hint.remove()
+      labelContainer.replaceWith(label)
+    }
+  }
+}

data/app/javascript/controllers/hover_card_controller.js

@@ -1,26 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import tippy from 'tippy.js'
-
-const hideOnEsc = {
-  name: 'hideOnEsc',
-  defaultValue: true,
-  fn({ hide }) {
-    function onKeyDown(event) {
-      if (event.keyCode === 27) {
-        hide()
-      }
-    }
-
-    return {
-      onShow() {
-        document.addEventListener('keydown', onKeyDown)
-      },
-      onHide() {
-        document.removeEventListener('keydown', onKeyDown)
-      },
-    }
-  },
-}
+import { hideOnEsc } from '../utils'
 
 export default class extends Controller {
   static targets = ['trigger', 'content']
@@ -35,7 +15,6 @@ export default class extends Controller {
       arrow: false,
       placement: this.element.dataset.side,
       plugins: [hideOnEsc],
-      offset: [0, 4],
       delay: 250,
     })
   }

data/app/javascript/controllers/popover_controller.js

@@ -1,14 +1,13 @@
 import { Controller } from '@hotwired/stimulus'
 import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-} from '@floating-ui/dom'
+  ANIMATION_OUT_DELAY,
+  FOCUS_DELAY,
+  initFloatingUi,
+  focusTrigger,
+} from '../utils'
 
 export default class extends Controller {
-  static targets = ['trigger', 'contentWrapper', 'content', 'menuItem']
+  static targets = ['trigger', 'contentWrapper', 'content']
 
   connect() {
     this.DOMClickListener = this.onDOMClick.bind(this)
@@ -33,7 +32,6 @@ export default class extends Controller {
   onDOMClick(event) {
     if (!this.isOpen()) return
     if (this.element.contains(event.target)) return
-
     this.close()
   }
 
@@ -68,25 +66,20 @@ export default class extends Controller {
     this.contentTarget.dataset.state = 'open'
     this.setupEventListeners()
 
+    this.onOpen()
+  }
+
+  onOpen() {
     setTimeout(() => {
-      this.firstElement.focus()
-    }, 100)
+      if (this.firstElement) {
+        this.firstElement.focus()
+      }
+    }, FOCUS_DELAY * 1.25)
 
-    this.cleanup = autoUpdate(
+    this.cleanup = initFloatingUi(
       this.triggerTarget,
       this.contentWrapperTarget,
-      () => {
-        computePosition(this.triggerTarget, this.contentWrapperTarget, {
-          placement: this.element.dataset.side,
-          strategy: 'fixed',
-          middleware: [flip(), shift(), offset(4)],
-        }).then(({ x, y }) => {
-          Object.assign(this.contentWrapperTarget.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        })
-      },
+      this.element.dataset.side,
     )
   }
 
@@ -98,17 +91,13 @@ export default class extends Controller {
 
     setTimeout(() => {
       this.contentWrapperTarget.classList.add('hidden')
-    }, 100)
+    }, ANIMATION_OUT_DELAY)
 
-    this.focusTrigger()
+    this.onClose()
   }
 
-  focusTrigger() {
-    if (this.triggerTarget.dataset.asChild === 'false') {
-      this.triggerTarget.firstElementChild.focus()
-    } else {
-      this.triggerTarget.focus()
-    }
+  onClose() {
+    focusTrigger(this.triggerTarget)
   }
 
   // Global listeners

data/app/javascript/controllers/select_controller.js

@@ -1,11 +1,12 @@
 import { Controller } from '@hotwired/stimulus'
 import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-} from '@floating-ui/dom'
+  ANIMATION_OUT_DELAY,
+  FOCUS_DELAY,
+  lockScroll,
+  unlockScroll,
+  initFloatingUi,
+  focusTrigger,
+} from '../utils'
 
 export default class extends Controller {
   static targets = [
@@ -31,7 +32,7 @@ export default class extends Controller {
 
     this.items = [
       ...this.element.querySelectorAll(
-        '[data-shadcn-phlexcomponents--select-target="item"]:not([data-disabled])',
+        '[data-select-target="item"]:not([data-disabled])',
       ),
     ]
 
@@ -40,7 +41,6 @@ export default class extends Controller {
     this.resetSearchTimer = null
   }
 
-  // Methods
   toggle() {
     if (this.isOpen()) {
       this.close()
@@ -50,6 +50,7 @@ export default class extends Controller {
   }
 
   open() {
+    lockScroll()
     const triggerWidth = this.triggerTarget.offsetWidth
     this.contentWrapperTarget.classList.remove('hidden')
 
@@ -62,66 +63,47 @@ export default class extends Controller {
     this.triggerTarget.ariaExpanded = true
     this.contentTarget.dataset.state = 'open'
 
-    if (this.selectedValue) {
-      const item = this.itemTargets.find(
-        (i) => i.dataset.value === this.selectedValue,
-      )
+    setTimeout(() => {
+      if (this.selectedValue) {
+        const item = this.itemTargets.find(
+          (i) => i.dataset.value === this.selectedValue,
+        )
 
-      if (item && !item.dataset.disabled) {
-        item.focus()
+        if (item && !item.dataset.disabled) {
+          item.focus()
+        } else {
+          this.contentTarget.focus()
+        }
       } else {
-        this.contentTarget.focus()
+        this.focusItem(null, 0)
       }
-    } else {
-      this.focusItem(null, 0)
-    }
+    }, FOCUS_DELAY * 1.25)
 
-    if (window.innerHeight < document.documentElement.scrollHeight) {
-      document.body.dataset.scrollLocked = 1
-    }
     this.setupEventListeners()
-
-    this.cleanup = autoUpdate(
+    this.cleanup = initFloatingUi(
       this.triggerTarget,
       this.contentWrapperTarget,
-      () => {
-        computePosition(this.triggerTarget, this.contentWrapperTarget, {
-          placement: 'bottom',
-          strategy: 'fixed',
-          middleware: [flip(), shift(), offset(4)],
-        }).then(({ x, y }) => {
-          Object.assign(this.contentWrapperTarget.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        })
-      },
+      'bottom',
     )
   }
 
   close() {
+    unlockScroll()
     this.contentTarget.dataset.state = 'closed'
     this.triggerTarget.ariaExpanded = false
     this.cleanup()
     this.cleanupEventListeners()
-    delete document.body.dataset.scrollLocked
 
     setTimeout(() => {
       this.contentWrapperTarget.classList.add('hidden')
-    }, 100)
+    }, ANIMATION_OUT_DELAY)
 
-    if (this.triggerTarget.nodeName === 'DIV') {
-      this.triggerTarget.firstElementChild.focus()
-    } else {
-      this.triggerTarget.focus()
-    }
+    focusTrigger(this.triggerTarget)
   }
 
   setAriaLabelledby() {
     this.groupTargets.forEach((g) => {
-      const label = g.querySelector(
-        '[data-shadcn-phlexcomponents--select-target="label"]',
-      )
+      const label = g.querySelector('[data-select-target="label"]')
 
       if (label) {
         const ariaId = this.element.dataset.ariaId
@@ -216,14 +198,12 @@ export default class extends Controller {
       this.selectTarget.value = value
     }
 
-    delete this.triggerTarget.dataset.placeholder
-    const hasPlaceholder = this.triggerTarget.dataset.placeholderText
+    this.triggerTarget.dataset.hasValue = !!value && value.length > 0
 
-    if (hasPlaceholder) {
-      if (!value || value.length === 0) {
-        this.triggerTarget.dataset.placeholder = true
-        this.triggerTextTarget.textContent = hasPlaceholder
-      }
+    const placeholder = this.triggerTarget.dataset.placeholder
+
+    if (placeholder && this.triggerTarget.dataset.hasValue === 'false') {
+      this.triggerTextTarget.textContent = placeholder
     }
   }
 

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -8,7 +8,7 @@ export default class extends Controller {
   toggle() {
     const sidebar = this.application.getControllerForElementAndIdentifier(
       document.querySelector(`#${this.sidebarId}`),
-      'shadcn-phlexcomponents--sidebar',
+      'sidebar',
     )
     sidebar.toggle()
   }

data/app/javascript/controllers/toast_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-
+import { ANIMATION_OUT_DELAY } from '../utils'
 export default class extends Controller {
   connect() {
     this.focusableElements = this.element.querySelectorAll('button')
@@ -26,7 +26,7 @@ export default class extends Controller {
 
     setTimeout(() => {
       this.element.remove()
-    }, 100)
+    }, ANIMATION_OUT_DELAY)
   }
 
   dismiss(event) {

data/app/javascript/controllers/tooltip_controller.js

@@ -28,14 +28,13 @@ export default class extends Controller {
   connect() {
     const content = this.contentTarget.innerHTML
 
-    tippy(this.triggerTarget, {
+    this.tippy = tippy(this.triggerTarget, {
       content: content,
       allowHTML: true,
       interactive: true,
       arrow: false,
       placement: this.element.dataset.side,
       plugins: [hideOnEsc],
-      offset: [0, 4],
     })
   }
 }

data/app/javascript/shadcn_phlexcomponents.js

@@ -0,0 +1,53 @@
+import AccordionController from './controllers/accordion_controller'
+import AlertDialogController from './controllers/alert_dialog_controller'
+import AvatarController from './controllers/avatar_controller'
+import CheckboxController from './controllers/checkbox_controller'
+import CollapsibleController from './controllers/collapsible_controller'
+import ComboboxController from './controllers/combobox_controller'
+import DatePickerController from './controllers/date_picker_controller'
+import DateRangePickerController from './controllers/date_range_picker_controller'
+import DialogController from './controllers/dialog_controller'
+import DropdownMenuController from './controllers/dropdown_menu_controller'
+import FormFieldController from './controllers/form_field_controller'
+import HoverCardController from './controllers/hover_card_controller'
+import LoadingButtonController from './controllers/loading_button_controller'
+import PopoverController from './controllers/popover_controller'
+import ProgressController from './controllers/progress_controller'
+import RadioGroupController from './controllers/radio_group_controller'
+import SelectController from './controllers/select_controller'
+import SidebarController from './controllers/sidebar_controller'
+import SidebarTriggerController from './controllers/sidebar_trigger_controller'
+import SwitchController from './controllers/switch_controller'
+import TabsController from './controllers/tabs_controller'
+import ThemeSwitcherController from './controllers/theme_switcher_controller'
+import ToastContainerController from './controllers/toast_container_controller'
+import ToastController from './controllers/toast_controller'
+import TooltipController from './controllers/tooltip_controller'
+
+export default {
+  accordion: AccordionController,
+  'alert-dialog': AlertDialogController,
+  avatar: AvatarController,
+  checkbox: CheckboxController,
+  collapsible: CollapsibleController,
+  combobox: ComboboxController,
+  'date-picker': DatePickerController,
+  'date-range-picker': DateRangePickerController,
+  dialog: DialogController,
+  'dropdown-menu': DropdownMenuController,
+  'form-field': FormFieldController,
+  'hover-card': HoverCardController,
+  'loading-button': LoadingButtonController,
+  popover: PopoverController,
+  progress: ProgressController,
+  'radio-group': RadioGroupController,
+  select: SelectController,
+  sidebar: SidebarController,
+  'sidebar-trigger': SidebarTriggerController,
+  switch: SwitchController,
+  tabs: TabsController,
+  'theme-switcher': ThemeSwitcherController,
+  'toast-container': ToastContainerController,
+  toast: ToastController,
+  tooltip: TooltipController,
+}

data/app/javascript/utils.js

@@ -0,0 +1,184 @@
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from '@floating-ui/dom'
+
+const ANIMATION_OUT_DELAY = 125
+const FOCUS_DELAY = 100
+
+const getScrollbarWidth = () => {
+  // Create a temporary div container and append it into the body
+  const outer = document.createElement('div')
+  outer.style.visibility = 'hidden'
+  outer.style.overflow = 'scroll' // force scrollbars
+  outer.style.msOverflowStyle = 'scrollbar' // needed for some older versions of Edge
+  outer.style.width = '100px'
+  outer.style.position = 'absolute'
+  outer.style.top = '-9999px'
+  document.body.appendChild(outer)
+
+  // Create an inner div and place it inside the outer div
+  const inner = document.createElement('div')
+  inner.style.width = '100%'
+  outer.appendChild(inner)
+
+  // Calculate the scrollbar width
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
+
+  // Clean up
+  outer.remove()
+
+  return scrollbarWidth
+}
+
+const showOverlay = (classNames = '') => {
+  const element = document.createElement('div')
+  let defaultClassNames = [
+    'fixed',
+    'inset-0',
+    'z-50',
+    'bg-black/80',
+    'data-[state=open]:animate-in',
+    'data-[state=closed]:animate-out',
+    'data-[state=closed]:fade-out-0',
+    'data-[state=open]:fade-in-0',
+    'pointer-events-auto',
+  ]
+  defaultClassNames = defaultClassNames.concat(
+    classNames.split(' ').filter((c) => !!c),
+  )
+
+  element.classList.add(...defaultClassNames)
+  element.dataset.state = 'open'
+  element.dataset.shadcnPhlexcomponentsOverlay = true
+  element.ariaHidden = true
+  document.body.appendChild(element)
+}
+
+const hideOverlay = () => {
+  const element = document.querySelector(
+    '[data-shadcn-phlexcomponents-overlay]',
+  )
+
+  if (element) {
+    element.dataset.state = 'closed'
+
+    setTimeout(() => {
+      element.remove()
+    }, ANIMATION_OUT_DELAY)
+  }
+}
+
+const lockScroll = () => {
+  if (window.innerHeight < document.documentElement.scrollHeight) {
+    document.body.dataset.scrollLocked = 1
+    const style = getComputedStyle(document.body)
+    const originalMarginRight = style.marginRight
+    document.body.dataset.marginRight = originalMarginRight
+    document.body.style.marginRight = `${getScrollbarWidth()}px`
+  }
+}
+
+const unlockScroll = () => {
+  if (document.body.dataset.scrollLocked) {
+    delete document.body.dataset.scrollLocked
+    const originalMarginRight = document.body.dataset.marginRight
+
+    if (parseInt(originalMarginRight) === 0) {
+      document.body.style.marginRight = ''
+    } else {
+      document.body.style.marginRight = originalMarginRight
+    }
+
+    delete document.body.dataset.marginRight
+  }
+}
+
+const addInert = (ignoredElements = []) => {
+  Array.from(document.body.children)
+    .filter((el) => !ignoredElements.includes(el))
+    .forEach((el) => el.setAttribute('inert', ''))
+}
+
+const removeInert = () => {
+  Array.from(document.body.children)
+    .filter((el) => el.hasAttribute('inert'))
+    .forEach((el) => el.removeAttribute('inert'))
+}
+
+const openWithOverlay = (ignoredElements = []) => {
+  showOverlay()
+  lockScroll()
+  addInert(ignoredElements)
+}
+
+const closeWithOverlay = () => {
+  hideOverlay()
+  unlockScroll()
+  removeInert()
+}
+
+const hideOnEsc = {
+  name: 'hideOnEsc',
+  defaultValue: true,
+  fn({ hide }) {
+    function onKeyDown(event) {
+      if (event.keyCode === 27) {
+        hide()
+      }
+    }
+
+    return {
+      onShow() {
+        document.addEventListener('keydown', onKeyDown)
+      },
+      onHide() {
+        document.removeEventListener('keydown', onKeyDown)
+      },
+    }
+  },
+}
+
+const initFloatingUi = (referenceElement, floatingElement, side) => {
+  return autoUpdate(referenceElement, floatingElement, () => {
+    computePosition(referenceElement, floatingElement, {
+      placement: side,
+      strategy: 'fixed',
+      middleware: [flip(), shift(), offset(4)],
+    }).then(({ x, y }) => {
+      Object.assign(floatingElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+    })
+  })
+}
+
+const focusTrigger = (triggerTarget) => {
+  setTimeout(() => {
+    if (triggerTarget.dataset.asChild === 'false') {
+      triggerTarget.firstElementChild.focus()
+    } else {
+      triggerTarget.focus()
+    }
+  }, FOCUS_DELAY)
+}
+
+export {
+  ANIMATION_OUT_DELAY,
+  FOCUS_DELAY,
+  hideOnEsc,
+  showOverlay,
+  hideOverlay,
+  lockScroll,
+  unlockScroll,
+  addInert,
+  removeInert,
+  openWithOverlay,
+  closeWithOverlay,
+  initFloatingUi,
+  focusTrigger,
+}